Descuentos progresivos - Bsale-IO/template-docs GitHub Wiki

Componente por defecto en los templates desde el 22 de Agosto 2025

Código Componente - Producto > detalle > descuentos 
{% comment %} Variable de configuración {% endcomment %}
{% assign tipo_descuento = "directo" %}
{% comment %} 
Opciones disponibles:
- "modal" -> Se abre en modal
- "acordeon" -> Se muestra con acordeón desplegable
- "directo" -> Se muestra la tabla directamente
{% endcomment %}

<div data-bs="discount-progressive">
    {% if descuentosProgresivos.size > 0 %}
        {% assign max_discount = 0 %}
        {% assign max_discount_row = nil %}
        {% for dcto in descuentosProgresivos %}
            {% if dcto.discount > max_discount %}
                {% assign max_discount = dcto.discount %}
                {% assign max_discount_row = dcto %}
            {% endif %}
        {% endfor %}

        {% if tipo_descuento == "modal" %}
            <div class="discount-modal-trigger mt-4">
            <button type="button" class="btn-discount-primary mt-2 mb-2" data-toggle="modal" data-target="#modalDiscount">
                <i class="fas fa-tags"></i> ¡Descuentos por cantidad!
            </button>
            </div>

            <aside class="modal fade" id="modalDiscount" tabindex="-1" role="dialog" aria-labelledby="modalDiscountLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalDiscountLabel">Descuentos por cantidad</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="discount-info-banner">
                                <p class="mb-2">
                                    <i class="fas fa-info-circle"></i>
                                    Aprovecha nuestros descuentos progresivos comprando más unidades
                                </p>
                            </div>
                            <div class="discount-table-scroll">
                                <table class="discount-table">
                                    <tr class="discount-table-head">
                                        <th>Desde</th>
                                        <th>Precio</th>
                                        <th>Descuento</th>
                                    </tr>
                                    {% for dcto in descuentosProgresivos %}
                                        <tr {% if dcto == max_discount_row %}class="discount-row-highlight"{% endif %}>
                                            <td>{{ dcto.quantity | round }} un</td>
                                            <td>{{ dcto.price | money_filter }} c/u</td>
                                            <td><span class="discount-percent">{{ dcto.discount | round }} %</span> {% if dcto == max_discount_row %} <span class="discount-best-deal">¡MEJOR OFERTA!</span> {% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </aside>

        {% elsif tipo_descuento == "acordeon" %}
            <div class="discount-accordion mt-4" id="discountAccordion">
                <div class="discount-card">
                    <div class="discount-card-header d-flex align-items-center justify-content-between" id="headingDiscount">
                        <h5 class="mb-0 discount-accordion-title">
                            Descuentos por volumen
                            <small class="discount-subtitle">Compra más, ahorra más</small>
                        </h5>
                        <button class="discount-accordion-btn" type="button" data-toggle="collapse" data-target="#collapseDiscount" aria-expanded="false" aria-controls="collapseDiscount">
                            <span class="discount-toggle-icon"></span>
                        </button>
                    </div>

                    <div id="collapseDiscount" class="collapse" aria-labelledby="headingDiscount" data-parent="#discountAccordion">
                        <div class="discount-card-body">
                            <div class="discount-table-container-accordion">
                                <table class="discount-table">
                                    <tr class="discount-table-head">
                                        <th>Desde</th>
                                        <th>Precio</th>
                                        <th>Descuento</th>
                                    </tr>
                                    {% for dcto in descuentosProgresivos %}
                                        <tr {% if dcto == max_discount_row %}class="discount-row-highlight"{% endif %}>
                                            <td>{{ dcto.quantity | round }} un</td>
                                            <td>{{ dcto.price | money_filter }} c/u</td>
                                            <td><span class="discount-percent">{{ dcto.discount | round }} %</span> {% if dcto == max_discount_row %} <span class="discount-best-deal">¡MEJOR OFERTA!</span> {% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% elsif tipo_descuento == "directo" %}
            <div class="discount-direct-container">
                <table class="discount-table-direct mt-4">
                    <thead>
                        <tr class="discount-table-head-direct">
                            <th>Desde</th>
                            <th>Precio</th>
                            <th>Descuento</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for dcto in descuentosProgresivos %}
                            <tr class="discount-row-direct {% if dcto == max_discount_row %}discount-row-highlight{% endif %}">
                                <td>{{ dcto.quantity | round }} un</td>
                                <td>{{ dcto.price | money_filter }} <small>c/u</small></td>
                                <td><span class="discount-percent">{{ dcto.discount | round }}%</span> {% if dcto == max_discount_row %} <span class="discount-best-deal">¡MEJOR OFERTA!</span> {% endif %}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    {% endif %}
