En este tutorial, vamos a implementar la promoción de regalo en el carrito.
HTML
1. Vamos a modificar el snipplet llamado snipplets/cart-panel.tpl. En este archivo, utilizaremos el componente privado gift-promotion-progress antes de la barra de progreso de envío, para poder mostrar la nueva barra de progreso de regalos.
El código correspondiente es el siguiente:
{% set gift_progress_parameters = {
svg_sprites: false,
progress_bar_custom_icon: include('snipplets/svg/gift.tpl', {svg_custom_class: 'progress-bar-icon icon-inline icon-w-18 icon-lg svg-icon-accent'}),
show_check: false,
progress_bar_classes: {
container: 'progress-bar',
title_container: 'progress-bar-title-container',
title: 'progress-bar-title text-accent h6',
subtitle: 'progress-bar-subtitle opacity-50',
track: 'bar-progress',
fill: 'bar-progress-active transition-soft',
}
} %}
{{ component('gift-promotion-progress', gift_progress_parameters) }}También agregamos los componentes que usamos:
snipplets/svg/gift.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 144h-26.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H48c-26.5 0-48 21.5-48 48v128c0 8.8 7.2 16 16 16h16v136c0 22.1 17.9 40 40 40h368c22.1 0 40-17.9 40-40V336h16c8.8 0 16-7.2 16-16V192c0-26.5-21.5-48-48-48zM360 64c30.9 0 56 25.1 56 56s-25.1 56-56 56h-59.6c31.3-45.5 49.4-112 59.6-112zM152 64c10.3 0 28.4 66.5 59.6 112H152c-30.9 0-56-25.1-56-56s25.1-56 56-56zM32 192c0-8.8 7.2-16 16-16h176v128H32V192zm32 160h144v128H72c-4.4 0-8-3.6-8-8V352zm376 128H288V352h160v128c0 4.4-3.6 8-8 8zm40-176H288V176h176c8.8 0 16 7.2 16 16v112z"/></svg>2. También modificaremos el snipplet snipplets/forms/form-input.tpl para permitir deshabilitar los inputs de cantidad del regalo, modificaremos esto:
<div class="form-group {{ input_group_custom_class }} {% if input_disabled %}form-control-disabled{% endif %}">Y el componente del input:
<input {% if input_disabled %}disabled{% endif %} ... >3. Vamos a seguir con los cambios en snipplets/cart-item-ajax.tpl para reflejar que el producto es un regalo.
Primero vamos a definir la variable is_gift
{% set is_gift = item.is_gift %}Vamos a agregar el atributo data-gift al div de js-cart-item:
<div class="js-cart-item ..." data-gift="{{ is_gift ? 'true' : 'false' }}" ... />Sumamos la label de regalo debajo del nombre del producto:
{% if is_gift %}
<div class="text-accent font-smallest font-weight-bold text-uppercase my-2">
{{ "Regalo" | translate }}
</div>
{% endif %}Agregamos el atributo input_disabled al componente form-input del paso anterior:
{% embed "snipplets/forms/form-input.tpl" with {
input_disabled: is_gift,
...
} %}Reemplazamos el componente div ya existe js-cart-item-subtotal-compare-price-container cuando es un regalo por lo siguiente:
{% if is_gift %}
<div class="price-compare font-small opacity-50">{{ item.compare_at_price_subtotal | money }}</div>
<h6 class="{% if cart_page %}h4-md font-weight-bold{% endif %} mt-1 mb-0">{{ "Gratis" | translate }}</h6>
{% else %}
<div class="js-cart-item-subtotal-compare-price-container" > ... <div />
<h6 class="js-cart-item-subtotal ..." ...> ... <h6 />
{% endif %}Y por ultimo vamos a ocultar el botón de eliminar para que no puedan remover un regalo:
button type="button" class="... {% if is_gift %}hidden{% endif %}" ... data-component="line-item.remove">CSS
Requisito:
1. Para que los estilos se apliquen correctamente, es necesario ubicarlos en el lugar adecuado. Todos los cambios se realizarán en static/css/style-async.scss.tpl.
Vamos a agregar el siguiente css
.progress-bar {
display: flex;
flex-direction: column;
gap: 10px;
}
.progress-bar-title-container {
display: flex;
align-items: center;
gap: 8px;
}
.progress-bar-title {
flex: 1;
min-width: 0;
}
.progress-bar-icon {
flex-shrink: 0;
}
.progress-bar-subtitle {
font-size: var(--font-small);
}
.progress-bar-subtitle:not(:has(> :not([style*="display: none"]))) {
display: none;
}
.gift-promotion-progress {
margin-top: 8px;
margin-bottom: 16px;
}
.form-control-disabled {
opacity: 0.3;
pointer-events: none;
}Traducciones
En este paso agregamos los textos para las traducciones en el archivo config/translations.txt:
es "Regalo" pt "Brinde" en "Gift" es_mx "Regalo"
Activación
Para activar la funcionalidad, accede al administrador de la tienda y dirígete a la sección Descuentos > Promociones. Desde allí, crea una nueva promoción, configura los parámetros según sea necesario y guarda los cambios.
