Fenix Integration on PDP and CART Page v2.0 (JS SDK)
Fenix Global EDD Script in the Shopify themes: Enable Fenix’s estimated delivery date on PDP and CART page; there are few prerequisite information required for Fenix API to provide estimates. Global script’s primary responsibility isÂ
Detect the user’s default zip code using the IP address. If the user detects in the USA region, Fenix will provide EDD in the PDP and CART pages.Â
Ability to provide EDD check for customer required zip code instead of default detected for desired USA zip codes.Â
Ability to get the current SKU information from the PDP page and multi SKUs in case of the CART pageÂ
How to configure Fenix global EDD scripts in the Shopify theme?Â
Click your store admin URL https://yourstorename.myshopify.com/admin
Â
Rename the duplicated theme as Fenix Integration-yourthemename for better visibility and avoid confusion for other developers. Refer to the below sample screenshot
Edit the theme code. Refer to the below sample screenshot
Search for the theme file. Refer to the below sample screenshot
Search for theme.liquid keyword in the search box.Refer to the below sample screenshot
Shopify Code Editor.Refer to the below sample screenshot
Â
The below code integration should be available in the theme for any further changes or while shifting to a completely brand new theme.Â
Insert below Code Snippet in theme.liquid file before or inside the </head> tag .
<script type="text/javascript" src="https://sp.cdn.fenixcommerce.com/1.2/fenix.min.js"></script>
Â
Fenix Product Detail Page (PDP) code snippet Features.
Show Estimated delivery dates on the product page.
To provide edit zip code change functionality on the product page.
To change the zip code on the widget.
To interact with Fenix Apis with the correct SKU.
Fenix Estimated Delivery Integration in Product Details Page (PDP)Â
Please use the above theme.
Search the Snippets keyword in the search and click on Add a new Snippet. Refer to the below sample screenshot.
Fenix PDP Template code snippet
<div id="fenix-delivery-estimate-pdp-id" class="fenix-delivery-estimate-pdp"></div>
<script type="text/javascript">
FenixDeliveryEstimates({
products : {{ product | json }},
shopurl : '{{shop.permanent_domain}}',
currentvariant : '{{product.selected_or_first_available_variant.id}}',
fenixViewAllShippingText: 'View All Shipping Options'
});
</script>
Copy and paste the above-provided code snippet completely into fenix-pdp-template.liquid file, and don't forget to click the Save button. Refer to the below sample screenshot.
Please contact Fenix Customer Support Team fixdsupport@fenixcommerce.ai in case of any issue in the code snippets and for all queries.
Insert Fenix snippets in all PDP Templates.Â
Fenix provided an estimated delivery date that can be obtained for individual products in PDP by adding the following piece of code to the theme's templates. This code snippet should be added to any template responsible for rendering the product details. The snippet can be added in the location, whichever is most desirable to show the Fenix Estimated delivery date.Â
Fenix Recommendation: Our preference has always been to show the message right above the Add to Cart button or below the product price as it would be more appropriate locations to capture customers' attention.Â
Applicable Template Files: All PDP templates.Â
How to find the PDP template file?
It will differ from theme to theme and retailer to retailer. The below example is shown using the default theme in the development store.
Search PDP template(s).In the case of the default theme, in my case file name is product-template.liquid. If you don't find the PDP templates contact the theme developer, or Please contact Fenix Customer Support Team fixdsupport@fenixcommerce.ai in case of any issue in the code snippets and for all queries.
Search and find the add to cart button code and place the Fenix script above the add to cart button tag for better conversion. If you’re unable to find the code contact your theme developer, or Please contact Fenix Customer Support Team fixdsupport@fenixcommerce.ai .
Code Location in File: Wherever the Fenix provided estimated delivery date has to be shownÂ
PDP template Code Snippets
Use the below snippets depends on your theme.
{% if product.selected_or_first_available_variant.available %}Â {% include 'fenix-pdp-template' %}Â {% endif %}Â
Place the above code snippet and click the Save button.
Reload the theme and successfully able to see Fenix Estimated delivery dates on PDP, which has a valid Inventory in the Fenix system.
This ends PDP integration.
CART Integration
Fenix Shopping CART code snippet Features.
The snippet is enabled for “/cart“ in the URL.
The snippet shows estimated delivery dates in the widget.
Fenix Estimated Delivery Integration in CART
Click your store admin URL https://yourstorename.myshopify.com/admin
Search Snippets keyword in the search and click on Add a new Snippet. Refer to the below sample screenshot
Create and name the new snippet as fenix-cart-template.liquid and click Create Snippet button. Refer to the below sample screenshot
fenix-cart-template.liquid Code snippet
Copy and paste the above-provided code snippet completely into fenix-cart-template.liquid file, and don't forget to click the Save button. Refer to the below sample screenshot
Â
Features additions :
if we want to show View All Shipping options with Rates please find below code :
Please contact Fenix Customer Support Team fixdsupport@fenixcommerce.ai in case of any issue in the code snippets and for all queries.
Insert Fenix snippets in the CART Template
Include the below snippets in cart-template.liquid at the mentioned code locations.Â
Applicable Template Files: CART templates.Â
Code snippet must be included at the starting( line no:- 1) in cart-template.liquid file. Press enter to add the code snippet. Refer to the below sample screenshot
Code SnippetÂ
Add the above code snippet in cart-template.liquid file and click the Save button. Refer to the below sample screenshot
Search for a subtotal keyword in the cart-template.liquid file. Press enter at starting of <div>
If you need item-level Estimated Delivery Dates in CART or for any styling changes such as font size, color, font style, etc. Please contact Fenix Customer Support Team fixdsupport@fenixcommerce.ai
Note:-Strictly Use only the existing <style> </style> section. Please reach out to Fenix to make any changes other than styling.Â
Last step to delete Session trackers:
Login to store
Visit Admin->settings -> checkoutÂ
In order status page, add below code
store-url-dot-com/admin/settings/checkout
This completes Cart integration
Â
Callbacks and Functions PDP
You should be able to use callback functions when XHR request is completed. Usage is given below.
So in the below example when XHR request is completed myFunctionCallback
will be executed.
And your function goes below :
Parameter xhrResponse
is the response received from Fenix API requests. and Parameter payload
is payload passed in API Requests.
Â
You should be able to use callback functions when XHR request is completed. Usage is given below.
So in the below example when XHR request is completed myFunctionCallback
will be executed.
And your function goes below :
Parameter xhrResponse
is the response received from Fenix API requests. and Parameter payload
is payload passed in API Requests.
Â