En este tutorial explicamos cómo mostrar los resultados del calculador de envíos destacando las mejores opciones y dividiendo entre opciones de envío a domicilio y puntos de retiro.
Antes de comenzar es necesario aclarar que este tutorial no incluye:
- Un paso a paso de cómo agregar el calculador de envíos
- El CSS para la UI del calculador
- El JS que hace funcionar el calculador de envíos. Es muy importante entender esto, ya que vamos a notar que el HTML del tutorial incluye clases que comienzan con “js-...”, las cuales están asociadas al JS del calculador.
Si su código no tiene estas clases, entonces es importante que este código nuevo lo adapten para que responda a sus IDs o clases conectados al JS que ya están usando.
Si desean hacer de nuevo todo el calculador de envíos para estar seguros, entonces pueden directamente seguir el tutorial del Calculador de envíos, que incluye todo lo anterior y el contenido de este artículo.
HTML
1. Lo primero que vamos a hacer es buscar el archivo shipping_options.tpl dentro de la carpeta snipplets y reemplazarlo por el siguiente código:
{% if options %}
{# Check for only shipping featured options #}
{% set has_featured_shipping = false %}
{% for option in options_to_show if option.shipping_type == 'ship' or option.shipping_type == 'delivery' or (option.method == 'table' and option.shipping_type == 'custom') %}
{% if option |length >= 1 %}
{% set has_featured_shipping = true %}
{% endif %}
{% endfor %}
{# Check for only non featured shipping options #}
{% set has_non_featured_shipping = false %}
{% for option in options_to_hide if option.shipping_type == 'ship' or option.shipping_type == 'delivery' or (option.method == 'table' and option.shipping_type == 'custom') %}
{% if option |length >= 1 %}
{% set has_non_featured_shipping = true %}
{% endif %}
{% endfor %}
{# Check for only pickup featured options #}
{% set has_featured_pickup = false %}
{% for option in options_to_show if option.shipping_type == 'pickup' or option.method == 'branch' %}
{% if option |length >= 1 %}
{% set has_featured_pickup = true %}
{% endif %}
{% endfor %}
{# Check for only non featured pickup options #}
{% set has_non_featured_pickup = false %}
{% for option in options_to_hide if option.shipping_type == 'pickup' or option.method == 'branch' %}
{% if option |length >= 1 %}
{% set has_non_featured_pickup = true %}
{% endif %}
{% endfor %}
{# Shipping featured options #}
{% if has_featured_shipping %}
<div class="box-title mb-2 mt-3">{{ "Entrega a domicilio" | translate }}</div>
<ul class="box list-unstyled mb-5">
{# Smart shipping hides similar shipping options on a toggle div and also shows an improved shipping item #}
{# Check if smart shipping is needed #}
{# Include branch options inside calculador #}
{% for option in options_to_show if option.shipping_type == 'ship' or option.shipping_type == 'delivery' or (option.method == 'table' and option.shipping_type == 'custom') %}
{% include "snipplets/shipping/shipping-calculator-item.tpl" with {'featured_option': true} %}
{% endfor %}
{% if has_non_featured_shipping %}
<div class="js-other-shipping-options w-100 float-left shipping-extra-options mt-3" style="display: none;">
{# Smart shipping hides similar shipping options on a toggle div and also shows an improved shipping item #}
{# Check if smart shipping is needed #}
{# Include branch options inside calculador #}
{% for option in options_to_hide if option.shipping_type == 'ship' or option.shipping_type == 'delivery' or (option.method == 'table' and option.shipping_type == 'custom') %}
{% include "snipplets/shipping/shipping-calculator-item.tpl" %}
{% endfor %}
</div>
<div class="js-toggle-more-shipping-options js-show-more-shipping-options w-100 float-left text-center mt-3">
<a href="#" class="btn-link-primary">
<span class="js-shipping-see-more">
{{ 'Ver más opciones de entrega' | translate }}
</span>
<span class="js-shipping-see-less" style="display: none;">
{{ 'Ver menos opciones de entrega' | translate }}
</span>
</a>
</div>
{% endif %}
</ul>
{% endif %}
{# Pickup featured options #}
{% if has_featured_pickup %}
<div class="box-title mb-2 mt-3">{{ "Retirar por" | translate }}</div>
<ul class="list-unstyled box mb-4">
{# Smart shipping hides similar shipping options on a toggle div and also shows an improved shipping item #}
{# Check if smart shipping is needed #}
{# Include branch options inside calculador #}
{% for option in options_to_show if option.shipping_type == 'pickup' or option.method == 'branch' %}
{% include "snipplets/shipping/shipping-calculator-item.tpl" with {'featured_option': true, 'pickup' : true} %}
{% endfor %}
{% if has_non_featured_pickup %}
<div class="js-other-pickup-options w-100 float-left shipping-extra-options mt-3" style="display: none;">
{# Smart shipping hides similar shipping options on a toggle div and also shows an improved shipping item #}
{# Check if smart shipping is needed #}
{# Include branch options inside calculador #}
{% for option in options_to_hide if option.shipping_type == 'pickup' or option.method == 'branch' %}
{% include "snipplets/shipping/shipping-calculator-item.tpl" with {'pickup' : true} %}
{% endfor %}
</div>
<div class="js-toggle-more-shipping-options js-show-other-pickup-options w-100 float-left text-center mt-3">
<a href="#" class="btn-link-primary">
<span class="js-shipping-see-more">
{{ 'Ver más opciones de retiro' | translate }}
</span>
<span class="js-shipping-see-less" style="display: none;">
{{ 'Ver menos opciones de retiro' | translate }}
</span>
</a>
</div>
{% endif %}
</ul>
{% endif %}
{% if store.has_smart_dates and show_time %}
<div class="font-small full-width-container text-center mb-2">{{"El tiempo de entrega no considera feriados." | translate}}</div>
{% endif %}
<div class="js-product-shipping-label font-small mt-3 pull-left" style="display: none;">
<span class="js-shipping-filled-cart js-visible-on-cart-filled" {% if cart.items_count == 0 %}style="display:none;"{% endif%}>
{% include "snipplets/svg/info-circle.tpl" with {svg_custom_class: "icon-inline svg-icon-text"} %}
<span>{{ 'El precio de envío incluye este producto y todos los que agregaste al carrito.' | translate }}</span>
</span>
</div>
{% else %}
<span>{{"No hay costos de envío para el código postal dado." | translate}}</span>
{% endif %}
{# Don't remove this #}
<input type="hidden" name="after_calculation" value="1"/>
<input type="hidden" name="zipcode" value="{{zipcode}}"/>En este archivo vamos a estar dividiendo los resultados en dos partes: envío a domicilio y puntos de retiro.
A su vez cada uno va a tener la funcionalidad de destacar los medios de envío con mejor precio y/o tiempo y ocultar los que son similares bajo un link de “ver más opciones”. Esto va a ayudar al cliente a elegir entre las mejores opciones de envío sin perderse en otras que son iguales o peores.
2. Si en tu diseño tenés un desplegable por fuera del calculador que muestra los locales de la siguiente forma:
Recomendamos que lo borres para evitar que se dupliquen los locales, tanto en el desplegable como en los resultados del calculador.
Si querés mantener el desplegable, entonces recomendamos dentro del archivo shipping_options.tpl para los “fors” que incluyen al archivo shipping-calculator-item.tpl en las opciones de puntos de retiro, agregarle el condicional option.method != "branch" . Por ejemplo con el siguiente for:
{% for option in options_to_show if option.shipping_type == 'pickup' or option.method == 'branch' %}Pasaría a quedar así
{% for option in options_to_show if option.shipping_type == 'pickup' and option.method != "branch" %}3. Si tienen un archivo llamado shipping-calculator-item.tpl dentro de la carpeta snipplets/shipping vamos a reemplazarlo por el código debajo, de lo contrario vamos a crear esta carpeta con este mismo archivo dentro.
{% set is_pickup = store.has_shipping_segmentation and pickup %}
{# On first calculation select as default the first option: If store only has pickup option selects pickup else selects shipping option #}
{% if store.has_shipping_segmentation %}
{% if has_featured_shipping %}
{% set checked_option = featured_option and loop.first and not pickup %}
{% else %}
{% set checked_option = featured_option and loop.first and pickup %}
{% endif %}
{% else %}
{% set checked_option = featured_option and loop.first %}
{% endif %}
<li class="js-shipping-list-item radio-button-item">
<label class="js-shipping-radio radio-button list-item" data-loop="shipping-radio-{{loop.index}}">
<input
id="{% if featured_option %}featured-{% endif %}shipping-{{loop.index}}"
class="js-shipping-method {% if not featured_option %}js-shipping-method-hidden{% endif %} {% if is_pickup %}js-pickup-option{% endif %} shipping-method"
data-price="{{option.cost.value}}"
data-code="{{option.code}}"
data-name="{{option.name}}"
data-cost="{% if option.show_price %} {% if option.cost.value == 0 %}{{ 'Gratis' | translate }}{% else %}{{option.cost}}{% endif %}{% else %} {{ 'A convenir' | translate }} {% endif %}"
type="radio"
value="{{option.code}}"
{% if checked_option %}checked="checked"{% endif %} name="option"
style="display:none" />
<span class="radio-button-content">
<span class="radio-button-icons">
<span class="radio-button-icon unchecked"></span>
<span class="radio-button-icon checked"></span>
</span>
<span class="radio-button-label">
{# Improved shipping option with no carrier img and ordered shipping info #}
<div class="radio-button-text">
{% if option.show_price %}
<div class="mb-1 d-inline-block">
<span class="text-primary h6">
{% if option.cost.value == 0 %}
{{ 'Gratis' | translate }}
{% else %}
{{option.cost}}
{% endif %}
</span>
{% if option.cost.value == 0 and option.old_cost.value %}
<span class="price-compare text-foreground font-small ml-1">{{option.old_cost}}</span>
{% endif %}
</div>
{% endif %}
{% if option.time %}
<div>
<strong>
{% if store.has_smart_dates %}
{{option.dates}}
{% else %}
{{option.time}}
{% endif %}
</strong>
</div>
{% endif %}
</div>
<div class="radio-button-text">
{{option.short_name}} {{ option.method == 'branch' ? option.extra.extra : '' }}
</div>
{% if option.payment_rules %}
<div>
{% include "snipplets/svg/info-circle.tpl" with {svg_custom_class: "icon-inline svg-icon-text"} %}
<i>{{option.payment_rules}}</i>
</div>
{% endif %}
{% if option.suboptions is not empty %}
{% include "snipplets/shipping_suboptions/#{option.suboptions.type}.tpl" with {'suboptions': option.suboptions} %}
{% endif %}
{% if option.warning['enable'] %}
<div class="alert alert-warning">
<p>{{ option.warning['message'] }}</p>
</div>
{% endif %}
</span>
</span>
</label>
</li>Este snipplet representa cada ítem en el listado del calculador e incluye la funcionalidad que selecciona por defecto la mejor opción, luego del primer cálculo hecho por un cliente
JS
⚠️ A partir del día 30 de enero de 2023, la librería jQuery será removida del código de nuestras tiendas, por lo tanto la función "$" no podrá ser utilizada.
1. El JavaScript necesitamos agregarlo en el archivo store.js.tpl (o donde tengas tus funciones de JS). El código que necesitamos es el siguiente:
{# /* // Toggle more shipping options */ #}
$(document).on("click", ".js-toggle-more-shipping-options", function(e) {
e.preventDefault();
{# Toggle other options depending if they are pickup or delivery for cart and product at the same time #}
if($(this).hasClass("js-show-other-pickup-options")){
$(".js-other-pickup-options").slideToggle(600);
$(".js-show-other-pickup-options .js-shipping-see-less, .js-show-other-pickup-options .js-shipping-see-more").toggle();
}else{
$(".js-other-shipping-options").slideToggle(600);
$(".js-show-more-shipping-options .js-shipping-see-less, .js-show-more-shipping-options .js-shipping-see-more").toggle();
}
});Traducciones
En este paso agregamos los textos para las traducciones en el archivo config/translations.txt
es "Ver más opciones de entrega" pt "Ver mais opções de entrega" en "See more delivery options" es_mx "Ver más opciones de entrega" es "Ver menos opciones de entrega" pt "Ver menos opções de entrega" en "See less delivery options" es_mx "Ver menos opciones de entrega" es "Ver más opciones de retiro" pt "Ver mais opções de retirada" en "See more pickup options" es_mx "Ver más opciones de retiro" es "Ver menos opciones de retiro" pt "Ver menos opções de retirada" en "See less pickup options" es_mx "Ver menos opciones de retiro" es "Retirar por" pt "Retirar em" en "Pickup" es_mx "Retirar por" es "Entrega a domicilio" pt "Entrega a domicílio" en "Delivery" es_mx "Entrega a domicilio"
Listo, ya tenés en tu diseño la funcionalidad aplicada ¡Excelente!
Para más información sobre el Calculador de envíos recomendamos que mires el tutorial sobre la funcionalidad completa