Neste tutorial vamos adicionar 2 mensagens para comunicar que um desconto oferecido por um meio de pagamento não pode ser combinado com outras promoções quando a seguinte opção estiver desativada no meio de pagamento no administrador:
Exibido em dois espaços nos detalhes do produto: o formulário do produto e o pop-up de detalhes do meio de pagamento.
Além disso, o desconto e o preço com desconto aplicado serão ocultos no pop-up quando o produto ou variante tiver preço promocional e frete grátis.
HTML
1. No snippet product-form.tpl ou onde tiver seu formulário de produto, procure a linha onde está a mensagem do percentual de desconto por meio de pagamento e substitua pelo seguinte:
{# Max Payment Discount #}
{% set hideDiscountContainer = not (hasDiscount and product.showMaxPaymentDiscount) %}
{% set hideDiscountDisclaimer = not product.showMaxPaymentDiscountNotCombinableDisclaimer %}
<div class="js-product-discount-container text-center text-md-left mb-2" {% if hideDiscountContainer %}style="display: none;"{% endif %}>
<span><strong class="text-accent">{{ product.maxPaymentDiscount.value }}% {{'de descuento' | translate }}</strong> {{'pagando con' | translate }} {{ product.maxPaymentDiscount.paymentProviderName }}</span>
<div class="js-product-discount-disclaimer font-small mt-1" {% if hideDiscountDisclaimer %}style="display: none;"{% endif %}>
{{ "No acumulable con otras promociones" | translate }}
</div>
</div>Caso não tenha a variável hasDiscount, você pode criá-la acima do código anterior:
{% set hasDiscount = product.maxPaymentDiscount.value > 0 %}2. Agora vamos adicionar um parâmetro para exibir a mensagem no componente meios de pagamento privado. Se você não possui este componente, recomendamos que você tenha feito este tutorial sobre meios de pagamento e lido este artigo sobre componentes privados.
Agora sim, só precisamos adicionar 2 parâmetros no componente payment/payments-details dentro do snippet product-payment-details.tpl. Os parâmetros são:
- opacity: "opacity-60"
- discounts_conditional_visibility: true
Ficando como o seguinte exemplo:
{{ component('payments/payments-details',
{
text_classes: {
text_accent: "label label-accent ml-1",
subtitles: "h6 mb-3",
text_big: "font-big",
text_small: "font-small",
align_right: "text-right",
opacity: "opacity-60"
},
spacing_classes: {
top_1x: "mt-1",
top_2x: "mt-2",
top_3x: "mt-3",
right_1x: "mr-1",
right_2x: "mr-2",
right_3x: "mr-3",
bottom_1x: "mb-1",
bottom_2x: "mb-2",
bottom_3x: "mb-3",
left_3x: "ml-3",
},
container_classes : {
payment_method: "card p-3"
},
discounts_conditional_visibility: true
})
}}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).
JS
Precisamos aplicar as funções no arquivo store.js.tpl (ou onde tiver suas funções de JS) para as alterações entre variantes que podem ou não ter preço promocional.
Primeiro precisamos localizar a função changeVariant e acima adicionar o seguinte código:
{% set should_show_discount = product.maxPaymentDiscount.value > 0 %}
{% if should_show_discount %}
{# Shows/hides price with discount and strikethrough original price for every payment method #}
function togglePaymentDiscounts(variant){
jQueryNuvem(".js-payment-method-total").each(function( paymentMethodTotalElement ){
const priceComparerElement = jQueryNuvem(paymentMethodTotalElement).find(".js-compare-price-display");
const installmentsOnePaymentElement = jQueryNuvem(paymentMethodTotalElement).find('.js-installments-no-discount');
const priceWithDiscountElement = jQueryNuvem(paymentMethodTotalElement).find('.js-price-with-discount');
priceComparerElement.hide();
installmentsOnePaymentElement.hide();
priceWithDiscountElement.hide();
const discount = priceWithDiscountElement.data('paymentDiscount');
if (discount > 0 && showMaxPaymentDiscount(variant)){
priceComparerElement.show();
priceWithDiscountElement.show()
} else {
installmentsOnePaymentElement.show();
}
})
}
{# Toggle discount and discount disclaimer both on product details and popup #}
function updateDiscountDisclaimers(variant){
updateProductDiscountDisclaimer(variant);
updatePopupDiscountDisclaimers(variant);
}
{# Toggle discount and discount disclaimer in product details #}
function updateProductDiscountDisclaimer(variant){
jQueryNuvem(".js-product-discount-container, .js-product-discount-disclaimer").hide();
if (showMaxPaymentDiscount(variant)){
jQueryNuvem(".js-product-discount-container").show();
}
if (showMaxPaymentDiscountNotCombinableDisclaimer(variant)){
jQueryNuvem(".js-product-discount-disclaimer").show();
}
}
{# Shows/hides discount message for payment method and discount disclaimer in popup, for every payment method #}
function updatePopupDiscountDisclaimers(variant){
jQueryNuvem(".js-modal-tab-discount, .js-payment-method-discount").hide();
{% if product.maxPaymentDiscount.value > 0 %}
if (showMaxPaymentDiscount(variant)){
{% for key, method in product.payment_methods_config %}
{% if method.max_discount > 0 %}
{% if method.allows_discount_combination %}
jQueryNuvem("#method_{{ key | sanitize }} .js-modal-tab-discount").show();
{% elseif not product.free_shipping %}
if (!variantHasPromotionalPrice(variant)){
jQueryNuvem("#method_{{ key | sanitize }} .js-modal-tab-discount").show();
}
{% endif %}
{% endif %}
{% endfor %}
}
{% endif %}
jQueryNuvem(".js-info-payment-method-container").each(function(infoPaymentMethodElement){
{# For each payment method this will show the payment method discount and discount explanation #}
const infoPaymentMethod = jQueryNuvem(infoPaymentMethodElement)
infoPaymentMethod.find(".js-discount-explanation").hide();
infoPaymentMethod.find(".js-discount-disclaimer").hide();
const priceWithDiscountElement = infoPaymentMethod.find('.js-price-with-discount');
const discount = priceWithDiscountElement.data('paymentDiscount');
if (discount > 0 && showMaxPaymentDiscount(variant)){
infoPaymentMethod.find(".js-discount-explanation").show();
infoPaymentMethod.find(".js-payment-method-discount").show();
}
if (discount > 0 && showMaxPaymentDiscountNotCombinableDisclaimer(variant)){
infoPaymentMethod.find(".js-discount-disclaimer").show();
}
})
}
function variantHasPromotionalPrice(variant) { return variant.compare_at_price_number > variant.price_number }
function showMaxPaymentDiscount(variant) {
{% if product.maxPaymentDiscount()["allowsDiscountCombination"] %}
return true;
{% elseif product.free_shipping %}
return false;
{% else %}
return !variantHasPromotionalPrice(variant);
{% endif %}
}
function showMaxPaymentDiscountNotCombinableDisclaimer(variant) {
{% if product.maxPaymentDiscount()["allowsDiscountCombination"] or product.free_shipping %}
return false
{% else %}
return !variantHasPromotionalPrice(variant)
{% endif %}
}
{% endif %}Por fim, dentro da função changeVariant procure a condicional {% if template == 'product' %} e adicione o que está dentro da condicional {% if should_show_discount %} no exemplo abaixo:
{% if template == 'product' %}
const base_price = Number(jQueryNuvem("#price_display").attr("content"));
refreshInstallmentv2(base_price);
refreshPaymentDiscount(variant.price_number);
{% if should_show_discount %}
togglePaymentDiscounts(variant);
updateDiscountDisclaimers(variant);
{% endif %}
{% if settings.last_product and product.variations %}
if(variant.stock == 1) {
jQueryNuvem('.js-last-product').show();
} else {
jQueryNuvem('.js-last-product').hide();
}
{% endif %}
{% endif %}Traduções
Nesta etapa adicionamos os textos para as traduções no arquivo config/translations.txt
es "No acumulable con otras promociones" pt "Não acumulável com outras promoções" en "Not combinable with other promotions" es_mx "No acumulable con otras promociones"
Ativação
Depois de aplicadas todas as alterações ao seu código, você só terá que desativar a opção de combinar descontos a partir dos detalhes de cada meio de pagamento.
Pronto! Agora você pode comunicar melhor seus descontos por meio de pagamento.