Working with E-commerce Driver

When the editor is integrated with Shopify, WooCommerce, nopCommerce or any other system, it is possible create a config which would interract with the ecommerce - read information about the product from the e-commerce product catalog, modify the order, get price, etc. To make it possible writing a single config for any system, all the code which works with a specific ecommerce system is isolated to a separate abstraction layer. We call it an ecommerce driver.

We won't get too deep into details how ecommerce drivers work and how to create your own. All you need to know at this point that it is a JavaScript module which exposes objects like Product, Order, Options, Attributes and User. All information about these entities is taken from an E-commerce system and passed to the editor through these objects.

How to access ecommerce driver data

After reading the articles about Dynamic Configs you should learn that you can write some inline JavaScript code in the JSON config. You may used to think that the only object you can access there is the $ - array of widgets.

However, there additional objects are available in the scope, in particular, product and order give you an access to the information about the current product and the order.

The product contains such information as attributes (some static details about the product) and options (user choices).

The order contains the list of selected user choices, pricing and quantity.

Let's examine few examples.

Reading a specific attribute value

Pretty common scenario where you want to read an attribute from a product and use it in the config. You can do it as follows:

{
    "designFile": "{{product.attributes.find(a=>a.title==='Template').value}}"
}

Getting a quantity

{
  "type": "static-text",
  "name": "price",
  "params": {
    "text": "{{orders.current.quantity}}"
   } 
}

Displaying a price

The price is available in two properties - priceLocalized (a formatted price as a string with the currency sign based on the ecommerce system cultural settings) and price (the price as a number).

This widget displays the price.

{
  "type": "static-text",
  "name": "price",
  "params": {
       "text": "{{'Total: ' + order.priceLocalized }}"
   } 
}

Working with options

There is a special widget called Option. It can grab the information about the option from the ecommerce system under the hood. All you need is to specify an id or title of the option, the same one as comes from the ecommerce system

{
    "type": "option",
    "name": "product-style",
    "params": {
        "title": "Product Style"
    }
}

If the ecommerce driver contains an option called Product Style, it will automatically fills it with the appropriate values and other settings.

However, sometimes it is not enough. For example, if you want to bind the options from the ecommerce system to, say, designs or mockups in Customer's Canvas, you may want to merge the option definition from the ecommerce system with your own information.

In this case, you can just add your values by title and add extra information through the props property.

{
    "type": "option",
    "name": "product-style",
    "params": {
        "title": "Product Style",
        "values": [{
            "title": "Classic",
            "props": {
                "previewMockup": "mockup-classic"
            }
        },{
            "title": "Fancy",
            "props": {
                "previewMockup": "mockup-fancy"
            }
        }]
    }
}