Smart Designer — Собственные элементы фильтра
Это расширение позволяет создавать пользовательские элементы фильтров
Демо-сайт: https://demo-sd.products-filter.com/
По умолчанию WOOF SD имеет 4 основных элемента, готовых к настройке:
- Чекбокс (по умолчанию)
- Радио
- Переключатель
- Цвет
Больше пользовательских элементов вы можете найти в Галерея WOOF SD. Если вы придумали идею для вашего пользовательского элемента, напишите нам.
на поддержку
- Верхняя панель Назад
- – вернуться к списку элементов Пресеты – администратор может сохранить текущий набор опций, а затем применить его к другим элементам
- того же типа Выпадающий списоксо всеми возможными типами элементов в системе. ‘Box tags
- ‘ на экране выше – это пользовательский элемент, размещенный в дочерней теме WordPress. Как создать такие, читайте ниже.Выпадающий список со всеми реальными таксономиями WooCommerce магазина, только для визуальной помощи при создании элемента фильтра. Также используется для типа элемента «Цвет» для прикрепления цветов и изображений к терминам выбранной таксономии из этого выпадающего списка ()
- читайте про Цвет ниже Сбросить
– нажмите, чтобы сбросить все пользовательские опции текущего элемента фильтра до значений по умолчанию
- На вкладке «РасширенияСоздать и применитьSmart Designer‘ («активируйте расширение»если оно не активировано
- ) и нажмите кнопку СохранитьSmart Designer‘
- После перезагрузки страницы перейдите на вкладку «Нажмите кнопку «‘
- Создать элементУстановите заголовок нового элемента ()
- нажмите на его полеНажмите «Редактировать
- », чтобы войти в опции нового элементаКогда вы войдете в опции элемента, выберите его тип: Чекбокс, Радио, Переключатель, Цвет или другой, в зависимости от установленных элементов в теме WordPress вашего сайта (пользовательские типы элементов описаны ниже
- ). Каждый тип имеет свой собственный набор опций, которые не пересекаются с другими типами элементов!Все основные элементы, кроме переключателей, также имеют шаблоны макета (список, плитка или радио, чекбокс
- ), выберите тот, который соответствует вашим потребностям.
- Для вашего удобства вы можете выбрать таксономию, для которой вы создаете текущий элемент
- Поиграйте с опциями, используя их описание, чтобы создать желаемые настройки
- Все изменения сохраняются автоматически через ajaxPresetsКогда вы решите, что этого достаточно, вы можете нажать кнопку «» и сохранить там свои пользовательские опции для будущих элементов ()
- чтобы не начинать с нуля с новым элементомПоследний шаг — перейти на вкладку «СтруктураSD:‘
- Нажмите Сохранить » и прикрепить для таксономии только что созданный тип элемента. Все элементы, созданные с помощью Smart Designer, имеют префикс заголовка «
- кнопка ниже
Перейдите на витрину магазина и наслаждайтесь 🙂
- Советы по настройкеЕсли вы не знаете, какое семейство шрифтов применить для текста, используйте слово «inherit
- », это применит семейство шрифтов текущей темы WordPress. И помните, что если вы применяете любое семейство шрифтов, оно должно поддерживаться вашей текущей темой WordPress, и нет никакой гарантии, что этот шрифт включен в админку сайта, поэтому визуальные результаты не на 100% будут такими же, как в бэкенде, так и на фронтенде.прозрачный« вместо шестнадцатеричного кода цвета
- Различные шаблоны изображений можно найти с помощью Google, используя фразу для поиска «фоновые шаблоны изображений‘
- Если вы ищете красивые цвета, вы можете найти их здесь, например https://codebeautify.org/hex-to-pantone-converter
- Конвертер цветовых кодов https://rgbacolorpicker.com/hex-to-rgba
Presets
Пресеты сохраняют ваши настройки, поэтому вы можете применять их к похожим элементам, что сокращает время производства. Вы можете сделать следующее:
- Создать пресеты
- Применить пресеты к новым элементам того же типа (чекбокс, радио, цвет, переключатель, любой пользовательский тип) – просто нажмите на его заголовок. Например, пресет, созданный для радио, невидим для чекбокса и наоборот.
- Поделитесь своим пресетом в текстовом виде с другим человеком (разработчиками, коллегами, сайтами и т. д. …). Нажмите на значок глаза.
- Импортируйте код пресета, которым с вами поделился кто-то другой. Нажмите на значок редактирования. Вставьте код. Нажмите кнопку «Импорт‘.
Color
Элемент «Цвет» – это специальный элемент, который имеет свою собственную функциональность – назначение цвета и изображений для каждого элемента выбранной таксономии (см. выпадающий список перед кнопкой «Сбросить») через всплывающее окно
Данные хранятся в специальных мета-ключах терминов:
- woof_sd_color
- woof_sd_color_image
Эти ключи могут быть переопределены в файле functions.php текущей темы WordPress для случаев, когда вы уже установили цветовые настройки для своих терминов по-своему, используйте следующие хуки:
- get_woof_sd_term_color_key – хук для хранения данных цвета терминов таксономии
add_filter('get_woof_sd_term_color', function ($term_id) { $meta_key = '__YOUR_OWN_KEY__'; $color = get_term_meta($term_id, $meta_key, true);//you can use your own code to get term color using its $term_id return $color ? $color : 'inherit'; }); - get_woof_sd_term_color_image_key– хук для хранения данных изображения терминов таксономии
add_filter('get_woof_sd_term_color_image', function ($term_id) { $meta_key = '__YOUR_OWN_KEY__'; $img = get_term_meta($term_id, $meta_key, true);//you can use your own code to get term color using its $term_id return $img ? $img : '__YOU_CAN_PLACE_HERE_YOUR_DEFAULT_IMAGE_LINK__'; });
Пользовательские элементы только для разработчиков
WOOF SD позволяет разработчикам создавать свои собственные пользовательские элементы, все, что необходимо, это хороший CSS+HTML код. Вот один пример: https://codepen.io/quinlo/pen/ReMRXz – этого достаточно для создания фильтрующего элемента, вы можете увидеть его на демо-сайте -> 'Теги товаров‘
На изображении ниже вы можете увидеть, как добавить такой элемент в систему:
- в текущей теме WordPress (лучше использовать дочернюю тему) создайте папку ‘woof’
- в папке ‘woof‘ создайте папку ‘ext‘
- in folder ‘ext‘ create folder ‘smart_designer‘
- in folder ‘smart_designer‘ создайте папку elements
- in folder ‘elements‘ создайте папку с нужным вам именем, используйте подчеркивание при необходимости
- папка пользовательского типа элемента должна содержать следующие файлы:
- css/styles.css – весь CSS-код элемента
- js/ie.js – ваш JS-класс, наследует IE, просто скопируйте и вставьте:
'use strict'; import {IE, Helper} from '../../../import.js';//created automatically //This class is for constructor on backend //!!Rename class and put its name into file data.php field js_class export default class Boxtags extends IE { draw() { super.draw(); Helper.ajax(null, {}, template => { let terms = this.visor.sd.demo_taxonomies_terms; let block = this.assemble_terms(terms, template); this.container.insertAdjacentHTML('afterbegin', block); if (this.container.querySelectorAll('input')) { this.container.querySelectorAll('input')[0].setAttribute('checked', true);//for visual test } this.container.className = `woof_list_${this.template_folder}_sd_${this.template_num}`; this.wrapper.appendChild(this.container); }, false, this.template_url); } }Переименуйте ваш JS-класс (вместо Boxtags), это важно и используется в файле data.php
- templates/tpl.php – может также содержать больше файлов при необходимости, назовите их tpl-1.php, tpl-2.php и т. д. … Все файлы шаблонов должны быть объявлены в файле data.php.
- data.php – здесь находится массив опций, ключи которого используются в файле css/styles.css а также в шаблонах
<?php if (!defined('ABSPATH')) die('No direct access allowed'); //View is managed by the Data! return [ 'title' => 'Box tags', //!! 'prefix' => 'boxtags_', //!!unique prefix for css vars 'js_class' => 'Boxtags', //!!important, class name from ie.js 'templates' => [ 0 => [ 'title' => esc_html__('Template #1', 'woocommerce-products-filter'), 'use_subterms' => 0//will subterms display or only parent terms depending of the current taxonomy ] ], 'template' => 0, 'demo_taxonomies' => [ 0 => esc_html__('Example terms by real taxonomy', 'woocommerce-products-filter') ], 'selected_demo_taxonomy' => 0, //demo data for visor 'sections' => [ [ 'title' => esc_html__('Terms', 'woocommerce-products-filter'), 'table' => [ 'header' => [ [ 'value' => esc_html__('Options', 'woocommerce-products-filter'), 'width' => '50%', 'action' => 'save_custom_element_option' ], [ 'value' => esc_html__('Description', 'woocommerce-products-filter'), 'width' => '50%', ], ], 'rows' => [ 'padding_vertical' => [ ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')] ], 'padding_side' => [ ['value' => ['element' => 'ranger', 'value' => 12, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Padding horizontal', 'woocommerce-products-filter')] ], 'font_family' => [ ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''], ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#'] ], 'font_size' => [ ['value' => ['element' => 'ranger', 'value' => 13, 'min' => 8, 'max' => 24], 'measure' => 'px'], ['value' => esc_html__('Text font size', 'woocommerce-products-filter')] ], 'font_weight' => [ ['value' => ['element' => 'select', 'value' => 400, 'options' => [ '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800' ], 'conditions' => []]], ['value' => 'Text font weight'], //cell ], 'color' => [ ['value' => ['element' => 'color', 'value' => '#adadad']], ['value' => esc_html__('Text color', 'woocommerce-products-filter')] ], 'margin_right' => [ ['value' => ['element' => 'ranger', 'value' => 5, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Margin right', 'woocommerce-products-filter')] ], 'margin_bottom' => [ ['value' => ['element' => 'ranger', 'value' => 5, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Margin bottom', 'woocommerce-products-filter')] ], 'bg_color_r' => [ ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Background color red channel', 'woocommerce-products-filter')] ], 'bg_color_g' => [ ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Background color green channel', 'woocommerce-products-filter')] ], 'bg_color_b' => [ ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Background color blue channel', 'woocommerce-products-filter')] ], 'bg_color_op' => [ ['value' => ['element' => 'ranger', 'value' => 9, 'min' => 0, 'max' => 10], 'measure' => ''], ['value' => esc_html__('Background color opacity', 'woocommerce-products-filter')] ], 'bg_image' => [ ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell ], 'border_width' => [ ['value' => ['element' => 'ranger', 'value' => 2, 'min' => 0, 'max' => 10], 'measure' => 'px'], ['value' => esc_html__('Border width', 'woocommerce-products-filter')] ], 'border_style' => [ ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [ 'dotted' => 'dotted', 'dashed' => 'dashed', 'solid' => 'solid', 'double' => 'double', 'groove' => 'groove', 'ridge' => 'ridge', 'inset' => 'inset', 'outset' => 'outset', 'none' => 'none', 'hidden' => 'hidden' ]]], ['value' => 'Border style'], ], 'border_radius' => [ ['value' => ['element' => 'ranger', 'value' => 25, 'min' => 0, 'max' => 50], 'measure' => 'px'], ['value' => esc_html__('Border radius', 'woocommerce-products-filter')] ], 'border_color_r' => [ ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Border color red channel', 'woocommerce-products-filter')] ], 'border_color_g' => [ ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Border color green channel', 'woocommerce-products-filter')] ], 'border_color_b' => [ ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Border color blue channel', 'woocommerce-products-filter')] ], 'border_color_op' => [ ['value' => ['element' => 'ranger', 'value' => 3, 'min' => 0, 'max' => 10], 'measure' => ''], ['value' => esc_html__('Border color opacity', 'woocommerce-products-filter')] ], 'checkbox_font_family' => [ ['value' => ['element' => 'text', 'value' => 'Font Awesome 5 Free'], 'measure' => '', 'before' => '"', 'after' => '"'], ['value' => esc_html__('Checkbox font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#'] ], 'checkbox_font_size' => [ ['value' => ['element' => 'ranger', 'value' => 12, 'min' => 8, 'max' => 72], 'measure' => 'px'], ['value' => esc_html__('Checkbox font size', 'woocommerce-products-filter')] ], 'checkbox_content' => [ ['value' => ['element' => 'text', 'value' => "\f067"], 'measure' => '', 'before' => '"', 'after' => '"'], ['value' => esc_html__('Checkbox content', 'woocommerce-products-filter'), 'help' => '#'] ], 'checkbox_content_selected' => [ ['value' => ['element' => 'text', 'value' => "\f00c"], 'measure' => '', 'before' => '"', 'after' => '"'], ['value' => esc_html__('Checkbox content selected', 'woocommerce-products-filter'), 'help' => '#'] ], 'transition' => [ ['value' => ['element' => 'ranger', 'value' => 200, 'min' => 0, 'max' => 1000], 'measure' => 's'], //cell ['value' => esc_html__('Transition (ms)', 'woocommerce-products-filter')] //cell ], ] ] ], [ 'title' => esc_html__('Hovered(Selected) Terms', 'woocommerce-products-filter'), 'table' => [ 'header' => [ [ 'value' => esc_html__('Options', 'woocommerce-products-filter'), 'width' => '50%', 'action' => 'save_custom_element_option' ], [ 'value' => esc_html__('Description', 'woocommerce-products-filter'), 'width' => '50%' ], ], 'rows' => [ 'selected_color' => [ ['value' => ['element' => 'color', 'value' => '#ffffff']], ['value' => esc_html__('Text color', 'woocommerce-products-filter')] ], 'selected_bg_color_r' => [ ['value' => ['element' => 'ranger', 'value' => 18, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Background color red channel', 'woocommerce-products-filter')] ], 'selected_bg_color_g' => [ ['value' => ['element' => 'ranger', 'value' => 187, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Background color green channel', 'woocommerce-products-filter')] ], 'selected_bg_color_b' => [ ['value' => ['element' => 'ranger', 'value' => 212, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Background color blue channel', 'woocommerce-products-filter')] ], 'selected_bg_color_op' => [ ['value' => ['element' => 'ranger', 'value' => 10, 'min' => 0, 'max' => 10], 'measure' => ''], ['value' => esc_html__('Background color opacity', 'woocommerce-products-filter')] ], 'selected_bg_image' => [ ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell ], 'selected_border_color_r' => [ ['value' => ['element' => 'ranger', 'value' => 27, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Border color red channel', 'woocommerce-products-filter')] ], 'selected_border_color_g' => [ ['value' => ['element' => 'ranger', 'value' => 219, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Border color green channel', 'woocommerce-products-filter')] ], 'selected_border_color_b' => [ ['value' => ['element' => 'ranger', 'value' => 248, 'min' => 0, 'max' => 255], 'measure' => ''], ['value' => esc_html__('Border color blue channel', 'woocommerce-products-filter')] ], 'selected_border_color_op' => [ ['value' => ['element' => 'ranger', 'value' => 10, 'min' => 0, 'max' => 10], 'measure' => ''], ['value' => esc_html__('Border color opacity', 'woocommerce-products-filter')] ], 'selected_border_width' => [ ['value' => ['element' => 'ranger', 'value' => 2, 'min' => 0, 'max' => 10], 'measure' => 'px'], ['value' => esc_html__('Border width', 'woocommerce-products-filter')] ], 'selected_border_style' => [ ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [ 'dotted' => 'dotted', 'dashed' => 'dashed', 'solid' => 'solid', 'double' => 'double', 'groove' => 'groove', 'ridge' => 'ridge', 'inset' => 'inset', 'outset' => 'outset', 'none' => 'none', 'hidden' => 'hidden' ]]], ['value' => 'Border style'], ], 'selected_scale' => [ ['value' => ['element' => 'ranger', 'value' => 100, 'min' => 50, 'max' => 200], 'measure' => ''], //cell ['value' => esc_html__('Scale', 'woocommerce-products-filter')] //cell ], ] ] ], [ 'title' => esc_html__('Counter', 'woocommerce-products-filter'), 'table' => [ 'header' => [ [ 'value' => esc_html__('Options', 'woocommerce-products-filter'), 'width' => '50%', 'action' => 'save_custom_element_option' ], [ 'value' => esc_html__('Description', 'woocommerce-products-filter'), 'width' => '50%', ] ], 'rows' => [ 'counter_show' => [ ['value' => ['element' => 'switcher', 'value' => 'inline-flex', 'yes' => 'inline-flex', 'no' => 'none']], //cell ['value' => esc_html__('Show counter', 'woocommerce-products-filter')] //cell ], 'counter_width' => [ ['value' => ['element' => 'ranger', 'value' => 14, 'min' => 10, 'max' => 72, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => 'px'], ['value' => esc_html__('Min width', 'woocommerce-products-filter')] ], 'counter_height' => [ ['value' => ['element' => 'ranger', 'value' => 14, 'min' => 10, 'max' => 72, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => 'px'], ['value' => esc_html__('Min height', 'woocommerce-products-filter')] ], 'counter_top' => [ ['value' => ['element' => 'ranger', 'value' => -2, 'min' => -100, 'max' => 100, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => 'px'], //cell ['value' => esc_html__('Top', 'woocommerce-products-filter')] //cell ], 'counter_right' => [ ['value' => ['element' => 'ranger', 'value' => -3, 'min' => -100, 'max' => 100, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => 'px'], ['value' => esc_html__('Right', 'woocommerce-products-filter')] ], 'counter_font_size' => [ ['value' => ['element' => 'ranger', 'value' => 9, 'min' => 8, 'max' => 48, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => 'px'], //cell ['value' => esc_html__('Text font size', 'woocommerce-products-filter')] //cell ], 'counter_color' => [ ['value' => ['element' => 'color', 'value' => '#777777', 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]]], //cell ['value' => esc_html__('Text color', 'woocommerce-products-filter')] //cell ], 'counter_font_family' => [ ['value' => ['element' => 'text', 'value' => 'consolas', 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => ''], //cell ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter')], //cell ], 'counter_font_weight' => [ ['value' => ['element' => 'select', 'value' => 500, 'options' => [ '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800' ], 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]]], ['value' => 'Text font weight'], //cell ], 'counter_side_padding' => [ ['value' => ['element' => 'ranger', 'value' => 0, 'min' => 0, 'max' => 48, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => 'px'], //cell ['value' => esc_html__('Side padding', 'woocommerce-products-filter')] //cell ], 'counter_bg_color' => [ ['value' => ['element' => 'color', 'value' => '#ffffff', 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]]], //cell ['value' => esc_html__('Background color', 'woocommerce-products-filter')] //cell ], 'counter_bg_image' => [ ['value' => ['element' => 'image', 'value' => '', 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'before' => 'url(', 'after' => ')'], //cell ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell ], 'counter_border_width' => [ ['value' => ['element' => 'ranger', 'value' => 1, 'min' => 0, 'max' => 10, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => 'px'], //cell ['value' => esc_html__('Border width', 'woocommerce-products-filter')] //cell ], 'counter_border_radius' => [ ['value' => ['element' => 'ranger', 'value' => 50, 'min' => 0, 'max' => 50, 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]], 'measure' => '%'], //cell ['value' => esc_html__('Border radius', 'woocommerce-products-filter')] //cell ], 'counter_border_color' => [ ['value' => ['element' => 'color', 'value' => '#adadad', 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]]], //cell ['value' => esc_html__('Border color', 'woocommerce-products-filter')] //cell ], 'counter_border_style' => [ ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [ 'dotted' => 'dotted', 'dashed' => 'dashed', 'solid' => 'solid', 'double' => 'double', 'groove' => 'groove', 'ridge' => 'ridge', 'inset' => 'inset', 'outset' => 'outset', 'none' => 'none', 'hidden' => 'hidden' ], 'conditions' => [ 'hide' => [ 'counter_show' => 'none'//if this selected element will be hidden ]]]], ['value' => 'Border style'], //cell ], ] ] ], ] ]; - В файле data.php обратите внимание на поля: title – название вашего элемента в верхней панели SD, prefix – уникальный префикс для CSS-переменных, js_class – важно, имя класса из например, js
- Далее в файле tpl.php добавьте ваш HTML-код:
<?php $custom_postfix = 'boxtags'; ?> <div class="woof-sd-ie woof-sd-ie-<?php echo $custom_postfix ?> woof-sd-ie-<?php echo $custom_postfix ?>___TERM_ID__ __CLASS__"> <input type="checkbox" hidden id="__ID__" data-tax="__DATA_TAX__" name="__SLUG__" data-term-id="__TERM_ID__" value="__VALUE__" __CHECKED__ __DISABLED__ onchange="woof_checkbox_process_data(this, this.checked)" hidden /> <label for="__ID__"> <span>__CONTENT__ <span class="woof-sd-ie-count">__COUNT__</span></span> </label> <input type="hidden" value="__TERM_NAME__" data-anchor="woof_n___DATA_ANCHOR__" /> </div>Не забудьте изменить переменную $custom_postfix на имя папки вашего элемента (тот же префикс поля из файла data.php).
- Шаблон имеет специальные строки, которые заменяются "на лету", когда WOOF SD выводит теги на фронте:
- __TERM_ID__ – ID текущего выводимого термина
- __CLASS__ – системный CSS-класс
- __DATA_TAX__ – имя текущей таксономии термина
- __SLUG__ – слаг текущего термина
- __ID__ – автоматически сгенерированный ID для метки
- __VALUE__ – выбранное значение здесь
- __CHECKED__ – должно быть в checkbox или radio, чтобы сделать его выбранным или нет
- __DISABLED__ – должно быть в checkbox или radio, чтобы сделать его неактивным или нет
- __CONTENT__ – название термина для отображения клиентам
- __COUNT__ – количество терминов
- __RESET_RADIO_BTN__ – используется только для radio, чтобы сбросить выбранную кнопку radio на фронте
- __DATA_ANCHOR__ – всегда требуется для скрытого ввода
- __TERM_NAME__ – название текущего термина
- Используйте обертку div, всегда такую же, как в примере выше, и внутри ваш HTML-код. Оба поля, как checkbox или radio + скрытые поля, всегда должны быть!
- Шаблон имеет специальные строки, которые заменяются "на лету", когда WOOF SD выводит теги на фронте:
-
Поля:
- шаблоны – добавляйте макеты шаблонов того же элемента или его поведение (radio или checkbox).
- шаблон – номер шаблона, выбранного по умолчанию
- demo_taxonomies – используйте как есть в коде выше, нужно для отображения таксономий магазина в конструкторе
- секции – здесь в строках размещаются опции, они имеют свои уникальные ключи (относительно файла data.php) и они бывают разных типов:
- ranger – создает элемент управления диапазоном со слайдером от min to max
'padding_vertical' => [ ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')] ],Обратите внимание на поле ‘measure‘, здесь должны быть адекватные единицы измерения
- text – текстовое поле
'font_family' => [ ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''], ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#'] ], - выпадающий список – выпадающий список для выбора любых предопределенных значений
'font_weight' => [ ['value' => ['element' => 'select', 'value' => 400, 'options' => [ '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800' ], 'conditions' => []]], ['value' => 'Text font weight'], //cell ], - color – генерирует поле ввода цвета
'color' => [ ['value' => ['element' => 'color', 'value' => '#adadad']], ['value' => esc_html__('Text color', 'woocommerce-products-filter')] ], - image – генерирует текстовое поле ввода и кнопку рядом для выбора изображения из медиагалереи сайта
'bg_image' => [ ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell ], - Во всех элементах значение поля имеет значение по умолчанию, которое должно совпадать со значением в styles.css
- все ключи внутри CSS-файла должны использоваться с префиксом ‘–woof-sd-ie-‘ + префикс, взятый из файла data.php -> поле ‘prefix‘!
- ranger – создает элемент управления диапазоном со слайдером от min to max
- Файл woof/ext/smart_designer/import.js создается системой автоматически и не должен изменяться вручную!!
- Кратко, вы можете скачать пример пользовательского элемента и воссоздать его, используя свой собственный CSS и HTML