HomeStyla PagesStyla MagazinesStyla Modular ContentStyla Features OverviewSEO and Page SpeedStyla PluginsEmbedding Styla on Your WebsiteRouting for StylaProduct Data for StylaSEO IntegrationStyla ModulesStyla CSSStyla HooksStyla Content in Your Search ResultsInternationalisationUpdate History

Product data for Styla

TLDR: Now that your Styla content is rendered on your website and requests are routed to it accordingly, Styla needs to integrate with product data from your shop application. In order to do this, you will need to make this data available either as a static file or a JSON API and provide a function or an endpoint to be called by Styla when a product is added to the card. 

What is needed

Provide a source of product data

Styla clients usually provide the product data in one of the two ways described below. Building an API requires more effort but enables Styla to request the product data in real time and is a much better way to pass variant and price data for single products.   

Option A: JSON API

Provide an API that makes the product data from your shop application available via two endpoints described below. The field names and endpoint paths may be different as long as the data is there. 

1. Categories Endpoint:

  • http://example.com/styla/categories is the standard path but Styla can access any other.
  • Should enable filtering of its contents with the two parameters: http://example.com/styla/categories?limit=aa&offset=bb 
    • limit: number of parent categories per page
    • offset: number of page to start with
  • It should return a JSON array with category objects, including:
Name: Type: Comments:
id String|Number
  • category ID, should be unique
  • will be used as a filter for the search endpoint (below)
name String
  • category name
  • will be displayed as a label in backoffice.styla.com so should be clear Styla content editors
children Array each child category should include the: id, name, children nodes


This endpoint will be used to: display category tree (structure) in backoffice.styla.com that editors of your Styla content will be able to browse or search and display products (using the category ID as a filter).

Example nodes:

[
  { 
  "id": "00001",
  "name": "Women",
  "children": [
          {
          "id": "00010",
          "name": "Jeans",
          "children": [
                  {
                  "id": "00100",
                  "name": "Regular fit",
                  "children": []
                  },
                  {
                  "id": "00101",
                  "name": "Straight fit",
                  "children": []
                  },
                  {
                  "id": "00102",
                  "name": "Slim fit",
                  "children": []
                  }
                ]
          },
          {
          "id": "00011",
          "name": "T-shirts",
          "children": []
          },
          {
          "id": "00012",
          "name": "Scarves",
          "children": []
          }
         ]
  },
  { 
  "id": "00002",
  "name": "Men",
  "children": [
          {
          "id": "00013",
          "name": "Jeans",
          "children": []
          }
        ]
  }
]
                  ...

2. Search Endpoint:

  • http://example.com/styla/products is the standard path but Styla can access any other.
  • Should enable filtering of its contents with the four or less parameters at once: http://example.com/styla/products?category=xx&search=yy&limit=aa&offset=bb 
    • category: id sourced from the categories endpoint - returns only products within this category and its children categories (if there is a tree category structure) 
    • search: search term, multiple keywords default to an AND search (jeans+blue = matching both 'jeans' AND 'blue') - returns only products matching the search term covering: brand name, product name, category and description 
    • limit: number of products per page
    • offset: number of page to start with
  • It should return a JSON array of product objects, including: 
Name: Type: Comments:
id String|Number
  • product ID, should be unique
  • will be used as query term for search in editor.styla.com
caption String
  • caption of the product image (usually product name)
  • will be displayed on Styla front-end
image String
  • URLs of product images (largest size, larger than 1000x1000px, if possible, to cover also HDPi requests)
  • if there is more than one image, all of them should be displayed to give your content editors more choice
  • will be displayed in editor.styla.com and if saved in a story and uploaded to Styla, also on Styla front-end, resized to match viewports
pageUrl String
  • URL of the product page in your shop
  • will be displayed on Styla front-end and clicked on by users


