Opencart как изменить размер баннера

От автора: в магазине на OpenCart баннеры можно разместить в различных формах. Это могут быть статичные изображения, карусели или слайдшоу. Каждый баннер может состоять из одного или более изображений, а эти группы изображений могут привязываться к разным модулям в зависимости от размера и их назначения.

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

Загрузка изображений для баннеров

В панели администратора OpenCart перейдите в System > Design > Banners. Давайте вставим наш первый баннер, добавим название и статус. Пока что мы лишь создали группу для загружаемых изображений.

Чтобы добавить изображения, кликните на add banner. Мы можем добавить заголовок для магазина на любом языке, скопировать или ввести ссылку, найти или загрузить изображение (jpg, png или gif). Назначать изображений в баннер можно сколько угодно, но все изображения должны быть одного размера или, хотя бы, соотношения сторон. Эти изображения будут перелистываться в модуле баннера. (именование баннеров может поставить вас в тупик, так как система использует термин баннер как для набора изображений в баннере, так и для самого изображения)

Назначение баннеров модулям

Выше мы уже упомянули, что баннеры в OpenCart отображаются с помощью модулей. Есть 3 распространенных модуля для показа баннеров: Banner module, Carousel и Slideshow. У всех схожие функции: они анимируют изображения одного размера и позволяют пользователям кликать по ним.

Добавление модуля banner

Модуль banner показывает баннеры путем плавной замены одного изображения другим. Чтобы назначить баннер модулю, перейдите в Extensions > Modules > Banner > Edit.

Кликните add module, так мы вставим баннер в макет. Необходимо выбрать баннер для отображения, задать размеры, выбрать место на макете для отображения, позицию, статус и порядок модуля.

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

Система изменяет размер изображений под это разрешение. Макеты заданы заранее, у них есть имена и описания. Position может принимать left, right, top и bottom. Order задает массив визуального появления других модулей в рамках одного столбца.

Добавление баннеров в модули slideshow

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

Назначить уже заданный и загруженный баннер slideshow можно, перейдя Extensions > Modules > Slideshow > Edit. При добавлении модуля необходимо задать те же настройки, что для первого модуля. Выберите баннер для показа, размер, макет и положение, задайте статус и порядок. Смотрите скриншот ниже.

Добавление баннеров в модуль carousel

Модуль carousel позволяет отображать набор маленьких баннерных изображений рядом и анимировать их, показывая и скрывая их пошагово по горизонтали. Настроить этот модуль можно точно так же, как со slideshow. Модуль карусели принимает еще 2 параметра:

Как отслеживать клики по баннеру

Эти баннерные модули очень полезны, мало какие E-Commerce решения включают их в ядро. Тем не менее, их возможности ограничены. Вы не можете видеть количество кликов по баннерам. Если вы хотите измерять клики, для этого можно использовать google analytics (вы сами должны установить трек-код).

Клик по баннеру, который ведет на страницу того же сайта в google analytics называется событием. Поэтому для измерения внутренних кликов по баннерам в OpenCart мы будем использовать инструмент отслеживания событий в google analytics. Пример HTML отслеживания события:

Событие происходит, когда пользователь кликает на что-то. Событие отслеживается методом _trackEvent(), который хранит следующую информацию: category – группа объектов отслеживания (например, slideshow), action – тип пользовательского взаимодействия (например, клик по баннеру), label – необязательный строковый параметр с дополнительными данными, value – необязательные числовые данные для action. Как видите, простая строка HTML модификации помогает отслеживать клики по нашим баннерам.

Изменение шаблонных файлов модуля для отслеживания кликов по баннерам

Модули banner, slideshow и carousel состоят из шаблонов, которые хранятся в папке с темой. Нам лишь нужно поменять пару строк в шаблонных файлах модуля. Следующий код необходимо вставить в теги <a> в файлы шаблона:

Для баннеров: найдите этот или похожий код в файле темы {your theme folder}templatemodulebanner.tpl:

И замените его на этот:

Мы добавили banners в качестве компонента категории, экшен clicked, лейбл – заголовок баннера без слешей. Значение выбирать не нужно, так как по умолчанию оно задано в 1, а нам это и нужно.

Шаблон slideshow: можно найти в {your theme folder}templatemoduleslideshow.tpl необходимо заменить:

На:

Шаблон карусели находится в {your theme folder}templatemodulecarousel.tpl, в нем необходимо заменить:

На:

Результат можно посмотреть в Google Analytics Behavior section > Events overview. Там будет категория (в нашем случае тип баннера), количество кликов и название баннера.

Общие сведения о баннерах

Заключение

Мы узнали, что сначала необходимо загрузить изображения баннера в группу, чтобы потом их можно было присвоить модулю отображения banner, slideshow или carousel. Потом мы изменили шаблонные файлы модуля, чтобы отслеживать события кликов через Google Analytics.

Автор: Zsolt Gere

Источник: //code.tutsplus.com/

Редакция: Команда webformyself.

В веб-магазине OpenCart баннеры могут отображаться в разных формах. Они могут отображаться в виде статического изображения, карусели или слайд-шоу. Каждый баннер может содержать одно или несколько изображений, и эти группы изображений могут быть назначены различным модулям в зависимости от размера и функции, с которой они работают.

Если вы хотите разместить баннер на своем веб-сайте, сначала загрузите изображения на баннеры, а затем назначьте эти баннеры с отображением модулей.

Загрузка изображений для баннеров

На панели инструментов OpenCart выберите « Система»> «Дизайн»> «Баннеры» . Давайте вставим наш первый баннер, добавим к нему имя и установим его статус. Теперь мы только что создали группу для изображений, которые мы будем загружать.

Давайте начнем добавлять картинки, нажав кнопку Добавить баннер . Как видите, здесь мы можем добавить название для каждого языка интернет-магазина, скопировать или ввести ссылку и просмотреть или загрузить файл изображения (JPG, PNG или GIF). Мы можем назначить столько изображений баннеров, сколько захотим, но все изображения должны иметь одинаковый размер или, по крайней мере, соотношение, так как эти изображения будут переключаться или скользить внутри модуля, держащего баннер. (Соглашение об именовании баннеров может сбивать с толку, поскольку система использует термин баннер для набора изображений баннеров и также использует баннер для самого изображения .)

Назначение баннеров модулям

Как мы узнали выше, баннеры отображаются с модулями в OpenCart. Существует три часто используемых модуля для показа баннеров: модуль Banner, Carousel и Slideshow . Все они имеют схожие функции: они анимируют изображения одинакового размера и позволяют пользователю нажимать на них.

Добавление модуля баннера

Модуль Баннер показывает баннеры, выцветая изображения баннеров в одном месте после каждого. Чтобы назначить баннер модулю-заполнителю баннера, выберите «Расширения»> «Модули»> «Баннер»> «Изменить».

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

Добавление баннеров в модули слайд-шоу

Модуль « Слайд-шоу» отображает изображения баннеров в виде движущейся анимации слайд-шоу. Этот модуль обычно отображается на главной странице с большими пейзажами. Основные параметры этого модуля, такие как тип анимации, скорость или внешний вид, определены в файле темы, который нам не нужно изменять, так как мы используем предустановленный модуль.

Мы можем назначить уже установленный и загруженный баннер слайд-шоу, выбрав « Расширения»> «Модули»> «Слайд-шоу»> «Редактировать». При добавлении модуля нам нужно выполнить настройки, аналогичные тем, которые мы делали в модуле баннера выше. Выберите баннер для показа, добавьте его размер , выберите макет и позицию , установите статус и порядок . Смотрите иллюстрацию ниже.

Добавление баннеров в модуль карусели

Модуль « Карусель» позволяет отображать ряд небольших баннеров рядом друг с другом и анимировать их, отображая и скрывая их шаг за шагом при горизонтальном перемещении.

Мы можем настроить этот модуль так же, как мы добавили баннер в слайд-шоу, хотя карусельный модуль принимает еще две вещи:

1. Значение Limit указывает карусели, сколько изображений должно быть показано одновременно
2. Прокрутка устанавливает количество изображений, которое карусель должна перепрыгивать между двумя шагами.

Как отслеживать клики по баннеру

Эти баннерные модули очень полезны, и не во многих решениях для электронной коммерции они являются частью ядра, хотя у них ограниченные возможности, например, вы не можете видеть количество кликов на баннерах. Если мы хотим измерить количество кликов, мы можем использовать Google Analytics для этого ( учитывая, что вы уже установили код отслеживания ).

Нажатие на баннер, который перенаправляет на страницу на том же сайте, является событием в термине Google Analytics. Вот почему мы используем функцию отслеживания событий в Google Analytics, чтобы измерять клики по баннерам на сайте в OpenCart. Вот пример HTML для реализации отслеживания событий:

Событие происходит, когда пользователь нажимает на что-то. Событие отслеживается методом _trackEvent() который содержит следующую информацию: категория – группа объектов, которые мы хотим отслеживать (например, слайд-шоу), действие – тип взаимодействия с пользователем (например, щелчок баннера), метка – необязательная строка для дополнительных data, value – необязательные числовые данные для действия. Как видите, простая строка HTML-модификации поможет отследить клики наших баннеров.

Изменение файлов шаблона вашего модуля для отслеживания кликов по баннеру

Модули баннера, слайд-шоу и карусели имеют свои собственные шаблоны в каталоге используемой темы. Нам нужно всего лишь изменить несколько строк в файлах шаблонов модулей. Вот что нам нужно добавить к тегам <a> в файлах шаблона: onClick="_gaq.push(['_trackEvent', '{banner type}', 'Clicked', '<?php echo addslashes($banner['title']); ?>']);"

Для баннеров найдите этот или подобный фрагмент кода в файле {your theme folder}templatemodulebanner.tpl :

и заменить на это:

Как видите, мы добавили баннеры в качестве компонента категории , Clicked в качестве действия и непроверенную версию заголовка баннера в качестве метки . Нам не нужно было выбирать значение, так как оно по умолчанию равно одному, и в нашем случае это то, что нам нужно.

Шаблон слайд-шоу , который можно найти в {your theme folder}templatemoduleslideshow.tpl , должен быть изменен из этого:

к этому:

Шаблон карусели находится по адресу {your theme folder}templatemodulecarousel.tpl и эти строки должны быть изменены с этого:

к этому:

Результаты кликов можно увидеть, если перейти в Google Analytics и перейти в раздел « Поведение »> Обзор событий . Там мы увидим категорию (в нашем случае тип баннера), количество кликов и название баннера.

Общее ноу-хау баннеров

• Один из недостатков модулей баннеров и слайд-шоу состоит в том, что мы не можем установить дату истечения срока действия, поэтому менеджер сайта или менеджер по маркетингу должны знать об этом.
• Размер файла баннера должен быть низким. Таким образом, файл баннера шириной около 900px не должен превышать 100-150KB.
• Файлы Flash (SWF), JavaScript или другой HTML не могут использоваться здесь, только статические изображения, такие как JPG, PNG или GIF.
• Чрезмерное использование баннеров может быть вредным. Никто не любит смотреть на веб-сайт с баннерной обоями.
• Попробуйте использовать графические элементы, аналогичные тем, которые используются для веб-дизайна.

Вывод

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

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