Selectores
El posicionamiento de las personalizaciones puede ser logrado de 2 formas:
A través del selector automático de Midway
Manualmente introduciendo el selector css del elemento de referencia deseado
Selector automático de Midway
Selector automático de Midway
Advertencia para usuarios Vtex
Si usas Vtex, debes llevar a cabo el posicionamiento manual. Esto se debe a que este ecommerce incluye en sus clases css referencias de idioma, moneda, etc, lo que puede provocar inconsistencias para usuarios que tengan otras configuraciones de esos parametros y en consecuencia no se muestre la personalización.
Usar el selector de Midway es muy fácil. Simplemente, iremos a editar una personalización de tipo Vitrina o Custom, y en el apartado de Visualización encontraremos lo siguiente
Elemento de referencia es el campo que estamos buscando. El botón de seleccionar nos llevara a la tienda con el modo selector activado.
Simplemente tendremos que buscar el elemento con el mouse (visualizado con un cuadrado azul) y dar click. Automáticamente Midway detectará el click, cerrará la pestaña de la tienda, y volverá al sistema con el campo completado, indicando que efectivamente detecto un elemento de referencia válido
Forma manual
Forma manual
Esta es la forma mas segura de insertar personalizaciones embebidas, pero requiere una configuración dentro de la tienda.
En el ecommerce, se tendría que colocar en el/los lugar/lugares deseados, un elemento vacío con un selector css, el cual debe ser único, como por ejemplo id=”vitrina_recomendados_midway”.
De esta forma, en el mismo apartado de visualización que en el método anterior, en el input de Elemento de referencia simplemente escribiríamos #vitrina_recomendados_midway
Posición
Una vez identificado y establecido el selector correcto, nos aparecerá otra opción que es Posición. Esta posición es relativa al elemento de referencia que elegimos y nos sirve para saber como y donde se va a insertar nuestra personalización. Tenemos 3 opciones:
Reemplazar elemento: toma al elemento de referencia, lo destruye, y en su lugar pone la personalización
Insertar antes del elemento: inserta la personalización inmediatamente antes y al mismo nivel de árbol HTML que el elemento de referencia
Insertar después del elemento: inserta la personalización inmediatamente después y al mismo nivel de árbol HTML que el elemento de referencia
Ocurrencia
Imaginemos este escenario: la tienda tiene varios elementos con el mismo selector CSS que necesitamos usar para personalizar. ¿Cómo hago para saber en cual exactamente tengo que poner la vitrina?
En el apartado de visualización, luego de poner un selector, nos aparecerán mas opciones, entre ellas Ocurrencia.
El campo es simplemente un número, que indica, de una lista de elementos coincidentes con nuestro selector elegido, cual tomar como elemento de referencia para insertar la personalización.
Si hay 10 elementos, y seleccionamos ocurrencia 5, la personalización se va a insertar en referencia al quinto elemento de la lista.