Smart Designer
Diese Erweiterung ermöglicht die Erstellung benutzerdefinierter Filter-Elemente
Demoseite: https://demo-sd.products-filter.com/
Standardmäßig hat WOOF SD 4 Basiselemente zur Anpassung bereit:
- Checkbox (Standard)
- Radio
- Umschalter
- Farbe
Mehr benutzerdefinierte Elemente finden Sie in WOOF SD Galerie. Wenn Sie Habe eine Idee über Ihr benutzerdefiniertes Element schreiben Sie uns unterstützen.
Oberes Bedienfeld
- Zurück – zurück zur Liste der Elemente
- Voreinstellungen – der Administrator kann die aktuelle Optionssammlung speichern und sie dann auf andere Elemente anwenden vom gleichen Typ
- Dropdown mit allen möglichen Elementtypen im System. ‘Box-Tags„auf dem Bildschirm oben ist ein benutzerdefiniertes Element, das in ein Child-WordPress-Theme eingefügt wurde. Wie Sie solche erstellen, lesen Sie unten.
- Dropdown mit allen echten WooCommerce-Taxonomien des Shops, nur zur visuellen Hilfe beim Erstellen eines Filterelements. Wird auch für den Elementtyp 'Farbe' verwendet, um Farben und Bilder mit den Begriffen der mit diesem Dropdown ausgewählten Taxonomie zu verknüpfen (lesen Sie mehr über Farbe unten)
- Zurücksetzen – wenn geklickt wird, werden alle benutzerdefinierten Optionen für das aktuelle Filterelement auf den Standardwert zurückgesetzt
Erstellen und Anwenden
- Im Tab „Erweiterungen‚ Erweiterung aktivieren ‚Smart Designer‘ (Wenn es nicht aktiviert ist) und klicke auf die Schaltfläche Speichern
- Nach dem Neuladen der Seite gehen Sie zum Tab „Smart Designer‘
- Klicken Sie auf den Button ‘Element erstellen‘
- Neuen Elementtitel festlegen (Klicken Sie auf das Feld)
- Klicken Sie auf „Bearbeiten' Schaltfläche, um neue Elementoptionen einzugeben
- Wenn Sie sich in den Elementoptionen befinden, sollten Sie den Typ auswählen: Checkbox, Radio, Schalter, Farbe oder einen anderen, abhängig von den installierten Elementen auf dem WordPress-Theme Ihrer Website (benutzerdefinierte Elementtypen, die unten beschrieben sind). Jeder Typ hat seine eigenen Optionen, die sich nicht mit anderen Elementtypen überschneiden!
- Alle Basiselemente außer Schaltern haben auch Layout-Vorlagen (Liste, Kachel oder Radio, Checkbox), wählen Sie eine, die Ihren Bedürfnissen entspricht.
- Zu Ihrer Bequemlichkeit können Sie die Taxonomie auswählen, für die Sie das aktuelle Element erstellen
- Spielen Sie mit den Optionen, indem Sie ihre Beschreibungen verwenden, um die gewünschten Anpassungen zu erstellen
- Alle Änderungen werden automatisch per Ajax gespeichert
- Wenn Sie entschieden haben, dass es genug ist, können Sie auf „Voreinstellungen„ Schaltfläche und speichern Sie dort Ihre benutzerdefinierten Optionen für zukünftige Elemente (um nicht bei Null mit einem neuen Element beginnen zu müssen)
- Letzter Schritt ist der Wechsel zum Tab ‘Struktur‘ und fügen Sie für eine Taxonomie ein gerade erstelltes Element hinzu. Alle mit Smart Designer erstellten Elemente haben dort den Titel-Präfix ‘SD:‘
- Drücken Speichern Schaltfläche unten
- Gehen Sie zum Shop-Frontend und genießen Sie 🙂
Tipps zur Anpassung
- Wenn Sie die Schriftfamilie für den Text nicht kennen, verwenden Sie das Wort „erben‘, dies wendet die Schriftfamilie des aktuellen WordPress-Themes an. Und denken Sie daran, dass, wenn Sie eine Schriftfamilie anwenden, diese von Ihrem aktuellen WordPress-Theme unterstützt werden muss und es keine Garantie gibt, dass diese Schriftart auf der wp-admin-Seite der Website enthalten ist. Daher werden die visuellen Ergebnisse auf Backend und Frontend nicht zu 100% gleich sein.
- Wenn Sie keine Farbe für Ihre transparenten PNG-Hintergrundbilder benötigen, verwenden Sie das Wort 'transparent‘ anstelle des Farbcodes
- Unterschiedliche Bildmuster finden Sie, wenn Sie bei Google nach dem Suchbegriff ‘Hintergrundmusterbilder‘
- Wenn Sie nach schönen Farben suchen, finden Sie diese hier zum Beispiel https://codebeautify.org/hex-to-pantone-converter
- Farbcode-Konverter https://rgbacolorpicker.com/hex-to-rgba
Voreinstellungen
Presets ermöglicht das Speichern Ihrer Optionen für die Anwendung auf ähnliche Elemente, was die Produktionszeit verkürzt. Sie können Folgendes tun:
- Presets erstellen
- Voreinstellungen auf neue Elemente desselben Typs anwenden (checkbox, radio, color, switcher, any custom type) – klicken Sie einfach auf seinen Titel. Zum Beispiel ist ein für Radio erstelltes Preset für Checkbox unsichtbar und umgekehrt.
- Teilen Sie Ihr Preset als Textinformation mit einer anderen Person (Entwickler, Kollegen, Websites usw. …`). Klicken Sie auf das Augen-Symbol.
- Importieren Sie einen Preset-Code, der Ihnen von jemandem geteilt wurde. Klicken Sie auf den Bearbeiten-Button. Fügen Sie den Code ein. Drücken Sie den Button „Importieren„.
Farbe
Farbelement – ist ein spezielles Element, das seine eigene Funktionalität hat – Zuweisung von Farben und Bildern für jeden Begriff der ausgewählten Taxonomie (Dropdown vor der Schaltfläche „Zurücksetzen“ anzeigen) über ein Popup
Daten werden in speziellen Term-Meta-Keys gespeichert:
- woof_sd_color
- woof_sd_color_image
Diese Schlüssel können in der Datei functions.php des aktuellen WordPress-Themes überschrieben werden, falls Sie bereits eigene Farboptionen für Ihre Begriffe festgelegt haben. Verwenden Sie die folgenden Hooks:
- get_woof_sd_term_color_key – Hook zum Speichern von Taxonomiebegriff-Farbsdaten
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 zum Speichern von Bilddaten für Taxonomie-Begriffe
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__'; });
Benutzerdefinierte Elemente nur für Entwickler
WOOF SD ermöglicht es Entwicklern, ihre eigenen benutzerdefinierten Elemente zu erstellen. Alles, was dafür notwendig ist, ist guter CSS+HTML-Code. Hier ist ein Beispiel: https://codepen.io/quinlo/pen/ReMRXz – das reicht gerade aus, um ein Filterelement zu erstellen, Sie können es auf der Demo-Seite -> „Produkttags‘
Im Bild unten sehen Sie, wie Sie ein solches Element zum System hinzufügen:
- auf dem aktuellen WordPress-Theme (besser ein Child-Theme verwenden) Ordner ‘woof’ erstellen
- im Ordner ‘woof„ Ordner erstellen „ext‘
- im Ordner ‘ext„ Ordner erstellen „smart_designer‘
- im Ordner ‘smart_designer„ Ordner Elemente erstellen
- im Ordner ‘Elemente‘ Ordner mit beliebigem Namen erstellen, Unterstrich nach Bedarf verwenden
- Der custom element type Ordner muss die folgenden Dateien enthalten:
- css/styles.css – der gesamte CSS-Code des Elements
- js/ie.js – Ihre JS-Klasse, erweitert IE, einfach kopieren und einfügen:
'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); } }Benennen Sie Ihre JS-Klasse um (anstelle von Boxtags), es ist wichtig und wird in der Datei data.php verwendet.
- templates/tpl.php – kann auch mehr Dateien enthalten, falls erforderlich, nennen Sie sie tpl-1.php, tpl-2.php usw. Alle Vorlagendateien müssen in der Datei data.php deklariert werden.
- data.php – hier ist ein Array von Optionen, deren Schlüssel in der Datei verwendet werden css/styles.css und auch Vorlagen
<?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 ], ] ] ], ] ]; - In Datei data.php machen Sie Ihre Aufmerksamkeit auf die Felder: Titel – Name Ihres Elements im oberen Bereich von SD, Präfix – eindeutiges Präfix für CSS-Variablen, js_class – wichtig, Klassenname von ie.js
- Als Nächstes in der Datei tpl.php fügen Sie Ihren HTML-Code hinzu:
<?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>Vergessen Sie nicht, ihre Variable $custom_postfix in den Namen des Ordners Ihres Elements zu ändern (dasselbe Präfixfeld aus data.php).
- Template hat spezielle Strings, die beim Drucken von Tags durch WOOF SD im Frontend ersetzt werden:
- __TERM_ID__ – ID des aktuellen ausgegebenen Begriffs
- __CLASS__ – system css class
- __DATA_TAX__ – aktueller Begriff Taxonomie-Name
- __SLUG__ – aktueller Begriffs-Slug
- __ID__ – automatisch generierte ID für das Label
- __VALUE__ – ausgewählter Wert hier
- __CHECKED__ – sollte in einem Kontrollkästchen oder Radiobutton sein, um es auszuwählen oder nicht
- __DISABLED__ sollte in Checkbox oder Radio sein, um es zu deaktivieren oder nicht
- __CONTENT__ – Begriffstitel, der den Kunden angezeigt werden soll
- __COUNT__ – Anzahl der Begriffe
- __RESET_RADIO_BTN__ – wird nur für Radio-Buttons verwendet, um die ausgewählte Radio-Button-Option im Frontend zurückzusetzen
- __DATA_ANCHOR__ – immer erforderlich für versteckte Eingabe
- __TERM_NAME__ – aktueller Begriff
- Verwenden Sie eine Div-Wrapper, immer dieselbe wie im obigen Beispiel, und innerhalb Ihres HTML-Codes. Beide Eingaben, als Checkbox oder Radio + versteckte Eingaben, müssen immer vorhanden sein!
- Template hat spezielle Strings, die beim Drucken von Tags durch WOOF SD im Frontend ersetzt werden:
-
Felder:
- Vorlagen – fügt Layout-Vorlagen desselben Elements oder sein Verhalten hinzu (Radiobutton oder Kontrollkästchen).
- Vorlage – Nummer der standardmäßig ausgewählten Vorlage
- demo_taxonomies – wie im obigen Code verwenden, muss Shop-Taxonomien im Konstruktor anzeigen
- Abschnitte – hier in Zeilen platzierte Optionen, sie haben ihre eigenen eindeutigen Schlüssel (relativ zum Dateidaten.php) und sie sind von verschiedenen Typen:
- Ranger – erlaubt die Erstellung eines Bereichs mit einem Schieberegler von min zu max
'padding_vertical' => [ ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')] ],Achten Sie auf das Feld ‘messen‚, es sollten angemessene Maßeinheiten vorhanden sein
- Text – Textfeld
'font_family' => [ ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''], ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#'] ], - auswählen – Dropdown zur Auswahl vordefinierter Werte
'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 ], - Farbe – generiert Farbeingabe
'color' => [ ['value' => ['element' => 'color', 'value' => '#adadad']], ['value' => esc_html__('Text color', 'woocommerce-products-filter')] ], - image – generiert ein Textfeld und einen Button, um ein Bild aus der Medienbibliothek der Website auszuwählen
'bg_image' => [ ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell ], - In allen Elementen hat der Feldwert einen Standardwert, der derselbe sein muss wie in styles.css
- Alle Schlüssel in der CSS-Datei müssen mit dem Präfix verwendet werden ‘–woof-sd-ie-‘ + Präfix aus den Dateidaten.php -> Feld ‘Präfix‘!
- Ranger – erlaubt die Erstellung eines Bereichs mit einem Schieberegler von min zu max
- Die Datei woof/ext/smart_designer/import.js wird automatisch vom System erstellt und sollte nicht von Hand geändert werden!!
- Kurz gesagt, Sie können Lade ein Beispiel für ein benutzerdefiniertes Element herunter und es mit Ihrem eigenen CSS und HTML neu erstellen