Detalle de precio promocional

Esta funcionalidad agrega un ícono interactivo al lado del precio del producto en la página de detalle del producto (PDP). Al hacer hover o clic sobre el ícono, se despliega una tarjeta que muestra el desglose completo del descuento combinado: precio original, descuento por precio promocional, descuento por promoción aplicada y precio final con descuentos. El ícono y la tarjeta solo se muestran cuando el producto es elegible para descuento combinado (es decir, cuando el producto tiene precio promocional y además le aplica una promoción que se combina con ese precio promocional).

HTML

En el archivo `snipplets/product/product-form.tpl` de tu diseño identificar el bloque del porcentaje de descuento al lado del precio. Suele tener una estructura similar a:

<span class="font-family-body font-big text-accent ml-2" {% if not product.compare_at_price %}style="display:none;"{% endif %}>
    <span class="js-offer-percentage">{{ discount_rate_percentage | round }}</span>% OFF
</span>

Agregar el componente privado `promotional-price-details` inmediatamente después de ese bloque:

{{ component('promotional-price-details', {
    promotional_price_details_classes: {
        container: 'tooltip-container position-relative ml-2',
        trigger: 'tooltip-trigger text-accent',
        icon: 'icon-inline icon-lg',
        detail_container: 'tooltip-card',
        detail_row: 'd-flex justify-content-between align-items-center py-1 font-small',
        detail_total: 'font-weight-bold mt-2'
    },
    promotional_price_details_icon_svg_id: 'promotions',
}) }}

Nota: El parámetro `promotional_price_details_icon_svg_id` debe coincidir con el `id` de un símbolo SVG ya definido en tu diseño (por ejemplo `promotions` o `tag`). Si tu diseño no usa sprites SVG, podés pasar el ícono directamente con `promotional_price_details_custom_icon`.

Para más detalles sobre todos los parámetros disponibles, consultá la página de [Componentes privados](https://docs.tiendanube.com/help/componentes-privados).

CSS

En el archivo `static/css/style-async.scss`. Agregar los estilos de la tarjeta y del botón disparador:

/* Tooltip card */
.tooltip-trigger {
    fill: currentcolor;
    background: none;
    border: none;
}
.tooltip-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    display: none;
    min-width: 260px;
    max-width: calc(100vw - 20px);
    padding: 10px;
    white-space: normal;
    background-color: var(--main-background);
    color: var(--main-foreground);
    border-radius: var(--border-radius-small);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .12);
}
.tooltip-container:hover .tooltip-card,
.tooltip-container:focus-within .tooltip-card,
.tooltip-card.is-visible {
    display: block;
}

Accesibilidad: El selector `:focus-within` permite que usuarios de teclado puedan abrir la tarjeta al navegar con Tab hasta el botón.

Activación

Listo, una vez que se cree un descuento sobre precios que permite combinarlo con el producto con precio promocional en el administrador y tengas un producto con precio promocional, se aplicará a tu tienda.