Page Comparison

Table of Contents

minLevel	1
maxLevel	7

Delivery Estimate Insertion

ISML Code Changes

Following is the code snippet for consuming the API response

Code Block
<isinclude template="fenix/fenixestimatewidget" />

Product Detail Page

...

Decorator Page

Open file \cartridge\templates\default\common\htmlHead.isml

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

Code Block
<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)

Code Block

language	html

<div class="row cartfenix-anddelivery-ipaysfcc"> 
   <div class="col-sm-12">supportedcountries="US|United States,CA|Canada,IN|India" 
       <input type="hidden" class="add-to-cart-url" value="${pdict.addToCartUrl}">tenantId="2934f7a59d614d27a99e677500f0d972" 
        <button class="add-to-cart btn btn-primaryxapikey="2934f7a59d614d27a99e677500f0d972" 
           data-pid="${product.id}"
            ${!product.readyToOrder || !product.available ? "disabled" : ""}delesturl="https://delest-api.fenixcommerce.com/fenixdelest/api/v3/deliveryestimates">
                <i<div class="fa fafenix-shoppinganimated-bag"></i>
                ${Resource.msg('button.addtocart', 'common', null)}
        </button>

         <isif condition="${!product.readyToOrder}">
       background">
    <div class="notification_container">${Resource.msg('addtocart.pleaseselect.text', 'custom', 'Please choose all of your product attributes before adding to cart')}</div>
        <iselse>
            <div class="no_message"></div>
        </isif>
    </div>
</div>
<div class="row">
    <div class="col">
       <isinclude template="fenix/fenixestimatewidget" />
    </div>
</div>

~~The details in this integration document detail putting the code snippets below the “Add To Cart” button. On the Product Details Page, it should look like this.~~

...

Mini-Cart

Tip
Add below code snippet at the end of the minicart-footer section: cartridge/templates/default/checkout/cart/miniCart.isml

Code Block
<div class= minicart-footer"> <div class="minicart-footer"> <div class="row estimated-total"> 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.

Code Block

         <div class="col-8">
                <p class="sub-total-label">${Resource.msg('label.estimatedtotal', 'cart', null)}</p>
            </div>
            <div class="col-4">
                <p class="text-right sub-total">${pdict.totals.subTotal}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 view_cart_button">
                <a class="btn btn-outline-primary" href="${URLUtils.https('Cart-Show')}"
                    title="${Resource.msg('link.view.cart', 'cart', null)}">
                    ${Resource.msg('link.view.cart', 'cart', null)}
                </a>
      
     </div>             <div class="col-12 checkout-continue">
                <isinclude template="cartfenix/checkoutButtonsfenixEstimateWidget" />
            </div>
        </div>
        <div class="row">
                <isinclude template="fenix/fenixestimatewidget" />
        </div>
    </div>

Image Removed

Cart Page

Tip
Add below code snippet at the end of the cart-page container: cartridge/templates/default/cart/cart.isml

Code Block

language	html

<div class="container cart cart-page">

Something like below:

...

Cart Page

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

Code Block

        <div class="row">
                <!---product cards--->
                <div class="col-sm-7 col-md-8">
                    <isloop items="${pdict.items}" var="lineItem">
                        <isif condition="${lineItem.productType === 'bundle'}">
                            <isinclude template="cart/productCard/cartBundleCard" />
                        <iselse/>
                            <isinclude template="cart/productCard/cartProductCard" />
                        </isif>
                    </isloop>
                    <isinclude template="cart/cartApproachingDiscount" />
                </div>
                <!---totals, and checkout actions--->
                <div class="col-sm-5 col-md-4 totals">
                    <isinclude template="cart/cartPromoCode" />
                    <div class="coupons-and-promos">
                        <isinclude template="cart/cartCouponDisplay" />
                    </div>
                    <div class="row">
                        <isinclude template="cart/cartShippingMethodSelection" />
                    </div>
                    <isinclude template="cart/cartTotals" />
                    <div class="row">
                        <div class="col-12 checkout-continue">
                            <isinclude template="cartfenix/checkoutButtonsfenixEstimateWidget" />
               
        </div>
                    </div>
                    <br/>
                </div>
            </div>
        </div>
        <isinclude template="cart/cartRemoveProductModal"/>
        <isinclude template="cart/cartRemoveCouponModal"/>
        <isinclude template="fenix/fenixestimatewidget"/>

...

Checkout Page

Tip
Add “form caption” section to the shiping methods to display the delivery estimation: cartridge/templates/default/checkout/shipping/shippingMethod.isml

Code Block

language	html

<div class="row leading-lines shipping-method-list" data-select-shipping-method-url="${URLUtils.https('CheckoutShippingServices-SelectShippingMethod')}" data-action-url="${URLUtils.https('CheckoutShippingServices-UpdateShippingMethodsList')}">
    <input name="shipmentUUID" type="hidden" value="${shippingModel.UUID}" />

    <isscript>

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:

Code Block

    <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">(${shippingMethod.estimatedArrivalTime})</span>
                </isif>
            </label>
        </div>
        <div class="col-3 text-right shipping-method-pricing end-lines">
            <span class="shipping-cost">${shippingMethod.shippingCost}</span>
        </div>
        <isif ><isif condition="${!(fenixIntelligentDeliveryUtils.isEmpty(pdict.fenixDeliveryEstimate))}">
            <isif><isif condition="${!(fenixIntelligentDeliveryUtils.isEmpty(typeof pdict.fenixDeliveryEstimate.shipment[shippingMethod.ID] !== 'undefined'))}">
                <isif ><isif condition="${!(!emptyfenixIntelligentDeliveryUtils.isEmpty(pdict.fenixDeliveryEstimate.shipment[shippingMethod.ID].response))}">
                    <div class="form-caption delivery-estimate">(<isprint value="${pdict.fenixDeliveryEstimate.shipment[shippingMethod.ID].response}" />)</div>
                <iselseif condition="${!empty(shippingMethod.description)}" />(<isprint value="${shippingMethod.description}"                    <div class="form-caption delivery-noestimate"/>)</isif><iselseif condition="${!empty(shippingMethod.description)}" />(<isprint value="${shippingMethod.description}" />)</div>
                </isif>
            <iselseif isif><iselseif condition="${!empty(shippingMethod.description)}">
                <div class="form-caption delivery-noestimate" />(<isprint value="${shippingMethod.description}" />)</div>/isif></span>
                </isif>
            </label>
   <iselseif condition="${!empty(shippingMethod.description)}">    </div>
        <div class="form-caption delivery-noestimate">(<isprint value="${shippingMethod.description}"/>)</div>col-3 text-right shipping-method-pricing end-lines">
            <span class="shipping-cost">${shippingMethod.shippingCost}</isif>span>
        </div>
    </isloop>
</div>

...

Something like below:

...

Image Added

Versions Compared

Old Version 3

New Version Current

Key

Delivery Estimate Insertion

ISML Code Changes

Product Detail Page

Decorator Page

Product Detail Page

Mini-Cart

Mini-Cart

Cart Page

Cart Page

Checkout Page

Checkout Page