GTM — New Style for Product Tiles in PLP

Script que transforma el aspecto visual de los tiles de producto en PLP aplicando tres cambios sobre los productos válidos:

1. Imagen ampliada — zoom scale(1.4) con desplazamiento horizontal.
2. Título superpuesto — lee el atributo data-frameName del elemento original y lo renderiza como overlay sobre la imagen.
3. Promo label junto al precio — mueve la etiqueta promocional desde su posición original hasta aparecer inline con el precio.

El script puede ejecutarse múltiples veces (p.ej. en scroll infinito o paginación) gracias a un guard de clase que evita procesar tiles ya transformados.

---

Filtros de producto

El nuevo estilo no se aplica a productos cuyo data-pid cumpla alguna de estas condiciones:

Tipo	Valores	Efecto
Prefijos inválidos	HAR, NAR	Productos que empiezan por estos prefijos se omiten.
Sufijos inválidos	_VG	Productos que terminan en este sufijo se omiten.

Si data-pid está ausente, el tile también se omite.

---

Guard anti-duplicado

Antes de procesar un tile, el script comprueba si ya tiene la clase gtm-product-tile-new-style. Si la tiene, lo salta. Al procesar un tile válido, le añade esa clase como marca. Esto permite llamar a fnGtmInitNewStylesForProductTiles() en cada carga de nuevos productos sin reprocessar los ya transformados.

---

Transformaciones aplicadas

Imagen ampliada

Añade la clase gtm-product-tile__zoomed-image a .js-product-tile__image--primary:

.gtm-product-tile__zoomed-image {
  transform: scale(1.4) translateX(12%);
}

Título superpuesto

1. Lee data-frameName de .js-product-tile__title.
2. Oculta el título original (display: none).
3. Crea un <div class="gtm-product-tile__title"> con el texto del frameName.
4. Lo añade como hijo del padre del marketing label.

.gtm-product-tile__title {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 8px); /* encima de la imagen por defecto */
  font-size: 16px;
  font-weight: 700;
  font-family: "NimbusSansDOTExtended", sans-serif;
  max-width: 65%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-transform: uppercase;
}

En escritorio (≥768px) con puntero fino (hover): el título baja hasta bottom: 8px (dentro de la imagen) al hacer hover.

Promo label

1. Localiza .js-product-tile__promo-label-wrapper.
2. Cambia el precio a display: inline-block.
3. Añade gtm-product-tile__promo-label-wrapper al label y lo mueve como hijo del padre del precio.

.gtm-product-tile__promo-label-wrapper {
  position: relative;
  top: auto;
  right: auto;
  display: inline-flex;
  margin-left: 4px;
}

---

Comportamiento hover (dispositivos con puntero fino)

Elemento	Sin hover	Con hover
.gtm-product-tile__title	bottom: calc(100% + 8px) — encima de la imagen	bottom: 8px — dentro de la imagen
.hw-product-label--marketing	Oculto (salvo --color-background: #01B4ED)	Visible (display: flex)
.js-product-tile__marketing-label-wrapper (con title sibling)	translateY(calc((100% + 8px) * -1)) — elevado	transform: none (si hay color variants), sigue elevado si no hay

Marketing label azul siempre visible

El selector .hw-product-label--marketing:not([style*="--color-background: #01B4ED;"]) oculta todos los marketing labels excepto los que tienen el color de fondo azul #01B4ED. Esos se muestran siempre, independientemente del hover.

---

Selectores DOM

Selector	Uso
.js-plp-list__item	Wrapper de cada tile. Aquí se añade la clase guard.
.gtm-product-tile[data-pid]	Tile con el ID de producto.
.js-product-tile__image--primary	Imagen principal — recibe la clase de zoom.
.js-product-tile__title[data-frameName]	Título original — se oculta; su data-frameName alimenta el nuevo título.
.js-product-tile__marketing-label-wrapper	Wrapper del marketing label — usado para posicionar el nuevo título.
.js-product-tile__promo-label-wrapper	Etiqueta promocional — se mueve junto al precio.
.js-product-tile__price	Precio — referencia para reubicar la promo label.
.js-product-color-variants	Variantes de color — z-index: 1 para quedar sobre el overlay.

---

Flujo de ejecución

fnGtmInitNewStylesForProductTiles()  ← llamada directa al cargar el tag
  │
  ├─ fnGtmNewStylesInProductTilesToInitElements()
  │   └─ Selecciona todos .js-plp-list__item
  │       → filtra los que YA tienen gtm-product-tile-new-style (guard)
  │
  └─ fnGtmZoomImagesInProductTilesToApplyNewStyle()
      └─ Para cada tile filtrado:
          ├─ Busca .gtm-product-tile → obtiene data-pid
          ├─ fnGtmZoomImagesInProductTilesToValidateProduct(pid)
          │   ├─ Sin pid → false
          │   ├─ Empieza por HAR o NAR → false
          │   ├─ Termina en _VG → false
          │   └─ Válido → true
          │
          └─ Si válido:
              ├─ Añade gtm-product-tile-new-style al wrapper (guard)
              ├─ fnGtmZoomImagesInProductTilesToUpdatePromoLabelPosition()
              │   └─ Mueve promo label junto al precio
              ├─ fnGtmZoomImagesInProductTilesToUpdateProductTileNames()
              │   └─ Crea título overlay desde data-frameName
              └─ fnGtmZoomImagesInProductTilesToApplyZoomImage()
                  └─ Añade gtm-product-tile__zoomed-image a la imagen