feat(pdp-main-view): created initial components using vtex blocks

store/blocks/pdp/product-shelf.jsonc

@@ -0,0 +1,62 @@
+{
+  "list-context.product-list#pdp-shelf": {
+    "blocks": ["product-summary.shelf#pdp-shelf"],
+    "children": ["html#pdp-slider-shelf"]
+  },
+
+  "html#pdp-slider-shelf-title": {
+    "children": ["rich-text#pdp-shelf-title"]
+  },
+
+  "html#pdp-slider-shelf": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["slider-layout#pdp-shelf"]
+  },
+
+  "html#list-context-pdp-shelf": {
+    "props": {
+      "testId": "product-summary-list"
+    },
+    "children": ["list-context.product-list#pdp-shelf"]
+  },
+
+  "rich-text#pdp-shelf-title": {
+    "props": {
+      "text": "## Você também pode gostar:",
+      "textPosition": "CENTER",
+      "textAlignment": "CENTER"
+    }
+  },
+
+  "slider-layout#pdp-shelf": {
+    "props": {
+      "blockClass": "productShelf",
+      "infinite": true
+    }
+  },
+
+  "product-summary.shelf#pdp-shelf": {
+    "children": [
+      "product-summary-image#pdp-shelf",
+      "product-summary-name",
+      "product-summary-price#pdp-shelf"
+    ]
+  },
+
+  "product-summary-image#pdp-shelf": {
+    "props": {
+      "showBadge": false,
+      "alabelSellingPricespectRatio": "1:1"
+    }
+  },
+
+  "product-summary-price#pdp-shelf": {
+    "props": {
+      "showInstallments": false,
+      "labelListPrice": "de",
+      "labelSellingPrice": "por"
+    }
+  }
+}

store/blocks/pdp/product.jsonc

@@ -4,37 +4,13 @@
       "html#breadcrumb",
       "condition-layout.product#availability",
       "tab-layout#product-specification",
-      "shelf.relatedProducts#pdp-shelf-related",
+      "html#pdp-slider-shelf-title",
+      "html#list-context-pdp-shelf",
       "newsletter",
       "product-questions-and-answers"
     ]
   },
 
-  "shelf.relatedProducts#pdp-shelf-related": {
-    "blocks": ["product-summary.shelf#pdp-shelf-related"],
-    "props": {
-      "productList": {
-        "titleText": "Você também pode gostar:"
-      }
-    }
-  },
-
-  "product-summary.shelf#pdp-shelf-related": {
-    "children": [
-      "product-summary-image",
-      "product-summary-name",
-      "product-summary-price"
-    ]
-  },
-  "product-summary-price": {},
-
-  "product-summary-image": {
-    "props": {
-      "showBadge": false,
-      "aspectRatio": "1:1"
-    }
-  },
-
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -141,9 +117,9 @@
       "flex-layout.row#selling-price",
       "product-installments",
       "html#sku-selector",
-      "product-quantity",
+
       "product-gifts",
-      "flex-layout.row#buy-button",
+      "flex-layout.row#pdp-buy-actions",
       "availability-subscriber",
       "shipping-simulator"
     ]
@@ -192,6 +168,10 @@
     }
   },
 
+  "flex-layout.row#pdp-buy-actions": {
+    "children": ["html#pdp-product-quantity", "html#add-to-cart-button"]
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
@@ -208,6 +188,19 @@
     "children": ["add-to-cart-button#pdp-add-to-cart-button"]
   },
 
+  "html#pdp-product-quantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": ["product-quantity"]
+  },
+
+  "product-quantity": {
+    "props": {
+      "showLabel": false
+    }
+  },
+
   "add-to-cart-button#pdp-add-to-cart-button": {
     "props": {
       "text": "Adicionar à sacola",

styles/css/vtex.product-quantity.css

@@ -0,0 +1,21 @@
+/*
+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 */
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) {
+  width: 128px;
+  min-height: 49px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
+  width: 100%;
+  height: 100%;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button-container),
+.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button-container) {
+  height: 100%;
+}

styles/css/vtex.slider-layout.css

@@ -1,9 +1,18 @@
+/*
+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 */
 .sliderLayoutContainer {
   justify-content: center;
 }
 
 .sliderLayoutContainer--carousel {
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
   min-height: 450px;
 }
 
@@ -12,8 +21,8 @@
 }
 
 .paginationDotsContainer {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .layoutContainer--shelf {
@@ -25,7 +34,12 @@
 
 .slide--shelf {
   margin-bottom: 25px;
-  padding-left: .5rem;
+  padding-left: 0.5rem;
-  padding-right: .5rem;
+  padding-right: 0.5rem;
   min-height: 550px;
 }
+
+.sliderLayoutContainer--productShelf {
+  width: 100%;
+  padding: 0 40px;
+}

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

@@ -0,0 +1,16 @@
+.quantitySelectorStepper {
+  :global(.vtex-numeric-stepper-wrapper) {
+    width: 128px;
+    min-height: 49px;
+  }
+
+  :global(.vtex-numeric-stepper__input) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :global(.vtex-numeric-stepper__plus-button-container),
+  :global(.vtex-numeric-stepper__minus-button-container) {
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,36 @@
+.sliderLayoutContainer {
+  justify-content: center;
+}
+
+.sliderLayoutContainer--carousel {
+  background-color: #f0f0f0;
+  min-height: 450px;
+}
+
+.sliderTrackContainer {
+  max-width: 100%;
+}
+
+.paginationDotsContainer {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.layoutContainer--shelf {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  max-width: 96rem;
+  min-height: 550px;
+}
+
+.slide--shelf {
+  margin-bottom: 25px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  min-height: 550px;
+}
+
+.sliderLayoutContainer--productShelf {
+  width: 100%;
+  padding: 0 40px;
+}

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

@@ -140,3 +140,5 @@
     height: 48px;
   }
 }
+
+