Управление баннерами

Модуль "Управление баннерами" - создан для упрощения процесса создания и управления баннерами на страницах интернет-магазина. По умолчанию в ImageCMS Shop данный модуль подключен и используется только на главной странице магазина.


1. Просмотреть список баннеров - можно, если вы пользуетесь данным модулем впервые, выбрав пункт главного меню пользователя "Модули", а в нем подпункт "Все модули":


Далее следует выбрать из открывшегося списка модулей модуль "Управление баннерами":


И перевести в положение "Активно" графические переключатели напротив данного модуля. Осуществив эти действия, вы сможете в будущем открывать модуль по более короткому пути - в пункте меню пользователя "Модули" появится подпункт "Управление баннерами":


После чего перед вами откроется окно "Управление баннерами" следующего вида:



2. Элементы окна "Управление баннерами" следующие:

  1. Столбец выбора - позволяет осуществлять выбор баннеров, подлежащих удалению.
  2. Столбец "ID" - содержит уникальный идентификатор баннера, который используется в системе ImageCMS Shop
  3. Столбец "Название" - содержит имя баннера.
  4. Столбец "Группы" - содержит данные о присвоении баннера к определенной группе. Группы баннеров используются в целях объединения нескольких баннеров для их последующего отображения на страницах. Принадлежность баннера к группе не является обязательной.
  5. Столбец "Активен до" - содержит заданную дату, до которой баннер будет отображаться на страницах интернет-магазина.
  6. Столбец "Статус" - содержит графические переключатели, определяющие активность баннера в данный момент времени.
  7. Блок функциональных кнопок, предоставляющих администратору возможность:
  • создавать баннеры;
  • удалять предварительно выбранные баннеры;
  • осуществлять общую настройку использования шаблонов.


3. Создание баннера

Создать баннер можно кликом по кнопке "Создать баннер" в правом верхнем углу окна "Управление баннерами":

После чего появится окно "Создание баннера":


В данном окне следует осуществить следующие действия:

  1. Указать название баннера - в соответствующей строке "Название". Можно использовать латинские и кириллические символы, а также цифры. Действие обязательно для создания баннера.
  2. Задать описание баннера - данное описание в поле "Текст баннера" не выводится в интерфейсе покупателя и может быть использовано для внутреннего пользования. Действие не обязательно для создания баннера.
  3. Задать ссылку в строке URL, которая будет открываться при осуществлении клика по баннеру. Действие обязательно для создания баннера.
  4. Выбрать изображение для баннера, указав путь к нему в поле "Изображение", осуществив клик по кнопке "Выбрать изображение". Само изображение, которое должно использоваться в качестве картинки для баннера. Действие обязательно для создания баннера.
  5. Сохранить созданный баннер при помощи клика по кнопке "Создать", которая находится в правом верхнем углу окна. Действие обязательно для создания баннера.

 

Примечание:

Размеры изображений для баннеров отличаются в зависимости от использованного для магазина дизайна. Узнать точное их значение можно, просмотрев демо-баннеры, которые содержатся в папке uploads/shop/banners, или при помощи функции браузера "Просмотр елемента".

Для баннера могут использоватся изображения различных форматов, в том числе и gif-анимация.

Примечание:

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

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

Кроме упомянутых выше элементов, в формах создания/редактирования присутствуют еще две ячейки выбора:

  • "Активный" - значение данной ячейки определяет создаваемый или редактируемый баннер как актуальный.
  • "Постоянный баннер" - значение данной ячейки определяет время действия (период отображения) баннера на страницах интернет-магазина. Выбранное по умолчанию значение ячейки определяет баннер как бессрочный, то есть как постоянный и без ограничений во времени отображения. Убрав это значение, вы можете вызвать поле и всплывающий календарь для указания даты окончания отображения баннера на страницах интернет-магазина.

 

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

После создания баннера обеим ячейкам автоматически присваивается значение "Выбрано". Эти значения можно изменить в процессе создания или редактирования баннера.


4. Вывод баннера

Для отображения на страницах магазина баннер можно вывести двумя способами:

Через сущность - более простой и удобный способ вывода, так как при использовании данного способа баннеры выводятся на соответствующих страницах автоматически в местах, предусмотренных дизайном. Также при выводе баннера через сущность нет необходимости исправлять код файлов.tpl.

Через группу баннеров - более сложный способ вывода, но обладающий большей гибкостью. При помощи данного способа баннер можно вывести в любом удобном вам месте страницы. Однако при использовании данного способа необходимо править код в файлах .tpl. Осуществить эти изменения можно при помощи функционала "Редактор шаблонов", который находится в разделе главного меню "Система".

