Installing Paazls extension for SFCC SiteGenesis

Dit artikel legt uit hoe je de extensie van Paazl installeert in je Salesforce CC SiteGenesis-implementatie.

Stap 1. LINK-cartridge installeren

Installeer de cartridges int_paazl_controllers en int_paazl_core in Commerce Cloud UX Studio.

Stap 2. Metadata importeren

Om de Paazl-configuratiefunctionaliteit toe te voegen aan Business Manager, importeer je de vooraf gedefinieerde metadata van Paazl als volgt:

1. Download het Paazl LINK-installatiepakket van https://github.com/SalesforceCommerceCloud/link_paazl
2. Open de map link_paazl-master/site_import/sites/
3. Wijzig de naam van de map yourSiteId naar de ID van jouw site in Salesforce CC Business Manager
4. Zip de map site_import
5. Importeer het gezipte bestand in Business Manager (Administration > Site Development > Site Import & Export)

Na de import zijn de volgende wijzigingen doorgevoerd in Business Manager.

Er zijn Paazl-attributen toegevoegd aan:

• Administration > Site Development > System Object Types > Site Preferences > Attribute Definitions
• Administration > Site Development > System Object Types > Order > Attribute Definitions
• Administration > Site Development > System Object Types > Shipment > Attribute Definitions
• Administration > Site Development > System Object Types > Basket > Attribute Definitions

De volgende services zijn toegevoegd aan Administration > Operations > Services:

• service.paazl.rest.gettoken
• service.paazl.rest.getSelectedOption

De verzendmethode paazl is toegevoegd aan [yourSiteId] > Merchant Tools > Ordering > Shipping Methods.

Stap 3. Storefront-code aanpassen

Als je SiteGenesis gebruikt, moet je Paazl-specifieke code toevoegen aan de Storefront Controller (app_storefront_controller) en Storefront Core (app_storefront_core). De bestanden die je moet wijzigen en de codeaanpassingen die je moet doen, vind je hieronder.

Storefront controller

De bestanden die je moet wijzigen zijn:

• controllers/COShipping.js
• controllers/COBilling.js
• controllers/COSummary.js

Je vindt deze onder app_storefront_controllers > cartridge.

COShipping.js

Wijzig de functie 'updateShippingMethodList' in COShipping.js als volgt.

Standaard

// line # 348
app.getView({
    Basket: cart.object,
    ApplicableShippingMethods: applicableShippingMethods,
    ShippingCosts: shippingCosts
}).render('checkout/shipping/shippingmethods');

Aangepast

// paazl related changes
var template = 'checkout/shipping/shippingmethods';
var paazlHelper = require('*/cartridge/scripts/helpers/paazlHelper');
var currentPaazlShippingMethodID = paazlHelper.getShippingMethodID();
var paazlStatus = paazlHelper.getPaazlStatus(cart.object && cart.object.defaultShipment);
var paazlWidgetInit;
var paazlWidgetCustomizedStyle;
if (paazlStatus.applicable) {
    template = 'checkout/shipping/paazl_shippingmethods';
    if (cart) {
        var currentBasket = cart.object;
        paazlHelper.updateTokenInBasket(currentBasket);
        paazlWidgetInit = require('*/cartridge/scripts/init/initPaazlWidget').initPaazlWidget()
    }

    // If 'paazlWidgetPredefinedStyle' is set on CUSTOMIZED, fetch the customized style from the 'paazlWidgetCustomizedStyle' site preferences
    var paazlWidgetPredefinedStyle = Site.current.getCustomPreferenceValue('paazlWidgetPredefinedStyle');
    if (paazlWidgetPredefinedStyle.value === 'CUSTOMIZED') {
        paazlWidgetCustomizedStyle = Site.current.getCustomPreferenceValue('paazlWidgetCustomizedStyle');
    }

    var isPaazlUniqueShippingOption = false;
    if (applicableShippingMethods && applicableShippingMethods.length === 1) {
        if (applicableShippingMethods[0].ID === currentPaazlShippingMethodID) {
            isPaazlUniqueShippingOption = true;
        }
    }
}

app.getView({
    Basket: cart.object,
    ApplicableShippingMethods: applicableShippingMethods,
    ShippingCosts: shippingCosts,
    paazlWidgetInit: paazlWidgetInit,             // paazl view-data variables
    paazlStatus: paazlStatus,                     // paazl view-data variables
    paazlWidgetCustomizedStyle: paazlWidgetCustomizedStyle, // paazl view-data variables
    currentPaazlShippingMethodID: currentPaazlShippingMethodID, // paazl view-data variables
    isPaazlUniqueShippingOption: isPaazlUniqueShippingOption // paazl view-data variables
}).render(template);

Wijzig de functie 'singleShipping' in COShipping.js als volgt.

