Smart Designer
Це розширення дозволяє створювати користувацькі елементи фільтра
Демо-сайт: https://demo-sd.products-filter.com/
За замовчуванням WOOF SD має 4 базових елементи, готові до налаштування:
- Прапорець (за замовчуванням)
- Радіо
- Перемикач
- Колір
Більше користувацьких елементів ви можете знайти в WOOF SD Gallery. Якщо ви є ідея про ваш користувацький елемент напишіть нам про підтримку.
Верхня панель
- Назад – повернутися до списку елементів
- Пресети – адміністратор може зберегти поточний набір опцій, а потім застосувати їх до інших елементів того ж типу
- Випадаючий список з усіма можливими типами елементів у системі. ‘Теги блоків‘ на екрані вище — це користувацький елемент, розміщений у дочірній темі WordPress. Як створити подібні, читайте нижче.
- Випадаючий список з усіма реальними таксономіями WooCommerce магазину, лише для візуальної допомоги при побудові елемента фільтра. Також використовується для типу елемента 'Колір' для прикріплення кольорів та зображень до термінів обраної за цим випадаючим списком таксономії (читайте про Color нижче)
- Скинути – якщо натиснути, скидає всі власні параметри до стандартних для поточного елемента фільтра
Створити та застосувати
- У вкладці ‘Розширення‘ активувати розширення ‘Smart Designer‘ (якщо воно не активовано) і натисніть кнопку Зберегти
- Після перезавантаження сторінки перейдіть до вкладки ‘Smart Designer‘
- Натисніть кнопку 'Створити елемент‘
- Встановіть назву нового елемента (клацніть на його поле)
- Натисніть на ‘Редагувати‘ кнопка для введення опцій нового елемента
- Коли ви зайдете в опції елемента, ви повинні вибрати його тип: Checkbox, Radio, Switcher, Color або інший, залежно від встановлених елементів у вашій WordPress темі (типи користувацьких елементів, описані нижче). Кожен тип має власний набір опцій, який не перетинається з іншими типами елементів!
- Всі базові елементи, крім перемикачів, також мають шаблони макетів (список, плитка або радіо, чекбокс), виберіть той, який відповідає вашим потребам.
- Для вашої зручності ви можете вибрати таксономію, для якої ви створюєте поточний елемент
- Експериментуйте з опціями, використовуючи їхні описи, щоб створити бажані вам кастомізації
- Усі зміни зберігаються автоматично через ajax
- Коли ви вирішите, що цього достатньо, ви можете натиснути на ‘Пресети‘ кнопка та збережіть там свої кастомні опції для майбутніх елементів (щоб не починати з нуля з новим елементом)
- Останній крок – перейти на вкладку «Структура‘ і прив'язати до таксономії тільки що створений тип елемента. Всі елементи, створені за допомогою Smart Designer, мають префікс заголовка ‘SD:‘
- Натисніть Зберегти кнопка нижче
- Перейдіть на головну сторінку магазину та насолоджуйтесь 🙂
Поради щодо налаштувань
- Якщо ви не знаєте, яку родину шрифтів застосувати для тексту, використовуйте слово ‘успадкувати‘, це застосує поточну сімейство шрифтів теми WordPress. І пам'ятайте, що якщо ви застосовуєте будь-яке сімейство шрифтів, воно повинно підтримуватися вашою поточною темою WordPress, і немає гарантії, що цей шрифт включений до панелі керування сайту wp-admin, тому візуальні результати не на 100% будуть такими ж, як на бекенді, так і на фронтенді.
- Якщо вам не потрібен колір для фонових зображень ваших прозорих PNG, використовуйте слово ‘прозорий‘ замість коду кольору hex
- Різні шаблони зображень можна знайти, скориставшись Google за запитом ‘фонові візерунки зображення‘
- Якщо ви шукаєте красиві кольори, ви можете знайти їх тут, наприклад https://codebeautify.org/hex-to-pantone-converter
- Конвертер коду кольору https://rgbacolorpicker.com/hex-to-rgba
Пресети
Пресети дозволяють зберігати ваші опції для застосування до подібних елементів, що скорочує час виробництва. Ви можете зробити наступне:
- Створювати пресети
- Застосувати пресети до нових елементів того ж типу (чекбокс, радіо, колір, перемикач, будь-який користувацький тип) – просто натисніть на його назву. Наприклад, передустановка, створена для радіо, невидима для чекбокса і навпаки.
- Поділіться своїм пресетом як текстовою інформацією з іншою особою (розробники, колеги, сайти тощо…). Натисніть на кнопку-око.
- Імпортуйте код пресету, яким з вами хтось поділився. Натисніть на кнопку редагування. Вставте код. Натисніть кнопку ‘Імпорт‘.
Колір
Кольоровий елемент – це спеціальний елемент, який має власну функціональність – призначення кольору та зображень для кожного терміну вибраної таксономії (бачити спадне меню перед кнопкою «Скинути») використовуючи спливаюче вікно
Дані зберігаються у спеціальних мета-ключах термінів:
- 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‘ створити папку ‘розш‘
- у папці ‘розш‘ створити папку ‘smart_designer‘
- у папці ‘smart_designer‘ створити папку елементів
- у папці ‘елементи‘ створіть папку з бажаною назвою, використовуйте підкреслення за необхідності
- папка користувацького типу елемента повинна мати наступні файли:
- 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 зверніть увагу на поля: заголовок – назва вашого елемента у верхній панелі SD, префікс – унікальний префікс для 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 на назву папки вашого елемента (однакове поле префікса з файлу data.php).
- Шаблон має спеціальні рядки, які замінюються на льоту, коли WOOF SD друкує теги на фронтенді:
- __TERM_ID__ – ID поточного відображуваного терміну
- __CLASS__ – системний CSS клас
- __DATA_TAX__ – ім'я поточного терміну таксономії
- __SLUG__ – поточний термін slug
- __ID__ – автоматично згенерований ID для мітки
- __VALUE__ – вибране значення тут
- __CHECKED__ – має бути у вигляді чекбокса або радіокнопки, щоб його можна було вибрати чи ні
- __DISABLED__ – має бути у вигляді прапорця або радіокнопки, щоб зробити його вимкненим або ні
- __CONTENT__ – заголовок терміну для відображення клієнтам
- __COUNT__ – кількість термінів
- __RESET_RADIO_BTN__ – використовується для радіо, лише для скидання вибраного радіокнопки на фронтенді
- __DATA_ANCHOR__ – завжди вимагається для прихованого введення
- __TERM_NAME__ – поточна назва терміна
- Використовуйте обгортку div завжди так само, як у прикладі вище, і всередині вашого HTML-коду. Обидва поля введення, як чекбокс або радіо + приховані поля введення завжди повинні бути!
- Шаблон має спеціальні рядки, які замінюються на льоту, коли WOOF SD друкує теги на фронтенді:
-
Поля:
- шаблони – додайте шаблони макетів того ж елемента або його поведінку (радіокнопка або чекбокс).
- шаблон – номер шаблону, вибраного за замовчуванням
- demo_taxonomies – використовувати як є в коді вище, потрібно відобразити таксономії магазину в конструкторі
- секції – тут у рядках розміщені опції, вони мають власні унікальні ключі (відносно файлу data.php) і вони бувають різних типів:
- рейнджер – дозволяє створити діапазон із повзунком діапазону від min до макс
'padding_vertical' => [ ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')] ],Зверніть увагу на поле ‘виміряти‘, мають бути адекватні одиниці вимірювання
- 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' => [ ['value' => ['element' => 'color', 'value' => '#adadad']], ['value' => esc_html__('Text color', 'woocommerce-products-filter')] ], - зображення – генерує текстове поле та кнопку поруч для вибору зображення з медіатеки сайту
'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 -> поле ‘префікс‘!
- рейнджер – дозволяє створити діапазон із повзунком діапазону від min до макс
- Файл woof/ext/smart_designer/import.js створюється автоматично системою і не повинен змінюватися вручну!!
- Коротко, ви можете завантажити приклад кастомного елемента та відтворіть його, використовуючи власний CSS та HTML