Smart Designer — Elementos de filtro personalizados
Esta extensión te permite crear elementos de filtro personalizados
Sitio de demostración: https://demo-sd.products-filter.com/
Por defecto, WOOF SD tiene 4 elementos básicos listos para personalizar:
- Casilla de verificación (predeterminado)
- Radio
- Conmutador
- Color
Más elementos personalizados los puedes encontrar en WOOF SD Gallery. Si tienes una idea sobre tu elemento personalizado, escríbenos al soporte.
Panel superior
- Volver – regresa a la lista de elementos
- Preajustes – el administrador puede guardar el conjunto actual de opciones y luego aplicarlas a otros elementos del mismo tipo
- Desplegable con todos los tipos posibles de elementos del sistema. Las 'etiquetas de caja' en la pantalla de arriba son un elemento personalizado colocado en el tema hijo de WordPress. Cómo crear uno, lee abajo.
- Desplegable con todas las taxonomías reales de WooCommerce de la tienda, solo como ayuda visual al construir un elemento de filtro. También se usa para el tipo de elemento 'Color' para adjuntar colores e imágenes a los términos de la taxonomía seleccionada por este desplegable (lee sobre Color abajo)
- Restablecer – haz clic para restablecer todas las opciones personalizadas del elemento de filtro actual a los valores predeterminados
Crear y aplicar
- En la pestaña 'Extensiones' activa la extensión 'Smart Designer' (si no está activada) y pulsa el botón Guardar
- Después de recargar la página, ve a la pestaña 'Smart Designer'
- Haz clic en el botón 'Crear elemento'
- Establece el título del nuevo elemento (haz clic en su campo)
- Haz clic en el botón 'Editar' para acceder a las opciones del nuevo elemento
- Cuando entres en las opciones del elemento, debes seleccionar su tipo: Casilla de verificación, Radio, Conmutador, Color u otro según los elementos instalados en el tema de WordPress de tu sitio (los tipos de elementos personalizados se describen abajo). ¡Cada tipo tiene su propio conjunto de opciones que no se superponen con otros tipos de elementos!
- Todos los elementos básicos excepto los conmutadores también tienen plantillas de diseño (lista, mosaico o radio, casilla de verificación), selecciona la que se ajuste a tus necesidades.
- Para tu comodidad, puedes seleccionar la taxonomía para la que estás creando el elemento actual
- Juega con las opciones usando su descripción para crear las personalizaciones que desees
- Todos los cambios se guardan automáticamente mediante AJAX
- Cuando decidas que es suficiente, puedes hacer clic en el botón 'Preajustes' y guardar allí tus opciones personalizadas para futuros elementos (para no empezar desde cero con un nuevo elemento)
- El último paso es ir a la pestaña 'Estructura' y adjuntar a una taxonomía el tipo de elemento recién creado. Todos los elementos creados con Smart Designer tienen el prefijo 'SD:' en su título
- Pulsa el botón Guardar abajo
- Ve al frontend de la tienda y disfruta 🙂
Consejos sobre personalizaciones
- Si no sabes qué familia de fuente aplicar para el texto, usa la palabra 'inherit', esto aplicará la familia de fuente del tema de WordPress actual. Y recuerda que si aplicas alguna familia de fuente, debe ser compatible con tu tema de WordPress actual y no hay garantía de que esa fuente esté incluida en el lado de wp-admin del sitio, por lo que los resultados visuales no serán al 100% iguales tanto en el backend como en el frontend.
- Si no necesitas color para tus imágenes de fondo PNG transparentes, usa la palabra 'transparent' en lugar del código hexadecimal de color
- Puedes encontrar diferentes patrones de imágenes usando Google con la frase de búsqueda 'background patterns images'
- Si buscas colores de belleza, puedes encontrarlos aquí, por ejemplo https://codebeautify.org/hex-to-pantone-converter
- Conversor de código de color https://rgbacolorpicker.com/hex-to-rgba
Presets
Los presets guardan tus opciones para que puedas aplicarlas a elementos similares, lo que hace que el tiempo de producción sea más corto. Puedes hacer lo siguiente:
- Crear presets
- Aplicar presets a nuevos elementos del mismo tipo (checkbox, radio, color, switcher, cualquier tipo personalizado) – solo haz clic en su título. Por ejemplo, un preset creado para radio es invisible para checkbox y viceversa.
- Comparte tu preset como información de texto con otra persona (desarrolladores, colegas, sitios, etc.). Haz clic en el botón del ojo.
- Importa el código del preset compartido contigo por alguien. Haz clic en el botón de editar. Pega el código. Presiona el botón 'Import'.
Color
El elemento Color es un elemento especial que tiene su propia funcionalidad: asignación de color e imágenes para cada término de la taxonomía seleccionada (consulte el menú desplegable antes del botón 'Reset') mediante una ventana emergente.
Los datos se almacenan en claves de metadatos de términos especiales:
- woof_sd_color
- woof_sd_color_image
Esas claves pueden sobrescribirse en el archivo functions.php del tema actual de WordPress en caso de que ya tengas opciones de color configuradas para tus términos a tu manera, utiliza los siguientes hooks:
- get_woof_sd_term_color_key – hook para almacenar datos de color de términos de taxonomía
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 para almacenar datos de imagen de términos de taxonomía
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__'; });
Elementos personalizados solo para desarrolladores
WOOF SD permite a los desarrolladores crear sus propios elementos personalizados, todo lo necesario es un buen código CSS+HTML creado. Aquí hay un ejemplo: https://codepen.io/quinlo/pen/ReMRXz – esto es suficiente para crear un elemento de filtro, puedes verlo en el sitio de demostración -> 'Products Tags'
En la imagen de abajo puedes ver cómo agregar dicho elemento al sistema:
- en el tema actual de WordPress (mejor usar un tema hijo) crea la carpeta 'woof'
- en la carpeta 'woof' crea la carpeta 'ext'
- en la carpeta 'ext' crea la carpeta 'smart_designer'
- en la carpeta 'smart_designer' crea la carpeta elements
- en la carpeta 'elements' crea una carpeta con el nombre que quieras, usa guion bajo si es necesario
- la carpeta del tipo de elemento personalizado debe tener los siguientes archivos:
- css/styles.css – todo el código CSS del elemento
- js/ie.js – tu clase JS, extiende IE, solo copia y pega:
'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); } }Renombra tu clase JS (en lugar de Boxtags), es importante y se usa en el archivo data.php.
- templates/tpl.php – puede tener también más archivos si es necesario, nómbralos como tpl-1.php, tpl-2.php, etc. Todos los archivos de plantilla deben declararse en el archivo data.php.
- data.php – aquí está el array de opciones, cuyas claves se usan en el archivo css/styles.css y también en las plantillas
<?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 ], ] ] ], ] ]; - En el archivo data.php presta atención a los campos: title – nombre de tu elemento en el panel superior de SD, prefix – prefijo único para las variables CSS, js_class – importante, nombre de la clase desde ie.js
- A continuación, en el archivo tpl.php agrega tu código 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>No olvides cambiar la variable $custom_postfix por el nombre de la carpeta de tu elemento (el mismo campo prefix del archivo data.php).
- La plantilla tiene cadenas especiales que se reemplazan sobre la marcha cuando WOOF SD imprime las etiquetas en el front-end:
- __TERM_ID__ – ID del término impreso actual
- __CLASS__ – clase CSS del sistema
- __DATA_TAX__ – nombre de la taxonomía del término actual
- __SLUG__ – slug del término actual
- __ID__ – id generado automáticamente para la etiqueta
- __VALUE__ – valor seleccionado aquí
- __CHECKED__ – debe estar en checkbox o radio para marcarlo o no
- __DISABLED__ – debe estar en checkbox o radio para deshabilitarlo o no
- __CONTENT__ – título del término para mostrar a los clientes
- __COUNT__ – número de términos
- __RESET_RADIO_BTN__ – se usa solo para radio para restablecer el botón de opción seleccionado en el front-end
- __DATA_ANCHOR__ – siempre requerido para la entrada oculta
- __TERM_NAME__ – nombre del término actual
- Usa un div contenedor siempre igual que en el ejemplo anterior, y dentro tu código HTML. ¡Ambos inputs, como checkbox o radio + inputs ocultos siempre deben estar!
- La plantilla tiene cadenas especiales que se reemplazan sobre la marcha cuando WOOF SD imprime las etiquetas en el front-end:
-
Campos:
- templates – agrega plantillas de diseño del mismo elemento, o su comportamiento (radio o checkbox).
- template – número de plantilla seleccionada por defecto
- demo_taxonomies – úsalo tal como está en el código anterior, necesario para mostrar las taxonomías de la tienda en el constructor
- sections – aquí en filas se colocan las opciones, tienen sus propias claves únicas (relativas al archivo data.php) y son de diferentes tipos:
- ranger – crea un control de rango con un deslizador desde min hasta max
'padding_vertical' => [ ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'], ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')] ],Presta atención al campo 'measure', debe tener unidades de medida adecuadas
- text – campo de texto
'font_family' => [ ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''], ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#'] ], - select – menú desplegable para seleccionar valores predefinidos
'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 – genera un input de color
'color' => [ ['value' => ['element' => 'color', 'value' => '#adadad']], ['value' => esc_html__('Text color', 'woocommerce-products-filter')] ], - image – genera un input de texto y un botón para seleccionar imagen desde la galería multimedia del sitio
'bg_image' => [ ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell ], - En todos los elementos, el campo value tiene un valor predeterminado que debe coincidir con el de styles.css
- todas las claves dentro del archivo css deben usarse con el prefijo '--woof-sd-ie-' + prefijo tomado del archivo data.php -> campo 'prefix'!
- ranger – crea un control de rango con un deslizador desde min hasta max
- El archivo woof/ext/smart_designer/import.js es creado automáticamente por el sistema y no debe ser modificado manualmente!!
- Brevemente, puedes descargar un ejemplo de elemento personalizado y recrearlo usando tu propio CSS y HTML