Standaard

// line # 222
handleShippingSettings(cart)

Aangepast

if (!handleShippingSettings(cart)) {
    // If selected shipping method is Paazl but no Paazl shipping options are available or selected, stay on the Shipping page
    app.getController('COShipping').Start();
    return;
}

Open COShipping.js, ga naar de functie 'handleShippingSettings' op regel 125 en vervang de volledige functie door de onderstaande code.

/**
 * Handles the selected shipping address and shipping method. Copies the
 * address details and gift options to the basket's default shipment. Sets the
 * selected shipping method to the default shipment.
 *
 * @transactional
 * @param {module:models/CartModel~CartModel} cart - A CartModel wrapping the current Basket.
 * @returns {boolean} return status
 */
function handleShippingSettings(cart) {
    var result = true;
    Transaction.wrap(function () {
        var defaultShipment, shippingAddress;
        defaultShipment = cart.getDefaultShipment();
        shippingAddress = cart.createShipmentShippingAddress(defaultShipment.getID());
        shippingAddress.setFirstName(session.forms.singleshipping.shippingAddress.addressFields.firstName.value);
        shippingAddress.setLastName(session.forms.singleshipping.shippingAddress.addressFields.lastName.value);
        shippingAddress.setAddress1(session.forms.singleshipping.shippingAddress.addressFields.address1.value);
        shippingAddress.setAddress2(session.forms.singleshipping.shippingAddress.addressFields.address2.value);
        shippingAddress.setCity(session.forms.singleshipping.shippingAddress.addressFields.city.value);
        shippingAddress.setPostalCode(session.forms.singleshipping.shippingAddress.addressFields.postal.value);
        shippingAddress.setStateCode(session.forms.singleshipping.shippingAddress.addressFields.states.state.value);
        shippingAddress.setCountryCode(session.forms.singleshipping.shippingAddress.addressFields.country.value);
        shippingAddress.setPhone(session.forms.singleshipping.shippingAddress.addressFields.phone.value);
        defaultShipment.setGift(session.forms.singleshipping.shippingAddress.isGift.value);
        defaultShipment.setGiftMessage(session.forms.singleshipping.shippingAddress.giftMessage.value);
        var paazlHelper = require('*/cartridge/scripts/helpers/paazlHelper');
        paazlHelper.resetSelectedShippingOption(cart.object);
        var paazlStatus = paazlHelper.getPaazlStatus(cart.object && cart.object.defaultShipment);
        if (paazlStatus.active) {
            var paazlShippingOption = paazlHelper.getSelectedShippingOption(cart.object);
            if (!paazlShippingOption) {
                result = false;
            }
        } else {
            cart.updateShipmentShippingMethod(cart.getDefaultShipment().getID(), session.forms.singleshipping.shippingAddress.shippingMethodID.value, null, null);
        }
        cart.calculate();
        cart.validateForCheckout();
    });
    return result;
}

Wijzig de functie 'start' in COShipping.js als volgt.

Standaard

// line # 109
app.getView({
    ContinueURL: URLUtils.https('COShipping-SingleShipping'),
    Basket: cart.object,
    HomeDeliveries: homeDeliveries
}).render('checkout/shipping/singleshipping');

Aangepast

// Paazl related changes
var paazlHelper = require('*/cartridge/scripts/helpers/paazlHelper');
var paazlStatus = paazlHelper.getPaazlStatus(cart.object && cart.object.defaultShipment);
var paazlWidgetInit;
if (paazlStatus.applicable) {
    if (cart) {
        var currentBasket = cart.object;
        paazlHelper.updateTokenInBasket(currentBasket);
        paazlWidgetInit = require('*/cartridge/scripts/init/initPaazlWidget').initPaazlWidget()
    }
}
app.getView({
    ContinueURL: URLUtils.https('COShipping-SingleShipping'),
    Basket: cart.object,
    HomeDeliveries: homeDeliveries,
    paazlWidgetInit: paazlWidgetInit, // Paazl view-data variables
    paazlStatus: paazlStatus          // Paazl view-data variables
}).render('checkout/shipping/singleshipping');

COBilling.js

Wijzig de functie 'publicStart' in COBilling.js als volgt.

Standaard

// line # 191
start(cart, {ApplicableCreditCards: creditCardList.ApplicableCreditCards});

Aangepast

var params = {
    ApplicableCreditCards: creditCardList.ApplicableCreditCards
};
var paazlHelper = require('*/cartridge/scripts/helpers/paazlHelper');
var paazlStatus = paazlHelper.getPaazlStatus(cart.object && cart.object.defaultShipment);
params.paazlStatus = paazlStatus;
// Check whether or not Paazl is enabled
if (paazlStatus.active) {
    // If Paazl is active, add Paazl selected shipping option info to the data model
    var paazlShippingModel = paazlHelper.getPaazlShippingModel(cart.object);
    params.paazlShipment = paazlShippingModel;
}
start(cart, params);

