manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

store/blocks/pdp/descriptionTabs.jsonc

@@ -0,0 +1,68 @@
+{
+  "tab-layout#product-description": {
+    "children": [
+      "tab-list#product-description",
+      "tab-content#product-description"
+    ],
+    "props": {
+      "blockClass": "product-description",
+      "defaultActiveTabId": "product-description"
+    }
+  },
+  "tab-list#product-description": {
+    "children": [
+      "tab-list.item#description",
+      "tab-list.item#description2",
+      "tab-list.item#description2",
+      "tab-list.item#description2",
+      "tab-list.item#description2"
+    ]
+  },
+  "tab-list.item#description": {
+    "props": {
+      "tabId": "product-description",
+      "label": "Description",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#description2": {
+    "props": {
+      "tabId": "product-description2",
+      "label": "Description"
+    }
+  },
+  "tab-content#product-description": {
+    "children": [
+      "tab-content.item#product-description",
+      "tab-content.item#product-description2"
+    ]
+  },
+  "tab-content.item#product-description": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "product-description"
+    }
+  },
+  "tab-content.item#product-description2": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "product-description2"
+    }
+  },
+  "flex-layout.row#description": {
+    "props": {
+      "marginBottom": 7
+    },
+    "children": ["product-images#description", "product-description"]
+  },
+  "product-images#description": {
+    "props": {
+      "displayMode": "first-image"
+    }
+  },
+  "product-description": {
+    "props": {
+      "collapseContent": true
+    }
+  }
+}

store/blocks/pdp/product.jsonc

@@ -3,9 +3,9 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "tab-layout#product-description",
-      "flex-layout.row#specifications-title",
+      // "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      // "product-specification-group#table",
       "shelf.relatedProducts",
       "product-questions-and-answers"
     ]
@@ -26,12 +26,7 @@
       "text": "##### Product Specifications"
     }
   },
-  "flex-layout.row#description": {
+
-    "props": {
-      "marginBottom": 7
-    },
-    "children": ["product-description"]
-  },
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -56,17 +51,6 @@
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
 
-  "stack-layout": {
-    "props": {
-      "blockClass": "product"
-    },
-    "children": [
-      "flex-layout.row#product-image",
-      "product-bookmark",
-      "product-specification-badges"
-    ]
-  },
-
   "product-specification-badges": {
     "props": {
       "specificationGroupName": "Group",
@@ -83,6 +67,16 @@
       "rowGap": 0
     }
   },
+  "stack-layout": {
+    "props": {
+      "blockClass": "product"
+    },
+    "children": [
+      "flex-layout.row#product-image",
+      "product-bookmark",
+      "product-specification-badges"
+    ]
+  },
   "flex-layout.row#product-image": {
     "children": ["product-images"]
   },
@@ -106,18 +100,17 @@
       "flex-layout.row#product-name",
       "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      // "flex-layout.row#list-price-savings",
+      // "product-separator",
       "sku-selector",
-      "product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
+      // "share#default"
     ]
   },
 
@@ -138,9 +131,10 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "button-card-add"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity", "add-to-cart-button"]
   },
 
   "flex-layout.row#product-availability": {

styles/css/vtex.flex-layout.css

@@ -10,3 +10,11 @@
 .flexRow--product-main-container :global(.vtex-store-components-3-x-container) {
   max-width: 1920px;
 }
+
+.flexRowContent--button-card-add .stretchChildrenWidth:first-child {
+  max-width: 128px;
+  padding-right: 10px;
+}
+.flexRowContent--button-card-add .stretchChildrenWidth:last-child {
+  width: 100% !important;
+}

styles/css/vtex.product-identifier.css

@@ -16,7 +16,6 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  /* identical to box height */
   text-align: right;
   color: rgba(146, 146, 146, 0.48);
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,12 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+/* Grid breakpoints */
-}
+.strike {
-
+  text-decoration: none;
-.sellingPriceValue {
-  font-size: 2.25rem;
-  font-weight: 700;
-}
-
-.installments {
-  color: #727273;
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,51 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorContainer {
+  margin: 0;
+  height: 100%;
+}
+.quantitySelectorContainer .quantitySelectorStepper {
+  height: 100%;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) {
+  height: 100%;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) {
+  height: 100%;
+  border: 1px solid #cccccc;
+  padding: 0 16px;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button),
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
+  width: max-content !important;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text),
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  color: #000000;
+}

