SFRA Storefront Changes (PDP, CART, Mini-Cart and Checkout)
- Sharath Chandra Parashara
- Sanjeev Arora
- Ajay Tribhuwan
Delivery Estimate Insertion
Decorator Page
Open file \cartridge\templates\default\common\htmlHead.isml
Add the below code snippet to insert a Fenix javascript to the PDP page
<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 idxapikey= 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.
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:
Something like below: