KingComp – веб-программист
График работы: 9:00 - 18:00 Пн - Пт

Скрипт «Фильтр товаров» для Платформы LP поможет ускорить загрузку страницы за счет динамической подгрузки товаров. Удобный формат администрирования в Google Таблице позволит быстро добавлять и редактировать товары без необходимости лезть в редактор. Возможность задания пресетов для фильтра. Сейчас поддерживаются чекбоксы и радиокнопки, но скоро добавлю и другие типы полей. Скрипт успешно прошел тест производительности на выборке при 1000 карточек товаров. Не требуется хостинг. И многое другое…

Для настройки Фильтра товаров требуется приобрести исходный код на странице «Скрипты для Платформы LP».

Все файлы с исходными кодами необходимо открывать в текстовом редакторе, например, в Блокноте.

Google Таблица

Пример таблицы:
https://docs.google.com/spreadsheets/d/1NnCwicRaSiuBbaInyixVb-9jZnfsaCqUw3MjYcYFh2g/edit?usp=sharing

Создайте документ в Google Таблицах.

Товары Платформы LP в Google Таблице

Обязательные поля

ID – уникальный идентификатор товара, счетчик инкрементируется от 1 (единицы).
Наименование товара – это поле используется для вывода названия товара в карточках товаров.
Фото товара – фотография товара, может содержать только одну ссылку на изображение.
Цена товара – используется для добавления товара в Корзину.

Эти поля нельзя переименовывать.

Пользовательские поля

Тип поля (столбца) Описание
Текст Вы можете добавлять любую текстовую информацию.
Изображение Поле должно содержать единственную ссылку на изображение.

Атрибут:
data-type=”image”

Пример:
<img data-field="Фото товара" data-type="image">

Галерея Поле может содержать несколько ссылок на изображения перечисляемые через запятые.

Используются штатные возможности галереи Платформы.

Пример:
<div data-field="Галерея" data-type="gallery"></div>

Платформа LP

Исходный код

Скопируйте в раздел BODY исходный код из файла body.txt.

В HEAD добавьте используемые стили. Для этого скопируйте исходный код из файла head.txt в раздел HEAD.

Стили фильтра в HEAD Платформы

main.css – стили вывода карточек товаров.
custom.css – подключение опционально. Файл применяет стили к полям фильтра и к Галереи для гибкой верстки.

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

Демо данные

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

Добавьте пустую Секцию и зажав SHIFT кликните по кнопке “Стиль”. В открывшееся модальное окно скопируйте исходный код из файла demo.txt и нажмите “Сохранить”.

Пример динамической загрузки в Платформе LP

Опубликуйте страницу и откройте в новой вкладке.

Ручная настройка

В редакторе добавьте HTML-код и скопируйте в него исходный код из файла widget.txt.

Фильтр товаров на лендинге

Добавьте кнопку и в параметрах выберите действие “Показать окно без формы”. Задайте ID кнопки = db-product-modal.

Показать окно без формы

В стилях кнопки задайте class="db-full-info" .

Карточка товара на Платформе LP

Откройте модальное окно кликнув по только что созданной кнопке.

Пример фильтра товаров на Платформе

Здесь необходимо настроить внешний вид карточки товара.

Фото товара

Добавьте Изображение и выставьте настройки как показано на скриншоте, либо используйте свои.

Фото товара Платформа LP

В стилях Изображения укажите class="db-img" .

Выводим фото товара

Наименование товара

Сначала отформатируйте текст на свой вкус, затем откройте исходный код текста.

Наименование товара

И пропишите следующий код в то место, куда должно будет выводить название товара.

У меня он выглядит следующим образом:

P.S.: Забегая вперед, скажу, что можно по такому же принципу выводить любое поле. Например, мы могли написать такой код:

Такой код выведет Марка авто плюс его Модель. В моем случае это тоже самое, что и Наименование товара. Таким способом можете форматировать вывод информации, проставляя дефисы, пробелы, меняя шрифты и т.д.

Текстовые поля

Настройки аналогичны предыдущему разделу. Текстовые поля обрабатываются через атрибут data-type="text" .

Описание товара

Текстовое поле

Год выпуска

Год выпуска

Цена

Цена

Поле с изображением

Изображения могут быть вызваны только через HTML-тег img и они должны иметь атрибут data-type="image" .

