GTM — Sign Up Fake Product PDP (Customer Logged)

Versión simplificada del script Sign Up Fake Product PDP (Guest) para usuarios que ya tienen sesión iniciada. Como Hawkers ya dispone del email del usuario, no es necesario ningún formulario: al hacer clic en el botón fake, tras 1000ms aparece directamente un mensaje de confirmación.

Sin formulario, sin API, sin evento GTM

Esta variante no hace ninguna petición XHR, no valida campos y no empuja ningún evento al dataLayer. El objetivo es únicamente mostrar un mensaje de confirmación al usuario.

Variables GTM

Variable GTM	Descripción
`{{fake-product-button-let-me-know}}`	Texto del botón fake que reemplaza al "Add to Cart".
`{{fake-product-message-success-logged}}`	Mensaje de confirmación mostrado tras el clic.

Elementos que se eliminan del DOM

Idéntico al comportamiento de la variante guest:

Selector	Qué es
`.js-button-add-to-cart`	Botón original "Add to Cart" — eliminado del DOM.
`.js-arrival-date-message`	Mensaje de fecha estimada de llegada — eliminado del DOM.

Flujo de interacción

[Botón fake]  →  click  →  is-loading (1000ms)  →  panel has-success visible

No hay segundo paso: el panel de respuesta aparece directamente, sin formulario.

Estados del componente

Clase	Elemento	Cuándo se aplica	Efecto
`is-loading`	`.gtm-html-fake-button-add-to-cart`	Al hacer clic (durante 1000ms)	`cursor: not-allowed`, oculta texto, muestra spinner.
`has-success`	`.gtm-html-fake-button-response`	Tras los 1000ms	`display: block` — panel de confirmación visible.

Clases CSS

Clase	Elemento	Descripción
`gtm-html-fake-button-parent`	Padre del botón original	`flex-wrap: wrap` — permite apilar botón + panel.
`gtm-html-fake-button-add-to-cart`	`button` fake	Fondo gris `#969696`, ancho 100%, negro al hover.
`gtm-html-fake-button-add-to-cart__text`	`span`	Texto del botón; se oculta con `is-loading`.
`gtm-html-button-loader`	`svg` spinner	Visible solo con `is-loading` en el botón.
`gtm-html-fake-button-response`	`div` panel	Oculto por defecto; `display: block` con `has-success`. `border: 1px solid #969696`, `text-align: center`, `font-size: 14px`.

Diferencias respecto a la variante Guest

Aspecto	Guest	Logged
Formulario	Sí — email + checkbox legal	No
Llamada a la API	Sí — XHR POST	No
Evento GTM	`sign_up` con `hashedEmail`	No
Delay al abrir el panel	500ms	1000ms
Clase del panel	`is-opened` en `gtm-html-fake-button-content`	`has-success` en `gtm-html-fake-button-response`
Variables GTM	9	2
Estados posibles	is-loading, is-opened, is-loading (form), has-error, has-success	is-loading, has-success

Flujo de ejecución

fnGtmSignUpFakeProductInit()  ← llamada directa al cargar el tag
  │
  ├─ fnGtmSignUpFakeProductToPreInitElements()
  │   ├─ Busca .js-button-add-to-cart → lo elimina del DOM
  │   ├─ Guarda su parentElement como addToCartButtonParent
  │   ├─ Añade gtm-html-fake-button-parent al parentElement
  │   └─ Busca .js-arrival-date-message → lo elimina del DOM
  │
  ├─ fnGtmSignUpFakeProductToInjectCode()
  │   ├─ Crea button.gtm-html-fake-button-add-to-cart con texto + spinner
  │   ├─ Crea div.gtm-html-fake-button-response con <p>{{fake-product-message-success-logged}}</p>
  │   └─ Appenda ambos al addToCartButtonParent
  │
  ├─ fnGtmSignUpFakeProductToInitElements()
  │   └─ Referencia el botón fake y el panel de respuesta
  │
  └─ fnGtmSignUpFakeProductToListenEvents()
      └─ Botón fake → click:
          ├─ Añade is-loading al botón (cursor: not-allowed, spinner visible)
          └─ setTimeout(1000ms):
              ├─ Añade has-success al panel (mensaje visible)
              └─ Quita is-loading del botón

Variables GTM​

Elementos que se eliminan del DOM​

Flujo de interacción​

Estados del componente​

Clases CSS​

Diferencias respecto a la variante Guest​

Flujo de ejecución​