Примечание:

Один и тот же баннер можно одновременно выводить обоими способами - при этом дублировать баннер не нужно. В таком случае необходимо только присвоить баннер к сущности страниц и одновременно подвязать эго к группе баннеров.


4.1 Вывод баннера через сущность страниц

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

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

Такими сущностями являются:

  • Главная - страница, доступная по URL-адресу вида exemple.com, за отображения которой отвечает файл start_page.tpl

Чтобы вывести баннер через эту сущность, следует в поле "Показывать в категориях (Выбранные элементы)" выбрать пункт "Главная". Все выбранные для баннера сущности отображаются в поле "Выбранные элементы".

Поля "Показывать в категориях (Выбранные элементы)" и "Выбранные элементы" находятся в формах создания и редактирования баннера.

Удалить баннер из сущности можно, осуществив двойной клик по содержимых в поле "Выбранные элементы" сущностях.


Товар - это страницы самих (отдельных) товаров, доступные по URL адресу вида: exemple.com/shop/product/product-name. За их отображение отвечает файл product.tpl.

Чтобы вывести баннер через эту сущность, следует в поле "Показывать в категориях (Выбранные элементы)" выбрать пункт "Товар". Затем из списка с прокруткой, появившегося после выбора сущности, следует выбрать:

  • all - значение, при котором баннер будет отображаться на страницах всех товаров.

или

  • Конкретные товары, на страницах которых будет отображаться баннер.

Все выбранные для баннера товары отображаются в поле "Выбранные элементы".


Удалить баннер из сущности можно, осуществив двойной клик по содержимых в поле "Выбранные элементы" сущностях.

Примечание:

Выбирать оба значения для одного баннера (all и конкретные товары) не имеет смысла.

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

  • Категория товара - сущность, позволяющая разместить баннер на страницах товарных категорий и/или подкатегорий, доступных по URL-адресам: 

exemple.com/shop/category/category-name или exemple.com/shop/category/category-name-1-level//category-name-2-level.

За отображение страниц категории отвечает файл category.tpl.

Чтобы вывести баннер через эту сущность, следует в поле "Показывать в категориях (Выбранные элементы)" выбрать пункт "Категория товара". Затем из списка с прокруткой, появившегося после выбора сущности, следует выбрать:

  • all - значение, при котором баннер будет отображаться на страницах всех товаров.

или

  • Конкретные категории товаров, на страницах которых будет отображаться баннер.

Все выбранные для отображения баннеры категории отображаются в поле "Выбранные элементы".

Удалить баннер из сущности можно, осуществив двойной клик по содержимых в поле "Выбранные элементы" сущностях.

  • Бренд - сущность, позволяющая разместить баннер на страницах брендов производителей, доступных по URL-адресам: 

exemple.com/shop/brand/brand-name

За отображение страниц брендов отвечает файл brand.tpl.

Чтобы вывести баннер через эту сущность, следует в поле "Показывать в категориях (Выбранные элементы)" выбрать пункт "Бренд". Затем из списка с прокруткой, появившегося после выбора сущности, следует выбрать:

  • all - значение, при котором баннер будет отображаться на страницах всех брендов.

или

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

Все выбранные для отображения баннера бренды отображаются в поле "Выбранные элементы".

Удалить баннер из сущности можно, осуществив двойной клик по содержимых в поле "Выбранные элементы" сущностях.


  • Категория страниц - сущность, позволяющая разместить баннер на статических информационных страницах, доступных по URL-адресам вида:

exemple.com/category-pages

По умолчанию в системе ImageCMS Shop создана только одна подобная категория страниц - это категория "Новости".

Чтобы вывести баннер через эту сущность, следует в поле "Показывать в категориях (Выбранные элементы)" выбрать пункт "Категории страниц". Затем из списка с прокруткой, появившегося после выбора сущности, следует выбрать:

  • all - значение, при котором баннер будет отображаться на всех категориях страниц.

или

  • Конкретные категории, на страницах которых будет отображаться баннер.

Все выбранные для отображения баннера категории отображаются в поле "Выбранные элементы".

Удалить баннер из сущности можно, осуществив двойной клик по содержимых в поле "Выбранные элементы" сущностях.


  • Страницы - это статические страницы без категории, доступные по URL-адресу вида:

exemple.com/page-name

Чтобы вывести баннер через эту сущность, следует в поле "Показывать в категориях (Выбранные элементы)" выбрать пункт "Страницы". Затем из списка с прокруткой, появившегося после выбора сущности, следует выбрать:

  • all - значение, при котором баннер будет отображаться на всех страницах без категории.

