Mensagem de desconto para forma de pagamento não acumulável

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.