</div>

<style>
/* Scroll controlado para la tabla del modal */
.discount-table-scroll {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.discount-table-scroll::-webkit-scrollbar {
    width: 6px;
}

.discount-table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.discount-table-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.discount-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
.discount-direct-container {
    margin: 15px 0;
}

.discount-table-direct {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.discount-table-head-direct th {
    background-color: #f8f9fa;
    padding: 10px 15px;
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}

.discount-row-direct {
    transition: background-color 0.2s ease;
}

.discount-row-direct:hover {
    background-color: #f8f9fa;
}

.discount-row-direct:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.discount-row-direct td {
    padding: 8px 15px;
    text-align: center;
    vertical-align: middle;
}

.discount-row-direct td small {
    color: #6c757d;
    font-size: 11px;
}

.discount-percent {
    color: #dc3545;
    font-weight: 600;
}
.discount-modal-content {
    border: none;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.discount-modal-header {
    background: linear-gradient(135deg, var(--primary-color, #007bff), var(--primary-hover-color, #0056b3));
    color: white;
    border: none;
    padding: 20px 25px;
    position: relative;
}

.discount-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.discount-close-btn {
    color: white;
    opacity: 0.8;
    font-size: 28px;
    transition: opacity 0.3s ease;
}

.discount-close-btn:hover {
    opacity: 1;
    color: white;
}

.discount-modal-body {
    padding: 25px;
    background-color: #fafafa;
}

.discount-info-banner {
    background-color: #f8f9fa;
    border-left: 3px solid #dee2e6;
    padding: 8px 12px;
    margin-bottom: 15px;
    border-radius: 4px;
    color: #6c757d;
}

.discount-info-banner p {
    margin: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.discount-table-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.discount-table-head {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.discount-table-head th {
  background-color: #f8f9fa;
  padding: 10px 15px;
  font-weight: 600;
  color: #495057;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #dee2e6;
}
.discount-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
}
.discount-table td {
  padding: 8px 15px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}
.discount-table-head th:first-child {
    border-top-left-radius: 8px;
}

.discount-table-head th:last-child {
    border-top-right-radius: 8px;
}

.discount-row {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.discount-row:hover {
    background-color: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.discount-row:last-child {
    border-bottom: none;
}

.discount-row td {
    padding: 18px 20px;
    text-align: center;
    vertical-align: middle;
    border: none;
}

.quantity-badge {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    min-width: 60px;
}

.price-cell {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

.price-cell small {
    color: #6c757d;
    font-weight: 400;
    font-size: 12px;
}

.discount-badge {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    min-width: 50px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.discount-modal-footer {
    background-color: #f8f9fa;
    border: none;
    padding: 20px 25px;
    text-align: center;
}

.btn-discount-primary {
    background: linear-gradient(135deg, var(--primary-color, #007bff), var(--primary-hover-color, #0056b3));
    border: none;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-discount-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
    color: white;
}

.btn-discount-secondary {
    background-color: #6c757d;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-discount-secondary:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    color: white;
}

/* Responsivo */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .discount-modal-body {
        padding: 15px;
    }
    
    .discount-table-container {
        padding: 15px;
    }
    
    .discount-row td {
        padding: 12px 10px;
        font-size: 14px;
    }
    
    .quantity-badge,
    .discount-badge {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Estilos para el acordeón de descuentos */
.discount-accordion .discount-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    margin: 8px 0;
    width: 100%;
    max-width: 500px;
}

.discount-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: bold;
    color: #333;
}

.discount-accordion-title {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
}

.discount-title-icon {
    color: #28a745;
    font-size: 16px;
}

.discount-subtitle {
    font-size: 11px;
    color: #6c757d;
    font-weight: 400;
    margin-left: 24px;
    font-style: italic;
}

.discount-accordion-btn {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-contrast);
    font-size: 18px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.discount-accordion-btn:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: white;
}

.discount-toggle-icon {
    font-size: 18px;
    position: relative;
}

/* Crear el icono + con pseudo-elementos */
.discount-toggle-icon::before,
.discount-toggle-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    transition: all 0.3s ease;
}

/* Línea horizontal del + */
.discount-toggle-icon::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Línea vertical del + */
.discount-toggle-icon::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Cuando el acordeón está abierto, ocultar la línea vertical para hacer un - */
.discount-accordion-btn[aria-expanded="true"] .discount-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.discount-card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0px;
    overflow: hidden;
}

.discount-table-container-accordion {
    overflow-x: auto;
    padding: 10px;
    max-width: 100%;
}

.discount-table-container-accordion .discount-table {
    width: 100%;
    min-width: 320px;
    font-size: 13px;
    border-collapse: collapse;
    table-layout: fixed;
}

.discount-table-container-accordion .discount-table th,
.discount-table-container-accordion .discount-table td {
    padding: 8px 6px;
    text-align: center;
    border: 1px solid #dee2e6;
    word-wrap: break-word;
}

.discount-table-container-accordion .discount-table th:nth-child(1),
.discount-table-container-accordion .discount-table td:nth-child(1) {
    width: 25%;
    min-width: 50px;
}

.discount-table-container-accordion .discount-table th:nth-child(2),
.discount-table-container-accordion .discount-table td:nth-child(2) {
    width: 45%;
    min-width: 80px;
}

.discount-table-container-accordion .discount-table th:nth-child(3),
.discount-table-container-accordion .discount-table td:nth-child(3) {
    width: 30%;
    min-width: 55px;
}

.discount-table-container-accordion .discount-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
}

/* Scrollbar sutil para acordeón */
.discount-table-container-accordion::-webkit-scrollbar {
    height: 4px;
}

.discount-table-container-accordion::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.discount-table-container-accordion::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.discount-accordion-body {
    padding: 10px 20px;
    font-size: 14px;
    background-color: #ffffff;
    color: #333;
}

/* --- NUEVOS ESTILOS PARA DESTACAR LA MEJOR OFERTA --- */

/* Clase para resaltar la fila completa */
.discount-row-highlight {
    background-color: #efefef; 
    font-weight: bold;
    animation: fadeIn 0.5s ease-in-out;
}

/* Estilo para el texto de "¡MEJOR OFERTA!" */
.discount-best-deal {
    background-color: var(--primary-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    animation: pulse-promo 2s infinite; /* Animación para un efecto dinámico */
}

/* Animación de pulso para la etiqueta */
@keyframes pulse-promo {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animación para el fade-in de la fila */
@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* Asegurar que el estilo de la tabla directa y del acordeón también resalte la fila */
.discount-table-direct.discount-row-highlight {
    background-color: #e6f7ff !important; /* Usar !important para anular el hover */
}

</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const alreadyShown = sessionStorage.getItem("shownProgressiveDiscount");

    if (!alreadyShown) {
      setTimeout(function() {
        const modal = document.getElementById("modalDiscount");
        if (modal) {
          $(modal).modal('show');
          sessionStorage.setItem("shownProgressiveDiscount", "true");
        }
      }, 1500);
    }
  });
</script>

Instrucciones de Instalación

El componente Modal esta incorporado en todos los template base, se llama directo en el componente Producto > detalle

{{'Producto > detalle > descuentos'| get_component }}

Instrucciones de su configuración

EL principio del componente tiene sus variables de configuración la cual son las siguientes:

{% assign tipo_descuento = "directo" %}
{% comment %} 
Opciones disponibles:
- "modal" -> Se abre en modal
- "acordeon" -> Se muestra con acordeón desplegable
- "directo" -> Se muestra la tabla directamente
{% endcomment %}

Important

Este componente esta incorporado por defecto en las plantillas desde el 22 de Agosto 2025, la cual si se desea incoporar a una plantilla de antes de esa fecha se debe ajustar el componente Producto > detalle y crear el componente Producto > detalle > descuentos

Instrucciones para instalarlo en plantillas antes de 22 de Agosto 2025

  1. De acuerdo a la versión del template, copia el código del componente Producto > detalle
template - Matias 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="" data-bs="product.detail">

    <h1 class="bs-product__title">{{title | capitalize}} </h1>
    
     <!-- Sección con tabla de descuentos al lado -->   
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
            <span class="bs-product__notice">{{product.notice | capitalize}}</span>
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
            
            <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->
     <div>
    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}
    </div>

    <!------------------------form add to cart ------------------------------------------>
    <div class="row" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 col-xl-4  mt-2 form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-12 col-md-6 mt-2 form-group">
            <button class="btn btn-primary d-none" data-bs="cart.add">
                Agregar al carro
            </button>
            <button class="btn btn-primary d-none" data-bs="product.order">
                Avísame Cuando LLegue
            </button>
        </div>
    </div>
    {% if product.description.size > 0 %}
    <section class="bs-product-description">
        {{product.description}}
    </section>
    {% endif %}
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Facundo 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="mt-3" data-bs="product.detail">
<!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title">{{title | capitalize}} </h1>
    
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
            <span class="bs-product__notice">{{product.notice | capitalize}}</span>
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
            
            <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->

    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}
    <!------------------------form add to cart ------------------------------------------>
    <div class="row align-items-end" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 form-group">
            <label class="bs-product__label">cantidad</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-md-6 form-group ">
            <button class="btn btn-primary w-100 d-none" data-bs="cart.add">
               Agregar al carro
            </button>
            <button class="btn btn-danger w-100 d-none" data-bs="product.order">
            Avísame cuando llegue
            </button>
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Catalina 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="mt-3" data-bs="product.detail">
<!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title">{{title | capitalize}} </h1>
    
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
            <span class="bs-product__notice">{{product.notice | capitalize}}</span>
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
            
            <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->

    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}
    <!------------------------form add to cart ------------------------------------------>
    <div class="row align-items-end" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 form-group">
            <label class="bs-product__label">cantidad</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-md-6 form-group ">
            <button class="btn btn-primary w-100 d-none" data-bs="cart.add">
               Agregar al carro
            </button>
            <button class="btn btn-danger w-100 d-none" data-bs="product.order">
            Avísame cuando llegue
            </button>
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Sofia 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="mt-3" data-bs="product.detail">
<!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title">{{title | capitalize}} </h1>
    
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
            <span class="bs-product__notice">{{product.notice | capitalize}}</span>
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
            
            <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->

    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}
    <!------------------------form add to cart ------------------------------------------>
    <div class="row align-items-end" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 form-group">
            <label class="bs-product__label">cantidad</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-md-6 form-group ">
            <button class="btn btn-primary w-100 d-none" data-bs="cart.add">
               Agregar al carro
            </button>
            <button class="btn btn-danger w-100 d-none" data-bs="product.order">
            Avísame cuando llegue
            </button>
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Trinidad 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="mt-3" data-bs="product.detail">
<!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title"> {{title}} </h1>
    
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
        
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
            
            <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->

    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}
    <!------------------------form add to cart ------------------------------------------>
    <div class="row align-items-end" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 form-group">
            <label class="bs-product__label">cantidad</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-md-6 form-group ">
            <button class="btn btn-primary w-100 d-none" data-bs="cart.add">
               Agregar al carro
            </button>
            <button class="btn btn-danger w-100 d-none" data-bs="product.order">
            Avísame cuando llegue
            </button>
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Ricardo 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="mt-3" data-bs="product.detail">
<!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title">{{title}} <small class="bs-product__title-notice">{{product.notice}}</small></h1>
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
    
    <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->

    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}

    <!------------------------form add to cart ------------------------------------------>
    <div class="row align-items-end" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 form-group">
            <label class="bs-product__label">cantidad</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-md-6 form-group ">
            <button class="btn btn-primary w-100 d-none" data-bs="cart.add">
               Agregar al carro
            </button>
            <button class="btn btn-danger w-100 d-none" data-bs="product.order">
            Avísame cuando llegue
            </button>
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Nicolas 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="mt-3" data-bs="product.detail">
<!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title">{{title}} <small class="bs-product__title-notice">{{product.notice}}</small></h1>
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
    
    <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->

    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}

    <!------------------------form add to cart ------------------------------------------>
    <div class="row align-items-end" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 form-group">
            <label class="bs-product__label">cantidad</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-md-6 form-group ">
            <button class="btn btn-primary w-100 d-none" data-bs="cart.add">
               Agregar al carro
            </button>
            <button class="btn btn-danger w-100 d-none" data-bs="product.order">
            Avísame cuando llegue
            </button>
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Rosario 
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="mt-3" data-bs="product.detail">
<!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title">{{title}} <small class="bs-product__title-notice">{{product.notice}}</small></h1>
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
    
    <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!----------- stock ---------------------->

    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}

    <!------------------------form add to cart ------------------------------------------>
    <div class="row align-items-end" id="bs-product-form">
        <div class="col-12">
            {{ 'Producto > detalle > atributos' | get_component }}
            <!---------------- select ------------------------>
            
        </div>
        <!------------------ cantidad ----------------------------->
        <div class="col-12 col-md-6 form-group">
            <label class="bs-product__label">cantidad</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-md-6 form-group ">
            <button class="btn btn-primary w-100 d-none" data-bs="cart.add">
               Agregar al carro
            </button>
            <button class="btn btn-danger w-100 d-none" data-bs="product.order">
            Avísame cuando llegue
            </button>
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    
    {{'redes sociales > compartir' | get_component }}
    
    