Example nodes:

  {
  "id": "000000123456-AA",
  "caption": "Classic Blue Regular Fit Jeans",
  "image": [
        "https://images.example.com/products/large/000000123456-aa-01.jpg",
        "https://images.example.com/products/large/000000123456-aa-02.jpg",
        "https://images.example.com/products/large/000000123456-aa-03.jpg",
        "https://images.example.com/products/large/000000123456-aa-04.jpg"
       ],
  "pageUrl": "https://www.example.com/us_en/products/classic-blue-regulard-fit-jeans/"
  },
  {
  "id": "000000123478-AA",
  "caption": "Ripped Loose Fit Jeans",
  "image": [
        "https://images.example.com/products/large/000000123478-aa-01.jpg",
        "https://images.example.com/products/large/000000123478-aa-02.jpg",
        "https://images.example.com/products/large/000000123478-aa-03.jpg",
        "https://images.example.com/products/large/000000123478-aa-04.jpg",
        "https://images.example.com/products/large/000000123478-aa-05.jpg",
        "https://images.example.com/products/large/000000123478-aa-06.jpg"
       ],
  "pageUrl": "https://www.example.com/us_en/products/ripped-regular-fit-jeans/"
  },
  {
  "id": "000000123481-AA",
  "caption": "Super Stylish Regular Fit Jeans",
  "image": [
        "https://images.example.com/products/large/000000123481-aa-01.jpg",
        "https://images.example.com/products/large/000000123481-aa-02.jpg"
       ],
  "pageUrl": "https://www.example.com/us_en/products/super-stylish-regular-fit-jeans/"
  }
]

Option B: Static files

Provide a file with product information that Styla needs to let your content editors add you products in the backoffice.styla.com and then display them on Styla front-end.

As for the file type itself, several options are possible:

Or any other format. The file just needs to:

  • be hosted on a URL that Styla has an access to (Styla needs credentials if password-protected, if you limit acccess per IP, please whitelist these: 52.2.252.181, 52.44.96.7, 90.187.20.193, 66.249.76.56)
  • be updated by you to reflect any changes in the product data
  • always use the same delimeter to separate columns for each product (,;| or whatever suits you)
  • contain product data fields Styla needs to source from it, basically the ones described in the Option A: JSON API above: id, title, description, product_type, link, image_link
Name: Type: Comments:
id String|Number
  • category ID, should be unique
  • will be used as a filter for the search endpoint (below)
product_type String
  • category name
  • will be displayed as a label in backoffice.styla.com so should be clear to Content Hub editors
title String
  • caption of the product image (usually product name)
  • will be displayed on Styla front-end
image_link String
  • URLs of product images (largest size, larger than 1000x1000px, if possible, to cover also HDPi requests)
  • if there is more than one image, all of them should be displayed to give your content editors more choice
  • will be displayed in editor.styla.com and if saved in a story and uploaded to Styla, also on Styla front-end, resized to match viewports
link String
  • URL of the product page in your shop
  • will be displayed on Styla front-end and clicked on by users


Field naming from Google Product Feed is used in the table above but names may be different as long as the data is there. 

Styla will parse the file each 6 hours with its Product API and update the product data used by your editor.styla.com for any future stories. Images, product names and product URL that have been saved in any story won't be updated there. 

Example structure 1:

