EcommerceMarketГалерея
Этот пример показывает, насколько просто и эффективно можно обозначить вашим посетителям идею о покупке товара.
Подключение
Для подключения к системе необходимо:
- Зарегестрироваться или войти
- Добавить партнерство
- В меню приложения добавить приложение выбрав тип "Галерея".
- Укажите ваши домены через точку с запятой.
- Если вы хотите отображать ваши изображения в галерее на сайте EcommerceMarket.ru поставьте галочку "Данные приложения публичны".
- Если вы хотите использовать изображения только на вашем сайте "Только для партнерства"
- Укажите магазины, предложения которых вы хотите видеть в админке.
После подключения интерфейс выдаст вам app_id и app_secret.
При утечке app_secret можно заменить в редактировании приложения поставив галочку "Обновить app_secret".
Установка кода на сайте
На вашем сайте в теге <head> необходимо прописать следующее:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <script src="//ecommercemarket.ru/templates/js/opentip/lib/opentip.js"></script> <script src="//ecommercemarket.ru/templates/js/opentip/lib/adapter-jquery.js"></script> <link type="text/css" rel="stylesheet" href="//ecommercemarket.ru/templates/js/opentip/css/opentip.css" /> <script src="//ecommercemarket.ru/templates/js/partner/gallery.js"></script>
Первые 2 скрипта - это jQuery и jQuery UI. Они необходимы для правильной работы плагина. Если они у вас уже подключены, то в них нет необходимости. Далее 2 скрипта и 1 стиль нужны для правильного отображения всплывающих окон. И последний скрипт - это и есть партнерский плагин.
После подключения этого кода в коде страницы вам станет доступен плагин jQuery EcommerceMarketPartnerGallery. Самый простой пример на PHP:
<img id="image" src="IMG001.jpg" /> <script type="text/javascript"> $(function(){ $('#image').load(function(){ $('#image').EcommerceMarketPartnerGallery({ app_id: <?php echo $app_id; }>, mode: 'view', target_code: '<?php echo $target_code; }>', access_key: '<?php echo md5($app_id.$app_secret.$_SERVER["REMOTE_ADDR"].'view'.$target_code); ?>' }); }); }); </script>
В вышеуказанном примере:
- #image - ссылка на DOM объект. Им может быть тег <img> или <div>. Ссылку на картинку скрипт берет из атрибута src или из css атрибута background-image. Ширина и высота, если они не указаны явно, берется из внешних границ DOM объекта.
- $app_id и $app_secret - ID приложения и секретный код. Они доступны в партнерском интерфейсе.
- mode - режим работы плагина view - вывод(для пользователей) или edit(для администрирования).
- target_code - идентификатор картинки. В вашей базе или файловой системе картинка имеет уникальный код и чтобы связка меток с конкретной картинкой работала правильно - задайте его явно через этот параметр. В случае пустой строки в этом параметре идентификация будет производиться по URL картинки, но это небезопасно, т.к. при смене домена или хостинга картинок метки могут оказаться недоступными. Лучше указать его явно.
- access_key - ключ доступа к API приложения. Вычисляется как MD5 от конкатенации app_id, app_secret, IP-адрес пользователя, mode, target_code. Последовательность параметров при конкатенации менять нельзя.
Также следует отметить, что в примере не указаны ширина и высота картинки(width и height параметры тега <img>), что вынуждает подключать плагин после загрузки картинки(событие onload). Однако, если они указаны, то можно не дожидаться загрузки картинки используя событие загрузки DOM-дерева элементов $(function(){ ... });.
Параметры плагина
| Параметр | Тип значения | Описание |
|---|---|---|
| app_id | unsigned int - целые положительные числа | ID приложения. Обязательный параметр. Доступен в партнерском интерфейсе. |
| mode | string - строковый. 'view' или 'edit' | Режим работы плагина 'view' - вывод или 'edit' - редактирование. Обязательный параметр. |
| target_code | string | Строковый идентификатор картинки. Необязательный параметр. Если не задать идентификация будет производиться по URL картинки. Это небезопасно, т.к. при смене домена или хостинга картинок метки могут оказаться недоступными. Лучше указать его явно. |
| access_key | string | Ключ доступа к API приложения. Обязательный параметр. Вычисляется как MD5 от конкатенации app_id, app_secret, IP-адрес пользователя, mode, target_code. Последовательность параметров при конкатенации менять нельзя. app_secret доступен в партнерском интерфейсе. |
| target_width | unsigned int | Ширина картинки. Необязательный параметр. Если не указать, то будет определен автоматически. |
| target_height | unsigned int | Высота картинки. Необязательный параметр. Если не указать, то будет определен автоматически. |
| data_exchange | string. 'jsonp' или 'cors' |
Тип обмена данными с сервером. Необязательный параметр. Если не указать, то будет равным 'jsonp'.
'jsonp' - классический jsonp. Для передачи данных используется GET. 'cors' - Cross-origin resource sharing.
Для передачи данных используется POST.
|
| dot_image_view | string | URL картинки точки для вывода. Необязательный параметр. |
| dot_image_edit | string | URL картинки точки для редактирования. Необязательный параметр. |
| dot_width | unsigned int | Ширина точки. Необязательный параметр. |
| dot_height | unsigned int | Высота точки. Необязательный параметр. |
| dot_center_x | unsigned int | Смещение центра точки по оси X. Необязательный параметр. |
| dot_center_y | unsigned int | Смещение центра точки по оси Y. Необязательный параметр. |
| show_event | string. 'click' или 'mouseover' | Необязательный параметр. По умолчанию 'click' - товарное предложение открывается по клику(в режиме 'edit' изменить нельзя). 'mouseover' - товарное предложение открывается по наведению мыши. |
| dot_show | string. 'always' или 'mouseover' | Необязательный параметр. По умолчанию 'always' - иконки тултипов показываются всегда на картинке(в режиме 'edit' изменить нельзя). 'mouseover' иконки тултипов показываются по наведению мыши. |
Обработка ошибок
Все ошибки отправляются в консоль браузера, чтобы не блокировать интерфейс. Обычно консоль можно отыскать в отладке браузера(клавиша F12).
Автозамены в UTM метках
В настройках приложения можно настроить замену UTM меток. В них работает автозамена. Например, метка utm_term равная
| Замена | Описание |
|---|---|
| {store_name} | Название магазина |
| {brand_name} | Название бренда |
| {catalog_name} | Название категории по прайс-листу |
| {product_name} | Название товара по прайс-листу |
| {product_code} | Артикул товара по прайс-листу |
| {type_prefix} | Префикс товара по прайс-листу |
| {_store_name} | Название магазина транслитом маленькими буквами с заменой пробелов на дефис и вырезанием всех специальных символов. |
| {_brand_name} | Название бренда транслитом маленькими буквами с заменой пробелов на дефис и вырезанием всех специальных символов. |
| {_catalog_name} | Название категории по прайс-листу транслитом маленькими буквами с заменой пробелов на дефис и вырезанием всех специальных символов. |
| {_product_name} | Название товара по прайс-листу транслитом маленькими буквами с заменой пробелов на дефис и вырезанием всех специальных символов. |
| {_product_code} | Артикул товара по прайс-листу транслитом маленькими буквами с заменой пробелов на дефис и вырезанием всех специальных символов. |
| {_type_prefix} | Префикс товара по прайс-листу транслитом маленькими буквами с заменой пробелов на дефис и вырезанием всех специальных символов. |