Neste tutorial, adicionaremos recomendações de produtos complementares adicionando um ao carrinho de compras rápidas.
Antes de prosseguir, precisaremos do carrinho de compras rápidas seguindo este tutorial.
HTML
1. Vamos criar um novo snipplet com o nome cart-related-products.tpl dentro da pasta de snipplets. O código para isso é o seguinte:
{# Set related products classes #}
{% set title_class = 'h4 text-center mt-3' %}
{% set products_container_class = 'position-relative swiper-container-horizontal' %}
{% set slider_container_class = 'swiper-container' %}
{% set swiper_wrapper_class = 'swiper-wrapper' %}
{% set slider_control_pagination_class = 'swiper-pagination' %}
{% set slider_control_class = 'icon-inline icon-w-8 icon-2x svg-icon-text' %}
{% set slider_control_prev_class = 'swiper-button-prev' %}
{% set slider_control_next_class = 'swiper-button-next' %}
{% set control_prev = include ('snipplets/svg/chevron-left.tpl', {svg_custom_class: slider_control_class}) %}
{% set control_next = include ('snipplets/svg/chevron-right.tpl', {svg_custom_class: slider_control_class}) %}
{# Related cart products #}
{% set related_section_id = 'related-products-notification' %}
{% set related_products = related_products_list | length > 0 %}
{% if related_products %}
{{ component(
'products-section',{
title: 'Sumá a tu compra' | translate,
id: related_section_id,
data_component: related_section_id,
products_amount: related_products_list | length,
products_array: related_products_list,
product_template_path: 'snipplets/grid/item.tpl',
product_template_params: {'slide_item': true, 'reduced_item': true},
slider_controls_position: 'bottom',
slider_pagination: true,
svg_sprites: false,
section_classes: {
section: 'js-related-products-notification',
title: title_class,
products_container: products_container_class,
slider_container: 'js-swiper-related-products-notification ' ~ slider_container_class,
slider_wrapper: swiper_wrapper_class,
slider_control: 'd-none d-md-block',
slider_control_pagination: 'js-swiper-related-products-notification-pagination ' ~ slider_control_pagination_class,
slider_control_prev_container: 'js-swiper-related-products-notification-prev ' ~ slider_control_prev_class,
slider_control_next_container: 'js-swiper-related-products-notification-next ' ~ slider_control_next_class,
},
custom_control_prev: control_prev,
custom_control_next: control_next,
})
}}
{% endif %}Podemos ver que estamos incluindo o item.tpl da pasta sniplets/grid (com base no tema Base), pode ser que no seu caso seja necessário incluir o snipplet single_product.tpl. O importante é usar o mesmo snippet que usamos para o item nas listagens de produtos, como aqueles nos templates category.tpl ou search.tpl.
Por outro lado, é importante mencionar que estamos utilizando o componente privado “products-section”. Para mais informações sobre as opções deste componente, recomendamos este artigo.
2. Dentro de item.tpl iremos adicionar na div onde temos as classes para as colunas do Bootstrap o condicional {% if slide_item %}js-item-slide swiper-slide{% endif %}.. Abaixo está um exemplo de como aplicá-lo:
<div class="{% if slide_item %}js-item-slide swiper-slide{% else %}col-12 col-sm-4{% endif %} item item-product">
...
</div> 3. A seguir vamos adicionar a condição "reduced_item" em vários partes para adicionar classes CSS e evitar a exibição de conteúdo que não seja necessário para o contexto reduzido em que as recomendações serão exibidas.
Primeiro vamos adicionar a classe "item-produto reduzido" da seguinte forma
<div class="{% if slide_item %}js-item-slide swiper-slide{% else %}col-12 col-sm-4{% endif %} item item-product {% if reduced_item %}item-product-reduced{% endif %}">
...
</div> Luego vamos a usar la condición {% if not reduced_item %} para evitar mostrar las etiquetas promocionales, el botón de compra rápida, el precio promocional, el precio con descuento por medio de pago y las cuotas. Debajo un ejemplo de como funcionaría con las cuotas:
Depois usaremos a condição {% if not reduced_item %} para evitar a exibição das tags promocionais, do botão de compra rápida, do preço promocional, do preço com desconto mediante pagamento e do parcelamento. Abaixo está um exemplo de como funcionaria com o parcelamento:
{% if not reduced_item %}
{{ component('installments', {'location' : 'product_item', container_classes: { installment: "item-installments"}}) }}
{% endif %}Desta forma, o item do produto recomendado ficará reduzido apenas à imagem, nome e preço.
4. Dentro del archivo donde se incluye el carrito de compras rápidas, Incluimos el modal que va a contener las recomendaciones. En este caso será incluido en el tpl header.tpl, de la siguiente forma:
4. Dentro do arquivo onde está incluído o carrinho de compras rápida, incluímos o modal que conterá as recomendações. Neste caso será incluído no tpl header.tpl, da seguinte forma:
{% if not store.is_catalog and settings.ajax_cart and template != 'cart' %}
... Modal del carrito de compras rápidas ...
{% if settings.add_to_cart_recommendations %}
{# Recommended products on add to cart #}
{% embed "snipplets/modal.tpl" with{modal_id: 'related-products-notification', modal_class: 'bottom modal-overflow-none modal-bottom-sheet h-auto', modal_header_class: 'px-0 pt-0 mb-2 m-0 w-100', modal_position: 'bottom', modal_transition: 'slide', modal_width: 'centered modal-centered-md-600px p-3'} %}
{% block modal_head %}
{% block page_header_text %}{{ '¡Agregado al carrito!' | translate }}{% endblock page_header_text %}
{% endblock %}
{% block modal_body %}
{# Product added info #}
{% include "snipplets/notification-cart.tpl" with {related_products: true} %}
{# Product added recommendations #}
<div class="js-related-products-notification-container" style="display: none"></div>
{% endblock %}
{% endembed %}
{% endif %}
{% endif %}5. En el archivo notification.tpl, donde se encuentran las notificaciones en general, buscamos la notificación de agregado al carrito que se encuentra bajo el condicional {% if add_to_cart %} y la reemplazamos por lo siguiente:
5. No arquivo notification.tpl, onde as notificações geralmente estão localizadas, procuramos a notificação de adição ao carrinho com o condicional {% if add_to_cart %} e a substituímos pelo seguinte:
{# Add to cart notification #}
{% if add_to_cart %}
{% include "snipplets/notification-cart.tpl" %}
{% endif %}6. Criamos um novo arquivo notification-cart.tpl dentro da pasta snipplets com o seguinte conteúdo:
{% set notification_without_recommendations_classes = 'js-alert-added-to-cart notification-floating notification-hidden' %}
{% set notification_wrapper_classes =
related_products ? 'row'
: not related_products and add_to_cart_fixed ? notification_without_recommendations_classes ~ ' notification-fixed-bottom-right mb-md-2 mr-md-2'
: notification_without_recommendations_classes
%}
<div class="{{ notification_wrapper_classes }}" {% if not related_products %}style="display: none;"{% endif %}>
<div class="{% if related_products %}col-md-6{% else %}notification notification-primary position-relative {% if not add_to_cart_mobile %}col-12 float-right{% endif %}{% endif %}">
{% if not related_products %}
<div class="h6 text-center mb-3 mr-3">
<strong>{{ '¡Ya agregamos tu producto al carrito!' | translate }}</strong>
</div>
<div class="js-cart-notification-close notification-close">
{% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-primary"} %}
</div>
{% endif %}
<div class="js-cart-notification-item row{% if related_products %} align-items-center{% endif %}" data-store="cart-notification-item">
<div class="{% if related_products %}col-md-3 col-2{% else %}col-3{% endif %} pr-0 notification-img">
<img src="" class="js-cart-notification-item-img img-fluid" />
</div>
<div class="{% if related_products %}col-md-9 col-10{% else %}col-9{% endif %} text-left">
<div class="mb-1">
<span class="js-cart-notification-item-name"></span>
<span class="js-cart-notification-item-variant-container" style="display: none;">
(<span class="js-cart-notification-item-variant"></span>)
</span>
</div>
<div class="mb-1">
<span class="js-cart-notification-item-quantity"></span>
<span> x </span>
<span class="js-cart-notification-item-price"></span>
</div>
</div>
</div>
{% if related_products %}
</div>
<div class="col-md-6">
{% endif %}
<div class="row text-primary h5 font-weight-normal mt-2 mb-3{% if related_products %} mt-md-0{% endif %}">
<span class="col-auto text-left">
<strong>{{ "Total" | translate }}</strong>
(<span class="js-cart-widget-amount">
{{ "{1}" | translate(cart.items_count ) }}
</span>
<span class="js-cart-counts-plural" style="display: none;">
{{ 'productos' | translate }}):
</span>
<span class="js-cart-counts-singular" style="display: none;">
{{ 'producto' | translate }}):
</span>
</span>
<strong class="js-cart-total col text-right">{{ cart.total | money }}</strong>
</div>
<a href="#" class="{% if related_products %}js-modal-close{% else %}js-cart-notification-close{% endif %} js-modal-open js-fullscreen-modal-open btn btn-primary btn-medium w-100 d-inline-block" data-toggle="#modal-cart" data-modal-url="modal-fullscreen-cart">
{{ 'Ver carrito' | translate }}
</a>
</div>
</div>7. Caso você não possua o componente modal, precisaremos adicionar o arquivo modal.tpl dentro da pasta snipplets
{# /*============================================================================
#Modal
==============================================================================*/
#Properties
// ID
// Position - Top, Right, Bottom, Left
// Transition - Slide and Fade
// Width - Full and Box
// modal_form_action - For modals that has a form
// modal_fixed_footer - For modals with fixed footer. Need to include the fixed part inside the footer
#Head
// Block - modal_head
#Body
// Block - modal_body
#Footer
// Block - modal_footer
#}
{% set modal_overlay = modal_overlay | default(true) %}
<div id="{{ modal_id }}" class="js-modal {% if modal_mobile_full_screen %}js-fullscreen-modal{% endif %} modal modal-{{ modal_class }} modal-{{modal_position}} transition-{{modal_transition}} modal-{{modal_width}} transition-soft {% if modal_zindex_top %}modal-zindex-top{% endif %}" style="display: none;" {% if data_component %}data-component="{{ data_component }}"{% endif %}>
{% if modal_form_action %}
<form action="{{ modal_form_action }}" method="post" class="{{ modal_form_class }} {% if modal_footer and modal_fixed_footer %}modal-with-fixed-footer{% endif %}" {% if modal_form_hook %}data-store="{{ modal_form_hook }}"{% endif %}>
{% endif %}
{% if modal_footer and modal_fixed_footer %}
<div class="modal-with-fixed-footer">
<div class="modal-scrollable-area">
{% endif %}
<div class="js-modal-close {% if modal_mobile_full_screen %}js-fullscreen-modal-close{% endif %} modal-header">
<span class="modal-close">
{% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-text"} %}
</span>
{% block modal_head %}{% endblock %}
</div>
<div class="modal-body">
{% block modal_body %}{% endblock %}
</div>
{% if modal_footer and modal_fixed_footer %}
</div>
{% endif %}
{% if modal_footer %}
<div class="modal-footer {% if not modal_fixed_footer %}d-md-block{% endif %} {{ modal_footer_class }}">
{% block modal_foot %}{% endblock %}
</div>
{% if modal_fixed_footer %}
</div>
{% endif %}
{% endif %}
{% if modal_form_action %}
</form>
{% endif %}
</div>
<div class="js-modal-overlay {% if modal_mobile_full_screen %}js-fullscreen-overlay{% endif %} modal-overlay {% if modal_zindex_top %}modal-zindex-top{% endif %}" data-modal-id="#{{ modal_id }}" style="display: none;"></div>8. Finalmente, para a parte do HTML, precisamos adicionar uma pasta SVG dentro da pasta snipplets. Aqui vamos adicionar os SVGs que usamos para os ícones no carrinho.
chevron-left.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"/></svg>chevron-right.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"/></svg>times.tpl
<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>CSS
Requisito:
Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).
Como neste exemplo usamos um slider com o Swiper, precisamos adicionar o plugin. Para ver como fazer isso, você pode ler este pequeno artigo e continuar com este tutorial.
Se você já possui o componente modal em sua loja, provavelmente não precisará muito do CSS abaixo.
1. Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou na stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:
{# /* // Modals */ #}
.modal{
color: $main-foreground;
background-color:$main-background;
}2. Adicione os estilos no arquivo static/style-critical.tpl
Se em seu layout você usar um stylesheet para o CSS crítico, precisaremos do seguinte código dentro dele, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.
.item-product-reduced .item-image {
height: 145px;
}
.item-product-reduced .item-image img {
width: 100%;
height: 145px;
object-fit: cover;
}
{# /* // Min width 768px */ #}
@media (min-width: 768px) {
.item-product-reduced .item-image,
.item-product-reduced .item-image img {
height: 180px;
}
}3. Adicione os estilos no arquivo static/style-async.tpl
Se em seu layout você usar um stylesheet CSS assíncrono, precisaremos do seguinte código dentro dela, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.
{# /* // Modals */ #}
.modal {
position: fixed;
top: 0;
display: block;
width: 80%;
height: 100%;
padding: 10px;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
transition: all .2s cubic-bezier(.16,.68,.43,.99);
z-index: 20000;
&-img-full{
max-width: 100%;
max-height: 190px;
}
&-header{
width: calc(100% + 20px);
margin: -10px 0 10px -20px;
padding: 10px 15px 10px 25px;
font-size: 20px;
}
&-footer{
padding: 10px 0;
clear: both;
}
&-with-fixed-footer {
display: flex;
flex-direction: column;
height: 100%;
.modal-scrollable-area {
height: 100%;
overflow: auto;
}
}
&-full {
width: 100%;
}
&-docked-md{
width: 100%;
}
&-docked-small{
width: 80%;
}
&-top{
top: -100%;
left: 0;
}
&-bottom{
top: 100%;
left: 0;
}
&-left{
left: -100%;
}
&-right{
right: -100%;
}
&-centered{
height: 100%;
width: 100%;
&-small{
left: 50%;
width: 80%;
height: auto;
@include prefix(transform, translate(-50%, -50%), webkit ms moz o);
.modal-body{
min-height: 150px;
max-height: 400px;
overflow: auto;
}
}
}
&-top.modal-show,
&-bottom.modal-show {
top: 0;
&.modal-centered-small{
top: 50%;
}
}
&-bottom-sheet {
top: initial;
bottom: -100%;
height: auto;
&.modal-show {
top: initial;
bottom: 0;
height: auto;
}
}
&-left.modal-show {
left: 0;
}
&-right.modal-show {
right: 0;
}
&-close {
display: inline-block;
padding: 1px 5px 5px 0;
margin-right: 5px;
vertical-align: middle;
cursor: pointer;
}
.tab-group{
margin: 0 -10px 20px -10px;
}
}
.modal-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000047;
z-index: 10000;
&.modal-zindex-top{
z-index: 20000;
}
}
@media (min-width: 768px) {
{# /* Modals */ #}
.modal{
&-centered{
height: 80%;
width: 80%;
left: 10%;
margin: 5% auto;
&-small{
left: 50%;
width: 30%;
height: auto;
max-height: 80%;
margin: 0;
}
&-md-600px {
left: 50%;
width: 600px;
transform: translateX(-50%);
}
}
&-docked-md{
width: 500px;
overflow-x: hidden;
&-centered{
left: calc(50% - 250px);
bottom: auto;
height: auto;
}
}
&-bottom-sheet {
top: 100%;
&.modal-show {
top: 0;
bottom: auto;
}
}
&-docked-small{
width: 350px;
}
}
}JS
1. Si no tenes el componente de modal, vamos a necesitar sumar el JS relacionado a este componente dentro del archivo store.js.tpl (o donde tengas tus funciones de JS) con el siguiente código:
1. Caso você não possua o componente modal, precisaremos adicionar o JS relacionado a este componente dentro do arquivo store.js.tpl (ou onde quer que você tenha suas funções JS) com o seguinte código:
{#/*============================================================================
#Modals
==============================================================================*/ #}
{# Full screen mobile modals back events #}
if (window.innerWidth < 768) {
{# Clean url hash function #}
cleanURLHash = function(){
const uri = window.location.toString();
const clean_uri = uri.substring(0, uri.indexOf("#"));
window.history.replaceState({}, document.title, clean_uri);
};
{# Go back 1 step on browser history #}
goBackBrowser = function(){
cleanURLHash();
history.back();
};
{# Clean url hash on page load: All modals should be closed on load #}
if(window.location.href.indexOf("modal-fullscreen") > -1) {
cleanURLHash();
}
{# Open full screen modal and url hash #}
jQueryNuvem(document).on("click", ".js-fullscreen-modal-open", function(e) {
e.preventDefault();
var modal_url_hash = jQueryNuvem(this).data("modalUrl");
window.location.hash = modal_url_hash;
});
{# Close full screen modal: Remove url hash #}
jQueryNuvem(document).on("click", ".js-fullscreen-modal-close", function(e) {
e.preventDefault();
goBackBrowser();
});
{# Hide panels or modals on browser backbutton #}
window.onhashchange = function() {
if(window.location.href.indexOf("modal-fullscreen") <= -1) {
{# Close opened modal #}
if(jQueryNuvem(".js-fullscreen-modal").hasClass("modal-show")){
{# Remove body lock only if a single modal is visible on screen #}
if(jQueryNuvem(".js-modal.modal-show").length == 1){
jQueryNuvem("body").removeClass("overflow-none");
}
var $opened_modal = jQueryNuvem(".js-fullscreen-modal.modal-show");
var $opened_modal_overlay = $opened_modal.prev();
$opened_modal.removeClass("modal-show");
setTimeout(() => $opened_modal.hide(), 500);
$opened_modal_overlay.fadeOut(500);
}
}
}
}
modalOpen = function(modal_id){
var $overlay_id = jQueryNuvem('.js-modal-overlay[data-modal-id="' + modal_id + '"]');
if (jQueryNuvem(modal_id).hasClass("modal-show")) {
let modal = jQueryNuvem(modal_id).removeClass("modal-show");
setTimeout(() => modal.hide(), 500);
} else {
{# Lock body scroll if there is no modal visible on screen #}
if(!jQueryNuvem(".js-modal.modal-show").length){
jQueryNuvem("body").addClass("overflow-none");
}
$overlay_id.fadeIn(400);
jQueryNuvem(modal_id).detach().appendTo("body");
$overlay_id.detach().insertBefore(modal_id);
jQueryNuvem(modal_id).show().addClass("modal-show");
}
};
jQueryNuvem(document).on("click", ".js-modal-open", function(e) {
e.preventDefault();
var modal_id = jQueryNuvem(this).data('toggle');
modalOpen(modal_id);
});
jQueryNuvem(document).on("click", ".js-modal-close", function(e) {
e.preventDefault();
{# Remove body lock only if a single modal is visible on screen #}
if(jQueryNuvem(".js-modal.modal-show").length == 1){
jQueryNuvem("body").removeClass("overflow-none");
}
var $modal = jQueryNuvem(this).closest(".js-modal");
var modal_id = $modal.attr('id');
var $overlay_id = jQueryNuvem('.js-modal-overlay[data-modal-id="#' + modal_id + '"]');
$modal.removeClass("modal-show");
setTimeout(() => $modal.hide(), 500);
$overlay_id.fadeOut(500);
{# Close full screen modal: Remove url hash #}
if ((window.innerWidth < 768) && (jQueryNuvem(this).hasClass(".js-fullscreen-modal-close"))) {
goBackBrowser();
}
});
jQueryNuvem(document).on("click", ".js-modal-overlay", function(e) {
e.preventDefault();
{# Remove body lock only if a single modal is visible on screen #}
if(jQueryNuvem(".js-modal.modal-show").length == 1){
jQueryNuvem("body").removeClass("overflow-none");
}
var modal_id = jQueryNuvem(this).data('modalId');
let modal = jQueryNuvem(modal_id).removeClass("modal-show");
setTimeout(() => modal.hide(), 500);
jQueryNuvem(this).fadeOut(500);
if (jQueryNuvem(this).hasClass("js-fullscreen-overlay") && (window.innerWidth < 768)) {
cleanURLHash();
}
});2. No mesmo arquivo store.js.tpl precisamos localizar a função na qual o produto é adicionado ao carrinho de compras rápida. Vamos procurar a variável “callback_add_to_cart” e adicionar o parâmetro “html_notification_related_products” à função da seguinte forma:
var callback_add_to_cart = function(html_notification_related_products){Em seguida, precisamos localizar a parte em que o carrinho é aberto ou a notificação é mostrada após um produto ser adicionado ao carrinho e antes de adicionar o seguinte código
let notificationWithRelatedProducts = false;
{% if settings.add_to_cart_recommendations %}
{# Show added to cart product related products #}
function recommendProductsOnAddToCart(){
jQueryNuvem('.js-related-products-notification-container').html("");
modalOpen('#related-products-notification');
jQueryNuvem('.js-related-products-notification-container').html(html_notification_related_products).show();
{# Recommendations swiper #}
// Set loop for recommended products
function calculateRelatedNotificationLoopVal(sectionSelector) {
let productsAmount = jQueryNuvem(sectionSelector).attr("data-related-amount");
let loopVal = false;
const applyLoop = (window.innerWidth < 768 && productsAmount > 2) || (window.innerWidth > 768 && productsAmount > 3);
if (applyLoop) {
loopVal = true;
}
return loopVal;
}
let cartRelatedLoopVal = calculateRelatedNotificationLoopVal(".js-related-products-notification");
// Create new swiper on add to cart
createSwiper('.js-swiper-related-products-notification', {
lazy: true,
loop: cartRelatedLoopVal,
watchOverflow: true,
threshold: 5,
watchSlideProgress: true,
watchSlidesVisibility: true,
spaceBetween: 15,
slideVisibleClass: 'js-swiper-slide-visible',
slidesPerView: 2,
pagination: {
el: '.js-swiper-related-products-notification-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-related-products-notification-next',
prevEl: '.js-swiper-related-products-notification-prev',
},
breakpoints: {
768: {
slidesPerView: 3,
}
}
});
}
notificationWithRelatedProducts = html_notification_related_products != null;
if(notificationWithRelatedProducts){
if (isQuickShop) {
setTimeout(function(){
recommendProductsOnAddToCart();
},300);
}else{
recommendProductsOnAddToCart();
}
}
{% endif %}Por fim, incluiremos a parte onde o carrinho é aberto ou a notificação adicionada ao carrinho é mostrada com a seguinte condicional:
if(!notificationWithRelatedProducts){
... código para mostrar el carrito o la notificación ...
}Configurações
No arquivo config/settings.txt adicionaremos a opção de ativar ou desativar recomendações na seção “Carrinho de compras”.
title
title = Recomendaciones de productos
checkbox
name = add_to_cart_recommendations
description = Sugerir productos complementarios al agregar uno al carrito de compras rápidas
subtitle
subtitle = <a target='_blank' href='https://ayuda.tiendanube.com/es_AR/123159-detalle-del-producto/como-seleccionar-los-productos-relacionados-en-tiendanube' class="js-checkbox-help-link">Más sobre productos relacionados</a>Traduções
Nesta etapa adicionamos os textos para as traduções no arquivo config/translations.txt
es "¡Agregado al carrito!" pt "Adicionado ao carrinho!" en "Added to cart!" es_mx "¡Agregado al carrito!" es "Ver carrito" pt "Ver carrinho" en "View cart" es_mx "Ver carrito" es "Total" pt "Total" en "Total" es_mx "Total" es "productos" pt "produtos" en "products" es_mx "productos" es "producto" pt "produto" en "product" es_mx "producto" es "Sumá a tu compra" pt "Compre também" en "Buy also" es_mx "Suma a tu compra" es "Recomendaciones de productos" pt "Recomendações de produtos" es_mx "Recomendaciones de productos" es "Sugerir productos complementarios al agregar uno al carrito de compras rápidas" pt "Sugerir produtos complementares ao adicionar um ao carrinho de compra rápida" es_mx "Sugerir productos complementarios al agregar uno al carrito de compras rápidas" es "<a target='_blank' href='https://ayuda.tiendanube.com/es_AR/123159-detalle-del-producto/como-seleccionar-los-productos-relacionados-en-tiendanube' class="js-checkbox-help-link">Más sobre productos relacionados</a>" pt "<a target='_blank' href='https://atendimento.nuvemshop.com.br/pt_BR/pagina-do-produto/como-selecionar-os-produtos-relacionados-na-nuvemshop' class="js-checkbox-help-link">Mais sobre produtos relacionados</a>" es_mx "<a target='_blank' href='https://ayuda.tiendanube.com/es_MX/123159-detalle-del-producto/como-seleccionar-los-productos-relacionados-en-tiendanube' class="js-checkbox-help-link">Más sobre productos relacionados</a>"
Ativação
Listo, una vez que se relacionen productos complementarios desde el formulario de producto en el administrador y lo actives la funcionalidad desde la sección Carrito de compras en la personalización de la tienda, se verán las recomendaciones de productos complementarios al agregar uno al carrito.
Pronto, uma vez criados os relacionamento de produtos complementares no formulário de produtos no administrador e ativada a funcionalidade na seção Carrinho de Compras na personalização da loja, você verá as recomendações de produtos complementares ao adicionar um ao carrinho.
Caso não tenha complementares relacionados, o fluxo de compra continuará normalmente. Excelente!