Porcentaje de descuento en items del carrito

Esta funcionalidad agrega una etiqueta "-X%" al lado del precio tachado (compare price) de cada item del carrito, tanto en el mini-carrito (notificación lateral o desplegable) como en la página completa del carrito.

El porcentaje mostrado representa el descuento total efectivo del item, calculado en el servidor, considerando tanto el precio promocional como cualquier promoción combinable aplicada.

HTML

1. En el archivo `snipplets/cart-item-ajax.tpl` de tu diseño (o el snipplet equivalente que renderiza cada item del carrito). Agregar la variable `discount_percentage` para reutilizarla:

{% set discount_percentage = item.discount_percentage %}

Importante: `item.discount_percentage` puede ser `null` cuando el item no tiene descuento. Por eso, el bloque que muestra el porcentaje siempre debe estar dentro del contenedor que ya se oculta cuando no hay `compare_at_price`.

2. Reemplazar las referencias a `item.product.promotional_price_percentage` (u otras propiedades equivalentes que hayan sido usadas antes) por `discount_percentage`.

Bloque del precio unitario (suele estar dentro de un contenedor `js-cart-item-unit-price-compare-price-container`):

<div class="js-cart-item-unit-price-compare-price-container cart-compare-price-container mb-1" data-line-item-id="{{ item.id }}"{% if not compare_at_price %} style="display: none"{% endif %}>
    {% if discount_percentage > 0 %}
        <span class="text-accent mr-1">-{{ discount_percentage }}%</span>
    {% endif %}
    <span class="js-cart-item-unit-price-compare-price price-compare opacity-50" ...>{{ compare_at_price | money }}</span>
</div>

Bloque del subtotal del item (suele estar dentro de un contenedor `js-cart-item-subtotal-compare-price-container`):

<div class="js-cart-item-subtotal-compare-price-container cart-compare-price-container mb-1" data-line-item-id="{{ item.id }}"{% if hide_compare_price_subtotal %} style="display: none"{% endif %}>
    {% if discount_percentage > 0 %}
        <span class="text-accent mr-1">-{{ discount_percentage }}%</span>
    {% endif %}
    <span class="js-cart-item-subtotal-compare-price price-compare opacity-50" ...>{{ item.compare_at_price_subtotal | money }}</span>
</div>

Buena práctica: Envolver el `<span>` con `{% if discount_percentage > 0 %}` evita renderizar "-%" cuando el valor es nulo, manteniendo el DOM limpio.

3. (Opcional) Si tu diseño usa el componente privado `cart-labels` para mostrar etiquetas como "20% OFF a partir de 3", podés pasar el parámetro `hide_percentage_off_label` para evitar duplicar la información de porcentaje (ya que ahora aparece al lado del precio):

{{ component('cart-labels', {
    ...
    hide_percentage_off_label: true,
    labels_classes: {
        ...
    }
}) }}