En este artículo vamos a agregar la posibilidad de mostrar un mensaje de advertencia cuando un producto tiene una promoción de Descuento sobre precios que es NO combinable con alguna otra promoción. Este mensaje se mostrará en el detalle del producto debajo del precio:
HTML
Dentro de la carpeta snipplets vamos a agregar el componente price-discount-disclaimer.tpl en el archivo product-form.tpl (o product.tpl según el tema) debajo de donde está ubicado el precio:
{{ component('price-discount-disclaimer', {
container_classes: 'font-small opacity-60 mt-1 mb-2',
}) }}
Podrás usar el siguiente parámetro:
- container_classes: son clases de CSS para el contenedor del mensaje
JS
El componente cuenta con su propio JavaScript que se encarga de mostrar u ocultar el mensaje según la variante seleccionada. Este JS se conecta automáticamente con la función changeVariant en el archivo store.js.tpl, por lo que no necesitas agregar código JavaScript adicional.
El mensaje se mostrará automáticamente cuando la variante tenga una promoción de Descuento sobre precios que sea no combinable con alguna otra promoción.
Activación
Esta funcionalidad requiere que el producto tenga una promoción de Descuento sobre precios configurada para que sea NO combinable con alguna otra promoción (por ejemplo, que no combine con descuentos por cantidad, o con envío gratis, etc.). El mensaje se mostrará automáticamente cuando se cumplan estas condiciones.
Listo, ya tenés en tu diseño la funcionalidad aplicada ¡Excelente!