Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Next »

Delivery Estimate Insertion

Product Detail Page

  • Open file \cartridge\templates\default\product\productDetails.isml

  • Add the below code snippet to insert a Fenix javascript to the PDP page

assets.addJs('fenix.js');

Something like below:

  • replace the above js with the CDN LINK : https://sfcc.cdn.fenixcommerce.com/v1.0/fenix.js

  • 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:

  • No labels