Smart Designer
Cette extension permet de créer des éléments de filtre personnalisés
Site de démonstration: https://demo-sd.products-filter.com/
Par défaut, WOOF SD a 4 éléments de base prêts pour la personnalisation :
- Case à cocher (par défaut)
- Radio
- Commutateur
- Couleur
Plus d'éléments personnalisés que vous pouvez trouver dans Galerie WOOF SD. Si vous avoir une idée à propos de votre élément personnalisé écrivez-nous sur le support.
Panneau supérieur
- Retour – retour à la liste des éléments
- Préréglages – l'administrateur peut enregistrer l'ensemble actuel des options, puis les appliquer à d'autres éléments du même type
- Déroulant avec tous les types d'éléments possibles sur le système. 'Tags de boîte‘ sur l'écran ci-dessus est un élément personnalisé placé dans un thème enfant WordPress. Comment en créer de tels se lit ci-dessous.
- Liste déroulante avec toutes les vraies taxinomies woocommerce de la boutique, juste pour une aide visuelle lors de la création d'un élément de filtre. Utilise également pour le type d'élément 'Couleur' pour attacher des couleurs et des images aux termes de la taxonomie sélectionnée par cette liste déroulante (lisez ci-dessous sur Couleur)
- Réinitialiser – si vous cliquez, cela réinitialise toutes les options personnalisées à la valeur par défaut pour l’élément de filtre actuel
Créer et Appliquer
- Dans l'onglet «Extensions‘ activer l'extension ‘Smart Designer‘ (s'il n'est pas activé) et appuyez sur le bouton Enregistrer
- Après le rechargement de la page, allez à l'onglet «Smart Designer‘
- Cliquez sur le bouton ‘Créer un élément‘
- Définir le titre du nouvel élément (cliquez sur son champ)
- Cliquez sur «Modifier‘ pour saisir les options du nouvel élément
- Lorsque vous êtes à l'intérieur des options de l'élément, vous devez sélectionner son type : Checkbox, Radio, Switcher, Color ou un autre en fonction des éléments installés sur le thème WordPress de votre site (types d'éléments personnalisés décrits ci-dessous). Chaque type a son propre ensemble d'options qui n'intersectent pas avec les autres types d'éléments !
- Tous les éléments de base, à l’exception des interrupteurs, ont également des modèles de mise en page (liste, tuile ou radio, case à cocher), sélectionnez celui qui correspond à vos besoins.
- Pour votre commodité, vous pouvez sélectionner la taxonomie pour laquelle vous créez l'élément actuel
- Jouez avec les options en utilisant leur description pour créer les personnalisations que vous souhaitez
- Toutes les modifications sont enregistrées automatiquement par ajax
- Lorsque vous avez décidé que c'était suffisant, vous pouvez cliquer sur 'Préréglages‘ bouton et enregistrez-y vos options personnalisées pour les futurs éléments (pour ne pas repartir de zéro avec un nouvel élément)
- La dernière étape est d'aller à l'onglet ‘Structure‘ et joignez pour une taxonomie un élément de type nouvellement créé. Tous les éléments créés avec Smart Designer ont leur préfixe de titre ‘SD :‘
- Appuyez sur Enregistrer bouton ci-dessous
- Allez sur le devant de la boutique et profitez 🙂
Conseils sur les personnalisations
- Si vous ne savez pas quelle famille de polices appliquer au texte, utilisez le mot 'hériter‘, cela appliquera la famille de polices de votre thème WordPress actuel. Et rappelez-vous que si vous appliquez une famille de polices, elle doit être prise en charge par votre thème WordPress actuel et il n'y a aucune garantie que cette police soit incluse du côté wp-admin du site, donc les résultats visuels ne seront pas identiques à 100 % sur le backend comme sur le front-end.
- Si vous n'avez pas besoin de couleur pour vos images d'arrière-plan transparentes png, utilisez le mot ‘transparent‘ au lieu du code hexadécimal de couleur
- Différents motifs d'images que vous pouvez trouver en utilisant Google avec la phrase de recherche ‘images de motifs de fond‘
- Si vous recherchez de belles couleurs, vous pouvez les trouver ici par exemple https://codebeautify.org/hex-to-pantone-converter
- Convertisseur de code couleur https://rgbacolorpicker.com/hex-to-rgba
Préréglages
Les presets permettent d'enregistrer vos options pour les appliquer à des éléments similaires, ce qui réduit le temps de production. Vous pouvez faire ceci :
- Créer des préréglages
- Appliquer les préréglages aux nouveaux éléments du même type (case, radio, couleur, commutateur, tout autre type personnalisé) – cliquez simplement sur son titre. Par exemple, le préréglage créé pour la radio est invisible pour la case à cocher et vice versa.
- Partagez votre preset sous forme d'informations textuelles avec une autre personne (développeurs, collègues, sites, etc…). Cliquez sur le bouton œil.
- Importez un preset de code partagé avec vous par quelqu'un. Cliquez sur le bouton d'édition. Collez le code. Appuyez sur le bouton ‘Importer».
Couleur
Élément couleur – est un élément spécial qui a sa propre fonctionnalité – attribution de couleur et d'images pour chaque terme de la taxonomie sélectionnée (voir le menu déroulant avant le bouton 'Réinitialiser') en utilisant une popup
Les données sont stockées dans des clés de méta de terme spéciales :
- woof_sd_color
- woof_sd_color_image
Ces clés peuvent être surchargées dans le fichier functions.php du thème WordPress actuel pour les cas où vous avez déjà défini les options de couleur pour vos termes à votre manière, utilisez les hooks suivants :
- get_woof_sd_term_color_key – hook pour stocker les données de couleur des termes de taxonomie
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 pour stocker les données d'image des termes de taxonomie
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__'; });
Éléments personnalisés pour développeurs uniquement
WOOF SD permet aux développeurs de créer leurs propres éléments personnalisés, tout ce qui est nécessaire est un bon code CSS+HTML créé. Voici un exemple : https://codepen.io/quinlo/pen/ReMRXz – c’est tout ce qu’il faut pour créer un élément de filtre, vous pouvez le voir sur le site de démonstration -> ‘Tags de produits‘
Sur l'image ci-dessous, vous pouvez voir comment ajouter un tel élément au système :
- sur le thème WordPress actuel (mieux utiliser le thème enfant) créer le dossier 'woof'
- dans le dossier ‘woof‘ créer le dossier ‘ext‘
- dans le dossier ‘ext‘ créer le dossier ‘smart_designer‘
- dans le dossier ‘smart_designer‘ créer le dossier elements
- dans le dossier ‘éléments‘ créer un dossier avec le nom de votre choix, utilisez un trait de soulignement si nécessaire
- Le dossier du type d'élément personnalisé doit contenir les fichiers suivants :
- css/styles.css – tout le code css de l'élément
- js/ie.js – votre classe JS, étend IE, copiez-collez simplement :
'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); } }Renommez votre classe JS (au lieu de Boxtags), c'est important et utilisé dans le fichier data.php
- templates/tpl.php – peut contenir également plus de fichiers si nécessaire, nommez-les tpl-1.php, tpl-2.php, etc... Tous les fichiers de modèle doivent être déclarés dans le fichier data.php.
- data.php – voici un tableau d'options, dont les clés sont utilisées dans le fichier css/styles.css et aussi des modèles
<?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 ], ] ] ], ] ]; - Dans le fichier data.php faites attention aux champs : titre – nom de votre élément dans le panneau supérieur de SD, préfixe – préfixe unique pour les variables css, js_class – important, le nom de la classe de ie.js
- Suivant dans le fichier tpl.php ajoutez votre code 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>N'oubliez pas de changer votre variable $custom_postfix pour le nom du dossier de votre élément (le même champ préfixe du fichier data.php).
- Le modèle a des chaînes spéciales qui sont remplacées à la volée lorsque WOOF SD affiche les balises sur le devant :
- __TERM_ID__ – ID du terme imprimé actuellement
- __CLASS__ – classe CSS système
- __DATA_TAX__ – nom de la taxonomie du terme actuel
- __SLUG__ – slug du terme actuel
- __ID__ – ID généré automatiquement pour l'étiquette
- __VALUE__ – valeur sélectionnée ici
- __CHECKED__ – devrait être en case à cocher ou radio pour le rendre sélectionné ou non
- __DISABLED__ – doit être une case à cocher ou une radio pour la désactiver ou non
- __CONTENT__ – titre du terme à afficher aux clients
- __COUNT__ – nombre de termes
- __RESET_RADIO_BTN__ – utilise pour la radio uniquement pour réinitialiser le bouton radio sélectionné sur le front
- __DATA_ANCHOR__ – toujours requis pour l'input caché
- __TERM_NAME__ – nom du terme actuel
- Utilisez un wrapper div identique à chaque fois que dans l'exemple ci-dessus, et à l'intérieur de votre code HTML. Les deux entrées, qu'elles soient des cases à cocher ou des boutons radio + des entrées cachées doivent toujours être !
- Le modèle a des chaînes spéciales qui sont remplacées à la volée lorsque WOOF SD affiche les balises sur le devant :
-
Champs :
- templates – ajoutez des modèles de mise en page du même élément, ou son comportement (radio ou case à cocher).
- modèle – nombre de modèles sélectionnés par défaut
- demo_taxonomies – utiliser tel quel dans le code ci-dessus, doit afficher les taxonomies de la boutique dans le constructeur
- sections – ici en lignes placées options, elles ont leurs propres clés uniques (relativement au fichier data.php) et ils sont de différents types :
- curseur – permet de créer un curseur avec un curseur de plage à partir de min à max
'padding_vertical' => [ ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')] ],Faites attention au champ ‘mesurer‘, il devrait y avoir des unités de mesure adéquates
- texte – champ de texte
'font_family' => [ ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''], ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#'] ], - sélectionner – liste déroulante pour sélectionner des valeurs prédéfinies
'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 ], - couleur – génère un champ de couleur
'color' => [ ['value' => ['element' => 'color', 'value' => '#adadad']], ['value' => esc_html__('Text color', 'woocommerce-products-filter')] ], - image – génère un champ texte et un bouton pour sélectionner une image dans la galerie média du site
'bg_image' => [ ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell ], - Dans tous les éléments, la valeur du champ a une valeur par défaut qui doit être la même que dans styles.css
- toutes les clés à l'intérieur du fichier css doivent être utilisées avec le préfixe ‘–woof-sd-ie-‘ + préfixe tiré du fichier data.php -> champ ‘préfixe‘ !
- curseur – permet de créer un curseur avec un curseur de plage à partir de min à max
- Le fichier woof/ext/smart_designer/import.js est créé automatiquement par le système et ne doit pas être modifié manuellement !!
- Brièvement, vous pouvez télécharger un exemple d’élément personnalisé et recréez-le en utilisant votre propre CSS et HTML