</article>
template - Joaquín 
{% assign encargar = true %}
{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

<article class="" data-bs="product.detail">
    <!-- Sección con tabla de descuentos al lado -->
    <h1 class="bs-product__title">{{title | capitalize}} </h1>
    
    <div class="row">
        <!-- Columna izquierda: información básica del producto -->
        <div class="col-12 col-lg-5">
            <span class="bs-product__notice">{{product.notice | capitalize}}</span>
          
            <div class="bs-product__sku" data-bs="product.sku">{{product.sku}}</div>
            
            <!------- marca -------------->
            {% if product.brand and product.brand.name != "" %}
                {% if product.brand.logoImg %}
                    <a  href="{{product.brand.link}}" title="{{product.brand.name}}">
                        <img class="fluid-img" src="{{product.brand.logoImg | image_url:'T'}}" 
                            title="{{product.brand.name}}" 
                            alt="{{product.brand.name}}"> 
                    </a>   
                {% elsif product.brand.link %}
                    <a class="btn btn-light" href="{{product.brand.link}}" title="{{product.brand.name}}">
                        {{product.brand.name}}
                    </a>
                {% endif %}
            {% endif %}
            
            <!-----------------price -------------------->
            {{'Producto > detalle > precio' | get_component }}
        </div>
        
        <!-- Columna derecha: tabla de descuentos -->
        <div class="col-12 col-lg-7">
        {{'Producto > detalle > descuentos' | get_component }}
        </div>
    </div>
    
    <!-- El resto del contenido ocupa todo el ancho -->
    <!------------------------form add to cart ------------------------------------------>
    {{'Producto > detalle > atributos' | get_component }}
    <!----------- stock ---------------------->
    {% if show_sucursal_table %}
        {{ 'Sucursal > tabla stock' | get_component }}
    {% else %}
        {{ 'Sucursal > stock ' | get_component }}
        {{ 'Producto > detalle > stock' | get_component }}
    {% endif %}
    <!-- agregar------------->
    <div class="form-row mt-1">       
        <!------------------ cantidad ----------------------------->
        <div class="col-6 pr-1 form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <button data-bs="product.quantity.minus" class="btn btn-secondary px-2">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
                <input data-bs="product.quantity" class="form-control text-center px-1 "  value="1" min="1">
                <div class="input-group-append">
                    <button data-bs="product.quantity.plus" class="btn btn-secondary  px-2">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-------------------- add to cart ------------------------>
        <div class="col-6 pl-1 form-group ">
            <button class="btn btn-primary d-none w-100 h-100" data-bs="cart.add">
               Agregar <span class="d-none d-sm-inline">al carro</span>
            </button>
            {% if encargar %}
                <button class="btn btn-danger d-none w-100" data-bs="product.order">
                    Avísame cuando llegue
                </button>
            {% else %}
             
            {% endif %}
        </div>
    </div>
    <section class="bs-product-description">
        {{product.description}}
    </section>
    {{'redes sociales > compartir' | get_component }}
</article>
  1. Crea componente Producto > detalle > descuentos
Codigo Componente Producto > detalle > descuentos 
{% comment %} Variable de configuración {% endcomment %}
{% assign tipo_descuento = "directo" %}
{% comment %} 
Opciones disponibles:
- "modal" -> Se abre en modal
- "acordeon" -> Se muestra con acordeón desplegable
- "directo" -> Se muestra la tabla directamente
{% endcomment %}

<div data-bs="discount-progressive">
    {% if descuentosProgresivos.size > 0 %}
        {% assign max_discount = 0 %}
        {% assign max_discount_row = nil %}
        {% for dcto in descuentosProgresivos %}
            {% if dcto.discount > max_discount %}
                {% assign max_discount = dcto.discount %}
                {% assign max_discount_row = dcto %}
            {% endif %}
        {% endfor %}

        {% if tipo_descuento == "modal" %}
            <div class="discount-modal-trigger mt-4">
            <button type="button" class="btn-discount-primary mt-2 mb-2" data-toggle="modal" data-target="#modalDiscount">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                <path d="M13.442 2.558a1.5 1.5 0 0 0-2.121 0L2.558 11.32a1.5 1.5 0 1 0 2.121 2.122L13.442 4.68a1.5 1.5 0 0 0 0-2.122zM5.5 6a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm6 6a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                </svg> ¡Descuentos por cantidad!
            </button>
            </div>

            <aside class="modal fade" id="modalDiscount" tabindex="-1" role="dialog" aria-labelledby="modalDiscountLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalDiscountLabel">Descuentos por cantidad</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="discount-info-banner">
                                <p class="mb-2">
                                    <i class="fas fa-info-circle"></i>
                                    Aprovecha nuestros descuentos progresivos comprando más unidades
                                </p>
                            </div>
                            <div class="discount-table-scroll">
                                <table class="discount-table">
                                    <tr class="discount-table-head">
                                        <th>Desde</th>
                                        <th>Precio</th>
                                        <th>Descuento</th>
                                    </tr>
                                    {% for dcto in descuentosProgresivos %}
                                        <tr {% if dcto == max_discount_row %}class="discount-row-highlight"{% endif %}>
                                            <td>{{ dcto.quantity | round }} un</td>
                                            <td>{{ dcto.price | money_filter }} c/u</td>
                                            <td><span class="discount-percent">{{ dcto.discount | round }} %</span> {% if dcto == max_discount_row %} <span class="discount-best-deal">¡MEJOR OFERTA!</span> {% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </aside>

        {% elsif tipo_descuento == "acordeon" %}
            <div class="discount-accordion mt-4" id="discountAccordion">
                <div class="discount-card">
                    <div class="discount-card-header d-flex align-items-center justify-content-between" id="headingDiscount">
                        <h5 class="mb-0 discount-accordion-title">
                            Descuentos por volumen
                            <small class="discount-subtitle">Compra más, ahorra más</small>
                        </h5>
                        <button class="discount-accordion-btn" type="button" data-toggle="collapse" data-target="#collapseDiscount" aria-expanded="false" aria-controls="collapseDiscount">
                            <span class="discount-toggle-icon"></span>
                        </button>
                    </div>

                    <div id="collapseDiscount" class="collapse" aria-labelledby="headingDiscount" data-parent="#discountAccordion">
                        <div class="discount-card-body">
                            <div class="discount-table-container-accordion">
                                <table class="discount-table">
                                    <tr class="discount-table-head">
                                        <th>Desde</th>
                                        <th>Precio</th>
                                        <th>Descuento</th>
                                    </tr>
                                    {% for dcto in descuentosProgresivos %}
                                        <tr {% if dcto == max_discount_row %}class="discount-row-highlight"{% endif %}>
                                            <td>{{ dcto.quantity | round }} un</td>
                                            <td>{{ dcto.price | money_filter }} c/u</td>
                                            <td><span class="discount-percent">{{ dcto.discount | round }} %</span> {% if dcto == max_discount_row %} <span class="discount-best-deal">¡MEJOR OFERTA!</span> {% endif %}</td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% elsif tipo_descuento == "directo" %}
            <div class="discount-direct-container">
                <table class="discount-table-direct mt-4">
                    <thead>
                        <tr class="discount-table-head-direct">
                            <th>Desde</th>
                            <th>Precio</th>
                            <th>Descuento</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for dcto in descuentosProgresivos %}
                            <tr class="discount-row-direct {% if dcto == max_discount_row %}discount-row-highlight{% endif %}">
                                <td>{{ dcto.quantity | round }} un</td>
                                <td>{{ dcto.price | money_filter }} <small>c/u</small></td>
                                <td><span class="discount-percent">{{ dcto.discount | round }}%</span> {% if dcto == max_discount_row %} <span class="discount-best-deal">¡MEJOR OFERTA!</span> {% endif %}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    {% endif %}
