feat:adicionando prateleira de produtos

store/blocks/pdp/product.jsonc

@@ -4,8 +4,10 @@
       "html#breadcrumb",
       "condition-layout.product#availability",
       "tab-layout#home",
-      "product-specification-group#table",
+      // "product-specification-group#table",
-      "shelf.relatedProducts",
+      // "shelf.relatedProducts",
+      "rich-text#1",
+      "list-context.product-list#demo1",
       "newsletter",
       "product-questions-and-answers"
     ]
@@ -194,8 +196,8 @@
   "image#image-1": {
     "props":{
       "src":"assets/sandalia-image.png",
-      "maxHeight": 872,
+      "maxHeight": "48%",
-      "maxWidth": 872,
+      "maxWidth":"48%",
       "blockClass":"imageElement"
     }
   },
@@ -251,8 +253,8 @@
   "props": {
     "tabId": "description5",
     "label": "Descrição"
+  }
 },
-
 "tab-content#home": {
   "props" : {
     "defaultActiveTab": true
@@ -288,10 +290,47 @@
 },
 
 "product-quantity#1":{
-  "props":{
+    "props":{
-    "width":"25%"
+      "width":"25%"
-  }
+    }
-}
+  },
+
+//estilizando os blocos do carousel
+
+"list-context.product-list#demo1": {
+  "blocks": ["product-summary.shelf#demo1"],
+  "children": ["slider-layout#demo-products"]
+},
+"product-summary.shelf#demo1": {
+     "children": [
+       "product-summary-image",
+      "product-summary-name",
+      "product-summary-price"
+     ]
+   },
+
+"slider-layout#demo-products": {
+  "props": {
+      "itemsPerPage": {
+      "desktop": 4,
+      "tablet": 3,
+      "phone": 2
+      },
+      "infinite": true,
+      "showNavigationArrows": "desktopOnly",
+      "blockClass": "carousel"
+    }
+        // "children": ["rich-text#1"]
+   },
+
+    "rich-text#1": {
+      "props": {
+        "text": "Você também pode gostar:"
+      }
+    }
 }
 
 
+
+
+

styles/css/vtex.product-summary.css

@@ -1,42 +1,57 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
+/*font*/
+/*colors*/
+/* Grid breakpoints */
+.installmentContainer {
+  background-color: none;
 }
 
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+.productNameContainer {
-  opacity: 0;
+  font-family: "Open Sans";
-  transition: opacity 200ms ease-in-out;
+  font-style: normal;
-}
+  font-weight: 400;
-
+  font-size: 18px;
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+  line-height: 25px;
-  opacity: 1;
+  text-align: center;
-}
+  color: #000000;
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
 }
 
 .nameContainer {
-  justify-content: start;
+  padding: 0;
-  padding-top: 1rem;
+  margin-bottom: 8px;
-  padding-bottom: 1rem;
 }
 
-.brandName {
+.priceContainer {
-  font-weight: 600;
+  padding: 0;
-  font-size: 18px;
-  color: #2E2E2E;
 }
 
-.container {
+.price_listPriceContainer {
-  text-align: start;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration-line: line-through;
+  color: #BABABA;
+  padding: 0;
+  margin-bottom: 8px;
 }
 
 .imageContainer {
-  text-align: center;
+  margin-bottom: 16px;
+  width: 314.4px;
+  height: 314.4px;
 }
-
+.imageContainer .imageNormal {
-.image {
+  width: 100%;
-  border-radius: 0.25rem;
+  height: 100%;
 }

styles/css/vtex.rich-text.css

@@ -10,3 +10,13 @@
 /*font*/
 /*colors*/
 /* Grid breakpoints */
+.container {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  display: flex;
+  justify-content: center;
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,12 @@
-.sliderLayoutContainer {
+/*
-  justify-content: center;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.sliderLayoutContainer--carousel {
+[1200 - 1800] is where our nortal styles apply
-  background-color: #F0F0F0;
+1800px + : Big desktop
-  min-height: 450px;
+*/
-}
+/* Media Query M3 */
-
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
-.sliderTrackContainer {
+/*font*/
-  max-width: 100%;
+/*colors*/
-}
+/* Grid breakpoints */
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-}
-
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
-}
-
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
-}

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

@@ -0,0 +1,46 @@
+.installmentContainer {
+  background-color: none;
+}
+
+.productNameContainer {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #000000;
+}
+.nameContainer {
+  padding:0;
+  margin-bottom: 8px;
+}
+.priceContainer {
+  padding: 0;
+}
+
+.price_listPriceContainer {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration-line: line-through;
+  color: #BABABA;
+  padding: 0;
+  margin-bottom: 8px;
+}
+
+.imageContainer {
+  margin-bottom: 16px;
+  // background-color: #EDEDED;
+  width: 314.4px;
+  height: 314.4px;
+
+
+  .imageNormal  {
+    width: 100%;
+    height: 100%;
+  }
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -0,0 +1,10 @@
+.container {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,5 @@
+// .slideChildrenContainer{
+//   width: 314.4px;
+//   height: 448.4px;
+// }
+

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

@@ -182,5 +182,7 @@
   display: flex;
   flex-direction: column-reverse;
 }
+//estilização do carousel
+