<rss version="2.0" xmlns:g="http://base.google.com/ns/1.0">
  <channel>
    <title>Google Shopping Feed</title>
    <link>http://www.example.com/api/products?format=xml</link>
    <description>Google Shopping Feed</description>
    <item>
      <g:id>000000123456-AA</g:id>
        <title><![CDATA[Classic Blue Regular Fit Jeans]]></title>
      <description><![CDATA[Classic yet laid-back. You'll love the feel of these men's jeans.]]> </description>
      <g:price>59 USD</g:price>
      <g:sale_price>39 USD</g:sale_price>
      <g:brand>Awesome Jeans</g:brand>
      <link>https://www.example.com/us_en/products/classic-blue-regular-fit-jeans/</link>
      <g:image_link>https://images.example.com/products/large/000000123456-aa-01.jpg</g:image_link>
      <g:product_type>
        <![CDATA[Women > Jeans > Regular fit]]>
      </g:product_type>
    </item>
    <item>
      <g:id>000000123478-AA</g:id>
        <title><![CDATA[Ripped Regular Fit Jeans]]></title>
      <description><![CDATA[Mid-rise. Three-pocket styling. Button-fly. 100% cotton. Made in the UK.]]> </description>
      <g:price>69 USD</g:price>
      <g:sale_price>49 USD</g:sale_price>
      <g:brand>Unique Jeans</g:brand>
      <link>https://www.example.com/us_en/products/ripped-regular-fit-jeans/</link>
      <g:image_link>https://images.example.com/products/large/000000123478-aa-01.jpg</g:image_link>
      <g:product_type>
        <![CDATA[Women > Jeans > Loose fit]]>
      </g:product_type>
    </item>
  </channel>
...
</rss>

Example structure 2:

<product>
<id>000000123456-AA</sku>
<title>Classic Blue Regular Fit Jeans</name>
<image_link>https://images.example.com/products/large/000000123456-aa-01.jpg</image_link>
<link>https://www.example.com/us_en/products/classic-blue-regular-fit-jeans/</link>
<product_type>Women > Jeans > Regular fit</product_type>
</product>
<product>
<id>000000123478-AA</sku>
<title>Ripped Regular Fit Jeans</name>
<image_link>https://images.example.com/products/large/000000123478-aa-01.jpg</image_link>
<link>https://www.example.com/us_en/products/ripped-regular-fit-jeans/</link>
<product_type>Women > Jeans > Regular fit</product_type>
</product>
...
</xml>

Example structure 3:

id|product_type|title|image_link|link
"000000123456-AA" | "Classic Blue Regular Fit Jeans"|"https://images.example.com/products/large/000000123456-aa-01.jpg"|"https://www.example.com/us_en/products/classic-blue-regular-fit-jeans/"|"Women > Jeans > Regular fit"
"000000123478-AA" | "Ripped Regular Fit Jeans"|"https://images.example.com/products/large/000000123478-aa-01.jpg"|"https://www.example.com/us_en/products/ripped-regular-fit-jeans/"|"Women > Jeans > Regular fit"
...

Providing data over a JSON API (the option A above) is a better choice since it lets Styla enabling the "Add to Cart" function since real-time availability for products is needed and it removes the delays between your static file is updated on your end and then crawled by Styla.

Enable "Add to Cart" functionality

If you want to use Styla's "Add to Cart" functionality in your Styla content, you will need to provide a detailed data for each product variant and a way for Styla to call adding a product ID to the cart in your shop system. 

1. Provide Product Details Endpoint

  • http://example.com/styla/product is the standard path but Styla can access any other.
  • Should pass data for product ID passed in its only parameter: http://example.com/styla/product?id={product-id}
    • id: is sourced by Styla from the 'id' field either on the Search Endpoint (if you provide the Option A: JSON API) or in your file (if you provide the Option B: Static files)
    • so when the 'id' parameter is passed to your endpoint, it has to fetch and deliver data for the very same product as the one mentioned above
  • It should return a JSON array with product variant objects, including:
Name: Type: Mandatory?: Comments:
id String|Number Yes
  • product ID, the one passed by you in the Search Endpoint or the Static File
  • it will serve as an "umbrella ID" for variants in the 'attributes' array, that have their own IDs
  • will be used by Styla to add this variant to the cart only if there are no variants of this product
type String ? ?
name String Yes
  • name of the product
  • will be displayed as a label in editor.styla.com so should be clear to Styla content editors
saleable Boolean Yes
  • if 'false' then a 'Sorry, the product is not available at the moment' message will be displayed for this product on the Styla content front-end
  • if 'true' then the list of variants from the 'attributes' array, their prices and the "Add to Cart" button will be displayed on the Styla content front-end