COSummary.js

Wijzig de functie 'showConfirmation' in COSummary.js als volgt.

Standaard

// line # 97
app.getView({
    Order: order,
    ContinueURL: URLUtils.https('Account-RegistrationForm') // needed by registration form after anonymous checkouts
}).render('checkout/confirmation/confirmation');

Aangepast

// Paazl related changes
var params = {
    Order: order,
    ContinueURL: URLUtils.https('Account-RegistrationForm') // needed by registration form after anonymous checkouts
};
var shipment = order.defaultShipment;
var paazlHelper = require('*/cartridge/scripts/helpers/paazlHelper');
var paazlStatus = paazlHelper.getPaazlStatus(shipment);
// Check whether or not Paazl is enabled
if (paazlStatus.active) {
    // If Paazl is active, update the order shipping address with Paazl shipping address - only in case of pickup location delivery
    paazlHelper.updateShipment(order);
    // Add Paazl selected shipping option info to the data model
    var paazlShippingModel = paazlHelper.getPaazlShippingModel(order);
    params.paazlShipment = paazlShippingModel;
    params.paazlStatus = paazlStatus;
}
app.getView(params).render('checkout/confirmation/confirmation');

Wijzig de functie 'start' in COSummary.js als volgt.

Standaard

// line # 48
var pageMeta = require('~/cartridge/scripts/meta');
var viewContext = require('app_storefront_core/cartridge/scripts/common/extend').immutable(context, {
    Basket: cart.object
});
pageMeta.update({
    pageTitle: Resource.msg('summary.meta.pagetitle', 'checkout', 'SiteGenesis Checkout')
});
app.getView(viewContext).render('checkout/summary/summary');

Aangepast

var pageMeta = require('~/cartridge/scripts/meta');
pageMeta.update({
    pageTitle: Resource.msg('summary.meta.pagetitle', 'checkout', 'SiteGenesis Checkout')
});
// Paazl related changes
var params = {
    Basket: cart.object
};
var paazlHelper = require('*/cartridge/scripts/helpers/paazlHelper');
var paazlStatus = paazlHelper.getPaazlStatus(cart.object && cart.object.defaultShipment);
params.paazlStatus = paazlStatus;
// Check whether or not Paazl is enabled
if (paazlStatus.active) {
    // If Paazl is active add paazl select shipping option info to the data model
    var paazlShippingModel = paazlHelper.getPaazlShippingModel(cart.object);
    params.paazlShipment = paazlShippingModel;
}
var viewContext = require('app_storefront_core/cartridge/scripts/common/extend').immutable(context, params);
app.getView(viewContext).render('checkout/summary/summary');

Storefront core

De bestanden die je moet wijzigen zijn:

• scripts/cart/calculate.js
• templates/default/checkout/minisummary.isml
• templates/default/checkout/pt_checkout.isml
• templates/default/checkout/shipping/singleshipping.isml
• templates/default/components/order/orderdetails.isml
• js/pages/checkout/shipping.js
• scss/default/_checkout.scss

Je vindt deze onder app_storefront_core > cartridge.

calculate.js

Wijzig calculate.js als volgt.

Standaard

// line # 62
ShippingMgr.applyShippingCost(basket);

Aangepast

ShippingMgr.applyShippingCost(basket);
var paazlHelper = require('*/cartridge/scripts/helpers/paazlHelper');
paazlStatus = paazlHelper.getPaazlStatus(basket.defaultShipment);
// If Paazl is active, apply Paazl shipping rate to the current basket
if (paazlStatus.active) {
   paazlHelper.calculateShipping(basket);
}

minisummary.isml

Wijzig minisummary.isml als volgt.

Standaard

// line # 48
<isinclude template="checkout/shipping/minishipments"/>

Aangepast

<iscomment>If Paazl enabled and selected, use the template paazl_minishipments to render the shipment summary</iscomment>
<isif condition="${pdict.paazlStatus && pdict.paazlStatus.active}" >
   <isinclude template="checkout/shipping/paazl_minishipments" />
<iselse/>
   <isinclude template="checkout/shipping/minishipments"/>
</isif>

pt_checkout.isml

Open pt_checkout.isml en voeg de volgende code toe aan de <head></head>-sectie van de template.

<isif condition="${dw.system.Site.current.getCustomPreferenceValue('paazlEnabled') && dw.system.Site.current.getCustomPreferenceValue('paazlWidgetEndpoint')}">
    <script type="text/javascript" src="${dw.system.Site.current.getCustomPreferenceValue('paazlWidgetEndpoint')}"></script>
    <script src="${URLUtils.staticURL('/js/paazl.js')}" defer></script>
