SFRA Storefront Changes (PDP, CART, Mini-Cart and Checkout)

1 Delivery Estimate Insertion
- 1.1 Decorator Page
- 1.2 Product Detail Page
- 1.3 Mini-Cart
- 1.4 Cart Page
- 1.5 Checkout Page

Delivery Estimate Insertion

Decorator Page

Open file \cartridge\templates\default\common\htmlHead.isml
Add the below code snippet to insert a Fenix javascript to the PDP page
<script defer type="text/javascript" src="https://sfcc.cdn.fenixcommerce.com/v1.0/fenix.js"/>

Product Detail Page

Add the below code snippet to enter an empty div on PDP which fenix js will use to inject delivery messages
Check for attributes placed on this div below
- supportedcountries = Target countries support Fenix Delivery estimates(must be in pair and pipe format for more assistance contact fenixcommerce for short codes. )
- tenantId = Fenix provided customer specific tenant id
- xapikey = Fenix provided customer specific tenant id (if not provided attribute can be kept blank)
- delesturl = Fenix provided customer delest url (if not provided attribute can be kept blank)

<div class="fenix-delivery-sfcc" 
    supportedcountries="US|United States,CA|Canada,IN|India" 
    tenantId="2934f7a59d614d27a99e677500f0d972" 
    xapikey="2934f7a59d614d27a99e677500f0d972" 
    delesturl="https://delest-api.fenixcommerce.com/fenixdelest/api/v3/deliveryestimates">
    <div class="fenix-animated-background">
    <div class="fenix-background-masker fenix-btn-divide-left"></div>
    </div>  
</div>

Something like below:

Mini-Cart

Open file \cartridge\templates\default\checkout\cart\miniCart.isml
Add the below code snippet in the minicart-footer section.

        <div class="row">
            <div class="col-12 checkout-continue">
                <isinclude template="fenix/fenixEstimateWidget" />
            </div>
        </div>

Something like below:

Cart Page

Open file \cartridge\templates\default\cart\cart.isml
Add the below code snippet in the cart-page container.

        <div class="col-12">
            <isinclude template="fenix/fenixEstimateWidget"/>
        </div>

Something like below:

Checkout Page

Open file \cartridge\templates\default\checkout\shipping\shippingMethod.isml
Use the below code snippet to print the list of shipping methods:

    <isscript> // eslint-disable-line tags-check
        var fenixIntelligentDeliveryUtils = require('*/cartridge/scripts/util/fenixIntelligentDeliveryUtils');
        var assets = require('*/cartridge/scripts/assets.js');
        assets.addJs('/js/fenixIntelligentDelivery.js');
        assets.addCss('/css/fenix.css');
    </isscript>

    <isloop items="${shippingModel.applicableShippingMethods}" var="shippingMethod">
        <div class="form-check col-9 start-lines">
            <isinclude template="checkout/shipping/selectedShippingMethod" />
            <label class="form-check-label shipping-method-option"
                for="shippingMethod-${shippingMethod.ID}-${shippingModel.UUID}">
                <span class="display-name">${shippingMethod.displayName}</span>
                <isif condition="${!(fenixIntelligentDeliveryUtils.isEmpty(shippingMethod.estimatedArrivalTime))}">
                    <span class="text-muted arrival-time"><isif condition="${!(fenixIntelligentDeliveryUtils.isEmpty(pdict.fenixDeliveryEstimate))}"><isif condition="${!(fenixIntelligentDeliveryUtils.isEmpty(pdict.fenixDeliveryEstimate.shipment[shippingMethod.ID]))}"><isif condition="${!(fenixIntelligentDeliveryUtils.isEmpty(pdict.fenixDeliveryEstimate.shipment[shippingMethod.ID].response))}">(<isprint value="${pdict.fenixDeliveryEstimate.shipment[shippingMethod.ID].response}" />)<iselseif condition="${!empty(shippingMethod.description)}" />(<isprint value="${shippingMethod.description}" />)</isif><iselseif condition="${!empty(shippingMethod.description)}" />(<isprint value="${shippingMethod.description}" />)</isif><iselseif condition="${!empty(shippingMethod.description)}" />(<isprint value="${shippingMethod.description}" />)</isif></span>
                </isif>
            </label>
        </div>
        <div class="col-3 text-right shipping-method-pricing end-lines">
            <span class="shipping-cost">${shippingMethod.shippingCost}</span>
        </div>
    </isloop>

Something like below: