Smart Designer
Это расширение позволяет создавать пользовательские элементы фильтра
Демо-сайт: https://demo-sd.products-filter.com/
По умолчанию WOOF SD имеет 4 базовых элемента, готовых для настройки:
- Checkbox (по умолчанию)
- Radio
- Switcher
- Color
Больше пользовательских элементов можно найти в WOOF SD Gallery. Если у вас есть идея для своего элемента, напишите нам в поддержку.
Верхняя панель
- Back — возврат к списку элементов
- Presets — администратор может сохранить текущий набор опций и затем применить их к другим элементам того же типа
- Drop-down со всеми возможными типами элементов в системе. ‘Box tags‘ на скриншоте выше — пользовательский элемент, размещённый в дочерней теме WordPress. Как создавать такие элементы — читайте ниже.
- Drop-down со всеми реальными таксономиями woocommerce магазина, только для визуального удобства при создании элемента фильтра. Также используется для типа элемента ‘Color’, чтобы привязать цвета и изображения к терминам выбранной в этом списке таксономии (о Color читайте ниже)
- Reset — при нажатии сбрасывает все пользовательские опции к значениям по умолчанию для текущего элемента фильтра
Создание и применение
- На вкладке ‘Extensions‘ активируйте расширение ‘Smart Designer‘ (если оно не активировано) и нажмите кнопку Save
- После перезагрузки страницы перейдите на вкладку ‘Smart Designer‘
- Нажмите кнопку ‘Create Element‘
- Задайте название нового элемента (нажмите на его поле)
- Нажмите кнопку ‘Edit‘, чтобы перейти к настройкам нового элемента
- Когда вы перейдёте в настройки элемента, нужно выбрать его тип: Checkbox, Radio, Switcher, Color или другой, в зависимости от установленных элементов в теме WordPress вашего сайта (пользовательские типы элементов описаны ниже). У каждого типа свой набор опций, не пересекающийся с другими типами элементов!
- У всех базовых элементов, кроме switcher, также есть шаблоны разметки (list, tile или radio, checkbox), выберите подходящий для ваших нужд.
- Для удобства можно выбрать таксономию, для которой создаётся текущий элемент
- Поэкспериментируйте с опциями, используя их описания, чтобы создать нужные настройки
- Все изменения сохраняются автоматически через ajax
- Когда настройки готовы, можно нажать кнопку ‘Presets‘ и сохранить там свои пользовательские опции для будущих элементов (чтобы не начинать с нуля для нового элемента)
- Последний шаг — перейти на вкладку ‘Structure‘ и привязать к таксономии только что созданный тип элемента. У всех элементов, созданных в Smart Designer, в названии есть префикс ‘SD:‘
- Нажмите кнопку Save внизу
- Перейдите на фронтенд магазина и наслаждайтесь 🙂
Советы по настройке
- Если вы не знаете, какое семейство шрифтов применить к тексту, используйте слово ‘inherit‘ — это применит шрифт текущей темы WordPress. И помните: если вы применяете конкретное семейство шрифтов, оно должно поддерживаться текущей темой WordPress, и нет гарантии, что этот шрифт подключён на стороне wp-admin, поэтому визуальный результат на 100% не будет совпадать на бэкенде и на фронтенде.
- Если цвет не нужен для прозрачных png-фоновых изображений, используйте слово ‘transparent‘ вместо hex-кода цвета
- Различные паттерны изображений можно найти в Google по запросу ‘background patterns images‘
- Если ищете красивые цвета, можно найти их, например, здесь: https://codebeautify.org/hex-to-pantone-converter
- Конвертер цветовых кодов https://rgbacolorpicker.com/hex-to-rgba
Presets
Presets позволяют сохранить ваши опции для применения к похожим элементам, что сокращает время разработки. Можно делать следующее:
- Создавать presets
- Применять presets к новым элементам того же типа (checkbox, radio, color, switcher, любой пользовательский тип) — просто нажмите на его название. Например, preset, созданный для radio, невидим для checkbox и наоборот.
- Поделиться своим preset в виде текста с другим человеком (разработчики, коллеги, сайты и т.д. …). Нажмите на кнопку с глазом.
- Импортировать код preset, которым с вами поделились. Нажмите кнопку редактирования. Вставьте код. Нажмите кнопку ‘Import‘.
Color
Элемент Color — это особый элемент со своей собственной функциональностью — присвоение цветов и изображений каждому термину выбранной таксономии (см. выпадающий список перед кнопкой ‘Reset’) через всплывающее окно
Данные хранятся в специальных ключах мета-данных терминов:
- 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 — этого достаточно для создания элемента фильтра, его можно увидеть на демо-сайте -> ‘Products Tags‘
На изображении ниже видно, как добавить такой элемент в систему:
- в текущей теме WordPress (лучше использовать дочернюю тему) создайте папку ‘woof’
- в папке ‘woof‘ создайте папку ‘ext‘
- в папке ‘ext‘ создайте папку ‘smart_designer‘
- в папке ‘smart_designer‘ создайте папку elements
- в папке ‘elements‘ создайте папку с любым нужным именем, при необходимости используйте подчёркивание
- папка пользовательского типа элемента должна содержать следующие файлы:
- css/styles.css — весь css-код элемента
- js/ie.js — ваш JS-класс, наследующий IE, просто скопируйте:
Переименуйте ваш JS-класс (вместо Boxtags), это важно и используется в файле data.php'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); } } - 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 — важно, имя класса из ie.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 на название папки вашего элемента (тот же prefix из файла data.php).
- В шаблоне есть специальные строки, которые заменяются на лету, когда WOOF SD выводит теги на фронтенде:
- __TERM_ID__ — ID текущего выводимого термина
- __CLASS__ — системный css-класс
- __DATA_TAX__ — название таксономии текущего термина
- __SLUG__ — slug текущего термина
- __ID__ — автоматически сгенерированный id для label
- __VALUE__ — выбранное значение здесь
- __CHECKED__ — должно быть в checkbox или radio, чтобы сделать его выбранным или нет
- __DISABLED__ — должно быть в checkbox или radio, чтобы сделать его отключённым или нет
- __CONTENT__ — название термина для отображения покупателям
- __COUNT__ — количество терминов
- __RESET_RADIO_BTN__ — используется только для radio для сброса выбранной радиокнопки на фронтенде
- __DATA_ANCHOR__ — всегда обязателен для скрытого input
- __TERM_NAME__ — название текущего термина
- Используйте div-обёртку всегда так же, как в примере выше, и внутри — ваш HTML-код. Оба input, как checkbox или radio + скрытые input — всегда должны присутствовать!
- В шаблоне есть специальные строки, которые заменяются на лету, когда WOOF SD выводит теги на фронтенде:
-
Поля:
- templates — добавьте шаблоны разметки того же элемента или его поведение (radio или checkbox).
- template — номер шаблона, выбранного по умолчанию
- demo_taxonomies — используйте как в примере выше, нужно для отображения таксономий магазина в конструкторе
- sections — здесь по строкам размещены опции, у них свои уникальные ключи (относительно файла data.php) и они разных типов:
- ranger — позволяет создать диапазон со слайдером от min до 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' => '#'] ], - select — выпадающий список для выбора одного из предопределённых значений
'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 ], - У всех полей значение value имеет значение по умолчанию, которое должно совпадать со значением в styles.css
- все ключи внутри css-файла должны использоваться с префиксом ‘–woof-sd-ie-‘ + префикс, взятый из файла data.php -> поле ‘prefix‘!
- ranger — позволяет создать диапазон со слайдером от min до max
- Файл woof/ext/smart_designer/import.js создаётся системой автоматически и не должен изменяться вручную!!
- Кратко: можно скачать пример пользовательского элемента и пересоздать его, используя свой CSS и HTML