ganobrega

VTEX Checkout with Deno

No polyfill. No browserlist.

This is a alpha version that I'm not using any more...

Now I'm using ESBuild and PostCSS

1. First create a new app using checkout-ui-settings scaffold

ganobrega

{
  "importOrder": [
    "^@kubernetes?.+$",
    "^electron?.+$",
    "^react?.+$",
    "^antd?.+$",
    "^@ant-design?.+$",
    "^@reduxjs?.+$",
    "^@rjsf?.+$",
    "^(?![@\\.]).+$",

ganobrega

# Pass the env-vars to MYCOMMAND
eval $(egrep -v '^#' .env | xargs) MYCOMMAND
# … or ...
# Export the vars in .env into your shell:
export $(egrep -v '^#' .env | xargs)

ganobrega

1. `/checkout/cart/add/?sku=0000&qty=1&seller=1&sc=1&redirect=true`

ganobrega

$(window).on('orderFormUpdated.vtex', (event, orderForm) => console.log("orderFormUpdated.vtex"));
$(window).on('orderFormUpdated.vtex', (event, orderForm) => console.log("orderFormUpdated.vtex"));
$(window).on('checkoutRequestEnd.vtex', (event, orderForm) => console.log("checkoutRequestEnd.vtex"));
$(window).on('checkout.vtex.com', (event, orderForm) => console.log("checkout.vtex.com "));
$(window).on('.vtexIdUI', (event, orderForm) => console.log(".vtexIdUI"));
$(window).on('authenticatedUser.vtexid', (event, orderForm) => console.log("authenticatedUser.vtexid"));
$(window).on('started.vtexid', (event, orderForm) => console.log("started.vtexid"));
$(window).on('rendered.vtexid', (event, orderForm) => console.log("rendered.vtexid "));
$(window).on('closed.vtexid', (event, orderForm) => console.log("closed.vtexid"));
$(window).on('guestUser.vtexid', (event, orderForm) => console.log("guestUser.vtexid "));

ganobrega

$(window).on('orderFormUpdated.vtex', (event, orderForm) => console.log("orderFormUpdated.vtex"));	

$(window).on('orderFormUpdated.vtex', (event, orderForm) => console.log("orderFormUpdated.vtex"));	

$(window).on('checkoutRequestEnd.vtex', (event, orderForm) => console.log("checkoutRequestEnd.vtex"));	

$(window).on('checkout.vtex.com', (event, orderForm) => console.log("checkout.vtex.com "));	

$(window).on('.vtexIdUI', (event, orderForm) => console.log(".vtexIdUI"));	

ganobrega

#!/bin/bash

VTEX_WORKSPACE="gabriel"

echo $VTEX_WORKSPACE

ganobrega

➜  BBBB-components git:(master) vtex link
11:07:50.639 - info: Running yarn in react  
yarn install v1.22.17
warning package.json: No license field
warning No license field
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.37s.
11:07:51.216 - info: Finished running yarn  
11:07:51.218 - info: Linking app AAAA.BBBB-components@0.118.2

ganobrega

Conhecendo uma app VTEX IO

Introdução

Antes de começar, é necessário relembrar alguns conceitos importantes para uma maior compreensão do fluxo lógico ao desenvolver uma app.

manifest.json

vendor

Define o nome da conta VTEX que está desenvolvendo a app. Essa conta é responsável pela manutenção e distribuição da app (pode ser instalada em outras contas ou somente na própria)

ganobrega

git tag -l | xargs git tag -d && git fetch && git tag -l | xargs -n 1 git push --delete origin && git tag -l | xargs git tag -d