From aeea58a8c67e29f9f9b36f9cb57b20a9133109d6 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Thu, 9 Feb 2023 12:07:19 -0300
Subject: [PATCH] feat: Adicionando os estilos do shelf

---
 store/blocks/pdp/product.jsonc                | 21 ++++++--
 styles/css/vtex.rich-text.css                 | 10 +++-
 styles/css/vtex.slider-layout.css             | 49 ++++++++-----------
 styles/sass/pages/product/vtex.rich-text.scss |  9 ++++
 .../pages/product/vtex.slider-layout.scss     | 12 +++++
 5 files changed, 68 insertions(+), 33 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 59b8a51..dbdd649 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/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": {
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index f5ba8ae..f03cef1 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -7,4 +7,12 @@
 */
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.container--shelfTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 55f431f..72afeb0 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e69de29..91c03e5 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/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;
+}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
new file mode 100644
index 0000000..8052275
--- /dev/null
+++ b/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;
+}