или

  • Конкретные страницы, на которых будет отображаться баннер.

Все выбранные для отображения страницы отображаются в поле "Выбранные элементы".

Удалить баннер из сущности можно, осуществив двойной клик по содержимых в поле "Выбранные элементы" сущностях.



4.2 Вывод баннера через группу - более гибкий способ вывода баннеров, при котором необходимо осуществлять правку кода соответствующих .tpl файлов. Поэтому данный способ не рекомендуется использовать людям, не имеющим соответствующих знаний и навыков, так как ошибки в данных файлах могут привести к тому, что страницы определенного типа (за отображение которых отвечает редактируемый .tpl файл) не будут отображаться вообще.

Итак, если вы желаете вставить баннер в определенном месте страницы, вам необходимо:

1. Открыть форму редактирования баннера и осуществить клик по кнопке "Создать группу" (А), вызвав всплывающую форму создания групп баннеров (В). В данной форме необходимо указать имя группы баннеров (С). При этом следует использовать только латинские символы:

Созданная таким образом группа будет автоматически присвоена баннеру. Удалить принадлежность баннера группе можно, осуществив двойной клик по названию группы, содержимом в поле "Выбранные элементы":



2. Открыть функционал "Редактор шаблонов", который находится в разделе главного меню админпрофиля "Система". С его помощью следует найти и открыть необходимый вам .tpl файл, находящийся в папке:

templates\название_шаблона\shop.



3. Далее в желаемом месте шаблона следует вставить приблизительно следующий участок кода и сохранить редактируемый файл:

<div class="frame-baner frame-baner-start_page">
                        <section class="carousel-js-css baner container cycleFrame resize">
                            <!--remove class="resize" if not resize-->
                            <div style="height: 100%;">
                                <div class="content-carousel">
        <ul class="cycle">
                                        {foreach $CI->load->module('banners')->getByGroup('testGroup') as $banner}
                                            <li>
                                                {if trim($banner.url)}
                                                    <a href="{site_url($banner.url)}"><img data-original="{echo $banner['photo']}" alt="{ShopCore::encode($banner.name)}"/></a>
                                                {else:}
                                                    <span><img data-original="{echo $banner['photo']}" alt="{ShopCore::encode($banner.name)}"/></span>
                                                {/if}
                                            </li>
                                        {/foreach}
</ul>              
                                </div>
                            </div>                            
                        </section>
                    </div>

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

Примечание:

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

О том, как сделать слайдер для баннеров, выведенных через группу, и как добавить/удалить дополнительные графические элементы - читайте ниже, в пунктах "Слайдер" и "Дополнительные графические элементы слайдера".


5. Слайдер - это элемент, при помощи которого можно вывести несколько чередующихся баннеров (слайдов) в одном блоке. Как пример слайдера можно рассмотреть баннер по умолчанию на главной странице шаблона NewLevel.


В системе ImageCMS слайдер формируется автоматически, если 2 и более баннера выведены через общую сущность или относятся к одной группе.


6. Дополнительные графические элементы слайдера

Баннеры, отображаемые в слайдере, имеют два дополнительных графических элемента:




6.1 Стрелки по бокам слайдера - элементы, клик по которым позволяет осуществлять переход на следующий или предыдущий баннер быстрее, чем это предусмотрено системой автоматически.

За отображение данных элементов отвечает следующий участок кода:

<div class="group-button-carousel">
   <button type="button" class="prev arrow">
        <span class="icon_arrow_p"></span>
   </button>
   <button type="button" class="next arrow">
        <span class="icon_arrow_n"></span>
   </button>
</div>


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

 Если вы хотите убрать этот элемент из слайдеров, выведенных через сущность, - вам следует удалить данный участок кода из соответствующих файлов .tpl в папке

\templates\название_шаблона\banners.


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

За отображение данных элементов отвечает следующий участок кода:

<div class="pager"></div> 

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

Если вы хотите убрать этот элемент из слайдеров, выведенных через сущность, - вам следует удалить данный участок кода из соответствующих файлов .tpl в папке

\templates\название_шаблона\banners.



7. Редактировать баннер - можно при помощи окна "Управление баннерами", осуществив клик по названию баннера, подлежащего редактированию.

После чего появится окно "Редактирование баннера", аналогичное окну "Создание баннера".


8. Удалить баннер - можно, осуществив клик по кнопке "Удалить" в правом верхнем углу окна "Управление баннерами", предварительно отметив баннеры, подлежащие удалению, в столбце выбора.