Feat(Pdp): Cria layout de imagens de produto e elementos para efetuar a compra

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",
@@ -34,10 +33,10 @@
     "vtex.my-account": "1.x",
     "vtex.flex-layout": "0.x",
     "vtex.rich-text": "0.x",
+    "vtex.product-identifier": "0.x",
     "vtex.store-drawer": "0.x",
     "vtex.locale-switcher": "0.x",
     "vtex.product-quantity": "1.x",
-    "vtex.product-identifier": "0.x",
     "vtex.breadcrumb": "1.x",
     "vtex.sticky-layout": "0.x",
     "vtex.product-customizer": "2.x",

react/components/Html/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
+import "./styles.css"
 
 const CSS_HANDLES = ["html"] as const;
 

react/components/Html/styles.css

@@ -0,0 +1,4 @@
+[class*="html--wrapperQuantity"] {
+    display: flex;
+    margin-bottom: 16px;
+}

store/blocks/minicart.jsonc

@@ -5,6 +5,13 @@
       "customPixelEventId": "add-to-cart-button"
     }
   },
+  "add-to-cart-button#addSacola": {
+    "props": {
+      "addToCartFeedback": "customEvent",
+      "customPixelEventId": "add-to-cart-button",
+      "text": "Adicionar à sacola"
+    }
+  },
 
   "minicart.v2": {
     "props": {

store/blocks/pdp/product.jsonc

@@ -3,9 +3,10 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      // "flex-layout.row#description",
-      "flex-layout.row#specifications-title",
+      "tab-layout#AA323",
-      "product-specification-group#table",
+      // "flex-layout.row#specifications-title",
+      // "product-specification-group#table",
       "shelf.relatedProducts",
       "product-questions-and-answers"
     ]
@@ -50,10 +51,30 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "productMainWrapper"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
+  "flex-layout.row#descriptionRow": {
+    "props": {
+      // "colGap": 7,
+      // "rowGap": 7,
+      // "marginTop": 4,
+      // "marginBottom": 7,
+      // "paddingTop": 7,
+      // "paddingBottom": 7,
+      "blockClass": "descriptionRow"
+    },
+    "children": ["image#example111", "flex-layout.row#description"]
+  },
+
+  "image#example111": {
+    "props": {
+      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
+      "maxHeight": 100
+    }
+  },
 
   "stack-layout": {
     "props": {
@@ -66,6 +87,88 @@
     ]
   },
 
+  "html#wrapperQuantity": {
+    "props": {
+      "blockClass": "wrapperQuantity"
+    },
+    "children": ["product-quantity#quantityPdpItens", "flex-layout.row#buy-button"]
+  },
+
+  "product-quantity#quantityPdpItens": {
+    "props": {
+      "blockClass": "quantityPdpItens",
+      "showLabel": false,
+      "size": "large"
+    }
+  },
+
+  "tab-layout#AA323": {
+    "children": [
+      "tab-list#AA555",
+      "tab-content#AA555"
+    ]
+  },
+
+  "tab-list#AA555": {
+    "children": [
+      "tab-list.item#1",
+      "tab-list.item#2"
+      ]
+  },
+
+  "tab-content#AA555": {
+    "children": [
+      "tab-content.item#1",
+      "tab-content.item#2"
+      ]
+  },
+
+  "tab-list.item#1": {
+    "props": {
+      "tabId": "majorAppliances",
+      "label": "Major Appliances",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#2": {
+    "props": {
+      "tabId": "electronics",
+      "label": "Electronics"
+    }
+  },
+
+  "tab-content.item#1": {
+    "children": [
+      "rich-text#1"
+    ],
+    "props": {
+      "tabId": "majorAppliances"
+    }
+  },
+  "tab-content.item#2": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
+    "props": {
+      "tabId": "electronics"
+    }
+  },
+
+  "rich-text#1": {
+    "props": {
+      "text": "Texto para Major Appliances",
+      "textPosition": "CENTER",
+      "font": "t-heading-3"
+    }
+  },
+  "rich-text#2": {
+    "props": {
+      "text": "Texto para Electronics",
+      "textPosition": "CENTER",
+      "font": "t-heading-3"
+    }
+  },
+
   "product-specification-badges": {
     "props": {
       "specificationGroupName": "Group",
@@ -78,7 +181,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "51%",
       "rowGap": 0
     }
   },
@@ -91,7 +194,11 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "thumbnailsOrientation": "horizontal",
+      "thumbnailMaxHeight": 90,
+      "maxHeight": 664
     }
   },
   "flex-layout.col#right-col": {
@@ -102,19 +209,14 @@
     "children": [
       "flex-layout.row#product-name",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+      "product-identifier.product#identifierMain",
       "flex-layout.row#selling-price",
       "product-installments",
       "product-separator",
-      "product-identifier.product",
+      "sku-selector#inverseOrder",
-      "sku-selector",
+      "html#wrapperQuantity",
-      "product-quantity",
-      "product-assembly-options",
-      "product-gifts",
-      "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
     ]
   },
 
@@ -132,12 +234,21 @@
     }
   },
   
+  "sku-selector#inverseOrder": {
+    "props": {
+      "variationsSpacing": 3,
+      "showValueNameForImageVariation": true,
+      "blockClass": "inverseOrder"
+    }
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "buyButton"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["add-to-cart-button#addSacola"]
   },
 
   "flex-layout.row#product-availability": {
@@ -172,6 +283,13 @@
     "children": ["availability-subscriber"]
   },
 
