Smart Designer

Ta wtyczka pozwala tworzyć niestandardowe elementy filtrujące

Strona demonstracyjna: https://demo-sd.products-filter.com/

Domyślnie WOOF SD ma 4 podstawowe elementy gotowe do dostosowania:

Pole wyboru (domyślnie)
Radio
Przełącznik
Kolor

Więcej niestandardowych elementów można znaleźć w WOOF SD Gallery. Jeśli masz pomysł o swoim własnym elemencie napisz do nas na wsparcie.

Panel górny

Wróć – powrót do listy elementów
Presety – administrator może zapisać bieżący zestaw opcji, a następnie zastosować je do innych elementów tego samego typu
Rozwijany ze wszystkimi możliwymi typami elementów w systemie. „Tagów pudełek‘ na powyższym ekranie to niestandardowy element umieszczony w motywie potomnym WordPress. Jak je stworzyć, przeczytaj poniżej.
Lista rozwijana ze wszystkimi rzeczywistymi taksonomiami woocommerce sklepu, tylko dla wizualnej pomocy podczas budowania elementu filtrującego. Używane również dla elementu typu 'Kolor' do przypisywania kolorów i obrazów do terminów wybranej przez tę listę rozwijaną taksonomii (przeczytaj o Kolorze poniżej)
Resetuj – kliknięcie powoduje reset wszystkich niestandardowych opcji do domyślnych dla bieżącego elementu filtrującego

Utwórz i zastosuj

W zakładce ‘Rozszerzenia„ aktywuj wtyczkę „Smart Designer‘ (jeśli nie jest aktywowany) i naciśnij przycisk Zapisz
Po przeładowaniu strony przejdź do zakładki „Smart Designer‘
Kliknij na przycisk ‘Utwórz Element‘
Ustaw nowy tytuł elementu (kliknij na jego pole)
Kliknij na ‘Edytujprzycisk ‘, aby wprowadzić opcje nowego elementu
Po wejściu w opcje elementu należy wybrać jego typ: Checkbox, Radio, Switcher, Color lub inny, w zależności od zainstalowanych elementów w motywie WordPress Twojej witryny (niestandardowe typy elementów opisane poniżej). Każdy typ ma swój własny zestaw opcji, które nie pokrywają się z innymi typami elementów!
Wszystkie podstawowe elementy oprócz przełączników posiadają również szablony układu (lista, płytka lub radio, pole wyboru), wybierz jeden, który odpowiada Twoim potrzebom.
Dla Twojej wygody możesz wybrać taksonomię, dla której tworzysz bieżący element
Baw się opcjami, używając ich opisów, aby stworzyć pożądane dostosowania
Wszystkie zmiany zapisywane automatycznie przez ajax
Kiedy uznasz, że wystarczy, możesz kliknąć ‘Presetyprzycisk i zapisz tam swoje własne opcje dla przyszłych elementów (aby nie zaczynać od zera z nowym elementem)
Ostatnim krokiem jest przejście do zakładki 'Struktura‘ i dołącz do właśnie utworzonego taksonomii typu elementu. Wszystkie elementy utworzone za pomocą Smart Designer mają prefiks tytułu ‘SD:‘
Naciśnij Zapisz przycisk poniżej
Przejdź do frontu sklepu i ciesz się 🙂

Wskazówki dotyczące dostosowań

Jeśli nie wiesz, jaką rodzinę czcionek zastosować do tekstu, użyj słowa „dziedzicz', spowoduje to zastosowanie rodziny czcionek bieżącego motywu WordPress. I pamiętaj, że jeśli zastosujesz jakąkolwiek rodzinę czcionek, powinna ona być obsługiwana przez Twój bieżący motyw WordPress i nie ma gwarancji, że ta czcionka jest zawarta w panelu administracyjnym witryny, więc wizualne wyniki nie będą w 100% takie same jak w backendzie, tak jak na froncie.
Jeśli nie potrzebujesz koloru dla swoich przezroczystych obrazów PNG, użyj słowa 'przezroczysty„ zamiast kodu szesnastkowego koloru
Różne wzory obrazów, które można znaleźć za pomocą wyszukiwania Google za pomocą frazy zapytania „obrazy wzorów tła‘
Jeśli szukasz pięknych kolorów, znajdziesz je tutaj na przykład https://codebeautify.org/hex-to-pantone-converter
Konwerter kodów kolorów https://rgbacolorpicker.com/hex-to-rgba

Presety

Presety pozwalają zapisać Twoje opcje do zastosowania w podobnych elementach, co skraca czas produkcji. Możesz zrobić następujące rzeczy:

Twórz presety
Zastosuj presety do nowych elementów tego samego typu (pole wyboru, radio, kolor, przełącznik, dowolny niestandardowy typ) – po prostu kliknij na jego tytuł. Na przykład ustawienie utworzone dla radia jest niewidoczne dla pola wyboru i odwrotnie.
Udostępnij swój preset jako tekstową informację innej osobie (programistów, kolegów, strony internetowe itp. …). Kliknij przycisk oka.
Zaimportuj kod presetu udostępniony przez kogoś. Kliknij przycisk edycji. Wklej kod. Naciśnij przycisk ‘Import‘.

Kolor

Element koloru – to specjalny element, który ma swoją własną funkcjonalność – przypisywanie kolorów i obrazów dla każdego terminu wybranej taksonomii (zobacz listę rozwijaną przed przyciskiem ‘Resetuj’) za pomocą popupu

