Descuentos progresivos

En el siguiente tutorial, explicamos cómo agregar el componente de descuentos progresivos, para poder mostrar múltiples descuentos por cantidad sobre un mismo producto.

El código en este tutorial incluye:

• Una tabla para mostrar los descuentos progresivos
• El label en la imagen del producto para mostrar el máximo descuento disponible

HTML

1. En el archivo labels.tpl vamos a modificar el siguiente código para agregar el label de descuento progresivo en la imagen del producto

<div>{{ product.promotional_offer.selected_threshold.discount_decimal_percentage * 100 }}% OFF</div>
<div class="label-small p-right-quarter p-left-quarter">
  {{ "Comprando {1} o más" | translate(product.promotional_offer.selected_threshold.quantity) }}
</div>

Lo vamos a modificar por esto

{% if product.promotional_offer.parameters | length > 1 %}
  <div>
    {{ "Hasta {1}% OFF" | translate(product.promotional_offer.selected_threshold.discount_decimal_percentage * 100) }}
  </div>
  <div class="label-small p-right-quarter p-left-quarter">{{ "Comprando en cantidad" | translate }}</div>
{% else %}
  <div>{{ product.promotional_offer.selected_threshold.discount_decimal_percentage * 100 }}% OFF</div>
  <div class="label-small p-right-quarter p-left-quarter">
    {{ "Comprando {1} o más" | translate(product.promotional_offer.selected_threshold.quantity) }}
  </div>
{% endif %}

 2. En el archivo product/product-form.tpl vamos a buscar el siguiente código 

{% for threshold in product.promotional_offer.parameters %}
  <h4 class="mb-2 text-accent"><strong>
    {{ "¡{1}% OFF comprando {2} o más!" | translate(threshold.discount_decimal_percentage * 100, threshold.quantity) }}
  </strong></h4>
{% endfor %}

y reemplazarlo por este código

{% if product.promotional_offer.parameters | length > 1 %}
  {{ component('progressive-discounts-table', {
    progressive_discounts_classes: {
      title: 'text-accent mb-3',
      table: 'table mb-2',
      hidden_table: 'table-body-inverted',
      show_more_link: 'btn-link btn-link-primary mb-4',
      show_more_icon: 'icon-inline',
      hide_icon: 'icon-inline icon-flip-vertical',
      promotion_quantity: 'font-weight-light text-lowercase'
    },
    svg_sprites: false,
    custom_control_show: include("snipplets/svg/chevron-down.tpl", { svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" }),
    custom_control_hide: include("snipplets/svg/chevron-up.tpl", { svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" }),
  }) }}
{% else %}
  {% set threshold = product.promotional_offer.parameters[0] %}
  <h4 class="mb-2 text-accent"><strong>
    {{ "¡{1}% OFF comprando {2} o más!" | translate(threshold.discount_decimal_percentage * 100, threshold.quantity) }}
  </strong></h4>
{% endif %}

CSS

1. Agregamos el siguiente SASS de colores en style-colors.scss.tpl (o la hoja de tu diseño que tenga los colores y tipografías de la tienda). Recordá que las variables de colores y tipografías pueden variar respecto a tu diseño:

{# /* // Tables */ #}

.table{
  background-color: $main-background;
  color: $main-foreground;
  tbody{
    tr:nth-child(odd){
      background-color: rgba($main-foreground, .05);
    }
    &.table-body-inverted{
      tr:nth-child(even){
        background-color: rgba($main-foreground, .05);
      }
      tr:nth-child(odd){
        background-color: $main-background;
      }
    }
  }
  th{
    padding: 8px;
    text-align: left;
  }
}

2. Vamos a mover los estilos de la tabla del archivo static/style-async.scss.tpl al archivo static/style-critical.tpl. Si en tu diseño no usas una hoja de estilos para el CSS crítico, entonces este paso no es necesario.

Borramos este código de static/style-async.scss.tpl

{# /* // Tables */ #}

.table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  thead{
    th{
      padding: 8px;
      &:first-of-type{
        padding-left: 0;
      }
    }
  }
  td{
    padding: 8px;
    text-align: left;
  }
}

Y pegamos este en static/style-critical.tpl

{# /* // Tables */ #}

.table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table thead th{
  padding: 8px;
}
.table thead th:first-of-type{
  padding-left: 0;
}
.table td{
  padding: 8px;
  text-align: left;
}

Traducciones

En este paso agregamos los textos para las traducciones en el archivo config/translations.txt 

es "Hasta {1}% OFF"
pt "Até {1}% OFF"
en "Up to {1}% OFF"
es_mx "Hasta {1}% OFF"

es "Comprando en cantidad"
pt "Comprando em quantidade"
en "Buying in quantity"
es_mx "Comprando en cantidad"

Activación

Listo, una vez que se cree un descuento progresivo en el administrador, se verán aplicados a los productos en tu tienda.