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

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

Баннеры произвольно среди товаров и категорий


Баннеры произвольно среди товаров и категорий


Модуль позволяет:

  • Вывести среди товаров, и подкатегорий баннеры с произвольным расположением в сетке - после n-го товара, или подкатегории. 
  • Баннеры можно вывести среди товаров (подкатегорий) на всю ширину, или часть ширины страницы, разместив рядом произвольное число товаров. 
  • Вывести слайдер, или одиночное изображение на странице категории
  • Можно задать свои CSS классы и оформить в таблице стилей
  • Есть версия с поддержкой многоязычности

Установка

Стандартно, через ocmod. В процессе установки в БД добавляется таблица "category_images".

 

Панель управления (admin/)

Все баннеры добавляются в карточке категории (все русифицировано, тестовый сайт без перевода):

in_admin_3.thumb.jpg.2f8263fc59b55e83c90d732f5779c444.jpg

 

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

В полях "После категории" и "После товара" - задается порядковый номер подкатегории/товара на странице, после которого будет отображаться баннер. Если задать отрицательное значение, баннер будет выведен в самом начале. Если оставить поле не заполненным ("0") - будет отображено либо одиночное изображение вверху, либо слайдер (зависит от количества изображений).

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

Пример:

adm_5.thumb.jpg.19d12ae79e771ace476b9679015707ff.jpg

Здесь первый баннер будет выведен вверху страницы, отдельно. Желательно задать ему размеры. Если размер не задан, будет использован полный размер изображения (как есть).

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

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

Размеры изображений категорий отдельно задать нельзя, но можно использовать для этого заданный размер любого баннера, достаточно отметить чекбокс "+ для категорий" (+ to img category), если ничего не отмечено - используются размеры изображения категории.

 

Пользовательская часть (catalog/)

Модификации подвергаются: модель, контроллер и шаблон категории. 

Изменения в контроллер и шаблон (особенно шаблон) рекомендую вносить вручную, для большей гибкости.

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

Модификатор проверен с использованием стандартного шаблона - все работает.

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

В блоке товара так же есть небольшие изменения - если на месте товара выведен баннер, то скрываются стандартные кнопки и при наличии ссылки появляется "подробнее". Если ссылка не задана - она обирается с заголовка и изображения.

Собственных таблиц стилей модификатор не содержит (что бы не ухудшить скорость загрузки страницы). Для более-менее корректного отображения рекомендую добавить в .css файл темы следующее:

.cat-list .item {height: 300px;overflow: hidden;text-align: center;position: relative;background: #fff;margin-bottom: 15px;box-shadow: 0px 2px 7px #b5b5b5;
    border-radius: 4px;}