+  "product-identifier.product#identifierMain": {
+    "props": {
+      "label": "hide",
+      "idField": "productReference"
+    }
+  },
+
   "share#default": {
     "props": {
       "social": {

styles/css/vtex-product-identifier.css

@@ -0,0 +1,13 @@
+/*
+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 */
+.product-identifier--productReference {
+  display: flex;
+  justify-content: end;
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,23 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.flexRow--productMainWrapper {
+  padding: 0 36px;
 }
 
-@media screen and (min-width: 40em) {
+.flexRow--buyButton {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 1rem;
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.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%;
-}
-
-.flexRow--quickviewMainRow {
   display: flex;
-  max-height: 100%;
+  align-items: center;
+  width: 100%;
+  margin-left: 10px;
 }
-
+.flexRow--buyButton .flexRowContent--buyButton {
-.flexColChild--quickviewDetails:first-child {
+  margin: 0;
-  overflow-y: auto;
+  height: 49px;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,9 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+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 */

styles/css/vtex.product-quantity.css

@@ -0,0 +1,32 @@
+/*
+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 */
+.quantitySelectorContainer--quantityPdpItens {
+  margin: 0;
+}
+.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__input) {
+  border: 1px solid #CCCCCC;
+  border-left: 0;
+  border-right: 0;
+  width: 3rem;
+}
+.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__plus-button) {
+  border: 1px solid #CCCCCC;
+  border-left: 0;
+  border-radius: 0;
+  width: 2.5em !important;
+  color: black;
+}
+.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) {
+  border: 1px solid #CCCCCC;
+  border-right: 0;
+  border-radius: 0;
+  width: 2.5em !important;
+  color: black;
+}

styles/css/vtex.shipping-simulator.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.shippingTableBody {
+  display: none;
+}

styles/css/vtex.store-components.css

@@ -10,3 +10,69 @@
 .newsletter {
   background: red;
 }
+
+.productImageTag--main {
+  object-fit: unset !important;
+}
+
+.productImagesThumb {
+  width: 13.605% !important;
+  margin: 0 16px 0 0;
+}
+
+.productNameContainer--quickview {
+  display: flex;
+  justify-content: end;
+}
+
+:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 24px;
+}
+
+.skuSelectorContainer--inverseOrder {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-address-form__field--small) {
+  display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+  border: 1px solid #CCCCCC;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  display: flex;
+  position: relative;
+  left: 150px;
+  align-items: center;
+  padding-top: 16.1px;
+}
+.shippingContainer :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-button) {
+  display: flex;
+  width: 49px;
+  height: 49px;
+  position: relative;
+  right: 129px;
+  margin-top: 24px;
+  background-color: black;
+  font-size: 0;
+  border: none;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-button) ::before {
+  content: "Ok";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: white;
+}

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

@@ -0,0 +1,15 @@
+.flexRow--productMainWrapper{
+    padding: 0 36px;
+}
+.flexRow--buyButton{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-left: 10px;
+
+    .flexRowContent--buyButton{
+        margin: 0;
+        height: 49px;
+    }
+    
+}

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

@@ -0,0 +1,24 @@
+.quantitySelectorContainer--quantityPdpItens{
+    margin: 0;
+
+    :global(.vtex-numeric-stepper__input ){
+        border: 1px solid #CCCCCC;
+        border-left: 0;
+        border-right: 0;
+        width: 3rem;
+    }
+    :global(.vtex-numeric-stepper__plus-button){
+        border: 1px solid #CCCCCC;
+        border-left: 0;
+        border-radius: 0;
+        width: 2.5em !important;
+        color: black;
+    }
+    :global(.vtex-numeric-stepper__minus-button){
+        border: 1px solid #CCCCCC;
+        border-right: 0;
+        border-radius: 0;
+        width: 2.5em !important;
+        color: black;
+    }
+}

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

@@ -1,3 +1,73 @@
 .newsletter{
     background: red;
 }
+
+.productImageTag--main{
+    object-fit: unset !important;
+}
+
+.productImagesThumb{
+    width: 13.605% !important;
+    margin: 0 16px 0 0;
+}
+
+.productNameContainer--quickview{
+    display: flex;
+    justify-content: end;
+}
+
+:global(.vtex-product-identifier-0-x-product-identifier--productReference){
+    display: flex;
+    justify-content: end;
+    margin-bottom: 24px;
+}
+
+.skuSelectorContainer--inverseOrder{
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.shippingContainer{
+    display: flex;
+
+    :global(.vtex-address-form__field--small){
+        display: flex;
+    }
+    :global(.vtex-input-prefix__group){
+        height: 49px;
+        border: 1px solid #CCCCCC;
+        border-radius: 0;
+    }
+    :global(.vtex-address-form__postalCode-forgottenURL){
+        display: flex;
+        position: relative;
+        left: 150px;
+        align-items: center;
+        padding-top: 16.1px;
+
+    }
+    :global(.vtex__icon-external-link){
+        display: none;
+
+    }
+    :global(.vtex-button){
+        display: flex;
+        width: 49px;
+        height: 49px;
+        position: relative;
+        right: 129px;
+        margin-top: 24px;
+        background-color: black;
+        font-size: 0;
+        border: none;
+        border-radius: 0;
+
+        ::before{
+            content: "Ok";
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 19px;
+            color: white;
+        }
+    }
+}