Checkout UI Settings Template

The Checkout UI Settings app is responsible for customizing your store's Checkout UI through scripts.

See the Vtex documentarion or the repository provided by Vtex for more info.

This template uses Webpack to automate the development experience. In conjunction with the Vtex toolbelt, this provides a more seamless experience for the developer.

Modify the files:

• src/checkout6-custom.js
• src/checkout-instore-custom.js
• src/checkout-confirmation-custom.js

to add custom scripts to the checkout template.

And modify the files:

• src/checkout6-custom.scss
• src/checkout-instore-custom.scss
• src/checkout-confirmation-custom.scss

to customize the appereance of the checkout page using SASS to build CSS files.

Additionally, you can load .svg files to the scripts by using ES6-style imports

import MySvg from './route/to/svg/file.svg'
.
.
.
<div>
	</MySvg>
</div>

The code in this template emits two events especially for Vtex developers: reactReady and vtexjsReady. This way you dont have to write custom code everytime you have to wait for those libraries to finish loading. Just listen for the event $(window).on('vtexjsReady', function(){}) and code away!

Configuration

1. Using your terminal and the VTEX IO Toolbelt, log into the desired account;
2. Run yarn install or npm install if you prefer to use NPM.
3. The following scripts are available (execute yarn run dev or npm run dev, for example)
   • dev : Run webpack in watch mode, compiling development versions of the source.
   • build: Compile the source code into production-ready files.
   • build:dev: Compile into development versions
   • dev:link: Run webpack in watch mode and vtex link at the same time, updating the template everytime the source changes (you still have to refresh your browser)

You can modify the file webpack.config.js to add more file loaders or customizations to the template or the build process.

Modus Operandi

Once the app is deployed and installed in the account, every scripts contained in it will be automatically linked to your store and used to build the templates to customize your Checkout.

⚠️ Scripts used by Checkout are linked to the Checkout UI Settings version that's installed in your store. If a prior app version was already installed and your want to change the scripts linked to it, you'll need to repeat the already existing code and thereafter launch the app's new version containing the changes you just did. Housekeeper is responsible for updating app versions in the accounts it's installed in.