Dane są przechowywane w specjalnych kluczach meta terminu:

woof_sd_color
woof_sd_color_image

Te klucze można nadpisać w pliku functions.php bieżącego motywu WordPress, jeśli dla terminów masz już ustawione własne opcje kolorów, użyj następujących haków:

get_woof_sd_term_color_key – hook do przechowywania danych kolorów terminów taksonomii

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– hook do przechowywania danych obrazu terminów taksonomii

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__';
});

Niestandardowe elementy tylko dla programistów

WOOF SD pozwala programistom tworzyć własne niestandardowe elementy, wszystko, czego potrzeba, to dobry kod CSS+HTML. Oto jeden przykład: https://codepen.io/quinlo/pen/ReMRXz – to wystarczy do stworzenia elementu filtru, możesz to zobaczyć na strona demonstracyjna -> „Tagi produktów‘

Na poniższym obrazku możesz zobaczyć, jak dodać taki element do systemu:

w bieżącym motywie WordPress (lepiej użyć motywu potomnego) utwórz folder „woof”
w folderze „woof‘ utwórz folder „ext‘
w folderze „ext‘ utwórz folder „smart_designer‘
w folderze „smart_designer‘ utwórz folder elementy
w folderze „elementy‘ utwórz folder o dowolnej nazwie, w razie potrzeby użyj podkreślenia

folder niestandardowego typu elementu musi zawierać następujące pliki:

css/styles.css – cały kod CSS elementu

js/ie.js – Twoja klasa JS, dziedziczy po IE, po prostu skopiuj i wklej:

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

Zmień nazwę swojej klasy JS (zamiast Boxtags), jest ważne i używane w pliku data.php

templates/tpl.php – może mieć również więcej plików, jeśli to konieczne, nazwij je tpl-1.php, tpl-2.php itp. … Wszystkie pliki szablonów muszą być zadeklarowane w pliku data.php.

data.php – tutaj jest tablica opcji, których klucze używane są w pliku css/styles.css oraz szablony

<?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
                    ],
                ]
            ]
        ],
    ]
];

W pliku data.php zwróć uwagę na pola: tytuł – nazwa twojego elementu w górnym panelu SD, prefiks – unikalny prefiks dla zmiennych CSS, js_class – ważne, nazwa klasy z np.js
Następnie w pliku tpl.php dodaj swój kod 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>
```
Nie zapomnij zmienić ich zmiennej $custom_postfix na nazwę folderu Twojego elementu (to samo pole prefiksu z pliku data.php).
- Szablon ma specjalne ciągi znaków, które są zamieniane w locie, gdy WOOF SD wyświetla tagi na froncie:
  - __TERM_ID__ – ID aktualnie wyświetlanego terminu
  - __CLASS__ – systemowa klasa css
  - __DATA_TAX__ – nazwa bieżącej taksonomii terminu
  - __SLUG__ – bieżący slug terminu
  - __ID__ – automatycznie generowany identyfikator dla etykiety
  - __VALUE__ – wybrana wartość tutaj
  - __CHECKED__ – powinno być w formie pola wyboru lub radia, aby można je było zaznaczyć lub nie
  - __DISABLED__ – powinno być w formie pola wyboru lub przycisku radiowego, aby można było je wyłączyć lub nie
  - __CONTENT__ – tytuł terminu do wyświetlenia klientom
  - __COUNT__ – liczba terminów
  - __RESET_RADIO_BTN__ – używane tylko dla radia do resetowania wybranego przycisku radiowego na froncie
  - __DATA_ANCHOR__ – zawsze wymagane dla ukrytego pola
  - __TERM_NAME__ – bieżąca nazwa terminu
- Użyj otoki div zawsze takiej samej jak w powyższym przykładzie, a wewnątrz kodu HTML. Oba pola, jako checkbox lub radio + ukryte pola zawsze muszą być!

Pola:

szablony – dodaj szablony układu tego samego elementu lub jego zachowania (radio lub checkbox).
szablon – domyślnie wybrany szablon
demo_taxonomies – użyj tak jak jest w powyższym kodzie, potrzebne do wyświetlenia taksonomii sklepu w konstruktorze

sekcje – tutaj w wierszach umieszczone są opcje, mają one swoje unikalne klucze (w odniesieniu do danych pliku.php) i są one różnych typów:

ranger – pozwala na stworzenie zakresu z suwakiem zakresu od min do max

'padding_vertical' => [
      ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'],
      ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')]
  ],

Zwróć uwagę na pole „miara”, powinny być odpowiednie jednostki miary

tekst – pole tekstowe

'font_family' => [
    ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''],
    ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
],

wybierz – rozwijany do wyboru dowolnych predefiniowanych wartości

'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
],

kolor – generuje pole koloru

'color' => [
    ['value' => ['element' => 'color', 'value' => '#adadad']],
    ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
],

obraz – generuje pole tekstowe i przycisk obok, aby wybrać obraz z galerii mediów strony

'bg_image' => [
    ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
    ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
],

We wszystkich elementach wartość pola ma domyślną wartość, która musi być taka sama jak w styles.css
wszystkie klucze w pliku css muszą być używane z prefiksem ‘–woof-sd-ie-‘ + prefiks pobrany z pliku data.php -> pole „prefiks'.

Plik woof/ext/smart_designer/import.js jest tworzony automatycznie przez system i nie powinien być ręcznie zmieniany!!
Krótko mówiąc, możesz pobierz przykład niestandardowego elementu i odtwórz go za pomocą własnego CSS i HTML