Configurable Swatches en Magento2

Configurable Swatches en Magento2

Funcionalidad nativa que también se hace presente en Magento2, aunque para hacerlo funcionar la configuración será diferente, el resultado será exactamente el mismo.

A diferencia de los Configurable Swatches de Magento 1, en Magento2 la responsabilidad en cuanto a la configuración reposa sobre los atributos en cuestión.

Dicho esto, si queremos usar un atributo de esta manera, lo primero será editarlo. Ahora la edición de atributos se encuentra en Stores -> Attributes -> Product.

Opción de menú para edición de atributos en Magento2

Para no perder la costumbre, allí veremos la grilla de atributos disponibles.

Siguiendo con el ejemplo de cómo crear un producto configurable, voy a personalizar el atributo color.

Grilla de atributos de producto en Magento2

Cuando ingresemos a editar el atributo, lo primero que vamos a ver es una nueva configuración que, justamente, nos ayudará con lo que estamos buscando.

Configuración de atributo en Magento2

Esa segunda opción, “Catalog Input Type for Store Owner”, es la encargada de lograr lo que buscamos.

Por ejemplo, cambiamos la opción de “Dropdown” a “Text Swatch”.

Configuración de atributo en Magento2

Dos detalles:

  • Al cambiar el tipo de input se nos avisa que el cambio va a afectar a todos los productos relacionados.
  • La gestión de valores del atributo cambiará automáticamente para ajustarse al nuevo tipo de input.

Cuando se trate de un Text Swatch, deberemos, de forma obligatoria, ingresar un valor para la columna Swatch.

Configuración de atributo en Magento2

Sólo una vez que hayamos asignado los valores, que serán los que se visualicen en el frontend, podremos guardar el atributo.

Una vez guardado, ya podemos ver el cambio en acción.

Configurable swatches con Text Swatch en Magento2

Configurable swatches en Magento2

Al seleccionar alguno de los valores, automáticamente cambiará la imagen principal por la del producto simple que la compone.

Configurable swatches en Magento2

El tercer tipo de input es el que puede resultar más interesante, y que comparado con la versión de Magento 1 tiene una mejorada opción de gestión.

Visual Swatch en Magento2

Como decía, lo interesante se da en la administración de los valores del atributo.

Configuración de valores para los atributos en Magento2

Para asignar valores tenemos dos opciones.

Configuración de valores para los atributos en Magento2

Selección de color.

Configuración de valores para los atributos en Magento2

O la posibilidad de subir una imagen.

Configuración de valores para los atributos en Magento2

Para el ejemplo, he seleccionado colores para cada una de las variaciones.

Configuración de valores para los atributos en Magento2

Una vez guardado el atributo, nuevamente, el frontend comienza a comportarse como esperábamos.

Configurable swatches en Magento2

Configurable swatches en Magento2

Configurable swatches en Magento2