Installation de cartouches Controllers & Pipelines

Aperçu

Cette page décrit les modifications à apporter au site pour les storefront SiteGenesis. Il existe quatre types de modifications personnalisées pour votre cartouche de base :

Modèles

1. cartridge/templates/default/components/header/htmlhead.isml

Copiez le code suivant et collez-le après la fonction de vérification Google :

<isinclude template="affirm/affirmheader" />

2. cartouche/templates/default/components/footer/footer_UI.isml

Copiez et collez le code suivant après la dernière ligne :

<isinclude template="affirm/affirmfooter" />

3. cartridge/templates/default/checkout/cart/cart.isml

Trouvez la balise de fermeture de la div avec la classe cart-footer (ligne 850). Copiez et collez le code suivant juste avant la balise de fermeture </fieldset> :

<isaffirmpromo context="cart" fpname="${require('int_affirm/cartridge/scripts/utils/affirmUtils').getFPNameByBasket(pdict.Basket)}">

4. cartouche/modèles/par défaut/produit/composants/options.isml

Ajoutez la propriété data-affirm-name suivante au composant select :

<select id="${Option.htmlName}" name="${Option.htmlName}" data-affirm-name="${Option.ID}" class="product-option input-select">

5. cartridge/templates/default/product/productcontent.isml

Copiez et collez le code suivant après pricing component:

<isinclude template="util/affirmmodule"/>
<isaffirmpromo context="pdp" fpname="${require('int_affirm/cartridge/scripts/utils/affirmUtils').getFinancingProgramByProduct(pdict.Product, true)}" />

6. cartouche/templates/default/checkout/billing/paymentmethods.isml

Localisez le code suivant :

Ensuite, remplacez-le par le code suivant :

Insérez la balise suivante après la balise de commentaire du processeur personnalisé :

<isinclude template="affirm/affirmpaymentmethod" />

7. cartridge/templates/default/checkout/summary/summary.isml

Copiez et collez le code suivant après le formulaire COSummary-Submit :

<isinclude template="affirm/vcndata" />

8. cartouche/templates/default/product/producttile.isml

Copiez-collez le code suivant ci-dessous après le bloc product swatches :

<isinclude template="util/affirmmodule"/>
<isaffirmpromo context="plp" fpname="${require('int_affirm/cartridge/scripts/utils/affirmUtils').getFPNameForPLP(pdict.CurrentHttpParameterMap.cgid.value, Product)}" price="${prices}"/>

9. cartouche/modèles/par défaut/produit/producttopcontentPS.isml

Copiez et collez le code suivant après le div avec la classe product-number :

<isinclude template="util/affirmmodule"/>
<isaffirmpromo context="pdp" fpname="${require('int_affirm/cartridge/scripts/utils/affirmUtils').getFinancingProgramByProduct(pdict.Product, true)}" />

10. cartridge/templates/default/util/modules.isml

Copiez et collez le code suivant après l'importation du module d'atouts de contenu :

<isinclude template="util/affirmmodule"/>

11. cartridge/templates/default/components/order/orderdetails.isml

Remplacez le div avec la classe payment-type et la balise isminicreditcard par le code suivant :

<isif condition="${!paymentInstr.custom.affirmed}">
			<div class="payment-type"><isprint value="${dw.order.PaymentMgr.getPaymentMethod(paymentInstr.paymentMethod).name}" /> </div>
			<isminicreditcard card="${paymentInstr}" show_expiration="${false}"/>
		<iselse/>
			<isaffirmpaymenttype email="${false}"/>
</isif>

12. cartridge/templates/default/components/order/orderdetailsemail.isml

Remplacez les lignes au-dessus de la balise isminicreditcard (lignes 46 à 50) par le code suivant :

