Product Features: instalación, configuración y gestión de atributos

Este documento describe la configuración del módulokowal/module-product-features, el significado de todos los campos de administración y el trabajo con atributos en el producto.

Instalación

El módulo está diseñado para instalarse mediante Composer.

Recibirás por correo electrónico los datos de acceso al repositorio Composer, es decir, la dirección de correo electrónico del cliente y el token de licencia, después de la compra. También están disponibles en el panel de cliente tras iniciar sesión en kowal.store. Sustituye TWOJ_EMAIL_KLIENTA por la dirección de e-mail de tu cuenta y TWOJ_TOKEN por el token recibido. Ejecuta los comandos en el directorio raíz de Magento.

composer config repositories.kowal composer https://repo.kowal.store
composer config http-basic.repo.kowal.store "TWOJ_EMAIL_KLIENTA" "TWOJ_TOKEN"
composer require kowal/module-product-features
bin/magento module:enable Kowal_ProductFeatures
bin/magento setup:upgrade
bin/magento cache:flush

Después del despliegue en producción, deben ejecutarse los comandos estándar propios del proyecto, por ejemplo, la compilación DI y el despliegue de assets estáticos, de acuerdo con el modo de funcionamiento de Magento.

Ubicación de la configuración

La configuración del módulo se encuentra en el panel de administración de Magento:

Stores > Configuration > Catalog > Product Features

Los ajustes de apariencia se encuentran en un grupo independiente:

Stores > Configuration > Catalog > Product Features Appearance

Los campos de configuración están disponibles a nivel de Default, Website y Store View. De este modo, distintos Store View pueden tener secciones de características diferentes o una apariencia distinta.

Product Features

Enabled

Activa o desactiva el módulo para el ámbito de configuración correspondiente.

Valores:

• Yes- las secciones de características del producto se renderizan en la ficha de producto,
• No- el módulo no devuelve secciones y el bloque no aparece en el frontend.

Uso: desactivación rápida del módulo para toda la tienda, un Website seleccionado o un Store View sin eliminar la configuración de las secciones.

Feature Sections

Lista de secciones renderizadas en la ficha de producto. Cada fila define una sección de frontend o un grupo de secciones, si se utiliza el tipocms_blocks.

Enabled

Activa o desactiva una sección individual.

Valores:

• Yes- la sección participa en el renderizado,
• No- la sección se omite.

Uso: ocultar temporalmente una sección sin eliminar sus ajustes.

Section Title

Título de la sección visible en la ficha de producto.

Ejemplos:

• Cechy produktu,
• Zastosowanie Sportowe,
• Specyfikacja,
• Technologie,
• Dostawa.

Uso: el nombre debe ser comprensible para el cliente, no tiene por qué coincidir con el nombre técnico del atributo.

Nota: para el tipocms_blocks, el título de la sección secundaria se obtiene del título del bloque CMS.

Código de atributo

Atributo de producto único utilizado por la sección. El campo tiene forma de desplegable con una lista de atributos de producto.

Uso: utiliza este campo cuando la sección se base en un solo atributo, por ejemplo,sport_usage,blocks_id,material,technology_icon.

Attribute Codes

Lista de varios atributos de producto utilizados por una sola sección. El campo tiene forma de multiselección.

Uso: utiliza este campo cuando una sección deba agregar varias características, por ejemplo, varias escalas en la secciónCechy produktuo varios parámetros en la secciónSpecyfikacja.

Ejemplo: la secciónCechy produktupuede contener los atributosfit,resistance,stretchybreathability, todos renderizados como escalas.

Display Type

Determina cómo se presenta el valor del atributo.

Un valor vacíoAutosignifica selección automática del renderer:

• blocks_idse renderiza comocms_blocks,
• swatch multiselect comoswatch_list,
• select con 2 o 3 opciones comoscale,
• select con un número mayor de opciones comoselected_label,
• multiselect comotext_list,
• boolean comocheckmark,
• date comodate,
• price comoprice,
• textarea comotext_block,
• image/media_image comoimage,
• los demás tipos comotext_inline.

Tipos disponibles:

En el panel de administración, algunas posiciones están marcadas comoavailable in future release. Esto afecta a los tipos que ya son visibles en la lista de configuración, pero que todavía no tienen su propia presentación final en el frontend:

• table,
• badge,
• badge_list,
• icon_value,
• icon_list,
• swatch_grid.

Sort Order

Orden de las secciones en la ficha de producto. Un número menor significa que se muestra antes.

Uso: coloca las secciones más importantes al principio, por ejemplo,10para las características principales,20para usos,30para especificaciones.

Default State

Estado inicial de la sección en la ficha de producto.

Valores:

• Expanded- la sección está desplegada de forma predeterminada,
• Collapsed- la sección está contraída de forma predeterminada.

Uso: el contenido más importante puede mostrarse de inmediato, mientras que la información auxiliar más extensa puede dejarse contraída.

Hide Empty

Determina si la sección debe ocultarse cuando no hay datos que mostrar.

Valores:

• Yes- la sección se oculta si el producto no tiene valor de atributo o si el renderer no devuelve ningún elemento,
• No- la sección puede seguir visible incluso sin elementos.

Uso: normalmente se recomiendaYespara no mostrar secciones vacías al cliente.

Appearance Profile

Selección de un perfil de apariencia definido en el campoAppearance Profiles.

El campo tiene forma de desplegable. El administrador ya no introduce el código manualmente, sino que selecciona un perfil preparado de la lista, normalmente en el formatocode - label.

Uso: permite asignar a una sección concreta una apariencia distinta de la global, por ejemplo, el perfilcompact,highlightoplain.

Si el campo está vacío y está seleccionada la opciónUse global appearance, la sección utiliza la apariencia global.

Orden de trabajo recomendado:

1. define un perfil enAppearance Profiles,
2. guarde la configuración,
3. vuelve aFeature Sections,
4. selecciona el perfil en la columnaAppearance Profilepara la sección correspondiente.

CSS Class

Clase CSS adicional añadida a la sección.

Uso: ajuste individual de la apariencia en el tema frontend, por ejemplo,product-features-section--technical.

Renderer Options JSON

Ajustes opcionales pasados al renderer en formato JSON.

El uso depende del tipo de presentación. Ejemplos:

{"unit":"cm","precision":1}

Paranumber_with_unit:

• unit- unidad, por ejemplocm,%,g/m2,
• precision- número de decimales.

Pararange_bar:

• min- valor mínimo del rango,
• max- valor máximo del rango,
• low_label- etiqueta del inicio del rango,
• high_label- etiqueta del final del rango.

Pararating_dots:

• steps- número de puntos o niveles.

Tiporadial_chartno requiere opciones adicionales. El renderer lee el valor del atributo o la etiqueta de la opción en formatox/y, por ejemplo,1/6,4/6,7/10.

Ejemplo para la barra de rango:

{"min":0,"max":100,"low_label":"Niska","high_label":"Wysoka"}

Ejemplo para los puntos:

{"steps":5}

Nota: el campo debe contener un JSON válido. Un valor incorrecto es ignorado por el renderer.

Appearance Profiles

Lista de perfiles de apariencia opcionales que pueden asignarse a una sección mediante el campoAppearance Profile.

Code

Código técnico del perfil.

Ejemplos:

• compact,
• highlight,
• plain.

Uso: el código identifica el perfil internamente y se utiliza como valor de opción en el desplegableAppearance Profilede la sección.

Label

Nombre descriptivo del perfil visible para el administrador.

Uso: facilita reconocer el perfil en la configuración, por ejemplo,Kompaktowy,Wyróżniony,Neutralny. En combinación con el código, crea una etiqueta clara en la lista de selección de perfiles deFeature Sections.

Background

Color de fondo de la sección para el perfil.

Uso: destacar secciones seleccionadas o adaptarlas al tema.

Text

Color del texto básico en la sección.

Heading

Color del título de la sección.

Accent

Color de acento, por ejemplo, de elementos activos, puntos de escala o destacados.

Accent Background

Color de fondo de los elementos de acento.

Border

Color de líneas, separadores, ejes de escala y bordes.

Icon

Color del icono para desplegar y contraer la sección.

Radius, e.g. 18px