Скрипт сам подставит ссылку на изображение в атрибут src.

Пример:

Галерея

Для добавления галереи изображений воспользуйтесь атрибутом data-type="gallery" . В отличие от data-type="image"  скрипт добавит HTML-код со структурой Галереи самой Платформы. Такой подход позволяет использовать штатные механизмы просмотра изображений без использования сторонних библиотек.

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

Галерея имеет вспомогательный class="db-gallery"  описанный в файле custom.css, который делает блоки гибкими (адаптивными). Используется опционально.

Пример:

Галерея

Кнопка «Корзина»

Добавьте Блок и задайте class="db-cart"

Корзина на Платформе LP

Переключите роль Блока на «Карточку товара»

Карточка товара на Платформе LP

Добавьте в него Кнопку и переключите действие в положение «Добавить в Корзину»

Добавить товар в Корзину

Пример добавления товара в Корзину

Пример товара в Корзине

Настройка

Настройки фильтра задаются через переменную $filter.

Рассмотрим более подробно каждый пункт.

linkSheet

Здесь указываете ссылку на таблицу.

Откройте совместный доступ к документу по ссылке в режиме просмотра.

Совместный доступ

Скопируйте ключ документа из ссылки (выделено красным) и вставьте в исходный код в BODY заменив “ВАШ_КЛЮЧ”.

arrDecline

Замените слова для склонения на свои в разделе BODY.

Например:
Один велосипед -> велосипед
Два-четыре велосипеда -> велосипеда
Пять+ велосипедов -> велосипедов
Тогда получится массив вида arrDecline = [‘велосипед’, ‘велосипеда’, ‘велосипедов’].

limit

Укажите, количество товаров которое хотите подгружать за раз.

inpval

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

Скрытое поле формы в Платформе LP

Для скрытого поля задайте следующие параметры ID интеграции = “Товар” и Содержимое = “Выбранный товар”.

Выбранный товар

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

digits

Вы можете включить разрядность чисел. Например, для вывода цены товара — вместо «1000000 руб.», будет «1 000 000 руб.».

Для этого включите разрядность в $filter (по умолчанию она отключена, т.е. равен false)

Затем добавьте class="db-digits"  в элемент вывода разрядного числа.

Например, сделаем это для цены товара. Откройте  исходный код текста

Исходный код текста

И добавьте class="db-digits"

Разрядность чисел

imgclick

Вы можете настроить скрипт на открытие полной карточки товара при клике на изображении в превью (мини-карточке товара) или на бездействие.

Параметр принимает два значения ‘none’ — ничего не делать (по умолчанию), ‘fullinfo’ — открыть полную карточку товара

colnameurl

В этом параметре задаете название столбца, который содержит ссылки на страницы товаров. Если задан этот параметр, тогда скрипт будет перенаправлять на страницу товара вместо показа модального окна с информацией о товаре.

где ‘URL’ — это название столбца.

colnameurl: страница с описание товара

Собственно, так выглядит столбец в таблице из нашего примера

Ссылка на страницу товара

Пресеты

Пресеты – это поля при переключении которых фильтруются данные. Исходный код описан в файле widget.txt. Наличие блока с пресетами не является обязательным. Т.е. вывод превьюшек отработает и без них.

Пресеты с применением стилей custom.css

Пресеты Фильтра товаров

Пресеты без применения стилей (по умолчанию)

Пресеты фильтра без стилей

Параметры

Типы пресетов

Радиокнопки – input[type=radio]

Настройка фильтра товаров. Радиокнопки

Галочки – input[type=checkbox]

Галочка, чекбокс фильтра товаров

Выпадающий список – select

Выпадающий список фильтра товаров

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

Атрибуты

Значение Описание
data-field Название поля из таблицы.
data-operator range – поиск диапазона значений из value (см. value)

= – поиск точного соответствия значению из value

<= – искомое значение меньше или равно value.

>= – искомое значение больше или равно value.

like – определяет, совпадает ли указанная символьная строка с заданным шаблоном.

value Искомое значение. Формат различается в зависимости от data-operator.

range
Если data-operator="range" , тогда value="start,end" , где
start – стартовое число,
end – конечное число (больше или равно start).

Выполняется следующее условие
(col >= start) and (col <= end), где col – столбец.

like

Если data-operator="like" , тогда value="expression" , где
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.