AccueilCommencerSolutionsPlateformesIntégrations globales
Docs

Installation de cartouches Controllers & Pipelines

Suggérer des modifications

Aperçu

Cette page décrit les modifications à apporter au site pour les storefront SiteGenesis. Les modifications personnalisées de la cartouche de base décrites dans ce guide peuvent être divisées en quatre parties :

  • Modèles
  • JavaScript côté client
  • Contrôleurs (version SiteGenesis Controllers)
  • Pipelines (version SiteGenesis Pipelines)

Modèles

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

Collez le code suivant après la fonctionnalité de vérification Google comme indiqué sur la capture d'écran ci-dessous :

<isinclude template="affirm/affirmheader" />
1370

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

Coller le code 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). Collez le code après ce qui est ci-dessous :

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

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

Ajoutez la propriété "data-affirm-name" 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

Coller 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

Trouvez le code suivant :

Remplacez-le par le code ci-dessous :

Insérez la balise suivante après la balise de commentaire Processeur" personnalisé" : 

<isinclude template="affirm/affirmpaymentmethod" />

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

Collez le code suivant après le formulaire COSummary-Submit :

<isinclude template="affirm/vcndata" />

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

Collez le code 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

Collez le code suivant après 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

Collez les éléments suivants après l'importation du module de ressources de contenu :

<isinclude template="util/affirmmodule"/>

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

Remplacez le div par la classe payment-type et la balise isminicreditcard par le code ci-dessous :

<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 ci-dessous :

<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

Collez le code suivant après la balise de fermeture du div avec la classe confirmation message 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

Trouver la propriété affirm.controllers.cartridge. Définissez-le comme nom de la cartouche de vos contrôleurs (avec les fichiers de script app.js, guard.js), par exemple :

affirm.controllers.cartridge=app_storefront_controllers

JavaScript côté client

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

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

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

2. cartridge/js/pages/search.js

Dans le callback jQuery de $('#man').load , incluez l'extrait ci-dessous :

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

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

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

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 « as low as » sur PDP, PLP et Panier, à la fin de la poignée, les fonctions qui influencent le prix du panier (variation du prix du produit ajax, variation de prix basée sur la quantité, pagination, modification du prix, etc.) doivent appeler la fonction affirm.ui.refresh .

👍

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 la suivante :

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

Remplacez l'affectation status dans la fonction resetPaymentForms par le bloc de 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 son contrôle conditionnel, incluez affirmController pour obtenir le statut Affirm avec l'extrait ci-dessous :

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

Accédez à la fonction submit. Ajoutez les éléments suivants au début de la fonction :

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

Pipelines (Pipelines SiteGenesis)

1. cartouche/pipelines/COBilling.xml

Trouvez le noeud de départ InitCreditCardList et ajoutez le noeud d'appel (Affirm-Init, int_affirm_pipelines) après le deuxième noeud Assign :

529

pipelines_1_COBilling_1_Affirm-Init

Recherchez le nœud ResetPaymentForms de démarrage et ajoutez des nœuds Pipelet comme indiqué ci-dessous :

722

pipelines_1_COBilling_2_ResetPaymentForms

Dans le même pipeline, créez une branche supplémentaire :
a. Decision node – Decision Key : !CurrentForms.billing.paymentMethods.selectedPaymentMethodID.value.equals('Affirm')
b. ClearFormElement Pipelet – FormElement: CurrentForms.billing.paymentMethods.creditCard
c. ClearFormElement Pipelet – FormElement: CurrentForms.billing.paymentMethods.bml
d. RemoveBasketPaymentInstrument Pipelet – PaymentInstruments: Basket.getPaymentInstruments(dw.order.PaymentInstrument.METHOD_CREDIT_CARD)
e. RemoveBasketPaymentInstrument Pipelet – PaymentInstruments: Basket.getPaymentInstruments( dw.order.PaymentInstrument.METHOD_BML)

745

pipelines_1_COBilling_4_ResetPaymentForms_additional_branch

Mis à jour 11 months ago