price String|Number Yes
  • price of the product, either an "umbrella" or one the variants
  • should only use dot for cents, not for each 1000 part, for instance:
    • incorrect: 1.050,99, correct: 1050.99
    • incorrect: 23,030.56, correct: 23030.56
  • it will update on the Styla content front-end if a different variant is selected from the drop-down fields
oldPrice String|Number No
  • old price of the product, only to be populated if it’s reduced, if not, it should be: "oldPrice": ""
  • if populated, it will be displayed on Styla content as the main price while what is in 'price' will be displayed with strikethrough
priceTemplate String No
  • the template of the price containing the currency using the 'price' variable in the following format catered for the target market, for instance:
    • “#{price} €” results in: 1050.99 €
    • “£ #{price}” results in: £ 23030.56
  • it will be used to display the price on the Styla content
minqty Number No a minimal quantity that can be added to the cart (usually: 1)
maxqty Number No a maximal quantity that can be added to the cart (usually: none)
description String No text description of the product to be displayed on Styla's shopping layer
categories Array No lists IDs of categories to which product belongs (they need to match IDs on the categories endpoint)
brand String No delivers brand name associated with product
rating Number (between 0 and 5) No A value based on which rating stars (full and halves) are rendered in Styla content. It gets rounded to halves by Styla automatically (so can be 1.3452 or 4.532)..
attributes Array No a set of variants of the "umbrella" product (example for a T-shirt: size, colour)
id String|Number Yes
  • an internal ID or a name used for this attribute
  • will be used by Styla to add this variant to the cart
label String Yes
  • a label for the attribute (example for T-shirt sizes: XS, S, M, L, XL)
  • will be displayed on the styla content in front of one of the drop down field
options Array No
  • a set of variants of a given attribute together with all the information needed to display them on the Styla content and add them to the cart
  • will be available in the other drop down fields once the attribute is selected
shippingStatus String No
  • a short text telling the user when this product will be delivered if ordered
  • will be displayed on the Styla content below the price
tax Array No a set of additional tax-reated information to be displayed on the styla content next to the price
rate Number No
  • tax rate (in %) applicable to this specific produc
  • will be displayed on the Styla content next to the price
taxIncluded Boolean No
  • states wether the 'rate' has been included in the 'price' and 'oldPrice'
  • triggers displaying the 'label' (below) next to them in the Styla content
  • default: true
showLabel Boolean No
  • triggers displaying the 'label' if 'taxIncluded' is true
  • default: true
Label String No
  • an additional text stating that the 'rate' is included in the 'price' and 'oldPrice'
  • to be displayed next to them in the Styla content if 'taxIncluded' is true and 'showLabel' is true

Example node:

