Seleccione2

El Seleccione2 campos es el hermano mayor de Select: un menú desplegable en el que puedes escribir, con un modo múltiple opcional que permite al usuario elegir varias opciones a la vez. Dentro de los complementos maestros Creador de widgets, cubre los casos que un menú desplegable nativo maneja mal. Listas de opciones largas que necesitan búsqueda. Selecciones de estilo de etiqueta donde una respuesta no es suficiente.

Al igual que el Select normal, los valores de las opciones Select2 se conectan directamente Condiciones para mostrar u ocultar otros controles, y en el Motor de plantilla de sintaxis de ramita para {% if %} comprueba tu marcado. Ambas guías cubren la configuración y las limitaciones.

El modo de selección única se comporta exactamente como Seleccionar campo: tu plantilla recibe una clave. Active Múltiples y el valor se convertirá en una matriz de claves, lo que cambia la forma en que su plantilla debe leerlo. Ese cambio es el corazón de este documento.

Qué hace el campo Select2 #

• Representa un menú desplegable con capacidad de búsqueda en el panel Elementor; el usuario escribe para filtrar la lista de opciones.
• Sostiene una llave de sus opciones definidas en modo único, el mismo contrato que Select simple.
• Contiene una variedad de teclas cuando la opción Múltiples está activada, se muestra como etiquetas extraíbles en el control.
• Alimenta plantillas a través de un token o un bucle, dependiendo de ese modo.
• Utiliza pares de claves y etiquetas tú lo defines, por lo que las plantillas siempre funcionan con slugs estables.

Si es nuevo en la creación de widgets, comience con Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget de tarjeta de cartera donde los editores etiquetan cada instancia con una o más categorías: marca, web, impresión, movimiento.

Cómo agregar un campo Select2 #

Encontrar Seleccione2 en el panel de campos a la izquierda del editor Widget Builder. Se ubica con los otros campos de elección.

Arrástrelo a una sección debajo del Contenido pestaña. Una vez que aterriza, las opciones del campo se abren a la izquierda y la primera decisión es si este control elige un valor o muchos. Resuelva eso antes de tocar la plantilla, porque los dos modos quieren un marcado diferente.

Se explican las opciones de campo Select2 #

• Etiqueta: el texto que se muestra junto al control en Elementor, por ejemplo “Categorías”.
• Nombre: el identificador único para el campo, letras, números y guiones bajos únicamente, por ejemplo selected_tags.
• Opciones: las opciones como pares de claves y etiquetas. Las claves son los slugs que ve tu plantilla (branding, web); Las etiquetas son las palabras en el menú desplegable.
• Multiple: el interruptor de modo. Apagado, el usuario elige una opción. Encendido, el control acepta varias selecciones y el valor se convierte en una serie de claves.
• Predeterminado: la clave o claves seleccionadas cuando el widget aparece por primera vez en una página.
• Descripción, Mostrar etiqueta, Separador: la configuración de visualización estándar, además de las condiciones más abajo para mostrar el campo solo cuando otro control tiene un valor determinado.

Conecte Select2 a su plantilla #

En modo único, trátelo exactamente como un Select. El token imprime la clave elegida, por lo que las clases de modificadores y las comparaciones funcionan como de costumbre:

<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}

En modo múltiple, el valor es un conjunto de claves, y un llano {{ selected_tags }} no imprime nada útil. La plantilla tiene que bucle:

<div class="card-tags">
  {% for tag in selected_tags %}
  <span class="tag tag--{{ tag }}">{{ tag }}</span>
  {% endfor %}
</div>

• selected_tags es el nombre del campo.
• tag es una variable de bucle que inventas; llámalo cualquier cosa.
• El bloque entre {% for %} y {% endfor %} imprime una vez por clave elegida, en el orden en que fueron elegidas.

Tenga cuidado con la discrepancia de modo. Una plantilla escrita con un token desnudo sigue “funcionando” después de habilitar Múltiple; simplemente representa un lugar vacío, sin error, nada en la consola. Si un valor Select2 parece desaparecer, verifique si Multiple está activado y la plantilla aún espera una sola clave. Esa falta de coincidencia es la causa la mayoría de las veces.

Utilice el control Select2 en Elementor #

Agregue su widget personalizado a una página en Elementor, recargando el editor si la página ya estaba abierta. El control se representa como un menú desplegable con un cuadro de búsqueda. Comience a escribir y la lista se filtra a medida que avanza.

Con Multiple activado, cada selección se convierte en una pequeña etiqueta dentro del control, que se puede quitar con su x. Cada agregar o quitar vuelve a representar el bucle, por lo que las insignias de la tarjeta rastrean el control en tiempo real.

Casos de uso comunes #

• Categoría y recolectores de etiquetas que representan filas de insignias en tarjetas y artículos de cartera.
• Listas de opciones largas como opciones de país, industria o emparejamiento de fuentes donde la búsqueda supera al desplazamiento.
• Listas de verificación de funciones donde cada clave elegida imprime una línea en una columna de precios.
• Widgets de barra de filtro cuyas claves seleccionadas se convierten en atributos de datos para un script de filtro JS.
• Selectores de perfiles sociales donde cada clave se asigna a un ícono y enlace en el bucle.

Consejos para trabajar con el campo Select2 #

• Decida el modo antes de escribir la plantilla. El modo único quiere un token, el modo múltiple quiere un bucle; no son intercambiables.
• Nunca imprima un valor múltiple directamente. {{ selected_tags }} en una matriz no produce nada útil; sólo el {% for %} el bucle llega a las teclas.
• Las claves siguen siendo babosas, las etiquetas siguen siendo palabras. El bucle imprime claves, por lo que si el texto de la insignia es amigable para los humanos, haga que las claves sean presentables o mapételas {% if %} bloques dentro del bucle.
• Un bucle vacío de selección múltiple cero veces. El contenedor div todavía se renderiza, así que envuélvalo {% if selected_tags %} cuando una púa vacía no debe dejar ningún margen de beneficio.
• Utilice la selección simple para listas cortas. Tres o cuatro variantes fijas no necesitan búsqueda; Select2 obtiene su lugar en listas más largas y selecciones múltiples.

Preguntas frecuentes #

Envolviendo #

El campo Select2 del Widget Builder cubre los dos trabajos que un menú desplegable nativo no puede: buscar listas largas y seleccionar varios valores a la vez. Mantenga el contrato monomodo en su cabeza, una tecla a través de un token y cambie a a {% for %} recorra el momento en que continúa Multiple. Para opciones de icono-botón en lugar de menús desplegables, consulte Elija campo. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.