Skip to main content

PDP Contact Lenses Details

Widget que configura el panel lateral deslizante que aparece en la página de detalle de producto (PDP) de lentillas. El usuario lo abre al pulsar el enlace "Más información" de la ficha de producto. Muestra un listado de ítems con icono, título y texto descriptivo, útil para explicar características del producto (graduaciones, materiales, uso diario/mensual, etc.).

Vista previa​

Sin imagen disponible aún. Añade una captura en ./img/pdp-contact-lenses-details.jpg y descomenta la línea siguiente.

Comportamiento​

  • Panel lateral (sidebar/drawer): Se renderiza como una capa deslizante que se abre sobre la PDP al pulsar el enlace de más información. No bloquea la navegación de la página.
  • Vacío con gracia: Si el content asset no existe o no tiene datos, el sidebar muestra un icono de estado vacío en lugar de contenido roto.
  • Título opcional: La propiedad title se muestra como encabezado en la parte superior del panel. Si está vacío, el encabezado no se renderiza.
  • Ítems flexibles: Cada ítem puede tener imagen, título y texto de forma independiente. Las tres propiedades son opcionales: si alguna falta o está vacía, simplemente no se renderiza.
  • Contenido HTML: Los campos title y text de cada ítem se renderizan sin escapar, por lo que admiten HTML (negritas, listas, enlaces, etc.).
  • Configuración por site preference: El ID del content asset se configura en la preferencia de sitio pdpIdContentAssetContactLensesDetails en Business Manager, lo que permite usar un asset diferente por site/locale.

Configuración​

Site Preference​

En Business Manager → Merchant Tools → Site Preferences → Custom Preferences, establece el ID del content asset en la preferencia:

pdpIdContentAssetContactLensesDetails = pdp-contact-lenses-details

Content Asset​

El widget se configura mediante un JSON en Business Manager → Content Assets con el ID indicado en la site preference.

{
  "title": "¿Por qué elegir nuestras lentillas?",
  "items": [
    {
      "image": "pages/contact-lenses/img/icon-comfort.svg?$staticlink$",
      "title": "Máxima comodidad",
      "text": "Fabricadas con materiales de alta respirabilidad para un uso prolongado sin molestias."
    },
    {
      "image": "pages/contact-lenses/img/icon-uv.svg?$staticlink$",
      "title": "Protección UV",
      "text": "Filtro de protección frente a los rayos ultravioleta <strong>UV-A y UV-B</strong>."
    },
    {
      "image": "pages/contact-lenses/img/icon-hydration.svg?$staticlink$",
      "title": "Hidratación continua",
      "text": "Tecnología de retención de humedad para mantener tus ojos hidratados durante todo el día."
    }
  ]
}

Propiedades​

PropiedadTipoObligatorioDescripción
titlestringNoTexto del encabezado del panel lateral. Se muestra en mayúsculas con borde inferior.
itemsarraySíListado de ítems informativos del panel.
items[].imagestringNoRuta al icono o imagen del ítem. Debe terminar en ?$staticlink$. Recomendado: SVG o PNG pequeño.
items[].titlestringNoTítulo en negrita del ítem. Admite HTML.
items[].textstringNoTexto descriptivo del ítem. Admite HTML (listas, negritas, enlaces, etc.).

Notas y consejos​

Ficheros

components/sidebar/contact-lenses-details.isml

Imágenes locales

Todas las rutas de imagen deben terminar en ?$staticlink$ para que SFCC resuelva correctamente la ruta estática del cartucho:

"image": "pages/contact-lenses/img/icon-comfort.svg?$staticlink$"

Se recomiendan iconos en formato SVG o PNG de tamaño reducido (40–64 px de ancho). El componente los muestra con tw-w-10 (40 px) en móvil y tw-w-16 (64 px) desde pantalla pequeña.

Contenido HTML en text

El campo text admite HTML enriquecido. Puedes usar negritas, listas o incluso enlaces:

"text": "Disponible en <strong>uso diario</strong> y <strong>uso mensual</strong>."
Configuración por site preference

El ID del content asset no se configura en la URL ni en un slot de página, sino en la site preference pdpIdContentAssetContactLensesDetails. Si la preferencia está vacía o el ID es incorrecto, el sidebar mostrará el estado vacío (icono de error) en lugar del contenido.