[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/styles/css/vtex.flex-layout.css from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--deals {
  background-color: #a7afbd;
  padding: 14px 0px;
}

.flexRow--newsletter {
  background-color: #e8ccc9;
  padding-bottom: 2rem;
}

.flexRow--pinkRow {
  background-color: #e8ccc9;
  padding-bottom: 3rem;
  margin-top: 15px;
  margin-bottom: 35px;
}

/* .flexColChild--newsletter :global(p) {
  margin-bottom: 0;
} */

/* .flexColChild--newsletter :global(.buttonContainer) {
  padding: 0;
  background: red;
} */

.flexRow--deals .stretchChildrenWidth {
  align-items: center;
}

.flexRow--deals .flexCol {
  align-items: center;
}

.flexCol--filterCol {
  max-width: 500px;
  min-width: 230px;
}

.flexCol--productCountCol {
  align-items: flex-start;
}

.flexCol--orderByCol {
  align-items: flex-end;
}

.flexCol--orderByMobileCol {
  width: 42%;
}

.flexCol--filterMobileCol {
  width: 38%;
}

.flexCol--switcherMobileCol {
  width: 20%;
}

@media only screen and (min-width: 640px) {
  .flexColChild--pinkCol {
    width: 50%;
  }
}

/* Footer */
.flexRow--footer-row {
  padding-top: 10px;
  padding-bottom: 10px;
  background: lightgrey;
}

.flexRow--footer-row {
  text-align: right;
}

/* .flexRow--footer-row :global(a) {
  color: #E3E4E6;
  font-size: 14px;
} */

/* @media only screen and (max-width: 640px) {
  .flexRow--footer-row :global(li) {
    display: block;
  }
} */

/* .flexRow--footer-row :global(img) {
  filter: brightness(2);
} */

/* Product */
.flexRow--product-main {
  color: #727273
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/styles/css/vtex.breadcrumb.css from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  /* background: red; */
  margin-top: 20px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/styles/css/vtex.slider-layout.css from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.slide--styles {
  width: 80% !important
}

.slideChildrenContainer {
  text-align: center;
  margin-top: 25px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/styles/configs/style.json from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "typeScale": [
        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
      ],
      "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
      "customMedia": [
        { "s": 20 },
        { "ns": {
            "value": 40,
            "minWidth": true
          }
        },
        { "m": {
            "value": 40,
            "minWidth": true
          }
        },
        { "l": {
          "value": 64,
          "minWidth": true
        }
        },
        { "xl": {
            "value": 80,
            "minWidth": true
          }
        }
      ],
      "colors": {
        "black-90": "rgba(0,0,0,.9)",
        "black-80": "rgba(0,0,0,.8)",
        "black-70": "rgba(0,0,0,.7)",
        "black-60": "rgba(0,0,0,.6)",
        "black-50": "rgba(0,0,0,.5)",
        "black-40": "rgba(0,0,0,.4)",
        "black-30": "rgba(0,0,0,.3)",
        "black-20": "rgba(0,0,0,.2)",
        "black-10": "rgba(0,0,0,.1)",
        "black-05": "rgba(0,0,0,.05)",
        "black-025": "rgba(0,0,0,.025)",
        "black-0125": "rgba(0,0,0,.0125)",

        "white-90": "rgba(255,255,255,.9)",
        "white-80": "rgba(255,255,255,.8)",
        "white-70": "rgba(255,255,255,.7)",
        "white-60": "rgba(255,255,255,.6)",
        "white-50": "rgba(255,255,255,.5)",
        "white-40": "rgba(255,255,255,.4)",
        "white-30": "rgba(255,255,255,.3)",
        "white-20": "rgba(255,255,255,.2)",
        "white-10": "rgba(255,255,255,.1)",
        "white-05": "rgba(255,255,255,.05)",
        "white-025": "rgba(255,255,255,.025)",
        "white-0125": "rgba(255,255,255,.0125)"
      },
      "semanticColors": {
        "background": {
          "base": "#ffffff",
          "base--inverted": "#03044e",
          "action-primary": "#52BAB7",
          "action-secondary": "#E8CCC9",
          "emphasis": "#f71963",
          "disabled": "#f2f4f5",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-background": {
          "action-primary": "#45A6A3",
          "action-secondary": "#DCC0BD",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-background": {
          "action-primary": "#3D9391",
          "action-secondary": "#CAABA8",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "text": {
          "action-primary": "#0F3E99",
          "action-secondary": "#eef3f7",
          "link": "#0F3E99",
          "emphasis": "#f71963",
          "disabled": "#979899",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#52bab7",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "visited-text": {
          "link": "#0c389f"
        },
        "hover-text": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "active-text": {
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "border": {
          "action-primary": "#52BAB7",
          "action-secondary": "#F7EEED",
          "emphasis": "#f71963",
          "disabled": "#e3e4e6",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-border": {
          "action-primary": "#45A6A3",
          "action-secondary": "#DCC0BD",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-border": {
          "action-primary": "#3D9391",
          "action-secondary": "#CAABA8",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "on": {
          "base": "#3f3f40",
          "base--inverted": "#ffffff",
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "disabled": "#979899",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a",
          "muted-1": "#ffffff",
          "muted-2": "#ffffff",
          "muted-3": "#3f3f40",
          "muted-4": "#3f3f40",
          "muted-5": "#3f3f40"
        },
        "hover-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        },
        "active-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        }
      },
      "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
      "borderRadius": [0, 0.125, 0.25, 0.5, 1],
      "widths": [1, 2, 4, 8, 16],
      "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
      "heights": [1, 2, 4, 8, 16],
      "sizes": [
        {"name": "small", "value": 2},
        {"name": "regular", "value": 2.5},
        {"name": "large", "value": 3}
      ],
      "typography":{
        "measure": [30, 34, 20],
        "styles": {
          "heading-1": {
            "fontFamily": "Playfair Display, serif",
            "fontWeight": "700",
            "fontSize": "3rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-2": {
            "fontFamily": "Playfair Display, serif",
            "fontWeight": "500",
            "fontSize": "2.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-3": {
            "fontFamily": "Playfair Display, serif",
            "fontWeight": "700",
            "fontSize": "1.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-4": {
            "fontFamily": "Playfair Display, serif",
            "fontWeight": "normal",
            "fontSize": "1.5rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-5": {
            "fontFamily": "Playfair Display, serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-6": {
            "fontFamily": "Playfair Display, serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "body": {
            "fontFamily": "Roboto, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "small": {
            "fontFamily": "Roboto, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.875rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "mini": {
            "fontFamily": "Roboto, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "action": {
            "fontFamily": "Roboto, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--small": {
            "fontFamily": "Roboto, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "0.875rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--large": {
            "fontFamily": "Roboto, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1.25rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "code": {
            "fontFamily": "Consolas, monaco, monospace",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          }
        }
      },
      "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/product.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "shelf#related"
    ]
  },

  "shelf#related": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "recomendation": "editor.relatedProducts.similars",
      "orderBy": "OrderByTopSaleDESC",
      "productList": {
        "maxItems": 10,
        "itemsPerPage": 5,
        "minItemsPerPage": 1.5,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "More options for this style"
      }
    }
  },

  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 20
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 9,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7,
      "blockClass": "product-main"
    },
    "children": [
      "flex-layout.col#stack",
      "flex-layout.col#right-col"
    ]
  },

  "stack-layout": {
    "children": [
      "flex-layout.row#product-image",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
      "width": "70%",
      "rowGap": 0
    }
  },

  "flex-layout.row#product-image": {
    "children": ["product-images"]
  },

  "product-images": {
    "props": {
      "displayThumbnailsArrows": true,
      "thumbnailsOrientation": "vertical"
    }
  },

  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-price#product-details",
      "sku-selector",
      "flex-layout.row#buy-button",
      "shipping-simulator",
      "share#default"
    ]
  },

  "product-price#product-details": {
    "props": {
      "showInstallments": true,
      "showSavings": true
    }
  },

  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["buy-button"]
  },

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/search.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout#search"]
  },

  "search-result-layout#search": {
    "blocks": [
      "search-result-layout.desktop",
      "search-not-found-layout"
    ]
  },
  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#did-you-mean",
      "flex-layout.row#suggestion",
      "flex-layout.row#banner-one",
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "preventRouteChange": false,
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#result": {
    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
    "props": {
      "preventHorizontalStretch": true,
      "fullWidth": true
    }
  },

  "flex-layout.row#searchtitle": {
    "children": ["search-title.v2"]
  },

  "flex-layout.row#did-you-mean": {
    "children": ["did-you-mean"]
  },
  "flex-layout.row#suggestion": {
    "children": ["search-suggestions"]
  },
  "flex-layout.row#banner-one": {
    "children": ["search-banner#one"]
  },
  "search-banner#one": {
    "props": {
      "area": "one",
      "blockClass": "myBanner",
      "horizontalAlignment": "center"
    }
  },
  "flex-layout.row#searchbread": {
    "children": ["breadcrumb.search"],
    "props": {
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },

  "store.search#brand": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "orderByField": "OrderByReleaseDateDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 10
      }
    }
  },
  "store.search#department": {
    "blocks": ["search-result-layout#department"]
  },

  "store.search#category": {
    "blocks": ["search-result-layout#cat"]
  },

  "store.search#subcategory": {
    "blocks": ["search-result-layout#cat"]
  },

  "search-result-layout#department": {
    "blocks": [
      "search-result-layout.desktop#dep",
      "search-result-layout.mobile#dep",
      "search-not-found-layout"
    ]
  },
  "search-result-layout#cat": {
    "blocks": [
      "search-result-layout.desktop#cat",
      "search-result-layout.mobile#cat",
      "search-not-found-layout"
    ]
  },

  "info-card#depbanner": {
    "props": {
      "imageUrl": "https://image.shutterstock.com/z/stock-photo-party-with-best-friends-group-of-cheerful-young-people-enjoying-home-party-with-snacks-and-drinks-492006757.jpg",
      "callToActionMode": "none",
      "isFullModeStyle": true,
      "headline": " ",
      "blockClass": "depbanner"
    }
  },

  "search-result-layout.desktop#dep": {
    "children": [
      "flex-layout.row#depBanner",
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "search-result-layout.desktop#cat": {
    "children": [
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.col#filter": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterCol"
    }
  },
  "order-by": {
    "props": {
      "hiddenOptions": [
        "OrderByReleaseDateDESC",
        "OrderByNameASC",
        "OrderByNameDESC"
      ]
    }
  },
  "flex-layout.col#content": {
    "children": [
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "width": "grow"
    }
  },
  "flex-layout.row#searchinfo": {
    "children": ["flex-layout.col#productCount", "flex-layout.col#orderby"]
  },
  "flex-layout.col#productCount": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountCol"
    }
  },
  "flex-layout.col#orderby": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByCol"
    }
  },
  "flex-layout.row#fetchprevious": {
    "props": {
      "marginBottom": 3
    },
    "children": ["search-fetch-previous"]
  },
  "flex-layout.row#fetchmore": {
    "props": {
      "marginTop": 3
    },
    "children": ["search-fetch-more"]
  },
  "flex-layout.row#products": {
    "children": ["search-content"]
  },
  "search-content": {
    "blocks": ["gallery", "not-found"]
  },

  "flex-layout.row#depBanner": {
    "children": [
      "info-card#depbanner"
    ]
  },

  "search-result-layout.mobile#dep": {
    "children": [
      "flex-layout.row#depBanner",
      "flex-layout.row#searchinfomobile",
      "flex-layout.row#searchbread",
      "flex-layout.row#productCountMobile",
      "flex-layout.row#contentmobile"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "search-result-layout.mobile#cat": {
    "children": [
      "flex-layout.row#searchinfomobile",
      "flex-layout.row#searchbread",
      "flex-layout.row#productCountMobile",
      "flex-layout.row#contentmobile"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#contentmobile": {
    "children": ["search-content"],
    "props": {
      "preserveLayoutOnMobile": true
    }
  },

  "flex-layout.row#searchinfomobile": {
    "children": [
      "flex-layout.col#orderByMobile",
      "flex-layout.col#filterMobile",
      "flex-layout.col#switcherMobile"
    ],
    "props": {
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "colJustify": "around"
    }
  },

  "flex-layout.col#orderByMobile": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByMobileCol"
    }
  },

  "flex-layout.row#productCountMobile": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountMobileRow"
    }
  },

  "flex-layout.col#filterMobile": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterMobileCol"
    }
  },
  "flex-layout.col#switcherMobile": {
    "children": ["search-layout-switcher"],
    "props": {
      "blockClass": "switcherMobileCol"
    }
  },
  "search-not-found-layout": {
    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
  },

  "flex-layout.row#notfound": {
    "children": ["not-found"],
    "props": {
      "fullWidth": true
    }
  },

  "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },

  "gallery": {
    "blocks": ["product-summary.shelf"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/home/newsletter.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#newsletter": {
    "children": [
      "flex-layout.col#newsletter"
    ],
    "props": {
      "blockClass": "newsletter",
      "marginTop": 5
    }
  },
  "flex-layout.col#newsletter": {
    "children": [
      "rich-text#newsletter",
      "rich-text#style-text",
      "flex-layout.row#newsletter-container"
    ],
    "props": {
      "blockClass": "newsletter"
    }
  },
  "rich-text#style-text": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "Be first to receive exclusive offers and updates",
      "blockClass": "newsletter",
      "textColor": "c-muted-1"
    }
  },

  "rich-text#newsletter": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "Join our mailing list",
      "textColor": "c-muted-1",
      "font": "t-heading-2"
    }
  },

  "flex-layout.row#newsletter-container": {
    "children": [
      "newsletter#home"
    ],
    "props": {
      "blockClass": "newsletterContainer"
    }
  },

  "newsletter#home": {
    "props": {
      "hideLabel": true,
      "placeholder": ""
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/home/styles-section.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json

{
  "slider-layout#styles": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "mobile": 1
      },
      "blockClass": "styles",
      "showPaginationDots": "never"
    },
    "children": [
      "image#style1",
      "image#style2"
    ]
  },
  "image#style1": {
    "props": {
      "src":"https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png"
    }
  },
  "image#style2": {
    "props": {
      "src": "https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/home/home.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "flex-layout.row#slider",
      "shelf#new-arrivals",
      "shelf#clearance",
      "flex-layout.row#newsletter",
      "rich-text#brands",
      "flex-layout.row#brands",
      "rich-text#instagram",
      "flex-layout.row#instagram"
    ]
  },

  "carousel#home": {
    "props": {
      "autoplay": true,
      "autoplaySpeed": 4,
      "banners": [
        {
          "image": "assets/chrome1.png"
        }
      ],
      "height": 440,
      "showArrows": true,
      "showDots": true
    }
  },

  "flex-layout.row#slider": {
    "children": [
      // "slider-layout#styles",
      "carousel#home"
    ]
  },

  "flex-layout.row#brands": {
    "children": [
      "slider-layout#brands"
    ],
    "props": {
      "marginTop": 4,
      "marginBottom": 8
    }
  },

  "shelf#new-arrivals": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "paginationDotsVisibility": "never",
      "collection": "139",
      "productList": {
        "maxItems": 9,
        "itemsPerPage": 3,
        "minItemsPerPage": 1.5,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "New arrivals"
      }
    }
  },

  "shelf#clearance": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "collection": "140",
      "paginationDotsVisibility": "desktopOnly",
      "productList": {
        "maxItems": 9,
        "itemsPerPage": 3,
        "minItemsPerPage": 1.5,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "Clearance"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/home/instagram.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "rich-text#instagram": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "Visit us on Instagram",
      "blockClass": "ocasiao",
      "textColor": "c-muted-1",
      "font": "t-heading-2"
    }
  },

  "flex-layout.row#instagram": {
    "children": [
      "flex-layout.col#instagram-post1",
      "flex-layout.col#instagram-post2",
      "flex-layout.col#instagram-post3",
      "flex-layout.col#instagram-post4"
    ]
  },
  "flex-layout.col#instagram-post1": {
    "children": [
      "sandbox#instagram-post1"
    ]
  },
  "flex-layout.col#instagram-post2": {
    "children": [
      "sandbox#instagram-post2"
    ]
  },
  "flex-layout.col#instagram-post3": {
    "children": [
      "sandbox#instagram-post3"
    ]
  },
  "flex-layout.col#instagram-post4": {
    "children": [
      "sandbox#instagram-post4"
    ]
  },
  "sandbox#instagram-post1": {
    "props": {
      "initialContent": "<iframe src=\"https://www.instagram.com/p/B973Qp8BacC/embed\" height=460 frameBorder=\"0\"/>"
    }
  },
  "sandbox#instagram-post2": {
    "props": {
      "initialContent": "<iframe src=\"https://www.instagram.com/p/BpVBfuOF-CZ/embed\" height=460 frameBorder=\"0\"/>"
    }
  },
  "sandbox#instagram-post3": {
    "props": {
      "initialContent": "<iframe src=\"https://www.instagram.com/p/ByG0svWlxlQ/embed\" height=460 frameBorder=\"0\"/>"
    }
  },
  "sandbox#instagram-post4": {
    "props": {
      "initialContent": "<iframe src=\"https://www.instagram.com/p/ByGlA3gl6wS/embed\" height=460 frameBorder=\"0\"/>"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/home/brands.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "rich-text#brands": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "Our brands",
      "blockClass": "ocasiao",
      "textColor": "c-muted-1",
      "font": "t-heading-2"
    }
  },

  "slider-layout#brands": {
    "children": [
      "image#brand-1",
      "image#brand-2",
      "image#brand-3",
      "image#brand-4",
      "image#brand-5",
      "image#brand-6",
      "image#brand-7",
      "image#brand-8"
    ],
    "props": {
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 4,
        "phone": 2
      },
      "navigationStep": 2,
      "showPaginationDots": "never"
    }
  },

  "image#brand-1": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  },

  "image#brand-2": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  },

  "image#brand-3": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  },

  "image#brand-4": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  },

  "image#brand-5": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  },

  "image#brand-6": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  },

  "image#brand-7": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square7.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  },

  "image#brand-8": {
    "props": {
      "src": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square8.png",
      "maxWidth": "140px",
      "maxHeight": "100px",
      "link": "https://alfredo--appliancetheme.myvtex.com/major-appliances"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/footer/footer.json from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop"
    ]
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "flex-layout.col#footer-left-desktop",
      "flex-layout.col#footer-right-desktop"
    ],
    "props": {
      "blockClass": "footer-row",
      "paddingTop": 7,
      "paddingBottom": 7
    }
  },

  "flex-layout.col#footer-left-desktop": {
    "children": ["vtex.menu@2.x:menu#category-menu"],
    "props": {
      "blockClass": "footer-menu"
    }
  },

  "flex-layout.col#footer-right-desktop": {
    "children": ["accepted-payment-methods"],
    "props": {
      "blockClass": "footer-payment-methods"
    }
  },

  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
    }
  },
  "footer-layout.mobile": {

    "children": [
      "flex-layout.row#mid-footer"
    ]
  },
  "flex-layout.row#mid-footer": {
    "props": {
      "blockClass": "footer-row"
    },
    "children": [
      "flex-layout.col#colFoot"
    ]
  },

  "flex-layout.col#colFoot": {
    "children": [
      "vtex.menu@2.x:menu#footer"
    ]
  },
  "vtex.menu@2.x:menu#footer": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-electronics",
      "menu-item#category-major-appliances",
      "menu-item#category-small-appliances"
    ]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/custom/styles-page.json from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#styles": {
    "blocks": [
      "flex-layout.row#style-slider",
      "shelf#styles",
      "flex-layout.row#pink",
      "search-result#styles"
    ]
  },

  "flex-layout.row#style-slider": {
    "children": [
      "info-card#styles"
    ]
  },

  "info-card#styles": {
    "props": {
      "imageUrl": "https://image.shutterstock.com/z/stock-photo-party-with-best-friends-group-of-cheerful-young-people-enjoying-home-party-with-snacks-and-drinks-492006757.jpg",
      "callToActionMode": "none",
      "isFullModeStyle": true,
      "headline": " ",
      "blockClass": "depbanner"
    }
  },

  "shelf#styles": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "paginationDotsVisibility": "never",
      "collection": "139",
      "productList": {
        "maxItems": 10,
        "itemsPerPage": 3,
        "minItemsPerPage": 1.5,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": ""
      }
    }
  },

  "flex-layout.row#pink": {
    "props":{
      "horizontalAlign": "center",
      "blockClass": "pinkRow"
    },
    "children": [
      "flex-layout.col#pink"
    ]
  },

  "flex-layout.col#pink": {
    "props":{
      "blockClass": "pinkCol",
      "horizontalAlign": "center",
      "verticalAlign": "center"

    },
    "children": [
      "rich-text#concepts-title",
      "rich-text#concepts"
    ]
  },

  "rich-text#concepts-title": {
    "props": {
      "font": "t-heading-2",
      "textColor": "c-muted-1",
      "text": "A new concept",
      "textAlignment": "CENTER",
      "textPosition": "CENTER"
    }
  },

  "rich-text#concepts": {
    "props": {
      "textColor": "c-muted-1",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id consectetur erat. Etiam nulla eros, scelerisque laoreet consequat sit amet, pharetra nec nibh. Nulla porta non sapien sed feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper justo enim, dictum vehicula mauris volutpat quis.",
      "textAlignment": "CENTER",
      "textPosition": "CENTER"
    }
  },

  "search-result#styles": {
    "blocks": [
      "gallery",
      "not-found",
      "order-by",
      "total-products",
      "search-title"
    ],
    "props": {
      "context": {
        "maxItemsPerPage": 2,
        "orderByField": "OrderByReleaseDateDESC"
      },
      "pagination": "show-more"
    }
  }

}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/header/category-menu.json from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "children": [
      "menu-item#category-electronics",
      "menu-item#category-major-appliances",
      "menu-item#category-small-appliances"
    ]
  },
  "menu-item#category-electronics": {
    "props": {
      "id": "menu-item-category-electronics",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "categoryId": 153,
        "type": "internal",
        "href": "/electronics/",
        "noFollow": true,
        "tagTitle": "Electronics",
        "text": "Electronics"
      }
    }
  },

  "menu-item#category-major-appliances": {
    "props": {
      "id": "menu-item-category-major-appliances",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "categoryId": "151",
        "type": "internal",
        "href": "/major-appliances/",
        "noFollow": true,
        "tagTitle": "Major Appliances",
        "text": "Major Appliances"
      }
    }
  },
  "menu-item#category-small-appliances": {
    "props": {
      "id": "menu-item-category-small-appliances",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "categoryId": 152,
        "type": "internal",
        "href": "/small-appliances",
        "noFollow": true,
        "tagTitle": "Small appliances",
        "text": "Small appliances"
      }
    }
  },
  "menu-item#login": {
    "props": {
      "id": "menu-item-custom-login",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/account",
        "noFollow": true,
        "tagTitle": "My account",
        "text": "My account"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of demostore-theme/store/blocks/header/header.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
  "header.full": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
  "header-layout.desktop": {
    "children": [
      "header-row#4-desktop",
      "header-row#5-desktop"
    ]
  },

  "header-row#4-desktop": {
    "children": [
      "logo#desktop"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header"
    }
  },

  "autocomplete-result-list.v2": {
    "blocks": ["product-summary.shelf"]
  },
  "search-bar": {
    "blocks": ["autocomplete-result-list.v2"],
    "props": {
      "openAutocompleteOnFocus": true
    }
  },

  "header-row#5-desktop": {
    "children": [
      "vtex.menu@2.x:menu#category-menu",
      "header-spacer",
      "header-spacer",
      "search-bar",
      "login",
      "minicart"
    ],
    "props": {
      "blockClass": "main-topbar"
    }
  },

  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://appliancetheme.vteximg.com.br/arquivos/flatflat-logo-large.png",
      "width": "110"
    }
  },

  "minicart": {
    "blocks": [
      "product-summary"
    ],
    "props": {
      "type": "popup",
      "showRemoveButton": true,
      "showDiscount": true,
      "showSku": true,
      "labelMiniCartEmpty": "",
      "labelButtonFinishShopping": "Go to checkout",
      "enableQuantitySelector": true,
      "maxQuantity": 10,
      "labelClasses": "gray"
    }
  },

  "header-layout.mobile": {
    "children": [
      "header-row#1-mobile"
    ]
  },

  "header-row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "header-spacer",
      "header-spacer",
      "minicart"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header-mobile"
    }
  },

  "drawer": {
    "children": [
      "menu#drawer"
    ]
  },

  "menu#drawer": {
    "children": [
      "menu-item#category-electronics",
      "menu-item#category-major-appliances",
      "menu-item#category-small-appliances",
      "menu-item#login"
    ],
    "props": {
      "orientation": "vertical"
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
      "width": "70"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of olark/docs/README.md from the olark VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/olark) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Olark

<!-- DOCS-IGNORE:start -->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
<!-- DOCS-IGNORE:end -->

Integration with [Olark](https://www.olark.com/) chat box.

## Configuration

It is possible to install in your store either by using App Store or the VTEX IO Toolbelt.

### Using VTEX App Store

1. Access the **Apps** section in your account's admin page and look for the Olark box;
2. Then, click on the **Install** button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your **Olark ID**.
4. Click on **Save**.

### Using VTEX IO Toolbelt

1. [Install](https://vtex.io/docs/recipes/development/installing-an-app/) the `vtex.olark@0.x` app. You can confirm that the app has now been installed by running `vtex ls` again.
2. Access the **Apps** section in your account's admin page and look for the NAME OF THE APP box. Once you find it, click on the box.
3. Fill in the **Olark ID** field.
4. Click on **Save**.

<!-- DOCS-IGNORE:start -->
## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
<!-- DOCS-IGNORE:end -->

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pixel-events/messages/pt.json from the pixel-events VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pixel-events/messages/en.json from the pixel-events VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "test",
  "store/test": "test"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pixel-events/messages/es.json from the pixel-events VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pixel-events/docs/README.md from the pixel-events VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX React App Template

Our guide repository to structure for react apps, that should be used as a template.

We use `yarn` as our default package manager, before coding make sure to run yarn on: `root` and `react` folders.

## Some features:

### Tests

For testing we use `@vtex/test-tools`, our own testing framework based on `react-testing-library`, the tests should be located on the `react/__tests__` folder. For references, visit our [repository](https://github.com/vtex/test-tools).

### Hooks

Husky hooks tha runs on every `pre-commit` and `pre-push`.

### Intl Equalizer

Tool for equalizing the messages located on the `messages` folder/builder. It's configured to use the **en.json** as the default file for comparison. For references, visit our [repository](https://github.com/vtex/intl-equalizer).

### Lint + Formatting

TS lint configured with Prettier and .Config.

### Available Scripts

```json
{
  "lint": "cd ./react && yarn lint",
  "test": "cd ./react && yarn test",
  "lint:locales": "intl-equalizer",
  "locales:fix": "intl-equalizer --fix",
  "verify": "yarn lint && yarn lint:locales && yarn test"
}
```

### Ci

#### Install:

```yml
install:
  commands:
    - echo Installing Packages...
    - cd react
    - npm install
    - echo Packages installed!
```

#### Pre-build:

```yml
pre_build:
  commands:
    - echo Running tests...
    - npm run verify
    - echo Lint and tests finished!
```

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pixel-events/react/package.json from the pixel-events VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --quiet --fix --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.3",
    "react": "^16.8.6",
    "react-apollo": "^2.5.8",
    "react-dom": "^16.8.6",
    "react-intl": "^2.9.0"
  },
  "devDependencies": {
    "@types/graphql": "^14.2.2",
    "@types/react": "^16.8.22",
    "@types/react-intl": "^2.3.18",
    "@vtex/test-tools": "^0.3.2",
    "@vtex/tsconfig": "^0.2.0",
    "eslint": "5.x",
    "eslint-config-vtex-react": "^5.1.0",
    "prettier": "^1.18.2",
    "prop-types": "^15.7.2",
    "typescript": "3.5.2"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of pixel-events/react/__tests__/index.test.tsx from the pixel-events VTEX app.

[Assistant]
Here's the implementation:

```tsx
describe('Orders List Scenarios', () => {
  it('should work', () => {
    expect(1).toBe(1)
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/it-IT.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Articolo aggiunto al carrello",
  "store/add-to-cart.failure": "Si è verificato un errore. L'articolo non è stato aggiunto al carrello.",
  "store/add-to-cart.see-cart": "Visualizza carello",
  "store/add-to-cart.add-to-cart": "Aggiungi al carrello",
  "store/add-to-cart.label-unavailable": "Non disponibile",
  "store/add-to-cart.select-sku-variations": "Selezionare un'opzione per ogni variante",
  "admin/editor.add-to-cart.title": "Pulsante \"Aggiungi al carrello\"",
  "admin/editor.add-to-cart.text.title": "Testo del pulsante",
  "admin/editor.add-to-cart.text.description": "Testo del pulsante, ad es. \"Aggiungi al carrello\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Testo del pulsante non disponibile",
  "admin/editor.add-to-cart.text-unavailable.description": "Testo del pulsante quando il prodotto non è disponibile."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/th-TH.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "เพิ่มสินค้าลงในรถเข็นของคุณแล้ว",
  "store/add-to-cart.failure": "มีบางอย่างผิดพลาดและเพิ่มสินค้าลงในรถเข็นของคุณไม่ได้!",
  "store/add-to-cart.see-cart": "ดูรถเข็น",
  "store/add-to-cart.add-to-cart": "เพิ่มลงในรถเข็น",
  "store/add-to-cart.label-unavailable": "ไม่พร้อมจำหน่าย",
  "store/add-to-cart.select-sku-variations": "กรุณาเลือกตัวเลือกของแต่ละรุ่นสินค่า",
  "admin/editor.add-to-cart.title": "ปุ่มเพิ่มลงในรถเข็น",
  "admin/editor.add-to-cart.text.title": "ข้อความบนปุ่ม",
  "admin/editor.add-to-cart.text.description": "ข้อความบนปุ่ม เช่น \"เพิมลงในรถเข็น\"",
  "admin/editor.add-to-cart.text-unavailable.title": "ไม่มีข้อความบนปุ่ม",
  "admin/editor.add-to-cart.text-unavailable.description": "ข้อความบนปุ่มเมื่อผลิตถัณฑ์ไม่พร้อมจำหน่าย"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/ko-KR.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "장바구니에 추가 된 품목",
  "store/add-to-cart.failure": "문제가 발생하여 상품이 장바구니에 추가되지 않았습니다!",
  "store/add-to-cart.see-cart": "장바구니 보기",
  "store/add-to-cart.add-to-cart": "장바구니에 담기",
  "store/add-to-cart.label-unavailable": "구매할 수 없음",
  "store/add-to-cart.select-sku-variations": "각 변형의 옵션을 선택하세요.",
  "admin/editor.add-to-cart.title": "장바구니 버튼",
  "admin/editor.add-to-cart.text.title": "버튼 텍스트",
  "admin/editor.add-to-cart.text.description": "버튼의 텍스트 (예: \"장바구니에 담기\")",
  "admin/editor.add-to-cart.text-unavailable.title": "버튼 텍스트를 사용할 수 없음",
  "admin/editor.add-to-cart.text-unavailable.description": "제품을 사용할 수 없는 경우 버튼 텍스트입니다."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/nn-NO.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Vare lagt til i handlevognen",
  "store/add-to-cart.failure": "Noe gikk galt og varen ble ikke lagt til i handlekurven!",
  "store/add-to-cart.see-cart": "Vis handlekurv",
  "store/add-to-cart.add-to-cart": "Legg i handlekurv",
  "store/add-to-cart.label-unavailable": "Utilgjengelig",
  "store/add-to-cart.select-sku-variations": "Velg et alternativ for hver variant",
  "admin/editor.add-to-cart.title": "\"Legg i handlekurv\"-knapp",
  "admin/editor.add-to-cart.text.title": "Tekst knapp",
  "admin/editor.add-to-cart.text.description": "Tekst på knappen, f. eks. \"Legg i handlekurv\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Tekst på knappen er ikke tilgjengelig",
  "admin/editor.add-to-cart.text-unavailable.description": "Tekst på knappen når produktet er utilgjengelig."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/ja-JP.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "カートに追加された項目",
  "store/add-to-cart.failure": "エラーが発生しました。項目はカートに追加されていません！",
  "store/add-to-cart.see-cart": "カートを閲覧する",
  "store/add-to-cart.add-to-cart": "カートに追加する",
  "store/add-to-cart.label-unavailable": "利用不可",
  "store/add-to-cart.select-sku-variations": "それぞれのバリエーションのオプションを選択してください",
  "admin/editor.add-to-cart.title": "カートに追加するボタン",
  "admin/editor.add-to-cart.text.title": "ボタンテキスト",
  "admin/editor.add-to-cart.text.description": "ボタンのテキストです。例. 「カートに追加する」",
  "admin/editor.add-to-cart.text-unavailable.title": "ボタンテキストは利用できません",
  "admin/editor.add-to-cart.text-unavailable.description": "製品が入手できない時のボタンテキストです。"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/bg-BG.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Артикулът е добавен в количката ви",
  "store/add-to-cart.failure": "Нещо се обърка и продуктът не беше добавен в количката ви!",
  "store/add-to-cart.see-cart": "Преглед на количката",
  "store/add-to-cart.add-to-cart": "Добавяне в количката",
  "store/add-to-cart.label-unavailable": "Не е налично",
  "store/add-to-cart.select-sku-variations": "Направете избор за всеки вариант",
  "admin/editor.add-to-cart.title": "Бутон за добавяне в количката",
  "admin/editor.add-to-cart.text.title": "Текст на бутона",
  "admin/editor.add-to-cart.text.description": "Текст на бутона, напр. „Добавяне в количката“",
  "admin/editor.add-to-cart.text-unavailable.title": "Не е наличен текст на бутона",
  "admin/editor.add-to-cart.text-unavailable.description": "Текст на бутона, когато продуктът не е наличен."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/id-ID.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Item ditambahkan ke troli Anda",
  "store/add-to-cart.failure": "Terjadi kesalahan sehingga item tidak ditambahkan ke troli Anda!",
  "store/add-to-cart.see-cart": "Lihat troli",
  "store/add-to-cart.add-to-cart": "Tambahkan ke troli",
  "store/add-to-cart.label-unavailable": "Tidak tersedia",
  "store/add-to-cart.select-sku-variations": "Pilih opsi dari tiap variasi",
  "admin/editor.add-to-cart.title": "Tombol Tambahkan ke troli",
  "admin/editor.add-to-cart.text.title": "Tombol teks",
  "admin/editor.add-to-cart.text.description": "Teks tombol, mis. \"Tambahkan ke troli\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Teks tombol tidak tersedia",
  "admin/editor.add-to-cart.text-unavailable.description": "Teks tombol saat produk tidak tersedia."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/pt.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Item adicionado ao carrinho",
  "store/add-to-cart.failure": "Algo deu errado e não foi possível adicionar o item ao seu carrinho.",
  "store/add-to-cart.see-cart": "Ver carrinho",
  "store/add-to-cart.add-to-cart": "Adicionar ao carrinho",
  "store/add-to-cart.label-unavailable": "Indisponível",
  "store/add-to-cart.select-sku-variations": "Por favor, selecione uma opção de cada variação.",
  "admin/editor.add-to-cart.title": "Botão de adicionar ao carrinho",
  "admin/editor.add-to-cart.text.title": "Texto do botão",
  "admin/editor.add-to-cart.text.description": "Texto do botão, ex.: \"Adicionar ao carrinho\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Texto do botão (indisponível)",
  "admin/editor.add-to-cart.text-unavailable.description": "Texto do botão quando o produto não está disponível."
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/ar-SA.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "تمت إضافة المنتج إلى السلة بنجاح",
  "store/add-to-cart.failure": "حدث خطأ ولم تتم إضافة العنصر إلى سلة التسوق الخاصة بك!",
  "store/add-to-cart.see-cart": "عرض عربة التسوق",
  "store/add-to-cart.add-to-cart": "أضف الى السلة",
  "store/add-to-cart.label-unavailable": "غير متاح",
  "store/add-to-cart.select-sku-variations": "الرجاء تحديد خيار من كل متغير",
  "admin/editor.add-to-cart.title": "عملية \"أضف إلى عربة التسوق\"",
  "admin/editor.add-to-cart.text.title": "Button text",
  "admin/editor.add-to-cart.text.description": "نص الزر، على سبيل المثال، \"إضافة إلى عربة التسوق\"",
  "admin/editor.add-to-cart.text-unavailable.title": "نص الزر غير متوفر",
  "admin/editor.add-to-cart.text-unavailable.description": "نص الزر عندما يكون المنتج غير متوفر."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/en.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Item added to your cart",
  "store/add-to-cart.failure": "Something went wrong and the item was not added to your cart!",
  "store/add-to-cart.see-cart": "View Cart",
  "store/add-to-cart.add-to-cart": "Add to Cart",
  "store/add-to-cart.label-unavailable": "Unavailable",
  "store/add-to-cart.select-sku-variations": "Please select an option for each variation",
  "admin/editor.add-to-cart.title": "\"Add to Cart\" Button",
  "admin/editor.add-to-cart.text.title": "Button text",
  "admin/editor.add-to-cart.text.description": "Text displayed on button, e.g.: \"Add to Cart\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Button text (unavailable)",
  "admin/editor.add-to-cart.text-unavailable.description": "Text displayed on button when the product is unavailable."
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/no-NO.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Vare lagt til i handlevognen",
  "store/add-to-cart.failure": "Noe gikk galt og varen ble ikke lagt til i handlekurven!",
  "store/add-to-cart.see-cart": "Vis handlekurv",
  "store/add-to-cart.add-to-cart": "Legg i handlekurv",
  "store/add-to-cart.label-unavailable": "Utilgjengelig",
  "store/add-to-cart.select-sku-variations": "Velg et alternativ for hver variant",
  "admin/editor.add-to-cart.title": "\"Legg i handlekurv\"-knapp",
  "admin/editor.add-to-cart.text.title": "Tekst knapp",
  "admin/editor.add-to-cart.text.description": "Tekst på knappen, f. eks. \"Legg i handlekurv\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Tekst på knappen er ikke tilgjengelig",
  "admin/editor.add-to-cart.text-unavailable.description": "Tekst på knappen når produktet er utilgjengelig."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/ro-RO.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Articol adăugat în coșul tău",
  "store/add-to-cart.failure": "A apărut o eroare, iar articolul nu a fost adăugat în coșul tău!",
  "store/add-to-cart.see-cart": "Vizualizează coșul",
  "store/add-to-cart.add-to-cart": "Adaugă în coș",
  "store/add-to-cart.label-unavailable": "Indisponibil",
  "store/add-to-cart.select-sku-variations": "Te rugăm să selectezi o opțiune pentru fiecare variație",
  "admin/editor.add-to-cart.title": "Buton Adaugă în coș",
  "admin/editor.add-to-cart.text.title": "Text buton",
  "admin/editor.add-to-cart.text.description": "Textul butonului, de exemplu „Adaugă în coș”",
  "admin/editor.add-to-cart.text-unavailable.title": "Text buton indisponibil",
  "admin/editor.add-to-cart.text-unavailable.description": "Textul butonului atunci când un produs e indisponibil."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/de-DE.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Artikel in den Warenkorb gelegt",
  "store/add-to-cart.failure": "Etwas ging schief und der Artikel wurde nicht in Ihren Warenkorb gelegt!",
  "store/add-to-cart.see-cart": "Warenkorb anzeigen",
  "store/add-to-cart.add-to-cart": "In den Warenkorb legen",
  "store/add-to-cart.label-unavailable": "Nicht verfügbar",
  "store/add-to-cart.select-sku-variations": "Bitte wählen Sie für jede Variante eine Option aus",
  "admin/editor.add-to-cart.title": "In den Warenkorb legen",
  "admin/editor.add-to-cart.text.title": "Text der Schaltfläche",
  "admin/editor.add-to-cart.text.description": "Text der Schaltfläche, z. B. \"In den Warenkorb\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Schaltflächentext nicht verfügbar",
  "admin/editor.add-to-cart.text-unavailable.description": "Schaltflächentext, wenn das Produkt nicht verfügbar ist."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/fr-FR.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Article ajouté à votre panier",
  "store/add-to-cart.failure": "Un problème est survenu et l’article n’a pas été ajouté à votre panier !",
  "store/add-to-cart.see-cart": "Voir le panier",
  "store/add-to-cart.add-to-cart": "Ajouter au panier",
  "store/add-to-cart.label-unavailable": "Indisponible",
  "store/add-to-cart.select-sku-variations": "Veuillez sélectionner une option de chaque variante",
  "admin/editor.add-to-cart.title": "Bouton Ajouter au panier",
  "admin/editor.add-to-cart.text.title": "Texte du bouton",
  "admin/editor.add-to-cart.text.description": "Texte du bouton, ex : \"Ajouter au panier\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Texte du bouton non disponible",
  "admin/editor.add-to-cart.text-unavailable.description": "Texte du bouton lorsque le produit n’est pas disponible."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/nl-NL.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Item toegevoegd aan uw winkelwagen",
  "store/add-to-cart.failure": "Er is iets misgegaan en het item is niet toegevoegd aan uw winkelwagen!",
  "store/add-to-cart.see-cart": "Bekijk winkelwagen",
  "store/add-to-cart.add-to-cart": "Toevoegen aan winkelwagen",
  "store/add-to-cart.label-unavailable": "Niet beschikbaar",
  "store/add-to-cart.select-sku-variations": "Selecteer een optie van elke variatie",
  "admin/editor.add-to-cart.title": "Toevoegen aan winkelwagen knop",
  "admin/editor.add-to-cart.text.title": "Knoptekst",
  "admin/editor.add-to-cart.text.description": "Tekst van de knop, bijv. \"Toevoegen aan winkelwagent",
  "admin/editor.add-to-cart.text-unavailable.title": "Knoptekst niet beschikbaar",
  "admin/editor.add-to-cart.text-unavailable.description": "Knoptekst wanneer het product niet beschikbaar is."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/messages/es.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/add-to-cart.success": "Ítem agregado al carrito",
  "store/add-to-cart.failure": "Se produjo un error. El ítem no se agregó al carrito.",
  "store/add-to-cart.see-cart": "Ver carrito",
  "store/add-to-cart.add-to-cart": "Agregar al carrito",
  "store/add-to-cart.label-unavailable": "No disponible",
  "store/add-to-cart.select-sku-variations": "Por favor, selecciona una opción de cada variación",
  "admin/editor.add-to-cart.title": "Botón de agregar al carrito",
  "admin/editor.add-to-cart.text.title": "Texto del botón",
  "admin/editor.add-to-cart.text.description": "Texto del botón, p. ej.: \"Agregar al carrito\"",
  "admin/editor.add-to-cart.text-unavailable.title": "Texto del botón (no disponible)",
  "admin/editor.add-to-cart.text-unavailable.description": "Texto del botón cuando el producto no está disponible."
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/docs/README.md from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/add-to-cart-button) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Add To Cart Button

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

The `add-to-cart-button` block is designed to add products to the [Minicart](https://developers.vtex.com/docs/apps/vtex.minicart/) (`minicart.v2`).

![image](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-add-to-cart-button-0.png)

> ⚠ The **Add to Cart** button is only compatible with stores using Minicart v2. For these stores, it will function correctly on the Shelf component and the Product Details page. If you are using [Minicart v1](https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md), you should configure the [Buy Button block](https://developers.vtex.com/docs/apps/vtex.store-components/buybutton) on the Product Details page and the [Product Summary Buy button](https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarybuybutton) on the Shelf component instead.

## Configuration

1. Import the `vtex.add-to-cart-button` app to your theme dependencies in the `manifest.json` file, as follows:

```json
"dependencies": {
  "vtex.add-to-cart-button": "0.x"
}
```

2. Add the `add-to-cart-button` to another theme block using the product context, such as the `product-summary.shelf`. In the example below, the `add-to-cart-button` is added to the `flex-layout.row` block from the `store.product` template, which uses the product context:

```json
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "add-to-cart-button"
    ]
  }
```

| Prop name | Type | Description | Default value |
| - | - | - | - |
| `onClickBehavior` | `enum` | Controls what happens when users click the button. Possible values are: `go-to-product-page`, `add-to-cart`, `ensure-sku-selection` (if multiple SKUs are available, users will be redirected to the product page to select the desired one. If the product only has 1 SKU available, it will be automatically added to the cart when the button is clicked) and `add-to-cart-and-trigger-shipping-modal` (opens a modal for ZIP code input if none is provided; otherwise, it adds the item to the cart. See more in [vtex.shipping-option-components](https://github.com/vtex-apps/shipping-option-components)). | `add-to-cart` |
| `onClickEventPropagation` | `enum` | Controls whether the 'onClick' event, triggered upon user clicks, should propagate to the parent elements of the page. Possible values are: `disabled` and `enabled`. | `disabled` |
| `isOneClickBuy` | `boolean` | Determines whether the user should be redirected to the checkout page (`true`) or not (`false`) when the **Add to Cart** button is clicked. | `false` |
| `customOneClickBuyLink`   | `string`  | Defines the link to which users will be redirected when the **Add to Cart** button is clicked, and the `isOneClickBuy` prop is set to `true`. | `/checkout/#/cart` |
| `customToastUrl` | `string`  | Defines the link to which users will be redirected when the toast (pop-up notification displayed when adding an item to the minicart) is clicked. | `/checkout/#/cart` |
| `text` | `string`  | Defines a custom text message to be displayed on the **Add to Cart** button. | `Add to cart` _(automatic translation will be applied following your store default language)_ |
| `unavailableText` | `string`  | Defines a custom text message to be displayed on the **Add to Cart** button when a product is unavailable. | `Unavailable` _(automatic translation will be applied following your store default language)_ |
| `customPixelEventId` | `string`  | Defines the `id` for the event that the button will send upon user interaction.                                                                                | `undefined` |

## Customization

To apply CSS customizations to this and other blocks, follow the instructions in [Using CSS Handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles           |
| --------------------- |
| `buttonText`          |
| `buttonDataContainer` |
| `tooltipLabelText`    |

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/JNussens"><img src="https://avatars0.githubusercontent.com/u/7662734?v=4" width="100px;" alt=""/><br /><sub><b>Jean Nussenzveig</b></sub></a><br /><a href="https://github.com/vtex-apps/add-to-cart-button/commits?author=JNussens" title="Code">💻</a></td>
    <td align="center"><a href="http://ygorneves.com"><img src="https://avatars1.githubusercontent.com/u/39542011?v=4" width="100px;" alt=""/><br /><sub><b>Ygor Neves</b></sub></a><br /><a href="https://github.com/vtex-apps/add-to-cart-button/commits?author=ygorneves10" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/lucaspacheco-acct"><img src="https://avatars0.githubusercontent.com/u/59736416?v=4" width="100px;" alt=""/><br /><sub><b>Lucas Pacheco</b></sub></a><br /><a href="https://github.com/vtex-apps/add-to-cart-button/commits?author=lucaspacheco-acct" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

<!-- DOCS-IGNORE:end -->

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/react/mapCatalogItemToCart.ts from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { mapCatalogItemToCart } from './modules/catalogItemToCart'

export default mapCatalogItemToCart

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/react/AddToCartButton.tsx from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState, useEffect, useRef } from 'react'
import {
  FormattedMessage,
  MessageDescriptor,
  useIntl,
  defineMessages,
} from 'react-intl'
import { Button, Tooltip } from 'vtex.styleguide'
import { Utils } from 'vtex.checkout-resources'
import { useCssHandles } from 'vtex.css-handles'
import { useRuntime } from 'vtex.render-runtime'
import { usePixel } from 'vtex.pixel-manager'
import { useProductDispatch } from 'vtex.product-context'
import { usePWA } from 'vtex.store-resources/PWAContext'
import { useOrderItems } from 'vtex.order-items/OrderItems'
import { useShippingOptionState } from 'vtex.shipping-option-components/ShippingOptionContext'

import { CartItem } from './modules/catalogItemToCart'
import useMarketingSessionParams from './hooks/useMarketingSessionParams'

interface ProductLink {
  linkText?: string
  productId?: string
}

interface Props {
  isOneClickBuy: boolean
  available: boolean
  disabled: boolean
  multipleAvailableSKUs: boolean
  customToastUrl?: string
  customOneClickBuyLink?: string
  skuItems: CartItem[]
  showToast: Function
  allSkuVariationsSelected: boolean
  text?: string
  unavailableText?: string
  productLink: ProductLink
  onClickBehavior:
    | 'add-to-cart'
    | 'go-to-product-page'
    | 'ensure-sku-selection'
    | 'add-to-cart-and-trigger-shipping-modal'
  customPixelEventId?: string
  addToCartFeedback?: 'customEvent' | 'toast'
  onClickEventPropagation: 'disabled' | 'enabled'
  isLoading?: boolean
}

// We apply a fake loading to accidental consecutive clicks on the button
const FAKE_LOADING_DURATION = 500

function getFakeLoadingDuration(isOneClickBuy: boolean) {
  return isOneClickBuy ? FAKE_LOADING_DURATION * 10 : FAKE_LOADING_DURATION
}

const CSS_HANDLES = [
  'buttonText',
  'buttonDataContainer',
  'tooltipLabelText',
] as const

const messages = defineMessages({
  success: { id: 'store/add-to-cart.success' },
  duplicate: { id: 'store/add-to-cart.duplicate' },
  error: { id: 'store/add-to-cart.failure' },
  seeCart: { id: 'store/add-to-cart.see-cart' },
  skuVariations: {
    id: 'store/add-to-cart.select-sku-variations',
  },
  schemaTitle: { id: 'admin/editor.add-to-cart.title' },
  schemaTextTitle: { id: 'admin/editor.add-to-cart.text.title' },
  schemaTextDescription: { id: 'admin/editor.add-to-cart.text.description' },
  schemaUnavailableTextTitle: {
    id: 'admin/editor.add-to-cart.text-unavailable.title',
  },
  schemaUnavailableTextDescription: {
    id: 'admin/editor.add-to-cart.text-unavailable.description',
  },
})

const options = {
  allowedOutdatedData: ['paymentData'],
}

const mapSkuItemForPixelEvent = (skuItem: CartItem) => {
  // Changes this `/Apparel & Accessories/Clothing/Tops/`
  // to this `Apparel & Accessories/Clothing/Tops`
  const category = skuItem.category ? skuItem.category.slice(1, -1) : ''

  return {
    skuId: skuItem.id,
    ean: skuItem.ean,
    variant: skuItem.variant,
    price: skuItem.price,
    sellingPrice: skuItem.sellingPrice,
    priceIsInt: true,
    name: skuItem.name,
    quantity: skuItem.quantity,
    productId: skuItem.productId,
    productRefId: skuItem.productRefId,
    brand: skuItem.brand,
    category,
    detailUrl: skuItem.detailUrl,
    imageUrl: skuItem.imageUrl,
    referenceId: skuItem?.referenceId?.[0]?.Value,
    seller: skuItem.seller,
    sellerName: skuItem.sellerName,
  }
}

function AddToCartButton(props: Props) {
  const {
    text,
    isOneClickBuy,
    available,
    disabled,
    skuItems,
    showToast,
    customToastUrl,
    unavailableText,
    customOneClickBuyLink,
    allSkuVariationsSelected = true,
    productLink,
    onClickBehavior,
    multipleAvailableSKUs,
    customPixelEventId,
    addToCartFeedback,
    onClickEventPropagation = 'disabled',
    isLoading,
  } = props

  const intl = useIntl()
  const handles = useCssHandles(CSS_HANDLES)
  const { addItems } = useOrderItems()
  const productContextDispatch = useProductDispatch()
  const { rootPath = '', navigate } = useRuntime()
  const { url: checkoutURL, major } = Utils.useCheckoutURL()
  const { push } = usePixel()
  const { settings = {}, showInstallPrompt = undefined } = usePWA() || {}
  const { promptOnCustomEvent } = settings
  const { utmParams, utmiParams } = useMarketingSessionParams()
  const [isFakeLoading, setFakeLoading] = useState(false)
  const translateMessage = (message: MessageDescriptor) =>
    intl.formatMessage(message)
  const { shippingOption } = useShippingOptionState()

  // collect toast and fake loading delay timers
  const timers = useRef<Record<string, number | undefined>>({})

  // prevent timers from doing something if the component was unmounted
  useEffect(function onUnmount() {
    return () => {
      // We disable the eslint rule because we just want to clear the current existing timers
      // eslint-disable-next-line react-hooks/exhaustive-deps
      Object.values(timers.current).forEach(clearTimeout)
    }
  }, [])

  useEffect(() => {
    const currentTimers = timers.current

    if (isFakeLoading) {
      currentTimers.loading = window.setTimeout(
        () => setFakeLoading(false),
        getFakeLoadingDuration(isOneClickBuy)
      )
    }
  }, [isFakeLoading, isOneClickBuy])

  const resolveToastMessage = (success: boolean) => {
    if (!success) return translateMessage(messages.error)

    return translateMessage(messages.success)
  }

  const toastMessage = ({ success }: { success: boolean }) => {
    const message = resolveToastMessage(success)

    const action = success
      ? { label: translateMessage(messages.seeCart), href: customToastUrl }
      : undefined

    showToast({ message, action })
  }

  const handleAddToCart = async () => {
    setFakeLoading(true)

    const productLinkIsValid = Boolean(
      productLink.linkText && productLink.productId
    )
    const shouldNavigateToProductPage =
      onClickBehavior === 'go-to-product-page' ||
      (onClickBehavior === 'ensure-sku-selection' && multipleAvailableSKUs)

    if (productLinkIsValid && shouldNavigateToProductPage) {
      navigate({
        page: 'store.product',
        params: {
          slug: productLink.linkText,
          id: productLink.productId,
        },
      })
      return
    }

    const shouldOpenShippingModal =
      onClickBehavior === 'add-to-cart-and-trigger-shipping-modal' &&
      !shippingOption

    if (shouldOpenShippingModal) {
      push({
        id: 'item-added-to-cart-shipping-modal',
        addToCartInfo: {
          skuItems,
          options: {
            marketingData: { ...utmParams, ...utmiParams },
            ...options,
          },
        },
      })

      return
    }

    const addItemsPromise = addItems(skuItems, {
      marketingData: { ...utmParams, ...utmiParams },
      ...options,
    })

    const pixelEventItems = skuItems.map(mapSkuItemForPixelEvent)
    const pixelEvent =
      customPixelEventId && addToCartFeedback === 'customEvent'
        ? {
            id: customPixelEventId,
            event: 'addToCart',
            items: pixelEventItems,
          }
        : {
            event: 'addToCart',
            items: pixelEventItems,
          }

    // @ts-expect-error the event is not typed in pixel-manager
    push(pixelEvent)

    if (isOneClickBuy) {
      await addItemsPromise

      if (
        major > 0 &&
        (!customOneClickBuyLink || customOneClickBuyLink === checkoutURL)
      ) {
        navigate({ to: checkoutURL })
      } else {
        window.location.assign(
          `${rootPath}${customOneClickBuyLink ?? checkoutURL}`
        )
      }
    }

    addToCartFeedback === 'toast' &&
      (timers.current.toast = window.setTimeout(() => {
        toastMessage({ success: true })
      }, FAKE_LOADING_DURATION))

    /* PWA */
    if (promptOnCustomEvent === 'addToCart' && showInstallPrompt) {
      showInstallPrompt()
    }
  }

  const handleClick = (e: React.MouseEvent) => {
    if (productContextDispatch) {
      productContextDispatch({
        type: 'SET_BUY_BUTTON_CLICKED',
        args: { clicked: true },
      })
    }

    if (onClickEventPropagation === 'disabled') {
      e.preventDefault()
      e.stopPropagation()
    }

    if (allSkuVariationsSelected) {
      handleAddToCart()
    }
  }

  /*
   * If text is an empty string it should render the default message
   */
  const availableButtonContent = (
    <div className={`${handles.buttonDataContainer} flex justify-center`}>
      {text ? (
        <span className={handles.buttonText}>{text}</span>
      ) : (
        <FormattedMessage id="store/add-to-cart.add-to-cart">
          {message => <span className={handles.buttonText}>{message}</span>}
        </FormattedMessage>
      )}
    </div>
  )

  const unavailableButtonContent = unavailableText ? (
    <span className={handles.buttonText}>{unavailableText}</span>
  ) : (
    <FormattedMessage id="store/add-to-cart.label-unavailable">
      {message => <span className={handles.buttonText}>{message}</span>}
    </FormattedMessage>
  )

  const tooltipLabel = (
    <span className={handles.tooltipLabelText}>
      {intl.formatMessage(messages.skuVariations)}
    </span>
  )

  const ButtonWithLabel = (
    <Button
      block
      isLoading={isFakeLoading || isLoading}
      disabled={disabled || !available}
      onClick={handleClick}
    >
      {available ? availableButtonContent : unavailableButtonContent}
    </Button>
  )

  return allSkuVariationsSelected ? (
    ButtonWithLabel
  ) : (
    <Tooltip trigger="click" label={tooltipLabel}>
      {ButtonWithLabel}
    </Tooltip>
  )
}

export default AddToCartButton

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/react/package.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "0.31.0",
  "scripts": {
    "lint": "tsc --noEmit && eslint --quiet --fix --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "react": "^16.13.1",
    "react-apollo": "^3.1.5",
    "react-dom": "^16.13.1",
    "react-intl": "4.5.0",
    "recompose": "^0.30.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.4",
    "@types/graphql": "^14.5.0",
    "@types/ramda": "^0.27.4",
    "@types/react": "^16.9.34",
    "@types/react-intl": "^3.0.0",
    "@types/recompose": "^0.30.7",
    "@vtex/test-tools": "^3.1.0",
    "@vtex/tsconfig": "^0.4.4",
    "typescript": "3.9.7",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.46.0/public/@types/vtex.checkout-resources",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.7.5/public/@types/vtex.native-types",
    "vtex.order-items": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-items@0.13.1/public/@types/vtex.order-items",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.11.1/public/@types/vtex.order-manager",
    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.8.0/public/@types/vtex.pixel-manager",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.131.0/public/@types/vtex.render-runtime",
    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.83.0/public/@types/vtex.store-resources",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
    "waait": "^1.0.5"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/react/Wrapper.tsx from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'
import { useProduct } from 'vtex.product-context'
import type { ProductTypes } from 'vtex.product-context'
import { withToast } from 'vtex.styleguide'

import AddToCartButton from './AddToCartButton'
import { mapCatalogItemToCart, CartItem } from './modules/catalogItemToCart'
import { AssemblyOptions } from './modules/assemblyOptions'

interface Props {
  isOneClickBuy: boolean
  available: boolean
  disabled: boolean
  customToastUrl?: string
  customOneClickBuyLink?: string
  showToast: Function
  selectedSeller?: ProductTypes.Seller
  text?: string
  unavailableText?: string
  onClickBehavior?:
    | 'add-to-cart'
    | 'go-to-product-page'
    | 'ensure-sku-selection'
  onClickEventPropagation?: 'disabled' | 'enabled'
  skuItems?: CartItem[]
  customPixelEventId?: string
  addToCartFeedback?: 'toast' | 'customEvent'
}

function checkAvailability(
  isEmptyContext: boolean,
  seller: ProductTypes.Seller | undefined,
  availableProp: Props['available']
) {
  if (isEmptyContext) {
    return false
  }
  if (availableProp != null) {
    return availableProp
  }

  const availableProductQuantity = seller?.commertialOffer?.AvailableQuantity

  return Boolean(availableProductQuantity)
}

function checkDisabled(
  isEmptyContext: boolean,
  assemblyOptions: AssemblyOptions | undefined,
  disabledProp: Props['disabled']
) {
  if (isEmptyContext) {
    return true
  }
  if (disabledProp != null) {
    return disabledProp
  }

  const groupsValidArray =
    (assemblyOptions?.areGroupsValid &&
      Object.values(assemblyOptions.areGroupsValid)) ||
    []
  const areAssemblyGroupsValid = groupsValidArray.every(Boolean)

  return !areAssemblyGroupsValid
}

function getDefaultSeller(sellers?: ProductTypes.Seller[]) {
  if (!sellers) {
    return undefined
  }

  const defaultSeller = sellers.find(seller => seller.sellerDefault)

  if (defaultSeller) {
    return defaultSeller
  }

  return sellers[0]
}

const Wrapper = withToast(function Wrapper(props: Props) {
  const {
    isOneClickBuy,
    available,
    disabled,
    customToastUrl,
    showToast,
    customOneClickBuyLink,
    selectedSeller,
    unavailableText,
    text,
    customPixelEventId,
    addToCartFeedback = 'toast',
    onClickBehavior = 'add-to-cart',
    onClickEventPropagation = 'disabled',
  } = props
  const productContext = useProduct()
  const isEmptyContext = Object.keys(productContext ?? {}).length === 0

  const product = productContext?.product
  const itemsLength = product?.items?.length ?? 0
  const multipleAvailableSKUs = itemsLength > 1
  const selectedItem = productContext?.selectedItem
  const assemblyOptions = productContext?.assemblyOptions
  const seller =
    selectedSeller ?? getDefaultSeller(productContext?.selectedItem?.sellers)
  const selectedQuantity =
    productContext?.selectedQuantity != null
      ? productContext.selectedQuantity
      : 1

  const skuItems = useMemo(
    () =>
      props.skuItems ??
      mapCatalogItemToCart({
        product,
        selectedItem,
        selectedQuantity,
        selectedSeller: seller,
        assemblyOptions,
      }),
    [
      assemblyOptions,
      product,
      props.skuItems,
      selectedItem,
      selectedQuantity,
      seller,
    ]
  )

  const isAvailable = checkAvailability(isEmptyContext, seller, available)

  const isDisabled = checkDisabled(isEmptyContext, assemblyOptions, disabled)
  const areAllSkuVariationsSelected = Boolean(
    !isEmptyContext && productContext?.skuSelector?.areAllVariationsSelected
  )

  const productLink = {
    linkText: product?.linkText,
    productId: product?.productId,
  }

  return (
    <AddToCartButton
      text={text}
      skuItems={skuItems}
      isLoading={productContext?.loadingItem}
      disabled={isDisabled}
      showToast={showToast}
      available={isAvailable}
      isOneClickBuy={isOneClickBuy}
      customToastUrl={customToastUrl}
      unavailableText={unavailableText}
      customOneClickBuyLink={customOneClickBuyLink}
      allSkuVariationsSelected={areAllSkuVariationsSelected}
      productLink={productLink}
      onClickBehavior={onClickBehavior}
      onClickEventPropagation={onClickEventPropagation}
      multipleAvailableSKUs={multipleAvailableSKUs}
      customPixelEventId={customPixelEventId}
      addToCartFeedback={addToCartFeedback}
    />
  )
})

Wrapper.schema = {
  title: 'admin/editor.add-to-cart.title',
}

export default Wrapper

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/store/contentSchemas.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "AddToCardButton": {
      "title": "admin/editor.add-to-cart.title",
      "properties": {
        "text": {
          "title": "admin/editor.add-to-cart.text.title",
          "description": "admin/editor.add-to-cart.text.description",
          "$ref": "app:vtex.native-types#/definitions/text"
        },
        "unavailableText": {
          "title": "admin/editor.add-to-cart.text-unavailable.title",
          "description": "admin/editor.add-to-cart.text-unavailable.description",
          "$ref": "app:vtex.native-types#/definitions/text"
        }
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of add-to-cart-button/store/interfaces.json from the add-to-cart-button VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "add-to-cart-button": {
    "component": "Wrapper",
    "content": {
      "$ref": "app:vtex.add-to-cart-button#/definitions/AddToCardButton"
    }
  }
}

```