Перейти к содержанию

Рекомендуемые сообщения

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

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 взглянуть? Нормально?

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

809d4bf0d7550d8d2a0ee7b99b5febf6-prev.jp

 

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

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

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

d2f43fdce8ac20d01ba62ba199bbb2ee-prev.jp

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

 

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

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

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

Изменено пользователем Eldaeron
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

 

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

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

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

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
6 минут назад, Lifeamove сказал:

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

это для wordpress

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
9 минут назад, Lifeamove сказал:

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Кроме шуток:

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

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

 

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

 

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@fanatic

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Изменено пользователем Eldaeron
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@Miha7685776  

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

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

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

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

 

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
16 минут назад, Lifeamove сказал:

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

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

Изменено пользователем fanatic
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
39 минут назад, Lifeamove сказал:

@Miha7685776  

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

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

 

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

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

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

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.