COSTCONEXT Fenix Integration on PDP and CART Page

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? 

image-20240329-052339.png
  • Rename the duplicated theme as Fenix Integration-yourthemename for better visibility and avoid confusion for other developers. Refer to the below sample screenshot

image-20240329-052536.png
  • 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 code integration below should be available in the theme for any further changes or while shifting to a completely 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.3/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 box and click on Add a new Snippet. Refer to the sample screenshot below.

  • 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 that renders the product details. The snippet can be added to 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 do I 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

  • 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:

  1. Login to store

  2. Visit  Admin->settings  -> checkout 

  3. 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.