Oculta líneas que el comprador no debería ver, renombra líneas que se leen mal y controla el orden en que todo se renderiza, todo sin tocar lo que realmente está en el carrito.
Esto reemplaza el patrón antiguo de ocultar elementos del carrito con CSS o style.display = 'none'. Una transformación de línea se aplica cada vez que el carrito se renderiza, así que sobrevive a actualizaciones, re-renderizados y reaperturas del drawer.
Ocultar no es eliminar. Una línea oculta permanece en el carrito del comprador, permanece en el total y llega al checkout; simplemente no se dibuja en el drawer. Sí desaparece de getCart().items y de itemCount, así que tu propio código también deja de verla. Si quieres que desaparezca de verdad, usa removeItem.
Cosas comunes que vale la pena ocultar:
Los cuatro setters disponibles en una línea:
Un comparador toma la misma forma que espera Array.prototype.sort, y se ejecuta después de ocultar y renombrar:
Devuelve 0 para los pares que no te importan. Los comparadores se componen como criterios de desempate, así que el primero en devolver un valor distinto de cero decide ese par, y devolver 0 le pasa la decisión al siguiente en lugar de imponerle un orden.
Ocultar un bloque completo, no una línea
Una transformación de línea funciona sobre las líneas del carrito. Para mostrar configuraciones de bloque diferentes por país, mercado o moneda (por ejemplo, distintos niveles de Rewards), usa las condiciones en el editor del carrito. No se requiere código, y sobrevive a rediseños del carrito. El total del carrito y el contenido del carrito no son tipos de condición del editor.
Recurre al SDK cuando tu regla sea algo que las condiciones no pueden expresar (IDs de producto en el carrito, un total personalizado, etcétera). En ese caso, consulta el shadow root buscando una clase pública cart-external-*:
Esto se ejecuta después de cada renderizado, así que el bloque puede aparecer fugazmente antes de que tu código lo oculte. El renderizado condicional no tiene ese problema, así que prefiérelo donde encaje.
Cosas que hay que hacer bien
- Las transformaciones son llamadas de configuración. Regístralas al principio de tu script de Initialization; no se necesita
ready().
- Las transformaciones de todos se ejecutan. La tuya se compone con cualquiera registrada por otras apps. No puedes reemplazar las suyas, y ellas no pueden descartar la tuya.
- Una transformación no puede cambiar el precio, la cantidad ni la identidad. Solo cambia lo que se renderiza. Usa las acciones para cambios reales.
- Una transformación que lanza una excepción se omite silenciosamente. El resto sigue ejecutándose. Revisa
aftersellCartDebugEvents mientras desarrollas.
registerLineTransform devuelve una función de anulación de registro, si necesitas deshacerlo más tarde.
- Hooks: la referencia completa de hooks.
- Objeto cart: cada campo sobre el que puedes ramificar.
- Custom CSS: la convención de clases
cart-external-*.