Фильтр товаров для Платформы LP (динамическая загрузка товаров)

Содержание страницы:

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

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

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

Google Таблица

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

Создайте документ в 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.

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

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

Демо данные

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

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

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

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

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

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

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

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

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

Фото товара

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

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

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

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

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

<span data-field="Наименование товара" data-type="text">Марка Модель</span>

1	<span data-field="Наименование товара" data-type="text">Марка Модель</span>

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

<p style="text-align: center; font-weight: bold;">
  <span style="font-size: 20px;">
    <span data-field="Наименование товара" data-type="text">Марка Модель</span>
  </span>
</p>

Марка Модель

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

<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.

Пример:

<img data-field="Фото товара" data-type="image" src="">

1	<img data-field="Фото товара" data-type="image" src="">

Галерея

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

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

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

Пример:

<div class="db-gallery" data-field="Галерея" data-type="gallery"></div>

1	<div class="db-gallery" data-field="Галерея" data-type="gallery"></div>

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

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

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

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

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

Настройка

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

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',
};

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 заменив “ВАШ_КЛЮЧ”.

//Ссылка на документ
linkSheet: 'https://docs.google.com/spreadsheets/d/ВАШ_КЛЮЧ/edit#gid=0',

1 2	//Ссылка на документ linkSheet: 'https://docs.google.com/spreadsheets/d/ВАШ_КЛЮЧ/edit#gid=0',

arrDecline

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

//Склонение числительных. [{один}, {два}, {пять}].
arrDecline: ['автомобиль', 'автомобиля', 'автомобилей'],

1 2	//Склонение числительных. [{один}, {два}, {пять}]. arrDecline: ['автомобиль', 'автомобиля', 'автомобилей'],

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

limit

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

//Количество подгружаемых товаров
limit: 4,

1 2	//Количество подгружаемых товаров limit: 4,

inpval

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

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

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

//Запомним скрытое поле формы
inpval: $('input[value="Выбранный товар"]'),

1 2	//Запомним скрытое поле формы inpval: $('input[value="Выбранный товар"]'),

digits

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

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

//Включить разрядность чисел
digits: true,

1 2	//Включить разрядность чисел digits: true,

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

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

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

imgclick

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

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

//Открывать полную карточку товара при клике по изображению в превью (мини-карточке товара). 
//Где 'none' - ничего не делать (по умолчанию), 'fullinfo' - открыть полную карточку товара
imgclick: 'fullinfo',

//Открывать полную карточку товара при клике по изображению в превью (мини-карточке товара).

//Где 'none' - ничего не делать (по умолчанию), 'fullinfo' - открыть полную карточку товара

imgclick: 'fullinfo',

colnameurl

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

//Название столбца в Таблице со ссылками на страницы товаров
colnameurl: 'URL',

1 2	//Название столбца в Таблице со ссылками на страницы товаров colnameurl: 'URL',

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

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

Пресеты

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

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

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

Параметры

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

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

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

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

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

<option value="" selected="true">(не выбрано)</option>

1	<option value="" selected="true">(не выбрано)</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.