{      
  "id": "000000123456-AA",
  "type": "configurable",
  "name": "Classic Blue Regular Fit Jeans",
  "saleable": true,
  "price": 39,
  "oldPrice": 59,
  "priceTemplate": "#{price} €",
  "minqty": 1,
  "maxqty": 100,
  "description": "These jeans will make you look great. They were designed in Paris and are produced from best environment-friendly materials.",
  "shippingStatus": "Ships in 5 work days",
  "tax": {
     "rate": 19.0,
     "taxIncluded": true,
     "showLabel": true,
     "label": "VAT tax included"
    },
    "attributes": [   
      {
      "id": "SIZE",
      "label": "Size",
      "options": [
             {
             "id": "SIZE-34-34",
             "label": "34-34",
             "products": [
                    {
                    "id": "000000123456-AA-SIZE-34-34-BLUE",
                    "saleable": true,
                    "price": 39,
                    "oldPrice": 59
                    }
                  ],
             "id": "SIZE-34-32",
             "label": "34-32",
             "products": [
                    {
                    "id": "000000123456-AA-SIZE-34-32-BLUE",
                    "saleable": true,
                    "price": 39,
                    "oldPrice": 59
                    }
                  ]
             },
      {
      "id": "COLOUR",
      "label": "Colour",
      "options": [
             {
             "id": "COLOUR-BLUE",
             "label": "Blue",
             "products": [
                    {
                    "id": "000000123456-AA-SIZE-34-34-BLUE",
                    "saleable": true,
                    "price": 39,
                    "oldPrice": 59
                    },
                    {
                    "id": "000000123456-AA-SIZE-34-32-BLUE",
                    "saleable": true,
                    "price": 39,
                    "oldPrice": 59
                    }
                  ]
             }
            ] 
       }
     ]
   }
  ]
},
{      
  "id": "000000123478-AA",
  "type": "configurable",
  "name": "Ripped Regular Fit Jeans",
  "saleable": true,
  "price": 49,
  "oldPrice": 69,
  "priceTemplate": "#{price} €",
  "minqty": 1,
  "maxqty": 20,
  "tax": {
     "rate": 19.0,
     "taxIncluded": true,
     "showLabel": true,
     "label": "VAT tax included"
    },
    "attributes": [   
      {
      "id": "SIZE",
      "label": "Size",
      "options": [
             {
             "id": "SIZE-30-30",
             "label": "30-30",
             "products": [
                    {
                    "id": "000000123478-AA-30-30-blue",
                    "saleable": true,
                    "price": 49,
                    "oldPrice": 69
                    },
                    {
                    "id": "000000123478-AA-30-30-black",
                    "saleable": true,
                    "price": 49,
                    "oldPrice": 69
                    }
                  ],
             "id": "SIZE-32-32",
             "label": "32-32",
             "products": [
                    {
                    "id": "000000123478-AA-32-32-blue",
                    "saleable": true,
                    "price": 49,
                    "oldPrice": 69
                    },
                    {
                    "id": "000000123478-AA-32-32-black",
                    "saleable": true,
                    "price": 49,
                    "oldPrice": 69
                    }
                  ]
             },
      {
      "id": "COLOUR",
      "label": "Colour",
      "options": [
             {
             "id": "COLOUR-BLUE",
             "label": "Blue",
             "products": [
                    {
                    "id": "000000123478-AA-30-30-blue",
                    "saleable": true,
                    "price": 49,
                    "oldPrice": 69
                    },
                    {
                    "id": "000000123478-AA-32-32-blue",
                    "saleable": true,
                    "price": 49,
                    "oldPrice": 69
                    }
                  ],
             "id": "COLOUR-BLACK",
             "label": "Black",
             "products": [
                    {
                    "id": "000000123478-AA-30-30-black",
                    "saleable": true,
                    "price": 69,
                    "oldPrice": null
                    },
                    {
                    "id": "000000123478-AA-32-32-black",
                    "saleable": true,
                    "price": 69,
                    "oldPrice": null
                    }
                  ]
 
             }
            ] 
       }
     ]
   }
  ],
},
{
"id": "000000120121-AC",
"type": "simple",
"name": "A Really Nice Red T-Shirt Size M",
"saleable": true,
"price": "20",
"oldPrice": null,
"priceTemplate": "#{price} €",
"minqty": 1,
"maxqty": 100,
"shippingStatus": "Ships in 5 work days",
"tax": {
  "rate": 19.0,
  "taxIncluded": true,
  "showLabel": true,
  "label": "VAT tax included"
  },
  "attributes": null
},
...

for any not found or faulty products, the endpoint should return:

{"error": "Product not found", "saleable": false}
  • here are no required attributes of a product that define its variants. Most commonly these are colour and size but these can be different ones, too. 
  • based on whether there are any attributes, Styla will distiguish between:
    • simple products (example: the t-shirt above) - no attributes at all hence no dropdown lists dosplayed on the Content Hub overlay and only its product ID passed to your "Add to Cart" endpoint/JS function if a product added to cart
    • configurable products (examples: the jeans above) - at least one attribute provided as an array and used to render dropdown field on the Content Hub and variant product ID passed to your "Add to Cart" endpoint/JS function if product variant added to cart

