Runtime JS Parent

El parent theme mantiene un runtime JS propio que sigue vivo aunque parte de la UX moderna este hoy en el child o en el modulo Woo.

Archivos clave:

• assets/js/woocommerce.js
• assets/js/product-card.js
• assets/js/search-ajax.js
• assets/js/fancybox-init.js
• functions.php
• modules/00-enqueue.php
• modules/30-utils.php

Mapa rapido

• woocommerce.js: single product Woo moderno del parent
• product-card.js: card legacy y modal legacy
• search-ajax.js: buscador de productos en header
• fancybox-init.js: bootstrap frontend de galerias Fancybox

woocommerce.js

Contexto de carga:

• modules/00-enqueue.php
• solo en woo_single

Responsabilidades:

• qty plus y minus en single product
• clamp de quantity con min y max
• escucha eventos jQuery de variations_form
• actualiza precio segun variation.display_regular_price y display_price
• mueve botones de atributos hacia los select ocultos de Woo
• refleja opciones deshabilitadas por Woo en la UI de botones
• bloquea submit sin variation_id
• hace AJAX add to cart del single product via balinot_add_to_cart
• refresca fragments y muestra notice contextual
• abre gpOpenCartSidebar si existe

Este archivo gobierna el PDP del parent, no las cards del listado.

product-card.js

Contexto de carga:

• functions.php
• home, woo_single y woo_catalog

Es runtime legacy y convive con el sistema nuevo del modulo Woo.

Responsabilidades:

• toast de producto anadido
• qty plus y minus en la card legacy
• modal legacy de variaciones
• lock de scroll del body para ese modal
• parseo de JSON legacy de variaciones
• matching de atributos seleccionados
• add to cart AJAX via balinot_add_to_cart
• sync de estado del boton y errores

Es importante porque taxonomy-product_cat.php y otras rutas heredadas aun dependen de la card legacy.

search-ajax.js

Contexto de carga:

• functions.php
• solo si el componente search del header esta activo

Responsabilidades:

• debounce de busqueda
• fetch a balinot_product_search
• dropdown de resultados con estado abierto o cerrado
• render de items y estado vacio
• CTA Ver todos y Hablar con el equipo
• tracking de clicks con balinot_search_result_click
• cierre al hacer click fuera o Escape

No es solo UI: tambien alimenta analitica de busqueda.

fancybox-init.js

Contexto de carga:

• modules/30-utils.php via balinot_enqueue_fancybox()
• cuando un singular necesita assets Fancybox o cuando Woo reviews/fotos fuerzan ese enqueue

Responsabilidades:

• bind directo sobre [data-fancybox]
• soporte de triggers delegados via [data-fancybox-delegate]
• agrupacion por data-fancybox
• apertura programatica con Fancybox.fromNodes()

Es pequeno, pero es el pegamento entre el markup del theme y la libreria vendor.

Relacion con el modulo Woo

Convivencia real:

• parent/product-card.js = sistema legacy de card
• modulo/woocommerce-card.js = sistema reusable moderno
• parent/woocommerce.js = single product del parent
• modulo/review-images.js y mini-cart/sidebar = capas extra Woo setup

No conviene mezclar arreglos entre ambos runtimes sin comprobar primero que surface usa cada uno.

Regla practica

• si el bug vive en PDP, empieza por woocommerce.js
• si el bug vive en una card heredada o modal viejo, empieza por product-card.js
• si el bug vive en search del header, empieza por search-ajax.js
• si falla una galeria con data-fancybox, empieza por fancybox-init.js y balinot_enqueue_fancybox()