<isif condition="${!paymentInstr.custom.affirmed}">
	<div><isprint value="${dw.order.PaymentMgr.getPaymentMethod(paymentInstr.paymentMethod).name}" /></div>
	<isif condition="${dw.order.PaymentInstrument.METHOD_GIFT_CERTIFICATE.equals(paymentInstr.paymentMethod)}">
		<isprint value="${paymentInstr.maskedGiftCertificateCode}"/><br />
	</isif>
	<isminicreditcard card="${paymentInstr}" show_expiration="${false}"/>
<iselse/>
	<isaffirmpaymenttype email="${true}"/>
</isif>

13. cartridge/templates/default/checkout/confirmation/confirmation.isml

Sous la balise de fermeture du div avec la classe confirmation message, copiez et collez le code suivant pour inclure le modèle de script de suivi :

<isinclude url="${URLUtils.http('Affirm-Tracking', 'orderId', pdict.Order.orderNo)}" >

14. int_affirm_controllers/cartridge/templates/resources/affirm.properties

Trouvez la propriété affirm.controllers.cartridge et définissez-la comme le nom de la cartouche de vos contrôleurs avec les fichiers de script app.js, guard.js. Exemple:

affirm.controllers.cartridge=app_storefront_controllers

JavaScript côté client

1. cartridge/js/pages/product/variant.js

Mettez à jour le ajax.load dans la méthode updateContent avec l'extrait de code suivant :

if (typeof affirm !== "undefined"){
    affirm.ui.refresh();
}

2. cartridge/js/pages/search.js

Dans le rappel jQuery $('#man').load, incluez l'exemple de code suivant :

if (typeof affirm !== "undefined"){
    affirm.ui.refresh();
}

3. cartridge/js/pages/product/productSet.js

Mettez à jour on('click') de l'action de l'événement avec $productSetList avec le code étendu suivant :

var updateAffirmItems = function($container, oldSKU) {
        var affirmItem = affirmItems.find(function (item) {
            return item.sku === oldSKU;
        });
 
        affirmItem.sku = $container.find('input[name=pid]').first().val();
    }
 
var updateBuyWithAffirmButton = function () {
        if ($productSetList.find('.add-to-cart[disabled]').length > 0) {
            $('#js-affirm-checkout-now').hide();
        } else {
            $('#js-affirm-checkout-now').show();
            document.dispatchEvent(new CustomEvent('affirm-checkout-button-rendered')); 
        }
            };
 
    // click on swatch for product set
    $productSetList.on('click', '.product-set-item .swatchanchor', function (e) {
        e.preventDefault();
        if ($(this).parents('li').hasClass('unselectable')) { return; }
        var url = Urls.getSetItem + this.search;
        var $container = $(this).closest('.product-set-item');
        var qty = $container.find('form input[name="Quantity"]').first().val();
 
        var oldSKU = $container.find('input[name=pid]').first().val();
        ajax.load({
            url: util.appendParamToURL(url, 'Quantity', isNaN(qty) ? '1' : qty),
            target: $container,
            callback: function () {
                updateAddToCartButtons();
                updateAffirmItems($container, oldSKU);
                updateBuyWithAffirmButton();
                tooltip.init();
            }
        });
    });

📘
Important
Pour afficher correctement « affirm-as-low » sur la page du produit, la page de destination et la page de carte, vérifiez que la fonction affirm.ui.refresh est appelée à la fin des fonctions de gestion qui influencent le prix du panier (changement de prix du produit ajax, changement de prix basé sur la quantité, pagination, recherche, changement de prix des options).

👍
Assurez-vous de reconstruire le JS client après avoir apporté des modifications.

Contrôleurs (Contrôleurs SiteGenesis)

1. cartridge/controllers/COBilling.js

Réassignez applicablePaymentMethods dans la fonction initCreditCardList avec le code suivant :

applicablePaymentMethods = require('*/cartridge/controllers/Affirm').Init(cart, applicablePaymentMethods);

Dans le même fichier, recherchez la fonction publicStart et remplacez l'affectation applicablePaymentMethods par le code suivant :