.cat-list .item img {position:relative;z-index: 1;}
.cat-list .item .title {text-decoration: none;color: #000;font-size: 15px;}
.cat-list .item .desc {position: absolute;z-index: 2;background: #f7f5f5a6;padding: 10px;left:0px;bottom:0px;width: 100%;box-sizing: border-box;}
.cat-list .float .item {padding-left: 0px;text-align: center;}
.cat-list .float .item .desc {background: none;position: static;text-align: right;}
.cat-list .item .count {position: absolute;top: 0px;right: 0px;font-size: 14px;
    background: #5a5a5a;color: #fff;height: 20px;line-height: 20px;
    width: 20px;text-align: center;border-radius: 20px;}
.cat-list .float .item img {float: left;margin-right: 10px;}
.button-group .btp-href {background-color: #eee;color: #888;line-height: 38px;font-weight: bold;border: 0px;text-transform: uppercase;display: block;text-align: center;}

Класс "float" можно использовать для широких баннеров, где слева будет изображение, справа текст.

 

По модификации блока товара в шаблоне категории. Сразу после

<?php foreach ($products as $product) { ?>

добавляется проверка - товар это, или баннер. Чуть выше пагинации проверка заканчивается. Для поиска используется вот такой способ:

 <search><![CDATA[<?php echo $pagination; ?>]]></search>
      <add position="before" offset="3">

В стандартном шаблоне место вставки выглядит так:

provend.png.21a318d886e40585d1358ee8002622f5.png

Если у вас есть несовпадение, можно получить или ошибку 500, или съехавшую верстку. 

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

 

Начиная с версии 1.0 баннеры среди товаров можно выделять в отдельные контейнеры, куда так же можно добавлять и товары (разрыв в списке товаров). Как это работает - на видео:

 

ОСОБЕННОСТИ для Opencart 1.5

 В опенкарт 1.5 скрипты на странице категории работают с '.product-list > div' и '.product-grid > div', потому для блока с баннером использовал тэг "section".

В CSS где встречается .product-list > div и .product-grid > div нужно добавить section, что бы получилось:

.product-list > div, .product-list > section {.......}
.product-list > div + div, .product-list > section + div {.......}
.product-grid > div, .product-grid > section {.......}
#column-left + #column-right + #content .product-grid > div, #column-left + #column-right + #content .product-grid > section {.......}

 

DEMO

Пример категории, с баннером среди товаров, баннерами среди категорий, а так же слайдшоу вверху

Панель управления

Логин/пароль: demo/demo

 

ОПИСАНИЕ БУДЕТ ДОПОЛНЕНО


  • Добавил
  • Добавлено
    13.08.2018
  • Категория
  • Системные требования
  • Сайт разработчика
    https://httpmaster.ru/
  • Старая цена
  • Метод активации
    Без активации
  • Ioncube Loader
    Нет
  • OpenCart
    2.3
    1.5.6.4
    1.5.6.3
    1.5.6.2
    1.5.6.1
    1.5.6
  • ocStore
    2.3
    1.5.5.1.2
    1.5.5.1.1
    1.5.5.1
  • OpenCart.Pro, ocShop
    Не проверялось

 

  • +1 1

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


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

Хороший модуль создали!

Хотелось бы увидеть его действие в демо-магазине.

Под 2.1 сделаете?

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


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

Интересное решение.

Адаптация под популярный шаблон Юнишоп будет?

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


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

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

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


Ссылка на сообщение
Поделиться на другие сайты
4 hours ago, vlkombat said:

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

Это понятно. Поэтому и спрашиваю.

Авторы в основном делают бесплатные адаптации к ТОП шаблонам, тем самым увеличивая узнаваемость и продажи... 

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


Ссылка на сообщение
Поделиться на другие сайты
В 16.08.2018 в 09:52, Dmitry1982 сказал:

Хороший модуль создали!

Хотелось бы увидеть его действие в демо-магазине.

Под 2.1 сделаете?

 

Поддерживаю. Интересует под версию 2.1

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


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

Добрый день! Демоверсия уже есть, в описании есть ссылки и доступы (скопировать проблематично, я пока только с телефона). Под версию 2.1 проверю работоспособность, но по работе можно посмотреть на демо под 2.3

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


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

Кажется доступ к модулю закрыт.

Еще бы хорошо сделать эти баннеры с ссылками.

Есть хороший пример как эти банеры работают на зарубежном сайте: https://www.eis.de/drogerie

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


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

Кажется доступ к модулю закрыт.

Еще бы хорошо сделать эти баннеры с ссылками.

Есть хороший пример как эти банеры работают на зарубежном сайте: https://www.eis.de/drogerie

Там есть ссылки. Все настройки, добавление баннеров в админ части в карточке категории, вкладка "данные"

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


Ссылка на сообщение
Поделиться на другие сайты
В 16.08.2018 в 20:47, AndrewZ сказал:

Это понятно. Поэтому и спрашиваю.

Авторы в основном делают бесплатные адаптации к ТОП шаблонам, тем самым увеличивая узнаваемость и продажи... 

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

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

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


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

Отличный модуль за небольшие деньги! Была необходимость в доработках, разработчик все сделал, всегда был на связи, даже когда я его доставал во время отдыха :) 

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


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

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

 

http://joxi.net/YmE0MLIw0jaar6

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

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


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

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

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

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

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

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

Войти

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

Войти

  • Похожий контент

    • От vlkombat
      Модуль позволяет:
      Вывести среди товаров, и подкатегорий баннеры с произвольным расположением в сетке - после n-го товара, или подкатегории.  Баннеры можно вывести среди товаров (подкатегорий) на всю ширину, или часть ширины страницы, разместив рядом произвольное число товаров.  Вывести слайдер, или одиночное изображение на странице категории Можно задать свои CSS классы и оформить в таблице стилей Есть версия с поддержкой многоязычности Установка
      Стандартно, через ocmod. В процессе установки в БД добавляется таблица "category_images".
       
      Панель управления (admin/)
      Все баннеры добавляются в карточке категории (все русифицировано, тестовый сайт без перевода):

       
      Для каждого баннера можно задать заголовок, описание, ссылку, размеры, CSS классы. 
      В полях "После категории" и "После товара" - задается порядковый номер подкатегории/товара на странице, после которого будет отображаться баннер. Если задать отрицательное значение, баннер будет выведен в самом начале. Если оставить поле не заполненным ("0") - будет отображено либо одиночное изображение вверху, либо слайдер (зависит от количества изображений).
      После одной категории, товара можно добавить только один баннер. До категорий, товаров может быть добавлено сколько угодно баннеров (вначале будут выведены баннеры в порядке сортировки, затем товары, категории).
      Пример:

      Здесь первый баннер будет выведен вверху страницы, отдельно. Желательно задать ему размеры. Если размер не задан, будет использован полный размер изображения (как есть).
      Второй баннер будет выведен после третьего товара, с заголовком, ссылкой, описанием. Если размеры не заданы, будут использованы стандартные для товара
      Третий баннер будет выведен после третей категории в списке. Размеры изображения или произвольные, или будет использован размер изображения категории (из настроек). 
      Размеры изображений категорий отдельно задать нельзя, но можно использовать для этого заданный размер любого баннера, достаточно отметить чекбокс "+ для категорий" (+ to img category), если ничего не отмечено - используются размеры изображения категории.
       
      Пользовательская часть (catalog/)
      Модификации подвергаются: модель, контроллер и шаблон категории. 
      Изменения в контроллер и шаблон (особенно шаблон) рекомендую вносить вручную, для большей гибкости.
      К тому же, если в контроллере какие-либо проблемы связанные с конфликтом модификаторов, или ошибки маловероятны, то в шаблоне может быть множество других изменений (скорее всего есть), а соответственно возможна некорректная модификация.
      Модификатор проверен с использованием стандартного шаблона - все работает.
      В шаблоне добавляется два блока вначале, там где идет проверка на наличие подкатегорий. Баннеры можно выводить независимо от того, есть ли дочерние категории, если же для категории не указано ни одного баннера в подкатегориях, их вывод будет стандартным.
      В блоке товара так же есть небольшие изменения - если на месте товара выведен баннер, то скрываются стандартные кнопки и при наличии ссылки появляется "подробнее". Если ссылка не задана - она обирается с заголовка и изображения.
      Собственных таблиц стилей модификатор не содержит (что бы не ухудшить скорость загрузки страницы). Для более-менее корректного отображения рекомендую добавить в .css файл темы следующее:
      .cat-list .item {height: 300px;overflow: hidden;text-align: center;position: relative;background: #fff;margin-bottom: 15px;box-shadow: 0px 2px 7px #b5b5b5;     border-radius: 4px;} .cat-list .item img {position:relative;z-index: 1;} .cat-list .item .title {text-decoration: none;color: #000;font-size: 15px;} .cat-list .item .desc {position: absolute;z-index: 2;background: #f7f5f5a6;padding: 10px;left:0px;bottom:0px;width: 100%;box-sizing: border-box;} .cat-list .float .item {padding-left: 0px;text-align: center;} .cat-list .float .item .desc {background: none;position: static;text-align: right;} .cat-list .item .count {position: absolute;top: 0px;right: 0px;font-size: 14px;     background: #5a5a5a;color: #fff;height: 20px;line-height: 20px;     width: 20px;text-align: center;border-radius: 20px;} .cat-list .float .item img {float: left;margin-right: 10px;} .button-group .btp-href {background-color: #eee;color: #888;line-height: 38px;font-weight: bold;border: 0px;text-transform: uppercase;display: block;text-align: center;} Класс "float" можно использовать для широких баннеров, где слева будет изображение, справа текст.
       
      По модификации блока товара в шаблоне категории. Сразу после
      <?php foreach ($products as $product) { ?> добавляется проверка - товар это, или баннер. Чуть выше пагинации проверка заканчивается. Для поиска используется вот такой способ:
       <search><![CDATA[<?php echo $pagination; ?>]]></search>       <add position="before" offset="3"> В стандартном шаблоне место вставки выглядит так:

      Если у вас есть несовпадение, можно получить или ошибку 500, или съехавшую верстку. 
      В остальном все должно быть нормально, если что - поправимо.
       
      Начиная с версии 1.0 баннеры среди товаров можно выделять в отдельные контейнеры, куда так же можно добавлять и товары (разрыв в списке товаров). Как это работает - на видео:

      httpm_banner_cat_akcii.mp4  
      ОСОБЕННОСТИ для Opencart 1.5
       В опенкарт 1.5 скрипты на странице категории работают с '.product-list > div' и '.product-grid > div', потому для блока с баннером использовал тэг "section".
      В CSS где встречается .product-list > div и .product-grid > div нужно добавить section, что бы получилось:
      .product-list > div, .product-list > section {.......} .product-list > div + div, .product-list > section + div {.......} .product-grid > div, .product-grid > section {.......} #column-left + #column-right + #content .product-grid > div, #column-left + #column-right + #content .product-grid > section {.......}  
      DEMO
      Пример категории, с баннером среди товаров, баннерами среди категорий, а так же слайдшоу вверху
      Панель управления
      Логин/пароль: demo/demo
       
      ОПИСАНИЕ БУДЕТ ДОПОЛНЕНО
  • Последние посетители   0 пользователей онлайн

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

×

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

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