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:
Add the below code snippet to enter an empty div on PDP which fenix js will use to inject delivery messages
<div class="fenix-delivery-sfcc">
<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:
