README.md

vtex-react-checkout

This is a WIP boilerplate for using React (and more!) within VTEX Checkout UI Custom, created by Enzo Spagnolli, Gabriel Nobrega, and Gustavo Amemiya

Features:

• ReactJS support and all its benefits (plugins, hooks, context api, etc)
• Typescript support
• SCSS support
• Easy SVG importing
• Support for legacy code (your old checkout6-custom.js scripts should work without any issues)
• Integrity Hash for files check-up
• A much more organized files structure

Installation

• If you don't have vtex.checkout-ui-custom installed in your account yet, get it here: https://apps.vtex.com/vtex-checkout-ui-custom/p

• Then, install it with vtex install vtex.checkout-ui-custom

• Run vtex init in a new folder

• Select checkout-ui-settings

• You should get the following folder structure:

• Make sure you have the checkout-ui-custom builder in your manifest.json file

• Delete all files inside the checkout-ui-custom folder and clone or download this repository inside it. Your folder structure should look like this:

• Now, open a terminal INSIDE the folder checkout-ui-custom and run yarn, then yarn dev. This should start the webpack watcher:

• Make sure checkout6-custom.js and checkout6-custom.css were generated:

• Finally, run vtex link in your vtex workspace and you should see a slider somewhere in https://yourworkspace--youraccount.myvtex.com/checkout#/cart

Implementing a React Component

Step 1 - Creating a render method

Inside the scripts folder, create a renderComponent.tsx file

.
├── scripts
│   ├── components
│   ├── main.jsx
│   └── renderComponent.tsx <<
└── ...

import React from "react";
import ReactDOM from "react-dom";
import ExampleComponent from "./components/ExampleComponent";

window.addEventListener("DOMContentLoaded", () => {
  const div = document.createElement("div");
  div.setAttribute("class", "example-preact-component");
  document.querySelector(".cart-template")?.prepend(div);
  ReactDOM.render(<ExampleComponent />, div);
});

This will render a react component before the first child of the .cart-template element as soon as the page loads

In order to timely render a component, you'll need to create your own methods:

import React from "react";
import ReactDOM from "react-dom";
import AnotherExampleComponent from "./components/AnotherExampleComponent";

window.addEventListener("DOMContentLoaded", () => {
  const checkHash = () => {
    if (location.hash === "#/payment") {
      const div = document.createElement("div");
      div.setAttribute("class", "another-example-component");
      document.querySelector(".cart-template")?.prepend(div);
      ReactDOM.render(<AnotherExampleComponent />, div);
    }
  };
  checkHash();

  window.addEventListener("hashchange", () => {
    checkHash();
  });
});

In the example above, the component will render everytime #/payment loads

You can go even deeper into the complexity layers. To illustrate, by using MutationObserver and/or listening to VTEX's methods like orderFormUpdated.vtex, be creative 😉

Step 2 - Creating your React Component

Just put your component inside the components folder. There is no catch!

.
├── components/ExampleComponent
│   ├── context
│   ├── ExampleContent.tsx
│   └── index.tsx
└── ...

Feel free to take a look at this repo's example component. I have implemented React's Context API + Swiper slider. Installing plugins is also easy, you should get away with it by following their instructions