styles/css/vtex.store-components.css

@@ -21,12 +21,131 @@
   text-align: end;
 }
 
-.product-identifier--productReference {
+.skuSelectorContainer {
-  text-align: end;
+  display: flex;
+  flex-direction: column-reverse;
 }
-.product-identifier--productReference__label {
+
+.skuSelectorName {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.skuSelectorItem {
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+.skuSelectorItem:not(:last-child) {
+  margin-right: 16px;
+}
+.skuSelectorItem .valueWrapper {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.skuSelectorItem:hover .frameAround {
+  border: 2px solid #000000;
+}
+.skuSelectorItem:hover .valueWrapper {
+  color: #000000;
+}
+.skuSelectorItem .frameAround {
+  border-radius: 50%;
+  border: 1px solid #989898;
+}
+
+.skuSelectorItem--selected .frameAround {
+  border: 2px solid #000000;
+}
+.skuSelectorItem--selected .valueWrapper {
+  color: #000000;
+}
+
+.skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.skuSelectorInternalBox:hover {
+  border: none;
+}
+.skuSelectorInternalBox .diagonalCross {
+  background-image: linear-gradient(to top right, transparent 50%, rgba(0, 0, 0, 0.5) 53%, currentColor 54%, currentColor 52%, transparent 0%);
+  transform: rotate(95deg);
+}
+
+.shippingContainer {
+  position: relative;
+}
+.shippingContainer :global(.vtex-button) {
+  position: absolute;
+  top: 25px;
+  left: 230px;
+  padding: 12px;
+  width: max-content;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+  padding: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "OK";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+  max-width: 280px;
+  margin-right: 32px;
+  padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
   display: none;
 }
-.product-identifier--productReference__separator {
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
-  display: none;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTable {
+  max-width: 320px;
+  margin: 0;
+  border: none;
+}
+.shippingTable .shippingTableHead {
+  display: table-header-group !important;
+  width: 100%;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  text-align: left;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+  padding: 0 16px 0 0;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel {
+  display: flex;
 }

styles/sass/pages/product/vtex.flex-layout.scss

@@ -3,3 +3,15 @@
     max-width: 1920px;
   }
 }
+
+.flexRowContent--button-card-add {
+  .stretchChildrenWidth {
+    &:first-child {
+      max-width: 128px;
+      padding-right: 10px;
+    }
+    &:last-child {
+      width: 100% !important;
+    }
+  }
+}

styles/sass/pages/product/vtex.product-identifier.scss

@@ -8,10 +8,7 @@
     font-weight: 400;
     font-size: 14px;
     line-height: 19px;
-    /* identical to box height */
-
     text-align: right;
-
     color: rgba(146, 146, 146, 0.48);
   }
   &__label {

styles/sass/pages/product/vtex.product-quantity.scss

@@ -0,0 +1,48 @@
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorContainer {
+  margin: 0;
+  height: 100%;
+
+  .quantitySelectorStepper {
+    height: 100%;
+
+    :global(.vtex-numeric-stepper-wrapper) {
+      height: 100%;
+
+      :global(.vtex-numeric-stepper-container) {
+        height: 100%;
+        border: 1px solid #cccccc;
+        padding: 0 16px;
+
+        :global(.vtex-numeric-stepper__input) {
+          width: 100%;
+          height: 100%;
+          border: none;
+        }
+
+        :global(.vtex-numeric-stepper__plus-button),
+        :global(.vtex-numeric-stepper__minus-button) {
+          width: max-content !important;
+          height: 100%;
+          border: none;
+          border-radius: 0;
+        }
+
+        :global(.vtex-numeric-stepper__minus-button__text),
+        :global(.vtex-numeric-stepper__plus-button__text) {
+          font-family: "Open Sans", sans-serif;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 22px;
+          display: flex;
+          align-items: center;
+          color: #000000;
+        }
+      }
+    }
+  }
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -10,14 +10,165 @@
 .productNameContainer--quickview {
   text-align: end;
 }
-.product-identifier--productReference {
+.skuSelectorContainer {
-  text-align: end;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorName {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
 
-  &__label {
+.skuSelectorItem {
-    display: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+
+  &:not(:last-child) {
+    margin-right: 16px;
   }
 
-  &__separator {
+  .valueWrapper {
-    display: none;
+    font-family: "Open Sans", sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  &:hover {
+    .frameAround {
+      border: 2px solid #000000;
+    }
+
+    .valueWrapper {
+      color: #000000;
+    }
+  }
+
+  .frameAround {
+    border-radius: 50%;
+    border: 1px solid #989898;
+  }
+}
+
+.skuSelectorItem--selected {
+  .frameAround {
+    border: 2px solid #000000;
+  }
+
+  .valueWrapper {
+    color: #000000;
+  }
+}
+
+.skuSelectorInternalBox {
+  border-radius: 50%;
+
+  &:hover {
+    border: none;
+  }
+
+  .diagonalCross {
+    background-image: linear-gradient(
+      to top right,
+      transparent 50%,
+      rgba(0, 0, 0, 0.5) 53%,
+      currentColor 54%,
+      currentColor 52%,
+      transparent 0%
+    );
+    transform: rotate(95deg);
+  }
+}
+
+.shippingContainer {
+  position: relative;
+
+  :global(.vtex-button) {
+    position: absolute;
+    top: 25px;
+    left: 230px;
+    padding: 12px;
+    width: max-content;
+
+    :global(.vtex-button__label) {
+      font-size: 0;
+      padding: 0;
+
+      &::after {
+        content: "OK";
+        font-family: "Open Sans", sans-serif;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        display: flex;
+        align-items: center;
+        color: #ffffff;
+      }
+    }
+  }
+
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+    align-items: center;
+    padding-bottom: 16px;
+
+    :global(.vtex-input) {
+      max-width: 280px;
+      margin-right: 32px;
+      padding: 0;
+
+      :global(.vtex-input-prefix__group) {
+        height: 49px;
+
+        :global(.vtex-input__suffix) {
+          display: none;
+        }
+
+        :global(.vtex-address-form-4-x-input) {
+          font-family: "Open Sans", sans-serif;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          display: flex;
+          align-items: center;
+          color: #afafaf;
+        }
+      }
+    }
+  }
+}
+
+.shippingTable {
+  max-width: 320px;
+  margin: 0;
+  border: none;
+
+  .shippingTableHead {
+    display: table-header-group !important;
+    width: 100%;
+
+    .shippingTableRow {
+      text-align: left;
+    }
+  }
+
+  .shippingTableBody {
+    .shippingTableRow {
+      .shippingTableCell {
+        padding: 0 16px 0 0;
+
+        .shippingTableLabel {
+          display: flex;
+        }
+      }
+    }
   }
 }

styles/sass/utils/_vars.scss

@@ -14,18 +14,18 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+  xs: 0,
-	cstm: 400,
+  cstm: 400,
-	sm: 576px,
+  sm: 576px,
-	md: 768px,
+  md: 768px,
-	lg: 992px,
+  lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+  level1: 5,
-	level2: 10,
+  level2: 10,
-	level3: 15,
+  level3: 15,
-	level4: 20,
+  level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;