Скрипт «Фильтр товаров» для Платформы LP поможет ускорить загрузку страницы за счет динамической подгрузки товаров. Удобный формат администрирования в Google Таблице позволит быстро добавлять и редактировать товары без необходимости лезть в редактор. Возможность задания пресетов для фильтра. Сейчас поддерживаются чекбоксы и радиокнопки, но скоро добавлю и другие типы полей. Скрипт успешно прошел тест производительности на выборке при 1000 карточек товаров. Не требуется хостинг. И многое другое…
Для настройки Фильтра товаров требуется приобрести исходный код на странице «Скрипты для Платформы LP».
Все файлы с исходными кодами необходимо открывать в текстовом редакторе, например, в Блокноте.
Google Таблица
Пример таблицы:
https://docs.google.com/spreadsheets/d/1NnCwicRaSiuBbaInyixVb-9jZnfsaCqUw3MjYcYFh2g/edit?usp=sharing
Создайте документ в Google Таблицах.
Обязательные поля
ID – уникальный идентификатор товара, счетчик инкрементируется от 1 (единицы).
Наименование товара – это поле используется для вывода названия товара в карточках товаров.
Фото товара – фотография товара, может содержать только одну ссылку на изображение.
Цена товара – используется для добавления товара в Корзину.
Эти поля нельзя переименовывать.
Пользовательские поля
Тип поля (столбца) | Описание |
Текст | Вы можете добавлять любую текстовую информацию. |
Изображение | Поле должно содержать единственную ссылку на изображение.
Атрибут: Пример: |
Галерея | Поле может содержать несколько ссылок на изображения перечисляемые через запятые.
Используются штатные возможности галереи Платформы. Пример: |
Платформа LP
Исходный код
Скопируйте в раздел BODY исходный код из файла body.txt.
В HEAD добавьте используемые стили. Для этого скопируйте исходный код из файла head.txt в раздел HEAD.
main.css – стили вывода карточек товаров.
custom.css – подключение опционально. Файл применяет стили к полям фильтра и к Галереи для гибкой верстки.
Стили вы можете переопределить, либо написать с нуля. Однако, не заменяйте существующие селекторы.
Демо данные
Для изучения работы Фильтра рекомендую воспользоваться демо данными.
Добавьте пустую Секцию и зажав SHIFT кликните по кнопке “Стиль”. В открывшееся модальное окно скопируйте исходный код из файла demo.txt и нажмите “Сохранить”.
Опубликуйте страницу и откройте в новой вкладке.
Ручная настройка
В редакторе добавьте HTML-код и скопируйте в него исходный код из файла widget.txt.
Добавьте кнопку и в параметрах выберите действие “Показать окно без формы”. Задайте ID кнопки = db-product-modal.
В стилях кнопки задайте class="db-full-info" .
Откройте модальное окно кликнув по только что созданной кнопке.
Здесь необходимо настроить внешний вид карточки товара.
Фото товара
Добавьте Изображение и выставьте настройки как показано на скриншоте, либо используйте свои.
В стилях Изображения укажите class="db-img" .
Наименование товара
Сначала отформатируйте текст на свой вкус, затем откройте исходный код текста.
И пропишите следующий код в то место, куда должно будет выводить название товара.
1 |
<span data-field="Наименование товара" data-type="text">Марка Модель</span> |
У меня он выглядит следующим образом:
1 2 3 4 5 |
<p style="text-align: center; font-weight: bold;"> <span style="font-size: 20px;"> <span data-field="Наименование товара" data-type="text">Марка Модель</span> </span> </p> |
P.S.: Забегая вперед, скажу, что можно по такому же принципу выводить любое поле. Например, мы могли написать такой код:
1 2 3 4 5 |
<p style="text-align: center; font-weight: bold;"> <span style="font-size: 20px;"> <span data-field="Марка" data-type="text">Марка</span> <span data-field="Модель" data-type="text">Модель</span> </span> </p> |
Такой код выведет Марка авто плюс его Модель. В моем случае это тоже самое, что и Наименование товара. Таким способом можете форматировать вывод информации, проставляя дефисы, пробелы, меняя шрифты и т.д.
Текстовые поля
Настройки аналогичны предыдущему разделу. Текстовые поля обрабатываются через атрибут data-type="text" .
Описание товара
Год выпуска
Цена
Поле с изображением
Изображения могут быть вызваны только через HTML-тег img и они должны иметь атрибут data-type="image" .
Скрипт сам подставит ссылку на изображение в атрибут src.
Пример:
1 |
<img data-field="Фото товара" data-type="image" src=""> |
Галерея
Для добавления галереи изображений воспользуйтесь атрибутом data-type="gallery" . В отличие от data-type="image" скрипт добавит HTML-код со структурой Галереи самой Платформы. Такой подход позволяет использовать штатные механизмы просмотра изображений без использования сторонних библиотек.
При помощи галереи можете выводить как одиночные изображения, так и несколько.
Галерея имеет вспомогательный class="db-gallery" описанный в файле custom.css, который делает блоки гибкими (адаптивными). Используется опционально.
Пример:
1 |
<div class="db-gallery" data-field="Галерея" data-type="gallery"></div> |
Кнопка «Корзина»
Добавьте Блок и задайте class="db-cart"
Переключите роль Блока на «Карточку товара»
Добавьте в него Кнопку и переключите действие в положение «Добавить в Корзину»
Пример добавления товара в Корзину
Настройка
Настройки фильтра задаются через переменную $filter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var $filter = { //Количество подгружаемых товаров limit: 4, //Ссылка на документ linkSheet: 'https://docs.google.com/spreadsheets/d/1NnCwicRaSiuBbaInyixVb-9jZnfsaCqUw3MjYcYFh2g/edit#gid=0', //Склонение числительных. [{один}, {два}, {пять}]. arrDecline: ['автомобиль', 'автомобиля', 'автомобилей'], //Запомним скрытое поле формы hiddenInpDBSelProduct: $('input[value="Выбранный товар"]'), //Включить разрядность чисел digits: true, //Открывать полную карточку товара при клике по изображению в превью (мини-карточке товара). //Где 'none' - ничего не делать (по умолчанию), 'fullinfo' - открыть полную карточку товара imgclick: 'fullinfo', //Название столбца в Таблице со ссылками на страницы товаров colnameURL: 'URL', }; |
Рассмотрим более подробно каждый пункт.
linkSheet
Здесь указываете ссылку на таблицу.
Откройте совместный доступ к документу по ссылке в режиме просмотра.
Скопируйте ключ документа из ссылки (выделено красным) и вставьте в исходный код в BODY заменив “ВАШ_КЛЮЧ”.
1 2 |
//Ссылка на документ linkSheet: 'https://docs.google.com/spreadsheets/d/ВАШ_КЛЮЧ/edit#gid=0', |
arrDecline
Замените слова для склонения на свои в разделе BODY.
1 2 |
//Склонение числительных. [{один}, {два}, {пять}]. arrDecline: ['автомобиль', 'автомобиля', 'автомобилей'], |
Например:
Один велосипед -> велосипед
Два-четыре велосипеда -> велосипеда
Пять+ велосипедов -> велосипедов
Тогда получится массив вида arrDecline = [‘велосипед’, ‘велосипеда’, ‘велосипедов’].
limit
Укажите, количество товаров которое хотите подгружать за раз.
1 2 |
//Количество подгружаемых товаров limit: 4, |
inpval
В конструкторе форма отправки заявки может содержать скрытое поле, в который будет передаваться значение выбранного посетителем товара.
Для скрытого поля задайте следующие параметры ID интеграции = “Товар” и Содержимое = “Выбранный товар”.
Но если ваша форма использует интеграцию с CRM, вы можете указать собственные значения. В этом случае, в исходном коде необходимо указать новые значения в строке:
1 2 |
//Запомним скрытое поле формы inpval: $('input[value="Выбранный товар"]'), |
digits
Вы можете включить разрядность чисел. Например, для вывода цены товара — вместо «1000000 руб.», будет «1 000 000 руб.».
Для этого включите разрядность в $filter (по умолчанию она отключена, т.е. равен false)
1 2 |
//Включить разрядность чисел digits: true, |
Затем добавьте class="db-digits" в элемент вывода разрядного числа.
Например, сделаем это для цены товара. Откройте исходный код текста
И добавьте class="db-digits"
imgclick
Вы можете настроить скрипт на открытие полной карточки товара при клике на изображении в превью (мини-карточке товара) или на бездействие.
Параметр принимает два значения ‘none’ — ничего не делать (по умолчанию), ‘fullinfo’ — открыть полную карточку товара
1 2 3 |
//Открывать полную карточку товара при клике по изображению в превью (мини-карточке товара). //Где 'none' - ничего не делать (по умолчанию), 'fullinfo' - открыть полную карточку товара imgclick: 'fullinfo', |
colnameurl
В этом параметре задаете название столбца, который содержит ссылки на страницы товаров. Если задан этот параметр, тогда скрипт будет перенаправлять на страницу товара вместо показа модального окна с информацией о товаре.
1 2 |
//Название столбца в Таблице со ссылками на страницы товаров colnameurl: 'URL', |
где ‘URL’ — это название столбца.
Собственно, так выглядит столбец в таблице из нашего примера
Пресеты
Пресеты – это поля при переключении которых фильтруются данные. Исходный код описан в файле widget.txt. Наличие блока с пресетами не является обязательным. Т.е. вывод превьюшек отработает и без них.
Пресеты с применением стилей custom.css
Пресеты без применения стилей (по умолчанию)
Параметры
Типы пресетов
Радиокнопки – input[type=radio]
Галочки – input[type=checkbox]
Выпадающий список – select
Для select рекомендуется задавать option с пустым значением, при выборе которого, скрипт не будет учитывать его в запросе.
1 |
<option value="" selected="true">(не выбрано)</option> |
Атрибуты
Значение | Описание |
data-field | Название поля из таблицы. |
data-operator | range – поиск диапазона значений из value (см. value)
= – поиск точного соответствия значению из value <= – искомое значение меньше или равно value. >= – искомое значение больше или равно value. like – определяет, совпадает ли указанная символьная строка с заданным шаблоном. |
value | Искомое значение. Формат различается в зависимости от data-operator.
range Выполняется следующее условие |
like
Если
data-operator="like" , тогда
value="expression" , где % – любое количество символов Примеры: ‘abc%’ Любые строки, которые начинаются с букв «abc» ‘abc_’ Строки длиной строго 4 символа, причем первыми символами строки должны быть «abc» ‘%z’ Любая последовательность символов, которая обязательно заканчивается символом «z» ‘%Rostov%’ Любая последовательность символов, содержащая слово «Rostov» в любой позиции строки |
|
В остальных случаях значение value учитывается целиком. |
Обновления
Обновление от 27.08.2017
Добавлена поддержка галереи, простых изображений, переключателей radio и checkbox, а также типов запроса (больше, меньше, равно, диапазон, подтекст и т.д.).
Обновление от 08.10.2017
Изменения коснулись файлов body.html, custom.css, widget.html.
Добавил:
- Поддержку Корзины.
- Обязательное поле «Цена товара» (используется для Корзины).
- Разрядность чисел. Опционально. ( class="db-digits" ).
- Возможность открывать полную карточку товара при клике на изображении в превью товара (мини-карточке).
- Можно включить переход по ссылке на страницу товара, вместо открытия модального окна с полной карточкой товара.
Исправил:
- Оптимизация кода.
- Для расчета разрядности числа сумма, добавил class="db-digits" в шаблон превью (мини-карточек) товаров.
- Карточка товара не открывалась, если отсутствовала фотография товара в таблице.
- Вынес настройки Фильтра в объект $filter.
Обновление от 19.11.2017
Изменения коснулись файла body.html.
Исправил:
- Обновил json-строку в файле demo.txt для 3-ей версии редактора Платформы LP.
- Исправил ошибку из-за которой не загружались товары в IE.