Delivery Estimate Insertion
ISML Code Changes
Following is the code snippet for consuming the API response
<isinclude template="fenix/fenixestimatewidget" />
Product Detail Page
Add below code snippet to the end of: cartridge/templates/default/product/components/addToCartProduct.isml
<div class="row cart-and-ipay">
<div class="col-sm-12">
<input type="hidden" class="add-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
Add below code snippet at the end of the minicart-footer section: cartridge/templates/default/checkout/cart/miniCart.isml
<div class= minicart-footer">
<div class="minicart-footer">
<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="cart/checkoutButtons" />
</div>
</div>
<div class="row">
<isinclude template="fenix/fenixestimatewidget" />
</div>
</div>
Cart Page
Add below code snippet at the end of the cart-page container: cartridge/templates/default/cart/cart.isml
<div class="container cart cart-page">
<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="cart/checkoutButtons" />
</div>
</div>
<br/>
</div>
</div>
</div>
<isinclude template="cart/cartRemoveProductModal"/>
<isinclude template="cart/cartRemoveCouponModal"/>
<isinclude template="fenix/fenixestimatewidget"/>
Checkout Page
Add “form caption” section to the shiping methods to display the delivery estimation: cartridge/templates/default/checkout/shipping/shippingMethod.isml
<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>
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}">
<span class="display-name">${shippingMethod.displayName}</span>
<isif condition="${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 condition="${pdict.fenixDeliveryEstimate}">
<isif condition="${(typeof pdict.fenixDeliveryEstimate.shipment[shippingMethod.ID] !== 'undefined')}">
<isif condition="${(!empty(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)}">
<div class="form-caption delivery-noestimate">(<isprint value="${shippingMethod.description}"/>)</div>
</isif>
<iselseif condition="${!empty(shippingMethod.description)}">
<div class="form-caption delivery-noestimate">(<isprint value="${shippingMethod.description}"/>)</div>
</isif>
<iselseif condition="${!empty(shippingMethod.description)}">
<div class="form-caption delivery-noestimate">(<isprint value="${shippingMethod.description}"/>)</div>
</isif>
</isloop>
</div>
