Jump to content
Sign in to follow this  
Lifeamove

Создание открытого меню

Recommended Posts

В общем нужно реализовать похожее меню (под слайдером)

d2f43fdce8ac20d01ba62ba199bbb2ee-prev.jp

Пример исполнения - ссылка на сайте-шаблон там где реализовано

 

У меня шаблон - default, ocStore версии: 2.3.0.2.1

 

На сколько я понял нужно этот код (см. ниже) вставить в файл

catalog/view/theme/default/template/common/home.tpl

По идеи нужно вставлять:

<div id="content" class="col-sm-12">...</div> 
после
<div id="slideshow0" class="owl-carousel owl-theme" style="opacity: 1; display: block;">...</div>
<script type="text/javascript">...</script>
сюда

Только в файле catalog/view/theme/default/template/common/home.tpl есть только:

<?php echo $header; ?>
<div class="container">
<div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?><?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>
<?php echo $footer; ?>

И куда это меню вставлять что бы оно оказалось под слайдером? (главный вопрос)

 

Код всего меню:

Скрытый текст
<div>
    <div class="container"><div class="row">
<div class="next-item">
  <div class="next-grid">
    <div class="next-grid-img">
      <img src="catalog/view/theme/next_default/effects/images/5.png" alt="img05">
    </div>
				<div class="next-grid-info">
                  <h3>Шины</h3>
					<span>Летние</span>
                         <ul>
							<li><a href="desktops/pc/" class="effects">PC</a></li>
							<li><a href="desktops/mac/" class="effects">Mac</a></li>
						</ul>
				</div>
				<a href="desktops/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/1.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Ноутбуки</h3>
					<span>Ультрабуки и лапти</span>
                  <ul>
						<li><a href="laptop-notebook/macs/" class="effects">PC</a></li>
						<li><a href="laptop-notebook/windows/" class="effects">Windows</a></li>
					</ul>
				</div>
				<a href="laptop-notebook/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/2.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Компоненты</h3>
					<span>Кошки мышки</span>
                     <ul>
						<li><a href="component/web-camera/" class="effects">Веб-камеры</a></li>
						<li><a href="component/monitor/" class="effects">Мониторы</a></li>
						<li><a href="component/mouse/" class="effects">Мышки</a></li>
						<li><a href="component/printer/" class="effects">Принтеры</a></li>
						<li><a href="component/scanner/" class="effects">Сканеры</a></li>
					</ul>
				</div>
				<a href="component/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/6.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Планшеты</h3>
					<span>Шплампеты и балетки</span>
                     <ul>
						<li><a href="tablet/test11/" class="effects">test 11</a></li>
						<li><a href="tablet/test12/" class="effects">test 12</a></li>
						<li><a href="tablet/test15/" class="effects">test 13</a></li>
					</ul>
				</div>
				<a href="tablet/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/4.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Камеры</h3>
					<span>Фото и видео</span>
                     <ul>
						<li><a href="camera/test16/" class="effects">test 16</a></li>
						<li><a href="camera/test20/" class="effects">test 20</a></li>
						<li><a href="camera/test25/" class="effects">test 25</a></li>
					</ul>
				</div>
				<a href="camera/">Подробнее</a>
  </div>
			<div class="next-grid">
              <div class="next-grid-img">
                <img src="catalog/view/theme/next_default/effects/images/3.png" alt="img05">
              </div>
				<div class="next-grid-info">
                  <h3>Телефоны и PDA</h3>
					<span>Лопаты и шпатели</span>
                  <ul>
						<li><a href="smartphone/test17/" class="effects">test 17</a></li>
						<li><a href="index.php?route=product/category&path=24_59" class="effects">Афони</a></li>
					</ul>
				</div>
				<a href="smartphone/">Подробнее</a>
  </div>
		</div>
     </div>
</div></div>

 

 

Код CSS который нужно вставить в /catalog/view/theme/default/stylesheet/stylesheet.css

Скрытый текст
.next-item {
    list-style: outside none none;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}

.next-grid {
    display: inline-block;
    margin: 0;
    padding: 10px;
    position: relative;
    text-align: left;
    width: 32.9%;
    opacity: 0.89;
    -webkit-transition: all 0.3s ease-out 0.2s;
    -moz-transition: all 0.3s ease-out 0.2s;
    -ms-transition: all 0.3s ease-out 0.2s;
    transition: all 0.3s ease-out 0.2s;
}

.next-grid-img {
    border: 5px solid #fafafa;
}

.next-grid-img > img {
    background: #edf3ff none repeat scroll 0 0;
    width: 100%;
}

.next-grid-info {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    bottom: 0;
    display: block;
    margin: 10px 0;
    padding: 20px;
    position: absolute;
    top: 0;
    width: 50%;
}

.next-grid .next-grid-info h3 {
    border-bottom: 1px solid;
    color: rgba(9, 65, 192, 0.75);
    font-size: 17px;
    margin: 0;
    padding: 0 0 5px;
}

.next-grid .next-grid-info span {
    font-size: 10px;
    color: #ed4e6e;
}

.next-grid .next-grid-info ul {
    padding: 0;
}

.next-grid-info li {
    display: inline;
}

.next-grid .next-grid-info li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-radius: 0;
    bottom: 0;
    color: rgba(84, 91, 122, 0.99);
    display: block;
    padding: 0 5px;
    position: relative;
    right: 0;
    text-align: left;
}

.next-grid .next-grid-info ul li a::before {
    content: "▪ ";
    color: rgb(9, 92, 192);
    font-size: 13px;
}

.next-grid > a {
    bottom: 10%;
    position: absolute;
    right: 10%;
    background: rgba(9, 92, 192, 1) none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
}

.next-grid .next-grid-info a {
    bottom: 20px;
    position: absolute;
    right: 20px;
}

 

 

Может кто на код меню и CSS взглянуть? Нормально?

Edited by Lifeamove

Share this post


Link to post
Share on other sites

@Lifeamove Неправильно поняли.

 

Верхнее меню (Навигация) в файле header.php

  • +1 1

Share this post


Link to post
Share on other sites

@Eldaeron Вы имеете ввиду это меню:?

809d4bf0d7550d8d2a0ee7b99b5febf6-prev.jp

 

То есть нужно сделать новый container под слайдером

P.S. нужно сделать меню которое на картинке...

Edited by Lifeamove

Share this post


Link to post
Share on other sites

@Eldaeron Прошу прощения, видимо я не совсем понятно описал задумку (задачку)

 

То меню которое в header.php - шапке  не трогаем.

 

Нужно сделать что то на подобие этого (возможно не 6 блоков, а 3... ну это уже технические мелочи) суть что бы сделать такой фейк "меню" под слайдером...

d2f43fdce8ac20d01ba62ba199bbb2ee-prev.jp

Как вот на этом шаблоне: ссылка >

 

P.S. Наблюдаю за уважаемыми посетителями - (в большинстве случаев ~70%)

Заходят на сайт и сразу крутят страницу вниз, как будто не замечают меню (которое в шапке)

Edited by Lifeamove

Share this post


Link to post
Share on other sites

Lifeamove, Судя по всему, у вас нет навыков программирования, Можете взять модуль HTML-контент вставить свой код туда, потом в Дизайн/Схемы включить вывод своего НTML-контента.

Минусов правда много, но работать будет)

 

Если хотите с php делать тоже реализуемо, но дольше)

Edited by Eldaeron
  • +1 1

Share this post


Link to post
Share on other sites

@Eldaeron Конечно хотелось бы реализовать данную задумку более адекватно...

А код который я писал (в самом верху): "Код всего меню:" - его вставить куда нибудь не получится?

+Плюс добавить в /catalog/view/theme/default/stylesheet/stylesheet.css "Код CSS" который я тоже вверху написал... 

 

По языку php это как делать?

 

P.S. навыки ведь не купить, нужно практиковаться - стараюсь...

 

Share this post


Link to post
Share on other sites