</isif>

Open pt_checkout.isml en vervang direct boven de <isreplace/>-tag in de <body></body>-sectie <div id="primary" class="primary-content"> door de volgende code:

<div id="primary" class="primary-content js-addressservice-url" data-addressservice-url="${URLUtils.https('Paazl-AddressNL')}">

Open pt_checkout.isml en voeg de volgende code toe aan de <body></body>-sectie van de template direct onder de <isreplace/>-tag.

<isreplace/>
<isif condition="${dw.system.Site.current.getCustomPreferenceValue('paazlEnabled')}" >
   <isinclude template="/checkout/initPaazlWidget" />
</isif>

singleshipping.isml

Wijzig singleshipping.isml als volgt.

Standaard

// line # 24
<form action="${URLUtils.continueURL()}" method="post" id="${pdict.CurrentForms.singleshipping.shippingAddress.htmlName}" class="checkout-shipping address form-horizontal">

Aangepast

<form action="${URLUtils.continueURL()}" method="post" id="${pdict.CurrentForms.singleshipping.shippingAddress.htmlName}" name="${pdict.CurrentForms.singleshipping.shippingAddress.htmlName}" class="checkout-shipping address form-horizontal ${pdict.paazlStatus && pdict.paazlStatus.applicable ? 'js-paazlwidget-form': ''}">

orderdetails.isml

Wijzig orderdetails.isml als volgt.

Standaard

// line # 114
<isif condition="${!empty(shipment.shippingMethod)}">
   <div class="value"><isprint value="${shipment.shippingMethod.displayName}"/></div>
<iselse/>
   <div class="value"><isprint value="${shipment.shippingMethodID}"/></div>
</isif>

Aangepast

<isif condition="${pdict.paazlStatus && pdict.paazlStatus.active}">
   <iscomment>If paazl enabled, use passed paazlShipment instead </iscomment>
   <div class="value"><isprint value="${pdict.paazlShipment.shippingMethodModel.description}"/></div>
<iselseif condition="${!empty(shipment.custom.paazlSelectedShippingMethod)}">
   <div class="value"><isprint value="${shipment.custom.paazlSelectedShippingMethod}"/></div>
<iselseif condition="${!empty(shipment.shippingMethod)}">
   <div class="value"><isprint value="${shipment.shippingMethod.displayName}"/></div>
<iselse/>
   <div class="value"><isprint value="${shipment.shippingMethodID}"/></div>
</isif>

En:

Standaard

// line # 92
<isminishippingaddress p_shipment="${shipment}" p_editable="${false}" p_showmethod="${false}" p_showpromos="${false}"/>

Aangepast

<isif condition="${pdict.paazlStatus && pdict.paazlStatus.active}">
   <iscomment>If paazl enabled and selected, use the passed paazlShipment object instead </iscomment>
   <isminishippingaddress p_shipment="${pdict.paazlShipment}" p_editable="${false}" p_showmethod="${false}" p_showpromos="${false}"/>
<iselse/>
   <isminishippingaddress p_shipment="${shipment}" p_editable="${false}" p_showmethod="${false}" p_showpromos="${false}"/>
</isif>

shipping.js

Open shipping.js en voeg de volgende regels code toe na de '}' op regel 138.

//Paazl related changes
$('body').trigger('shipping:updateShippingMethods', {
    shipping: {
         shippingMethodID: $shippingMethodList.find('.input-radio:checked').val()
    }
});

Wijzig shipping.js als volgt.

Standaard

// line # 124
$shippingMethodList.load(smlUrl, function () {

Aangepast

// line # 124
$shippingMethodList.load(smlUrl, function (data) {

Open shipping.js en voeg de volgende regel toe na regel 77.

//Paazl related changes
$('body').trigger('shipping:updateShippingMethods', { shipping : {shippingMethodID: shippingMethodID} });

_checkout.scss

Open _checkout.scss en voeg de volgende regels code toe aan het einde van het bestand.

#paazl-checkout {
    footer {
        background-color: inherit;
    }
}

Stap 4. JS en CSS compileren

De JS- en CSS-bestanden van Paazl maken deel uit van de int_paazl_core-cartridge.

1. Compileer de JS- en CSS-code van de app_storefront_core-cartridge zoals uitgelegd in de SiteGenesis README.md.
2. Compileer de JS- en CSS-code van de int_paazl_core-cartridge.
   1. Ga naar het hoogste niveau van je project (vlak boven de map cartridges).
   2. Zorg ervoor dat je de bestanden package.json en webpack.config.js uit de link_paazl-repository op GitHub gebruikt.
   3. Voer de volgende opdracht uit:
      
      

      npm install

   4. Voer de volgende opdrachten uit:
      
      

      npm run compile:js && npm run compile:scss