2. Provide an Add to Cart Endpoint or JS Callback Function

There are two alternative ways for Styla to add products to the cart in your shop application. Both should:

  • add the selected product (variant) ID 
  • refresh the cart section (cart icon, number of products in it, total value) on the page your Styla content is embedded on and trigger any custom JS front-end events that you need

Please provide Styla with either of the ways mentioned below, with a short description, if needed.

Option A: API Endpoint (+ Update Shopping Cart JavaScript Function) 

  • http://example.com/styla/cart/add?id={id}&qty={quantity} is the standard path but Styla can access any other
  • when called, it should put the product variant ID into the cart in your shop for Styla content current user's session:
    • id - Styla will use the ids it sources from your Product Details Endpoint described above
    • quantity - non-mandatory, Styla won't use it unless you define the 'minqty' for the given id in the Product Detail Endpoint
  • It also should trigger any front-end updates related with it (for instance: update the value of the products in the cart).

Styla can also trigger a callback function on your end if it's needed. To make this possible, please provide:

window.styla = window.styla || {callbacks:[]};
window.styla.callbacks.push({'updateCart':function(){...}});

Option B: JS Callback Function 

Provide a function that adds a product variant id and quantity (optional), adds the product into the cart in your shop for Styla content is embedded on and triggers any front-end events that you need. This function should look like this:

window.styla = window.styla || {callbacks:[]};
window.styla.callbacks.push({'addToCart':function(productId,qty){...}});
You can also add any further logic related to the "Add to Cart" process, for instance displaying a custom confirmation overlay:
window.styla = window.styla || {callbacks:[]};
window.styla.callbacks.push({'addToCart':function(productId,qty) {
  // Call here your add to cart logic
  return new Promise((resolve, reject) => {
  	// ATC worked ...
  	return resolve();
  	// ATC failed ...
  	return reject();
  });
}});

Styla will only execute the callback if it includes a promise, so please make sure to implement a promise. Also, please make sure to reject the promise if a given product cannot be added to your cart (for instance, if sold out).

Why this needs to be done

If you need your products to be featured in your Content Hub, your product data has to be used by:

  • editor.styla.com (our CMS), for your content editors to be able to: 
    • search for a product by its name or ID (SKU)
    • browse products by categories
    • select a product and save it in a Styla content with its: name, image, link to its page in your shop 
  • Styla front-end, in order to:
    • display products in stories with their: names, links to product pages images (each image uploaded to, and then hosted by Styla)
    • optional: display product variants (sites, colours, materials etc.), prices per variant or any other custom information like delivery time; this is only needed if you use the "Add to Cart" functionality
    • optional: enable users to click a button to add a selected variant to the cart in your shop application. 

Example live implementations:

Integration using a JSON API, with "Add to Cart"

  • Categories Endpoint: https://www.ackermann.ch/styla/categories 
    • Search Endpoint: https://www.ackermann.ch/styla/products?category=sh13595506&limit=0&offset=0 - all products from the category "Shirts & Tops" (“id”: “sh13595506") from the Categories Endpoint above
    • https://www.ackermann.ch/styla/products?category=sh72737619&limit=5&offset=0 - first five products from the category “Sportjacken” (“id”: “sh72737619") from the Categories Endpoint above
    • https://www.ackermann.ch/styla/products?search=492929U&limit=0&offset=0 - the only search result for the phrase "492929U" which is a part of product ID
    • https://www.ackermann.ch/styla/products?search=blazer&limit=10&offset=0 - first ten search results for the phrase "blazer"
    • https://www.ackermann.ch/styla/products?search=jeans+blau&limit=10&offset=2 - second page of search reults (ten per page) for the phrases "jeans"AND"blau" 
  • Product Details Endpoint:
    • https://www.ackermann.ch/INTERSHOP/rest/WFS/EmpirieCom-AckermannCH-Site/-;loc=de_CH;cur=CHF/product/492929U-4XL-10056929468 - for the product from the "492929U" search results above
    • https://www.ackermann.ch/INTERSHOP/rest/WFS/EmpirieCom-AckermannCH-Site/-;loc=de_CH;cur=CHF/product/199219Y-34-10050291417 - for one of products from the "Shirts & Tops" category
    • This client's shop application makes such endpoint available, so we've decided to use it, even though the naming is a bit different. Styla's Produc API only sources the data from the nodes that we need.
  • JS Callback function:
window.styla.callbacks[0].addToCart("sku", quantity)

Can be called from your console (example: window.styla.callbacks[0].addToCart("74255086-34-10024897949", 1)) at: https://www.ackermann.ch/inspiration/mein-magazin/ which displays the Styla content using the product data fromt he client's endpoints. 

Integration using a Google Product Feed with an "Add to Cart" endpoint

This is an example of a hybrid solution in which Styla Product API fetches categories and products from an XML file but for product details, a Product Details Endpoint has been developed by the client, to enable adding products to the cart.

  • Source file: https://www.obi.de/decom/feeds/product/Google_Feed_de.xml - this is where data for categories listing and search and images for backoffice.styla.com comes from
  • Product Details Endpoint: https://www.obi.de/external/views/product/service?codes=3925203 - for a "Sitting Point Sitzsack Easy 120 l Schwarz" (3925203) product that can be found in the XML file https://www.obi.de/external/views/product/service?codes=1398445 - for a "Justus Kaminofen Usedom 5 Sandstein" (1398445) product that can be found in the XML file
  • "Add to Cart" endpoint: https://www.obi.de/one-click-add-to-cart - Styla sends a POST request to this endpoint and passes product ID (sourced from the Product Details Endpoint) in the 'productId' variable in this model:
data =
      action       : ‘validateAddToCart’
      code        : model.get ‘productId’
      source       : ‘Artikeldetailseite’

So for the first of the two products above ths POST form data is: action=validateAddToCart&code=3925203&source=Artikeldetailseite
As a result, the product with this specific ID is added to the cart (quatity is always 1) at: https://www.obi.de/promotion/wohnideen/ and the cart update on the front-end is handled by the client's application

Integration using a CSV file without "Add to Cart"

This is an example of a solution in which Styla Product API fetches all categories and products from one file. There is no "Add to Cart" functionality on the client's Styla content. 

Source file:
http://transport.productsup.io/6699876b0348dc53e072/channel/39420/sidestep_shoes_shopping_styla.csv - this is where data for categories listing and search and images for backoffice.styla.com comes from

The above CSV file is the only product information source Styla gets from the client. No products are added to the cart at https://www.sidestep-shoes.de/de/blog and the URL on the overlay to link to product pages is sourced from the CSV file too.

How to test your implementation

Once you have any of the above running on your local, stage and production environment, please make sure everything is working fine:

  • check if your file or your JSON endpoint has all the mandatory fields specified above
  • check if your file can be parsed (one common delimiter character)
  • check if no product IDs are repeated
  • review the structure of your endpoint and compare the data in it with what you have in your product database or shop front-end (they should be the same)
  • try generating your categories tree based on your file or your Category Endpoint 
  • try searching for products with the search endpoint (by putting into the parameters data based on the product's ID, name, description fields, filtering by category names) and see if you get all results you expect
  • try calling the Product Details Endpoint with some product IDs from the Search Endpoint (they should return data for this specific product)
  • try calling the AtC endpoint or function with product IDs from the Product Details Endpoint and see if it a) adds this product to your cart b) causes front-end elements to be updated

Once Styla integrates with your product data source on stage or production, test the data coming from it in editor.styla.com and on your Styla front-end - by creating pages with products and checking them on your front-end. 

If there are any problems that you cannot solve, please contact Styla support.

< Routing for Styla
SEO Integration >