Setup
Include Link Cartridge
The ‘int_fenix_sfra,’ ‘int_fenix_core’ & ‘bm_fenix’ Cartridges need to be uploaded to the current code version along with all other cartridges.
Configuration
Cartridge path Add the ‘fenix_sfra_changes’, ‘int_fenix_sfra’ & ‘int_fenix_core’ Cartridges to the Storefront Cartridge path
To use the link cartridge, the site cartridge path needs to be updated to include this cartridge names ‘fenix_sfra_changes’, ‘int_fenix_sfra’ & ‘int_fenix_core’. This is done at the following location:
Administration > Sites > Manage Sites > <<Site Name>> - Settings
Add the ‘bm_fenix’ Cartridge to the Business Manager Cartridge path
To use the Jobs in the link cartridge, the Business Manager cartridge path needs to be updated to include this cartridge name ‘bm_fenix’. This is done at the following location.
Administration > Sites > Manage Sites > Manage the Business Manager Site
Metadata
To use the Fenix Intelligent Delivery Platform, we need to create and import the site metadata. This is done at the following location:
Administration > Site Development > Site Import & Export
Site Imports
Upload Fenix Intelligent Delivery Platform Meta File
Under “Import”, click Choose File.
Select and Upload “Fenix_Intelligent_Delivery_Platform_Meta.xml” from the Metadata directory in the Link Cartridge.
Click Upload to import the Meta File.
Import Meta File
Under “Import”
Select the radio button next to “Fenix_Intelligent_Delivery_Platform.zip”
Click Import to validate the import file.
Click “OK” to confirm the Import.
Assign Value to Site Preference
After selecting the site, you assign the value to the site preference. This is done at the following location:
Merchant Tools > Site Preferences > Custom Preferences > Storefront Configurations.
Find the Site Preference Grouping titled “Fenix”, locate the “Tenant ID” attribute, and assign the “Tenant ID” value to the text field that was provided by Fenix.
Setup Site Specific Preferences
Site Preferences created during the setup process:
Name | Type | Description | |
---|---|---|---|
1 | Fenix Enabled | Boolean | Enable / Disable all features of the Fenix Intelligent Delivery Platform |
2 | Fenix Debugging Enabled | Boolean | Enable / Disable debug features of the Fenix Intelligent Delivery Platform |
3 | Fenix Tenant Id | String | Customer Identification token provided by Fenix Communications. e.g. 768b656c974245d2a427abe356bb4bf1 |
4 | Fenix Show Ship Id | String | Business Manager Shipping ID forced to display on the Checkout shipping page. This is used for a Ground shipping method that does not have a Fenix Intelligent Delivery Platform Delivery Estimate.
|
5 | Fenix Hide Ship Id | String | Business Manager Shipping ID forced to hide on the Checkout shipping page. This is used for a Ground shipping method that does not have a Fenix Intelligent Delivery Platform Delivery Estimate.
|
6 | Fenix Inventory Threshold | Number | Threshold Used For All Products In The Inventory Feed |
7 | Fenix Inventory Location | String | Inventory Location Used For All Products In The Inventory Feed |
8 | Fenix Store Name | String | Fenix store name used for post purchase order API and fulfillment API |
9 | Fenix Username | String | Fenix store username used for generating post purchase auth token |
10 | Fenix Password | String | Fenix store password used for post purchase auth token |
11 | Fenix X-Api-Key | String | Fenix store X-Api-Key used for post purchase APIs - generating auth token, order and fulfillment API. |
12 | Fenix X-Identity | String | Fenix store X-Identoty used for post purchase order API and fulfillment API |
Service Profile and Service Creds
Assign Values To “FenixIntelligentDelivery.get” Service Credentials
From Path: Administration > Operations > Services
Go to Tab “Credentials”.
Click FenixIntelligentDelivery.get.cred to edit the credentials.
Give the following parameters:
Name: FenixIntelligentDelivery.get.cred
URL: <<End point URL of Fenix>>
User: empty
Password: empty
Click Apply.
Similarly, do the same exercise for Service Credentials
“FenixIntelligentDelivery.push.auth.cred”,
“FenixIntelligentDelivery.push.orders.cred”
“FenixIntelligentDelivery.push.fulfillment.cred”
if the site is enabled for post-purchase Fenix integration.
Note
{order_id} is dynamic order id in the URLs and {fulfillment_id} is dynamic shipment/fulfillment id in the URLs. Example below: https://platform.api.fenixcommerce.com/sfcccartridge/fenixppdenterpriseinbound/api/v1/orders/{order_id}/fulfillment/{fulfillment_id}/created
FenixIntelligentDelivery.push.orders.cred
FenixIntelligentDelivery.push.fulfillment.cred
FenixIntelligentDelivery.push.fulfillment.cred
Assign Values To “FenixIntelligentDelivery.push” Service Credentials
From Path : Administration > Operations > Services
Go to Tab “Credentials.”
Click
FenixIntelligentDelivery.push.cred to edit the credentials.
Give the following parameters:
Name: FenixIntelligentDelivery.get.cred
URL: <<Fenix Provided Endpoint URL>>
User: <<Fenix Provided User Name>>
Password: << Fenix Provided Password >>
Services, Profiles, and Credentials Setup
Services created during the setup process
Name | Type | Description |
FenixIntelligentDelivery.get.http | Service | Service Used to “Get” Delivery Estimate From the Fenix Intelligent Delivery Platform. |
FenixIntelligentDelivery.get.prof | Profile | Profile Configuration For “Get” Service |
FenixIntelligentDelivery.get.cred | Credentials | Credentials needed to connect to the “Get” Service |
FenixIntelligentDelivery.push.sftp | Service | Service Used to “Push” Product and Inventory Feeds to the Fenix Intelligent Delivery Platform.
|
FenixIntelligentDelivery.push.prof | Profile | Profile Configuration For “Push” Service |
FenixIntelligentDelivery.push.cred | Credentials | Credentials needed to connect to the “Push” Service |
FenixIntelligentDelivery.push.auth.http | Service | Service used for generating auth token for post purchase APIs |
FenixIntelligentDelivery.push.auth.cred | Credentials | Credentials needed to connect to the auth token Service |
FenixIntelligentDelivery.push.orders.http
| Service | Service used for sending order data to Fenix systems |
FenixIntelligentDelivery.push.orders.cred | Credentials | Credentials needed to connect to the Order Service |
FenixIntelligentDelivery.push.fulfillment.http | Service | Service used for sending shipment/fulfillment data to Fenix systems |
FenixIntelligentDelivery.push.fulfillment.cred | Credentials | Credentials needed to connect to the Fulfillment Service |
Fenix Intelligent Delivery Export Job
To use Salesforce B2C box Service Framework, you’ll need to configure the Export Job.
Assign Values To Job Steps
Follow these steps to assign value to Export Job Definition. This is done at the following location.
Administration > Operations > Jobs : Fenix Intelligent Delivery Export
Click Job Steps.
For “Site Specific Catalog Export” & “Site Specific Inventory Export”
Click Organization.
Click Store Front to export.
Click Assign.
Click Sites Upload Feeds.
Update “ProductDir” to Fenix Provided Directory.
Update “InventoryDir” to Fenix Provided Directory.
Click Assign.
Click Run Now or setup a “Schedule” to connect.
Fenix Intelligent Order Export Job
Order can be sent to Fenix systems at the time of order placement. For this, a hook needs to be implemented as below.
{ "name": "app.post.auth", "script": "./cartridge/scripts/hooks/fenix/sendOrder.js" }
This hook is already called in SFRA out of the box in the file CheckoutServices.js. For any failed order export to Fenix or clients who do not want to send the orders at the time of order placement, the following job will be responsible for sending those orders to the Fenix database.
Assign Values to Job Steps
Follow these steps to assign value to Export Job Definition. This is done at the following location.
Administration > Operations > Jobs : Fenix Intelligent - Send Orders
Click Run Now or setup a “Schedule” to connect.
Fenix Intelligent Fulfillment Export Job
For sending the fulfillment details to the Fenix database, the following hook must be implemented in all the custom events, and flows must be implemented where the order/shipment objects are updated.
var sendFulfilmentResult = hooksHelper('app.fenix.send.fulfilment', 'sendFulfilment', order, finalShipment, null);
Where order represents the SFCC order object, and final shipment represents the updated shipment.
E.g. when the shipment is marked as shipped, shipment.trackingNumber and shipment.custom. shipCarrier is set, then if we call the above hook, it will send the details to Fenix.
For manually triggering this flow, i.e., testing the flow for sending fulfillment data, Job “Fenix Intelligent - Send Fulfillment - Test Job” is added to the meta folder where the order id and shipment id are passed to the job step.
Assign Values to Job Steps
Follow these steps to assign value to Export Job Definition. This is done at the following location:
Administration > Operations > Jobs : Fenix Intelligent - Send Fulfillment - Test Job
Click Run Now or setup a “Schedule” to connect.
Custom Code
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>