Merge pull request 'feature/shelf' (#12) from feature/shelf into development

Reviewed-on: #12

store/blocks/pdp/product.jsonc

@@ -9,7 +9,10 @@
       "list-context.product-list#shelf",
       "newsletter",
       "product-questions-and-answers"
-    ]
+    ],
+    "props": {
+      "blockClass": "productAll"
+    }
   },
   "html#breadcrumb": {
     "props": {
@@ -279,10 +282,22 @@
   },
   "list-context.product-list#shelf": {
     "blocks": ["product-summary.shelf#shelf"],
-    "children": ["slider-layout#shelf-products"]
+    "children": ["rich-text#shelf", "slider-layout#shelf-products"]
+  },
+  "rich-text#shelf": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Você também pode gostar: ",
+      "blockClass": "shelfTitle"
+    }
   },
   "product-summary.shelf#shelf": {
-    "children": ["product-summary-image#shelf", "product-summary-price"]
+    "children": [
+      "product-summary-image#shelf",
+      "product-summary-name",
+      "product-summary-price"
+    ]
   },
   "slider-layout#shelf-products": {
     "props": {

styles/css/vtex.rich-text.css

@@ -8,3 +8,11 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
+.container--shelfTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,22 @@
+/*
+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@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+/*.sliderLayoutContainer {
+  margin: 0 40px 0 40px;
+  .sliderRightArrow {
+    right: 100px;
+  }
+}*/
 .sliderLayoutContainer {
+  width: 95%;
+  padding: 0 16px 0 16px;
+  display: flex;
   justify-content: center;
 }
-
-.sliderLayoutContainer--carousel {
-  background-color: #F0F0F0;
-  min-height: 450px;
-}
-
-.sliderTrackContainer {
-  max-width: 100%;
-}
-
-.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.rich-text.scss

@@ -0,0 +1,9 @@
+.container--shelfTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+
+  color: #575757;
+}

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

@@ -0,0 +1,12 @@
+/*.sliderLayoutContainer {
+  margin: 0 40px 0 40px;
+  .sliderRightArrow {
+    right: 100px;
+  }
+}*/
+.sliderLayoutContainer {
+  width: 95%;
+  padding: 0 16px 0 16px;
+  display: flex;
+  justify-content: center;
+}