VTEX IO Store Theme Integration

The basic VTEX IO Store Theme template has at least two components that interact with the Checkout (there are others, but these are the main ones):

• Mini Cart
• Add To Cart Button

So this means that both of these components must be customized to use the Ollie Shop APIs.

Why?

Let's imagine that your store is already using Ollie Shop. And your store is running a Function that limits the quantity of the same SKU that can be added to the cart. This means that if the user selects a number higher than permitted, and then clicks the add-to-cart-button, the function responsible for this customization will not run, because your add-to-cart-button is not using Ollie Shop, it's still using the VTEX APIs.

The same applies for the mini-cart (or any other component).

Because our goal is for Ollie Shop to be used by any interface, we provide an SDK that can be imported into external applications, such as VTEX IO Apps. For more details of the SDK, take a look at the documentation.

Creating a VTEX IO app integrated with Ollie Shop

In the repository ollie-setting-up, you're going to find examples of VTEX IO Apps that can be used as the Add-To-Cart-Button and Mini-Cart, as well as a third example which is the service app that implements the Ollie SDK, necessary for the front-end apps.

• add-to-cart-button implements the integration between the buy-button and our SDK.
• minicart-ollie is the entire mini-cart app.
• service-sdk is responsible for handling and creating the queries/mutations of the Ollie Shop SDK.

For this tutorial we'll assume that you are familiar with VTEX IO apps. Here is the VTEX documentation if you need to learn more.

Update the VTEX IO app manifest.json file with your vendor

After you clone the repo you'll have to edit the manifest.json file to include your VTEX store as the vendor for this VTEX IO app.

{
  // ...
  "vendor": "yourstore",
  "name": "minicart",
  "version": "0.1.0",
  // ...
}

{
  // ...
  "vendor": "yourstore",
  "name": "ollie-services",
  "version": "0.1.0",
  // ...
}

{
  // ...
  "vendor": "yourstore",
  "name": "add-to-cart-button",
  "version": "0.1.0",
  // ...
}

Using the VTEX Link feature you'll be able to test the apps in your Store-Theme. Create a new development workspace and link all three apps to the new workspace.

Updating the blocks in your Store Theme

After you've linked all three apps to your VTEX development workspace and the Store-Theme app, you'll make the necessary updates to your Store-Theme app.

In the manifest.json file of your Store Theme app, you must include the Add-To-Cart-Button and Mini-Cart apps as dependencies.

{
  ...
  },
  "dependencies": {
    "vtex.store": "2.x",
    "vtex.store-header": "2.x",
    "vtex.product-summary": "2.x",
    ...
    ...
    "{accountName}.minicart": "0.x",
    "{accountName}.add-to-cart-button": "0.x"
  },
  ...
}

Changing the Add-To-Cart-Button block

In your PDP Page and your Search Result page you must also replace the current add-to-cart-button block for the new one:

{
  "add-to-cart-button-ollie": {
    "props": {
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-button"
    }
  }
}

Changing the Minicart on the Header

On the Header block you'll replace your current mini-cart with the new block minicart-ollie

{  
	"flex-layout.row#header": {
    "children": [
      "minicart-ollie"
			//...
    ]
  },
}

🚧

Remember to change for both mobile and desktop.

With these changes made you should now have your VTEX IO Store integrated with Ollie Shop.

Make sure to publish the new VTEX IO apps so you can promote all changes to production.