</div>

<style>
/* Scroll controlado para la tabla del modal */
.discount-table-scroll {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.discount-table-scroll::-webkit-scrollbar {
    width: 6px;
}

.discount-table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.discount-table-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.discount-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
.discount-direct-container {
    margin: 15px 0;
}

.discount-table-direct {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.discount-table-head-direct th {
    background-color: #f8f9fa;
    padding: 10px 15px;
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}

.discount-row-direct {
    transition: background-color 0.2s ease;
}

.discount-row-direct:hover {
    background-color: #f8f9fa;
}

.discount-row-direct:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.discount-row-direct td {
    padding: 8px 15px;
    text-align: center;
    vertical-align: middle;
}

.discount-row-direct td small {
    color: #6c757d;
    font-size: 11px;
}

.discount-percent {
    color: #dc3545;
    font-weight: 600;
}
.discount-modal-content {
    border: none;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.discount-modal-header {
    background: linear-gradient(135deg, var(--primary-color, #007bff), var(--primary-hover-color, #0056b3));
    color: white;
    border: none;
    padding: 20px 25px;
    position: relative;
}

.discount-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.discount-close-btn {
    color: white;
    opacity: 0.8;
    font-size: 28px;
    transition: opacity 0.3s ease;
}

.discount-close-btn:hover {
    opacity: 1;
    color: white;
}

.discount-modal-body {
    padding: 25px;
    background-color: #fafafa;
}

.discount-info-banner {
    background-color: #f8f9fa;
    border-left: 3px solid #dee2e6;
    padding: 8px 12px;
    margin-bottom: 15px;
    border-radius: 4px;
    color: #6c757d;
}

.discount-info-banner p {
    margin: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.discount-table-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.discount-table-head {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.discount-table-head th {
  background-color: #f8f9fa;
  padding: 10px 15px;
  font-weight: 600;
  color: #495057;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #dee2e6;
}
.discount-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
}
.discount-table td {
  padding: 8px 15px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}
.discount-table-head th:first-child {
    border-top-left-radius: 8px;
}

.discount-table-head th:last-child {
    border-top-right-radius: 8px;
}

.discount-row {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.discount-row:hover {
    background-color: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.discount-row:last-child {
    border-bottom: none;
}

.discount-row td {
    padding: 18px 20px;
    text-align: center;
    vertical-align: middle;
    border: none;
}

.quantity-badge {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    min-width: 60px;
}

.price-cell {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

.price-cell small {
    color: #6c757d;
    font-weight: 400;
    font-size: 12px;
}

.discount-badge {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    min-width: 50px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.discount-modal-footer {
    background-color: #f8f9fa;
    border: none;
    padding: 20px 25px;
    text-align: center;
}

.btn-discount-primary {
    background: linear-gradient(135deg, var(--primary-color, #007bff), var(--primary-hover-color, #0056b3));
    border: none;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-discount-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
    color: white;
}

.btn-discount-secondary {
    background-color: #6c757d;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-discount-secondary:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
    color: white;
}

/* Responsivo */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .discount-modal-body {
        padding: 15px;
    }
    
    .discount-table-container {
        padding: 15px;
    }
    
    .discount-row td {
        padding: 12px 10px;
        font-size: 14px;
    }
    
    .quantity-badge,
    .discount-badge {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Estilos para el acordeón de descuentos */
.discount-accordion .discount-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    margin: 8px 0;
    width: 100%;
    max-width: 500px;
}

.discount-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: bold;
    color: #333;
}

.discount-accordion-title {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
}

.discount-title-icon {
    color: #28a745;
    font-size: 16px;
}

.discount-subtitle {
    font-size: 11px;
    color: #6c757d;
    font-weight: 400;
    margin-left: 24px;
    font-style: italic;
}

.discount-accordion-btn {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-contrast);
    font-size: 18px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.discount-accordion-btn:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: white;
}

.discount-toggle-icon {
    font-size: 18px;
    position: relative;
}

/* Crear el icono + con pseudo-elementos */
.discount-toggle-icon::before,
.discount-toggle-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    transition: all 0.3s ease;
}

/* Línea horizontal del + */
.discount-toggle-icon::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Línea vertical del + */
.discount-toggle-icon::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Cuando el acordeón está abierto, ocultar la línea vertical para hacer un - */
.discount-accordion-btn[aria-expanded="true"] .discount-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.discount-card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0px;
    overflow: hidden;
}

.discount-table-container-accordion {
    overflow-x: auto;
    padding: 10px;
    max-width: 100%;
}

.discount-table-container-accordion .discount-table {
    width: 100%;
    min-width: 320px;
    font-size: 13px;
    border-collapse: collapse;
    table-layout: fixed;
}

.discount-table-container-accordion .discount-table th,
.discount-table-container-accordion .discount-table td {
    padding: 8px 6px;
    text-align: center;
    border: 1px solid #dee2e6;
    word-wrap: break-word;
}

.discount-table-container-accordion .discount-table th:nth-child(1),
.discount-table-container-accordion .discount-table td:nth-child(1) {
    width: 25%;
    min-width: 50px;
}

.discount-table-container-accordion .discount-table th:nth-child(2),
.discount-table-container-accordion .discount-table td:nth-child(2) {
    width: 45%;
    min-width: 80px;
}

.discount-table-container-accordion .discount-table th:nth-child(3),
.discount-table-container-accordion .discount-table td:nth-child(3) {
    width: 30%;
    min-width: 55px;
}

.discount-table-container-accordion .discount-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
}

/* Scrollbar sutil para acordeón */
.discount-table-container-accordion::-webkit-scrollbar {
    height: 4px;
}

.discount-table-container-accordion::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.discount-table-container-accordion::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.discount-accordion-body {
    padding: 10px 20px;
    font-size: 14px;
    background-color: #ffffff;
    color: #333;
}

@media (max-width: 1400px) {
  .discount-table td,
  .discount-table-head th,
  .discount-table-direct td,
  .discount-table-head-direct th {
    padding: 6px 8px !important;
    font-size: 13px;
  }

  .discount-best-deal {
    font-size: 9px;
    padding: 2px 6px;
  }
}
/* --- NUEVOS ESTILOS PARA DESTACAR LA MEJOR OFERTA --- */

/* Clase para resaltar la fila completa */
.discount-row-highlight {
    background-color: #efefef; 
    font-weight: bold;
    animation: fadeIn 0.5s ease-in-out;
}

/* Estilo para el texto de "¡MEJOR OFERTA!" */
.discount-best-deal {
    background-color: var(--primary-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    animation: pulse-promo 2s infinite; /* Animación para un efecto dinámico */
}

/* Animación de pulso para la etiqueta */
@keyframes pulse-promo {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animación para el fade-in de la fila */
@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* Asegurar que el estilo de la tabla directa y del acordeón también resalte la fila */
.discount-table-direct.discount-row-highlight {
    background-color: #e6f7ff !important; /* Usar !important para anular el hover */
}

</style>

Important

Cuando se copie el código de Producto > Detalle, asegúrese de que el template no sea demasiado antiguo. Con el tiempo se han agregado nuevas configuraciones y componentes, por lo que, si el template es muy antiguo, es necesario verificar que todos los componentes estén creados correctamente.

⚠️ **GitHub.com Fallback** ⚠️