Lifeamove, Ну попробуйте посмотрите php-код как выводиться меню любое 2 уровней, даже стандартное) Просто HTML код свой подставляйте по анологии. Только там где картинка вставлять могут быть проблемы, как выводить покажем.

 

 

  • +1 1

Share this post


Link to post
Share on other sites

@Eldaeron Вот это изучать? Вариант 1    Вариант 2

Потом по аналогии мой html в какой файл подставлять? В catalog/view/theme/default/template/common/home.tpl ?

 

Я разок попробовал вставить туда - в home.tpl... очень даже странно, Но все живы... тьфу-тьфу.

Всё нормально было, только при просмотре с телефона, эти так сказать блоки съезжаются в кашу и перемешиваются...

Edited by Lifeamove

Share this post


Link to post
Share on other sites

Lifeamove

 

Цитата
<nav id="menu" class="navbar">
  <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
  <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav">
  <?php foreach ($categories as $category) { ?>
  <?php if ($category['children']) { ?>
  <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
  <div class="dropdown-menu">
  <div class="dropdown-inner">
  <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
  <ul class="list-unstyled">
  <?php foreach ($children as $child) { ?>
  <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
  <?php } ?>
  </ul>
  <?php } ?>
  </div>
  <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
  </li>
  <?php } else { ?>
  <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
  <?php } ?>
  <?php } ?>
  </ul>
  </div>
  </nav>

 

Или тут: https://toster.ru/q/214714

 

Да в home.tpl, можете, но нужно в контроллере подключить возможность работы с меню:

 

catalog/controller/common/home.php

 

Сразу же перед:

$data['column_left'] = $this->load->controller('common/column_left');
		$data['column_right'] = $this->load->controller('common/column_right');

Вставить этот код:

// Menu
		$this->load->model('catalog/category');
		$this->load->model('catalog/product');
		$data['categories'] = array();
		$categories = $this->model_catalog_category->getCategories(0);
		foreach ($categories as $category) {
			if ($category['top']) {
				// Level 2
				$children_data = array();
				$children = $this->model_catalog_category->getCategories($category['category_id']);
				foreach ($children as $child) {
					$filter_data = array(
						'filter_category_id'  => $child['category_id'],
						'filter_sub_category' => true
					);
					$children_data[] = array(
						'name'  => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
						'href'  => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
					);
				}
				// Level 1
				$data['categories'][] = array(
					'name'     => $category['name'],
					'children' => $children_data,
					'column'   => $category['column'] ? $category['column'] : 1,
					'href'     => $this->url->link('product/category', 'path=' . $category['category_id'])
				);
			}
		}

 

  • +1 1

Share this post


Link to post
Share on other sites
6 минут назад, Lifeamove сказал:

Вот это изучать? Вариант 1

это для wordpress

  • +1 1

Share this post


Link to post
Share on other sites
9 минут назад, Lifeamove сказал:

только при просмотре с телефона, эти так сказать блоки съезжаются в кашу и перемешиваются

это нужно править css.  под комп одни стили под мобильные другие

  • +1 1

Share this post


Link to post
Share on other sites

@Eldaeron Если я всё это сделаю я попаду в топ 10 яндекс и google?

 

Кроме шуток:

3 минуты назад, Eldaeron сказал:

Да в home.tpl, можете, но нужно в контроллере подключить возможность работы с меню:

 

Возможность работы с меню, что вы под этим подразумевате?

 

Там разве есть с чем работать?

Грубо: сделать блок, в него запечатать: заголовок, список ссылок, картинку. Выровнять что бы адаптировался под меньшие экраны и моб. устройства, и поиграться с ccs...

 

P.S. Всё на много тяжелее чем мне кажется? :mellow:

Share this post


Link to post
Share on other sites

@fanatic

2 минуты назад, fanatic сказал:

это нужно править css.  под комп одни стили под мобильные другие

Ну да... хочу понять зачем в контроллер лезть... без "стёба".

Share this post


Link to post
Share on other sites

Lifeamove, если вы в контроллере не обьявите массив $categories, или не сделаете функцию getCaterogies, то работать с меню у вас неполучится в теории и на практике.