Redondeo de las esquinas de la sección.

Ejemplos:0,8px,18px.

Padding, e.g. 28px

Espaciado interno de la sección.

Ejemplos:16px,24px,28px.

Label Font Size, e.g. 21px

Tamaño del texto de las etiquetas de características en la sección.

Ejemplos:16px,18px,21px,1.25rem.

Product Features Appearance

Este grupo contiene la apariencia global de las secciones. Los ajustes se convierten en variables CSS y se aplican al wrapper del módulo.

Section Background Color

Color de fondo de la sección.

Valor predeterminado:#f4f4f4.

Section Text Color

Color básico del texto en la sección.

Valor predeterminado:#000000.

Section Heading Color

Color del encabezado de la sección.

Valor predeterminado:#000000.

Muted Text Color

Color de los textos auxiliares y menos importantes.

Valor predeterminado:#555555.

Accent Color

Color de los elementos activos y destacados.

Valor predeterminado:#000000.

Accent Background Color

Color de fondo de los elementos activos, por ejemplo, selecciones.

Valor predeterminado:#ffffff.

Border Color

Color de bordes, separadores y ejes de escala.

Valor predeterminado:#9b9b9b.

Icon Color

Color del icono+/-en el encabezado de la sección.

Valor predeterminado:#000000.

Selected Text Color

Color del texto del valor seleccionado.

Valor predeterminado:#000000.

Selected Font Weight

Peso de la fuente del valor seleccionado.

Valor predeterminado:700.

Ejemplos:400,500,600,700,bold.

Section Border Radius

Redondeo del contenedor de la sección.

Valor predeterminado:18px.

Section Padding

Espaciado interno de la sección.

Valor predeterminado:28px.

Section Gap

Espacio entre secciones.

Valor predeterminado:16px.

Heading Font Size

Tamaño de la fuente del encabezado de la sección.

Valor predeterminado:20px.

Ejemplos:18px,20px,1.25rem,clamp(18px, 2vw, 22px).

Label Font Size

Tamaño de la fuente de las etiquetas de características y de las etiquetas de valores.

Valor predeterminado:21px.

Body Font Size

Tamaño de la fuente del contenido básico de la sección.

Valor predeterminado:16px.

Gestión de atributos en el producto

El módulo no crea un sistema independiente de datos de producto. Utiliza los atributos de producto de Magento, por lo que la gestión del contenido se realiza principalmente en la edición del producto.

Edición de un producto individual

1. Ve aCatalog > Products.
2. Abre el producto para editarlo.
3. Completa los atributos que utilizan las secciones del módulo.
4. Si el producto debe utilizar bloques CMS, ve al grupoProduct Featuresy configura el campoCMS Blocks.
5. Guarda el producto.
6. Limpia la caché si el proyecto lo requiere.

La sección aparecerá en el frontend solo si:

• el módulo está activado,
• la sección está activada en la configuración,
• el atributo existe,
• el producto tiene un valor de atributo,
• el renderer puede gestionar el valor seleccionado,
• la sección no ha sido ocultada porHide Empty.

Atributoblocks_id/ CMS Blocks

Durantesetup:upgradeel módulo añade el atributo de producto:

• código:blocks_id,
• etiqueta:CMS Blocks,
• tipo:text,
• input:multiselect,
• source model: bloques CMS activos,
• backend: backend estándar de Magento para multiselect,
• scope: Store View,
• grupo:Product Features,
• visible en la edición del producto,
• disponible en el grid de productos y en el filtrado del grid.

El campoCMS Blockspermite asignar bloques CMS activos al producto. Cada bloque seleccionado se renderizará como una sección independiente, si en la configuración del módulo existe una sección con:

• Attribute Code:blocks_id,
• Display Type:cms_blocks.

El título de la sección en el frontend procede del título del bloque CMS, y el contenido, del contenido del bloque. Los bloques inactivos o no disponibles para el Store View no se renderizan.

Gestión de bloques CMS

Los bloques utilizados porblocks_idse crean de forma estándar en Magento:

Content > Elements > Blocks

Recomendaciones:

• utiliza títulos de bloque claros, ya que pueden ser visibles como títulos de sección,
• asigna los bloques a los Store View adecuados,
• establece el bloque como activo,
• guarda en los bloques contenido descriptivo que deba compartirse entre muchos productos, por ejemplo, entrega, devoluciones, instrucciones, tecnologías.

Edición masiva de productos

Atributoblocks_idestá preparado para trabajar con la edición masiva de productos.

1. Ve aCatalog > Products.
2. Selecciona los productos en el grid.
3. Elige la acciónUpdate Attributes.
4. Configura el valor del campoCMS Blocks.
5. Guarda los cambios.

Uso: asignación rápida de la misma sección CMS, por ejemploDostawa,ZwrotyoInstrukcja pielęgnacji, a muchos productos al mismo tiempo.

Atributos para escala

Para el tiposcaleutiliza atributosselectcon 2 o 3 opciones activas.

Ejemplo:

• el atributofit,
• opciones:Luźny,Regularny,Dopasowany.

El producto debe tener seleccionada una de las opciones. El módulo mostrará todas las opciones de la escala y destacará la asignada al producto.

Si el atributo tiene menos de 2 o más de 3 opciones, el rendererscaleomitirá ese atributo.

Atributos multiselect

Para listas de características, usos, tecnologías o certificados, utiliza atributosmultiselect.

Tipos de presentación posibles:

• text_list,
• badge_list,
• swatch_list,
• swatch_grid,
• multiselect_icon,
• icon_list.

El producto puede tener varios valores seleccionados. El módulo renderiza solo los valores asignados al producto.

Swatches de Magento

Si el atributo multiselect utiliza swatches de Magento, puede utilizarse el tiposwatch_listoswatch_grid.

Uso:

• iconos de tecnologías,
• colores,
• pictogramas de usos,
• marcas de materiales.

Si la opción tiene un swatch de imagen, el módulo mostrará la imagen. Si tiene un swatch de color o de texto, el módulo utilizará la variante correspondiente.

Iconos de Amasty

Para el tipomultiselect_icon, el módulo intenta obtener el icono de la opción desde Amasty ShopbyBrand / ShopbyBase.

Fuente del icono:

Shop by Brand > Option Edit > Other > Small Image

El texto alternativo procede deSmall Image Alt, y si falta, de la etiqueta de la opción.

Si Amasty no está instalado o la opción no tiene icono, el módulo mostrará solo la etiqueta.

Atributos de texto y HTML

Para información breve utilizatext_inline,key_valueobadge.

Para descripciones más largas utilizatext_block,accordion_textohtml_block.

Nota:html_blockyaccordion_textrenderizan HTML, por lo que deben utilizarse únicamente para contenido administrativo de confianza.

Atributos numéricos

Para valores numéricos puede utilizarse:

• number_with_unit- cuando el número requiere una unidad,
• range_bar- cuando el valor debe mostrarse como progreso dentro de un rango,
• rating_dots- cuando el valor describe un nivel o una valoración.

EjemploRenderer Options JSON para un número con unidad:

{"unit":"%","precision":0}

Atributos boolean

Para atributos sí/no utiliza:

• yes_no, cuando el cliente debe ver tantoYescomoNo,
• checkmark, cuando la característica debe ser visible solo si el producto la tiene.

Atributos de imagen

Para atributos de tipo imagen puede utilizarse:

• image,
• image_with_label,
• image_grid.

El módulo construye la dirección de la imagen a partir del directorio de medios de producto de Magento y utiliza la etiqueta del atributo como texto alternativo.

Configuración de ejemplo

Sección de varias escalas:

Sección de usos con iconos:

Secciones CMS:

Diagnóstico

Si la sección no aparece en el frontend, comprueba:

• siEnableddel módulo tiene el valorYes,
• si la sección correspondiente tieneEnabled = Yes,
• si el producto tiene el atributo completado,
• si se ha seleccionado elAttribute CodeoAttribute Codes,
• siDisplay Typecoincide con el tipo de atributo,
• siHide Emptyno oculta una sección vacía,
• si el atributo está disponible para el Store View correspondiente,
• si el bloque CMS está activo y asignado al Store View adecuado,
• si la caché de Magento se ha actualizado.