Runtime JS Woo Module

El modulo Woo setup tiene su propio runtime JS y no depende solo del bundle del parent.

Archivos clave:

• setup/modules/woocommerce-setup/assets/js/woocommerce-card.js
• setup/modules/woocommerce-setup/assets/js/woocommerce-mini-cart.js
• setup/modules/woocommerce-setup/assets/js/woocommerce-sidebar.js
• setup/modules/woocommerce-setup/assets/js/woocommerce-review-images.js
• setup/modules/woocommerce-setup/module.php

Qué encola el modulo

El enqueue vive en module.php.

Que carga:

• woocommerce-card.js: global mientras el modulo este activo
• woocommerce-mini-cart.js: solo si cart_sidebar esta activo
• woocommerce-sidebar.js: solo si cart_sidebar esta activo
• woocommerce-review-images.js: solo en single product

Ademas localiza datos en bsWcSetup y bsWcReviewImages.

woocommerce-card.js

Es el runtime principal de la card compartida del modulo.

Responsabilidades:

• add to cart simple via wc-ajax add_to_cart
• modal de variaciones del sistema nuevo
• portal del modal a document.body
• lock de scroll y bloqueo de reapertura rapida
• matching de variaciones por atributos elegidos
• clamps de cantidad segun min_qty y max_qty
• preview reactiva de precio y estado
• resumen de variacion con total calculado
• rotacion hover de galeria en cards normales
• navegacion manual de galeria en swatch
• inicializacion de swatch cards
• favoritos por AJAX sincronizados entre botones repetidos

Puntos finos:

• usa data-product_variations serializado en el form del modal
• abre add_to_cart para simples y gpc_add_variable_to_cart para variables
• si la card es swatch, no autorrota la galeria por hover
• usa bsWcSetup.priceFormat para total exacto del resumen variable

Este archivo es la fuente de verdad del sistema de card moderna.

woocommerce-mini-cart.js

No solo pinta plus y minus. Sincroniza sidebar y pagina de carrito.

Responsabilidades:

• resolver wc-ajax endpoint para gpc_update_mini_cart_item
• clamp de cantidad
• update AJAX del mini-cart interno
• refresco de subtotal y total
• scroll al item actualizado en el sidebar
• trigger de wc_fragment_refresh
• comportamiento especial del boton menos en 1 para eliminar
• sincronizacion con inputs qty en la pagina /cart

Eso lo convierte en el pegamento entre mini-cart offcanvas y carrito clasico.

woocommerce-sidebar.js

Es pequeno, pero decide la UX del offcanvas del carrito.

Responsabilidades:

• abrir y cerrar sidebar
• overlay
• aria-expanded en toggles
• aria-hidden del panel
• clase body gp-cart-open
• close por Escape
• exponer window.gpOpenCartSidebar()

Mucho codigo externo da por hecho que gpOpenCartSidebar existe despues de anadir productos.

woocommerce-review-images.js

Solo vive en single product y acompana al override de reseñas.

Responsabilidades:

• leer bsWcReviewImages.maxFiles
• recortar seleccion si supera el maximo cuando es posible
• pintar preview de imagenes con URL.createObjectURL
• mostrar feedback si hay demasiados archivos
• respetar data-max-files del input

No persiste nada por si mismo; la subida real la valida y guarda PHP.

Dependencias entre archivos

• woocommerce-card.js y woocommerce-mini-cart.js dependen de fragments Woo para mantener cabecera y sidebar vivas
• woocommerce-sidebar.js expone la API global que usan los add to cart exitosos
• woocommerce-review-images.js depende del markup de single-product-reviews.php

Regla practica

• si falla la card moderna, entra primero por woocommerce-card.js
• si falla la apertura del carrito, revisa woocommerce-sidebar.js antes que CSS
• si falla el sync de cantidades, revisa woocommerce-mini-cart.js y el endpoint gpc_update_mini_cart_item
• si falla el preview de fotos, revisa woocommerce-review-images.js y luego la validacion PHP