Use Cases: Attraqt App for BigCommerce

Use Cases

To get you started and so you can take advantage of all that our platform offers as quickly as possible, we've put together six starter use cases for you. These will provide insight into the workings of the Recommendations and Search capabilities from the XO platform, and get you to use and familiarise yourself with our key features.

The six use cases are:

Recommendations

1. Most popular items on the home page.
2. Similar product recommendations on product detail pages.
3. Complementary product recommendations on basket pages.
4. UI / developer-based widget templates.

Search / PLPs

1. Custom sort options.
2. Custom facet configurations.

1. Most popular items on Home Page

In this example, the widget will display best-selling products, which are generally used on the homepage to encourage product discovery. This means the recommendation will have no product or category restrictions, so it can easily be created using an algorithm.

• Once you've created a widget, navigate to the Merchandising section and select Algorithms.
• Apply the algorithm 'Most popular items' to return the appropriate products.
• You can also specify the number of products you would like to display, shown in the second example.

2. Similar product recommendations on Product Detail Pages

In this example, you will create a widget that displays similar (same category and type) products to the item that is being viewed. First, define the variables so that you can specify the product you're referring to and the appropriate returning products.

The variables that we need to create include the following:

Variables	Category	Type	What is does
$productId	Context	String	This will allow you to reference the current product ID.

 

Please note that your variable names and attributes may differ from this example and should be created according to your data structure.

The next step is to create the widget within the XO console. To do this, navigate to the Merchandising section and select 'Add a widget'. Populate the general information with the appropriate information and select the Merchandising tab to configure what the widget will display.

The first section lets you specify how many products you want to return in the widget. In the example below, four similar products will be returned to the shopper:

Next, within the 'Required tags (AND)' field, specify the variables you've defined earlier to ensure similar and relevant products are returned to your visitors. Using the variables above, this will be $product_type and $product_category within this section, as shown below.

Once you've put in place the appropriate filtering requirements, you can apply an algorithm to your widget that will provide relevant recommendations. You'll apply the 'Most trendy items of the moment' algorithm. This shows the most popular products that meet the requirements, as defined in the filter section.

3. Complementary products on Basket Pages

In this example, you'll create a widget that will show complementary products to the items in the basket for additional upsell opportunities. To upsell effectively, you should limit the price of the recommended products to below the total value of your cart. This will increase the likelihood of an impromptu discretionary purchase. First, you need to create a variable to reference the total amount in the cart; an example of this is described below.

Variable	Category	Variable Type	What it does
$basketAmount	Context	Float	Refers to the total cart amount so that you're able to recommend products lower than the basket value.

Next, create the widget to display products that are below the cart amount. Populate the general information tab, and then navigate the Merchandising tab. You can specify the maximum value for the products you want to display as $cart_amount to ensure we don't recommend products that exceed the cart value. You can also apply required tags to the widget to ensure the products are within the price range and still relevant, as shown in the image below:

4. Custom widget templates

Custom Widget Templates allow users to create a different look and feel for their widgets from XO. There are two approaches to setting up a widget template, either through the 'Developer approach' or the 'UI approach'. To create a custom widget template from the Attraqt app, you'll need to toggle if it's a developer template and provide the template name and template data/code.

4.1 UI approach

A UI-managed widget template is defined exclusively in the Attraqt app. This is perfect for users familiar with HTML who want the flexibility to configure and deploy widget templates without needing to go through the BigCommerce theme.

To implement this type of widget template, the Developer Template toggle should be off, and the user will be presented with a Template Name and a Template Data field.

The Template Name is used within Page Builder, allowing users to identify a template. The Template Data field contains the HTML that is used to render the recommendations.

The template data field supports a simple templating language called EJS. This allows for the implementation of conditional logic and looping of recommendations results. The API response from the recommendations API is available in the data.recommendations variable.

An example recommendations template follows:

<ul>
    <%= data.recommendations.forEach(function (rec) { %>
        <li>
            <h3><%= rec.product.title %></h3>
            <img src="<%= rec.product.photo %>" />
</li>
    <% }) %>
</ul>

4.2 Developer approach

A developer-managed widget template is defined as a widget template in the Attraqt app, but the HTML should be provided within the BC theme. This is a good approach for developers or agencies that require more flexibility when implementing their templates (such as needing JavaScript to fire before or after a widget is rendered), having requirements around version control, or release processes.

When using a Developer Template, the developer is responsible for implementing the widget template (such as HTML or corresponding JavaScript initialisation) within the BC theme - the Attraqt app cannot be used to manage the widget template's HTML. 

The example code below is contained within the BC theme files. In our example, it was added to Template → Components → 'company name' → Custom-Widgets.html. 

<script
    type="text/template"
   data-attraqt-template
    data-attraqt-template-code="example-custom-template"
>
    <div>
        <h5>Recommendations Debug</h5>
        <pre><%- JSON.stringify(data) %></pre>
    </div>
</script>