GTM — Zoom Images for Product Tiles in PLP

Script que aplica un zoom scale(1.4) translateX(12%) a las imágenes de los tiles de producto en PLP. Comparte los mismos filtros de producto que New Style Product Tiles PLP, pero es un script independiente que solo realiza el zoom — sin reposicionar el título ni la promo label.

---

Transformación aplicada

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

La clase gtm-product-tile__image se añade a todas las imágenes .js-product-tile__image de cada tile válido.

---

Filtros de producto

Idénticos a los de New Style Product Tiles PLP:

Tipo	Valores	Efecto
Prefijos inválidos	HAR, NAR	El tile se omite.
Sufijos inválidos	_VG	El tile se omite.

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

---

Diferencias respecto a New Style Product Tiles PLP

Aspecto	New Style Product Tiles	Zoom Images
Transformaciones	Zoom + título overlay + promo label	Solo zoom
Imágenes objetivo	.js-product-tile__image--primary (solo imagen principal)	.js-product-tile__image (todas las imágenes)
Guard anti-duplicado	Sí — clase gtm-product-tile-new-style	No
Funciones	5	4

Sin guard de clase

Este script no añade ninguna clase de guard. Si se llama varias veces (p.ej. en scroll infinito), volverá a procesar los tiles ya transformados. El efecto visual es idempotente (añadir una clase ya presente no tiene consecuencias), pero supone trabajo extra.

---

Selectores DOM

Selector	Descripción
.js-plp-list__item	Wrapper de cada tile en el listado.
.gtm-product-tile[data-pid]	Tile con el ID de producto — origen del SKU para validación.
.js-product-tile__image	Todas las imágenes del tile — reciben la clase de zoom.

---

Flujo de ejecución

fnGtmInitZoomImagesForProductTiles()  ← llamada directa al cargar el tag
  │
  ├─ fnGtmZoomImagesInProductTilesToInitElements()
  │   └─ querySelectorAll(".js-plp-list__item") → gtmProductTilesToApplyZoomImages
  │
  └─ fnGtmZoomImagesInProductTilesToApplyNewStyle()
      └─ fnGtmZoomImagesInProductTilesToUpdateImages()
          └─ Para cada .js-plp-list__item:
              ├─ 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:
                  └─ querySelectorAll(".js-product-tile__image")
                      └─ Añade gtm-product-tile__image a cada imagen