Просто, у вас HTML код например на 250 строк, в php это все сократится можно до 50 например. Да и при смене названия категории или рисунка, каждый раз залазить и править код ненадо будет)

Edited by Eldaeron
  • +1 1

Share this post


Link to post
Share on other sites

@Eldaeron Я вас понял, то есть нужно делать массив и функцию к нему... чтобы в "Блочном псевдо-меню"  категории менялись автоматически - верно?

 

А если сделать список категорий в меню - в виде ссылок на эти категории? Понятно что - чтобы поменять нужно будет лезть в код...

Share this post


Link to post
Share on other sites

можно и на модуле категорий сделать. вывести фото, ссылки, оформить. но толку писать нету. походу автор не разбирается в коде

Share this post


Link to post
Share on other sites

@Miha7685776  

19 минут назад, Miha7685776 сказал:

можно и на модуле категорий сделать. вывести фото, ссылки, оформить. но толку писать нету. походу

На модуле категории сделать? Не совсем понял что вы имеете ввиду... У меня категории есть... Грубо нужно сделать блок с заголовком,списком-ссылки на категории и фото.

Толку писать нету - что писать?

 

@Eldaeron @fanatic Я вставил код в catalog/view/theme/default/template/common/home.tpl всё более менее...

1. Получилось вставить только перед слайдером, а нужно после слайдера - перед "Рекомендуемые" "Товары со скидкой"...

Как бы слайдер передвинуть вверх этого меню = или это меню под слайдер?!

2. Не адаптируется под мобильные устройства;

Ссылку на сайт скинул Вам в личные сообщения.

Share this post


Link to post
Share on other sites
16 минут назад, Lifeamove сказал:

Не адаптируется под мобильные устройства;

а стили, прописаны под мобильные?  по волшебству,  адаптации не будет.

Edited by fanatic
  • +1 1

Share this post


Link to post
Share on other sites

простейший вариант

@media screen and (max-width:479px) {
    .next-grid{
        width:100% !important;
    }
}

 

  • +1 1

Share this post


Link to post
Share on other sites
39 минут назад, Lifeamove сказал:

@Miha7685776  

На модуле категории сделать? Не совсем понял что вы имеете ввиду... У меня категории есть... Грубо нужно сделать блок с заголовком,списком-ссылки на категории и фото.

Толку писать нету - что писать?

 

@Eldaeron @fanatic Я вставил код в catalog/view/theme/default/template/common/home.tpl всё более менее...

1. Получилось вставить только перед слайдером, а нужно после слайдера - перед "Рекомендуемые" "Товары со скидкой"...

Как бы слайдер передвинуть вверх этого меню = или это меню под слайдер?!

2. Не адаптируется под мобильные устройства;

Ссылку на сайт скинул Вам в личные сообщения.

есть модуль "категории" там выводятся ссылки на категории и подкатегории. можно скопировать этот модуль, отредактировать контроллер на вывод фото род категории, и стилизовать. 

Share this post


Link to post
Share on other sites

могу за пол часа сделать. но за бесплатно, или ради доказательство, лень

Share this post


Link to post
Share on other sites

@fanatic  Это бомба! Получилось, а чтобы "блоки" раньше начинали деформироваться - нужно max-width: *** поменять да?

 

Осталось только это "псевдо-меню" под слайдер загнать!

Share this post


Link to post
Share on other sites

чтобы опять не было вопросов. у модуля нет модели, оно ссылается на модель категории. редактировать имеется в виду, контроллер и вюшка. надеюсь понятно написал

  • +1 1

Share this post


Link to post
Share on other sites

@Miha7685776 спасибо за предложение, но ведь это не раздел Услуги...

Поймите меня правильно, я хочу разобраться сам... как бы, хотя бы в таких простых "задачах"

 

чтобы опять не было вопросов. у модуля нет модели, оно ссылается на модель категории. редактировать имеется в виду, контроллер и вюшка. надеюсь понятно написал

У какого модуля нет модели?

Edited by Lifeamove

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.