Salesforce Commerce Cloud

Step 1: Initial Setup

Create Custom Preferences in Business Manager
1. New Group:
  1. ID: fairing
  2. Name: fairing
2. New Attribute
  1. ID: fairing_enabled
  2. Name: Fairing Enabled
  3. Value Type: Boolean
3. New Attribute
  1. ID: fairing_publishable_key
  2. Fairing Publishable Key
  3. Value Type: String
4. Add the new attributes to the Fairing Custom Preference group.
5. In Custom Preferences, ensure Fairing is enabled and paste in your Publishable Key.
Include the Fairing javascript file in the scripts.iml template. In the example below, the javascript file is only loaded on the order confirmation page.
Create a new fairing.isml file for the order confirmation template using the provided code, modifying the Fairing integrations and other data as needed. In this example, the file was created in templates/default/modules/fairing.isml.
Include the new fairing.isml file on the order confirmation page where you would like the question stream to appear.

Code examples have been provided for steps 2-4 above.

Step 2 - Include Fairing Snippet on Order Confirmation Page

<iscomment> Fairing - Include Javascript on Order Confirmation Page </iscomment>
<isif condition="${!empty(pageContext) && pageContext.type === 'orderconfirmation' 
&& require('dw/system/Site').getCurrent().getCustomPreferenceValue('fairing_enabled')}">
    <script src="https://app.fairing.co/js/enquire-labs.js"></script>
</isif>

Step 3 - Initialize your Question Stream®

<iscomment> Fairing - Initialize Question Stream </iscomment>
<isif condition="${pdict.order.orderNumber 
&& require('dw/system/Site').getCurrent().getCustomPreferenceValue('fairing_enabled') 
&& require('dw/system/Site').getCurrent().getCustomPreferenceValue('fairing_publishable_key')}">

    <div id="fairing_question_target"></div>
    
    <isscript>
    var fairingAPIKey = require('dw/system/Site').getCurrent().getCustomPreferenceValue('fairing_publishable_key');
    var currentOrder = require('dw/order/OrderMgr').getOrder(pdict.order.orderNumber);
    </isscript>
    
    <isif condition="${currentOrder}">
        <isscript>
        var shippingModel = currentOrder.shipments[0];
        var creationDate = currentOrder.creationDate.toJSON();
        var priceTotal = pdict.order.priceTotal.replace('$','');
        // Query total number of orders based on customer email
        var orderList = require('dw/order/OrderMgr').searchOrders(' customerEmail={0} AND orderNo != {1} AND status != {2} ', null, currentOrder.customerEmail, currentOrder.orderNo, require('dw/order/Order').ORDER_STATUS_FAILED);
        var orderCount = orderList ? (parseInt(orderList.count) + 1).toString() : '1';
        </isscript>

        <isset name="couponCode" value="" scope="page" />
        <isset name="couponType" value="" scope="page" />
        <isset name="couponAmount" value="0.00" scope="page" />
        <isif condition="${pdict.order.totals.discounts.length}">
            <isloop items="${pdict.order.totals.discounts}" var="discount">
                <isif condition="${discount.applied}">
                    <isset name="couponCode" value="${discount.couponCode}" scope="page" />
                    <isset name="couponType" value="fixed" scope="page" />
                    <isset name="couponAmount" value="${pdict.order.totals.orderLevelDiscountTotal.formatted.replace('$','')}" scope="page" />
                </isif>
            </isloop>
        </isif>

        <script>
        const API_KEY = '${fairingAPIKey}';  // API key (Publishable API key located on your Account page)
        const TARGET_ELEMENT = document.getElementById("fairing_question_target");
        
        // Setup the customer object. We use the customer object to decide which questions to
        // ask and to associate responses with a customer.
        const customer = {
            email: '${currentOrder.customerEmail}',
            id: '${currentOrder.customerNo}',
            order_count: ${orderCount}
        };
        
        // Setup the transaction object. The transaction object allows us to associate order volume
        // with responses in reporting, and is included in data exports for more granular analysis.
        const transaction = {
            id: '${currentOrder.orderNo}',
            number: '${currentOrder.orderNo}',
            created_at: '${creationDate}',
            locality: '${shippingModel.shippingAddress.city}',
            region: '${shippingModel.shippingAddress.stateCode}',
            postcode: '${shippingModel.shippingAddress.postalCode}',
            country_code: '${shippingModel.shippingAddress.countryCode.value}',
            currency_code: 'USD',
            total: ${priceTotal},
            total_usd: ${priceTotal},
            coupon_amount: ${couponAmount},
            coupon_code: '${couponCode}',
            coupon_type: '${couponType}',
            landing_page_path: '/orderconfirmation',
            platform: 'SFCC',
            source: 'website'
        };
        
        // Wait for the DOM to be ready
        window.addEventListener("DOMContentLoaded", function() {
            const fairing = Fairing(API_KEY, TARGET_ELEMENT, {
            transaction: transaction,
            customer: customer,
            config: {
                integrations: {
                    klaviyo: true,
                    rockerbox: true
                }
            }
            });
        
            fairing.nextQuestion();
        });
        </script>
    </isif>
</isif>

Step 4 - Include ISML template on Order Confirmation Page

<iscomment> Fairing - Include fairing.isml on Order Confirmation Page </iscomment>
<isif condition="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('fairing_enabled')}">
    <isinclude template="modules/fairing"/>
</isif>