1. jQuery плагін
Щоб діалог Smartdelivery запрацював у вас на сайті, треба встановити на ньому спеціальний jQuery плагін.
Для цього має бути підключені бібліотеки – jQuery, Google Maps API та файл самого плагіну у javascript-файлі.
Цей код можна розмістити у тег HEAD вашої веб-сторінки:
<!-- jquery & google maps -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- smartdelivery plugin -->
<script src="http://static.smartdelivery.com.ua/v1/dialog/smartdelivery.js" type="text/javascript"></script>Стандартний код запуску плагіна можна розмістити у тег HEAD вашої веб-сторінки, або наприкінці тегу BODY. В цьому прикладі плагін буде працювати наступним чином – коли користувач натисне на #smartdelivery, з'явиться форма smartdelivery і покаже склади міста, яке вказане у #city. Коли користувач натисне на склад, плагін запише його адресу у #warehouse.
<script type="text/javascript">
$(function() {
$('#smartdelivery').smartdelivery({
getCity: function() {
return $('#city').val();
},
onChange: function() {
var house = $('#smartdelivery').smartdelivery('getHouse');
$('#warehouse').val(house.title);
},
});
});
</script>Параметри вказуються під час ініціалізації плагіну.
| Параметр | За замовчуванням | Очікуваний тип | Призначення |
|---|---|---|---|
| getCity | null | function |
Обов'язковий параметр для роботи плагіну. До відкриття діалогу викликається ця функція, що має повертати назву міста. |
| beforeShow | null | function | Функція викликається до показу форми та запиту до API. Можна використовувати, наприклад, для індикації завантаження, показавши ajax-loader. |
| onShow | null | function | Функція викликається, коли запит до API виконано. Можна сховати ajax-loader :-) |
| onChange | null | function | Функція викликається, коли користувач обирає склад у списку або на мапі. Цю функцію можна використати, наприклад, для заповнення форми кошику |
| afterHide | null | function | Функція викликається після закриття форми. Цю функцію також можна використати для заповнення форми кошику |
| hideOnChange | false | boolean | Цей параметр визначає, чи закриється форма, коли клієнт обере склад у списку або на мапі |
| Параметр | За замовчуванням | Очікуваний тип | Призначення |
|---|---|---|---|
| language | 'ua' | string(ua|ru|en) | Мова інтерфейсу та дані про склади |
| serviceFilter | [] | array | Масив внутришніх аліасів тільки тих сервісів, які треба показати. Якщо параметр залишити пустим, то будуть показані всі доступні сервіси |
Ці методи можна використати для керування формою після ініціалізації.
| Метод | Виклик | Призначення |
|---|---|---|
| getHouse | $('#smartdelivery').smartdelivery('getHouse') | Повертає об'єкт, в якому знаходяться дані про обраний користувачем склад. Детальніше про цей об'єкт у таблиці нижче |
| show | $('#smartdelivery').smartdelivery('show') | Показує форму |
| hide | $('#smartdelivery').smartdelivery('hide') | Ховає форму |
| destroy | $('#smartdelivery').smartdelivery('destroy') | Знищує об'єкт і його дані |
Плагін повертає об'єкт, в якому знаходяться дані про обраний користувачем склад. Це зроблено для того, щоб забезбечити максимальну комфортність для пристосування плагіну до кожного сайту.
З цими даними можна заповнити місто, назву сервісу, адресу та іншу контакну інформацію складу, або навіть поставити точку на мапі, щоб користувач був впевнений, що обрав саме той склад, який йому потрібен.
| Параметр | Приклад | Значення |
|---|---|---|
| number | 4 | Номер складу, якщо є |
| title | ул. Кричевского, 19, м. Житомирская (Святошин) | Адреса та опис складу |
| phones | (044) 323-02-22 | Телефони складу |
| latitude | 50.4576890 | Широта, на якій знаходиться склад |
| longitude | 30.3917820 | Довгота |
| service_title | Нова пошта | Сервіс, який обслуговує склад |
| service_alias | novaposha | Внутрішній аліас smartdelivery для сервісу |
| city_title | Киев | Місто, в якому знаходиться склад |
Якщо вам необхідно змінити зовнішній вигляд плагіну, не змінюючи його код, то є три способи, як можна налашувати зовнішній вигляд на свій лад.
Плагін автоматично додає у сторінку файл стилей. Ви можете перевантажити класи у своїй таблиці стилей.
Переглянути стилі, що використовує діалог, можна тут:
https://github.com/dontgiveafish/smartdelivery-plugins/blob/master/v1/dialog/style/smartdelivery.css
Для підміни css-файлу використовуйте підміну директорії стилю.
Плагін використовує зображення, для, наприклад, маркерів, що означають склади. Ви можете використати свої зображення, якщо вам необхідно. Для цього необхідно підмінити статичну директорію при ініціалізації плагіну, вказавши у параметрах пункт styleHref.
Зверніть увагу, що структура та назви файлів у вашій статичній директорії мають збігатися. Структуру файлів та назви можна подивитись тут:
https://github.com/dontgiveafish/smartdelivery-plugins/tree/master/v1/dialog/img
Під час виклику діалогу плагін автоматично визначає свій розмір та пропорції. Щоб змінити розмір діалогу, використовуйте ці параметри під час ініціалізації плагіну:
- dialogWidth, ширина діалогу
- dialogHeight, висота діалогу
- servicesWidth, ширина списку складів
Ви можете долучитись до контролю інформації у базі API, розробки плагінів, чи трохи подонатити, щоб ми арендували сервери посильніше, або просто випили сидру у вашу честь:
http://smartdelivery.com.ua/#help-project
З будь-яких питань звертайтесь до мене на пошту tony@dontgiveafish.com