var applicablePaymentMethods = require('*/cartridge/controllers/Affirm').Init(cart, creditCardList.ApplicablePaymentMethods);

Ensuite, remplacez l'affectation status dans la fonction resetPaymentForms par le code suivant :

var status = Transaction.wrap(function () {
        if (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals('PayPal')) {
            app.getForm('billing').object.paymentMethods.creditCard.clearFormElement();
            app.getForm('billing').object.paymentMethods.bml.clearFormElement();

            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_CREDIT_CARD));
            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_BML));
            cart.removePaymentInstruments(cart.getPaymentInstruments('Affirm'));
        } else if (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals(PaymentInstrument.METHOD_CREDIT_CARD)) {
            app.getForm('billing').object.paymentMethods.bml.clearFormElement();

            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_BML));
            cart.removePaymentInstruments(cart.getPaymentInstruments('PayPal'));
            cart.removePaymentInstruments(cart.getPaymentInstruments('Affirm'));
        } else if (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals(PaymentInstrument.METHOD_BML)) {
            app.getForm('billing').object.paymentMethods.creditCard.clearFormElement();

            if (!app.getForm('billing').object.paymentMethods.bml.ssn.valid) {
                return false;
            }
            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_CREDIT_CARD));
            cart.removePaymentInstruments(cart.getPaymentInstruments('PayPal'));
            cart.removePaymentInstruments(cart.getPaymentInstruments('Affirm'));
        } else if (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals('Affirm')) {
        	cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_CREDIT_CARD));
            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_BML));
            cart.removePaymentInstruments(cart.getPaymentInstruments('PayPal'));
        }
        return true;
    });

    return status;

2. cartridge/controllers/COPlaceOrder.js

Sous la variable saveCCResult et sa vérification conditionnelle, incluez affirmController pour obtenir le statut Affirm avec l'extrait de code suivant :

var affirmController = require('int_affirm_controllers/cartridge/controllers/Affirm');
var affirmCheck = affirmController.CheckCart(cart);
if (affirmCheck.status.error) {
	return {
		error: true,
		PlaceOrderError: affirmCheck.status
	};
}

3. cartridge/controllers/COSummary.js

Au début de la fonction submit, ajoutez le code suivant :

var redirected = require('int_affirm_controllers/cartridge/controllers/Affirm').Redirect();
if (redirected) {
	return;
}

Pipelines (Pipelines SiteGenesis)

1. cartouche/pipelines/COBilling.xml

Trouvez le nœud de démarrage InitCreditCardList et ajoutez un nœud d’appel (Affirm-Init, int_affirm_pipelines) après le deuxième nœud Assign.

InitCreditCardList vers le script (bc_api). Ensuite, attribuez (bc_api), attribuez (bc_api). Affirm Init. SetFormOptions(bc_api). BindPaymentCardsToForm. — pipelines_1_COBilling_1_Affirm-Init

Ensuite, trouvez le nœud de départ ResetPaymentForms et ajoutez les nœuds Pipelet.

722 — pipelines_1_COBilling_2_ResetPaymentForms

Dans le même pipeline, créez une branche supplémentaire :

Decision node – Decision Key: !CurrentForms.billing.paymentMethods.selectedPaymentMethodID.value.equals('Affirm')
ClearFormElement Pipelet – FormElement: CurrentForms.billing.paymentMethods.creditCard
ClearFormElement Pipelet – FormElement: CurrentForms.billing.paymentMethods.bml
RemoveBasketPaymentInstrument Pipelet – PaymentInstruments: Basket.getPaymentInstruments(dw.order.PaymentInstrument.METHOD_CREDIT_CARD)
RemoveBasketPaymentInstrument Pipelet – PaymentInstruments: Basket.getPaymentInstruments( dw.order.PaymentInstrument.METHOD_BML)

745 — pipelines_1_COBilling_4_ResetPaymentForms_additional_branch