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

...

Open file \cartridge\templates\default\product\productDetails.isml
Add the below code snippet

...

language	html

to insert a fenix java script to PDP page

Code Block
assets.addJs('https://bitbucket.org/ajayfenix/sfcc/raw/12dfebe603bf0ddceef2a12abd3fcc863ab2b8fd/fenix.js');

Something like below:

...

Add the below code snippet to enter an empty div on PDP which fenix js will use to inject delivery messages

Code Block

<div class="row cartfenix-anddelivery-ipaysfcc">
    <div class="colfenix-smanimated-12background">
        <input type="hidden" <div class="addfenix-to-cart-url" value="${pdict.addToCartUrl}">
        <button class="add-to-cart btn btn-primary"
            data-pid="${product.id}"
            ${!product.readyToOrder || !product.available ? "disabled" : ""}>
                <i class="fa fa-shopping-bag"></i>
                ${Resource.msg('button.addtocart', 'common', null)}
        </button>

         <isif condition="${!product.readyToOrder}">
            <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"> 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="row estimated-total">
            <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/checkoutButtons" />
                        </div>
                    </div>
                    <br/>
       fenixEstimateWidget"/>
        </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="${(typeof !(fenixIntelligentDeliveryUtils.isEmpty(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 4

New Version 5

Key

Delivery Estimate Insertion

ISML Code Changes

Product Detail Page

Mini-Cart

Mini-Cart

Cart Page

Cart Page

Checkout Page

Checkout Page