feat: adiciona slider slick

store/blocks/pdp/product.jsonc

@@ -16,10 +16,10 @@
     "children": [
       "stack-layout#prodsum",
       "product-summary-name",
-      "product-rating-inline",
+      /* "product-rating-inline", */
-      "product-summary-space",
+      /* "product-summary-space", */
-      "product-summary-price",
+      "product-summary-price"
-      "product-summary-buy-button"
+      /* "product-summary-buy-button" */
     ]
   },
   "list-context.product-list#relatedProduct": {

store/blocks/product-summary/product-summary.jsonc

@@ -20,9 +20,9 @@
 
   "stack-layout#prodsum": {
     "children": [
-      "product-summary-image#shelf",
+      "product-summary-image#shelf"
-      "vtex.product-highlights@2.x:product-highlights#collection",
+      /* "vtex.product-highlights@2.x:product-highlights#collection", */
-      "modal-trigger#quickview" // Check quickview.jsonc
+      /* "modal-trigger#quickview" */ // Check quickview.jsonc
     ]
   },
 

styles/css/vtex.product-summary.css

@@ -1,42 +1,31 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+[1200 - 1800] is where our nortal styles apply
-  opacity: 0;
+1800px + : Big desktop
-  transition: opacity 200ms ease-in-out;
+*/
-}
+/* Media Query M3 */
-
+/* Grid breakpoints */
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 1;
-}
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
-}
-
 .nameContainer {
-  justify-content: start;
+  justify-content: center !important;
-  padding-top: 1rem;
+  padding: 0;
-  padding-bottom: 1rem;
 }
 
 .brandName {
-  font-weight: 600;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
+  color: #000000;
+  padding: 16px 0 8px !important;
 }
 
-.container {
+.priceContainer {
-  text-align: start;
+  padding: 0;
 }
 
-.imageContainer {
+.element {
-  text-align: center;
+  padding: 0;
-}
-
-.image {
-  border-radius: 0.25rem;
 }

styles/css/vtex.rich-text.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -8,5 +9,21 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .heading {
-  display: none;
+  font-size: 0;
+  margin-bottom: 32px;
+  margin-top: 0;
+}
+.heading::after {
+  content: "Você também pode gostar:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+}
+
+.container {
+  justify-content: center;
+  align-items: center;
 }

styles/css/vtex.slider-layout.css

@@ -1,31 +1,29 @@
-.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 */
-
+/* Grid breakpoints */
 .sliderTrackContainer {
-  max-width: 100%;
+  background-color: white;
+  width: 1300px;
+  margin: auto;
 }
 
 .paginationDotsContainer {
-  margin-top: .5rem;
+  align-items: center;
-  margin-bottom: .5rem;
 }
 
-.layoutContainer--shelf {
+.paginationDot {
-  margin-top: 20px;
+  background-color: black;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
 }
 
-.slide--shelf {
+.paginationDot--isActive {
-  margin-bottom: 25px;
+  width: 16px !important;
-  padding-left: .5rem;
+  height: 16px !important;
-  padding-right: .5rem;
+  border: 0.5px solid #000000;
-  min-height: 550px;
+  background-color: white;
 }

styles/css/vtex.store-components.css

@@ -197,3 +197,45 @@
   margin-right: 16px;
   width: 90px !important;
 }
+
+.installmentsPrice {
+  display: none;
+}
+
+.listPrice {
+  margin: 8px;
+  padding: 0;
+}
+
+.listPriceLabel {
+  font-size: 0;
+}
+
+.listPriceValue {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+}
+.listPriceValue::before {
+  content: "de ";
+}
+.listPriceValue::after {
+  content: " por";
+  text-decoration: line-through;
+}
+
+.sellingPriceLabel {
+  font-size: 0;
+}
+
+.sellingPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}

styles/css/vtex.tab-layout.css

@@ -8,7 +8,7 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .contentContainer {
-  padding: 32px 72px 16px 72px;
+  padding: 32px 72px 0 72px;
 }
 .contentContainer .contentItem {
   display: flex;

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

@@ -0,0 +1,22 @@
+.nameContainer {
+  justify-content: center !important;
+  padding: 0;
+}
+
+.brandName {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #000000;
+  padding: 16px 0 8px !important;
+}
+
+.priceContainer {
+  padding: 0;
+}
+
+.element {
+  padding: 0;
+}

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

@@ -1,3 +1,20 @@
 .heading {
-  display: none;
+  font-size: 0;
+  margin-bottom: 32px;
+  margin-top: 0;
+
+  &::after {
+    content: "Você também pode gostar:";
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    color: #575757;
+  }
+}
+
+.container {
+  justify-content: center;
+  align-items: center;
 }

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

@@ -0,0 +1,20 @@
+.sliderTrackContainer {
+  background-color: white;
+  width: 1300px;
+  margin: auto;
+}
+
+.paginationDotsContainer {
+  align-items: center;
+}
+
+.paginationDot {
+  background-color: black;
+}
+
+.paginationDot--isActive {
+  width: 16px !important;
+  height: 16px !important;
+  border: 0.5px solid #000000;
+  background-color: white;
+}

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

@@ -195,3 +195,46 @@
     width: 90px !important;
   }
 }
+
+.installmentsPrice {
+  display: none;
+}
+.listPrice {
+  margin: 8px;
+  padding: 0;
+}
+
+.listPriceLabel {
+  font-size: 0;
+}
+
+.listPriceValue {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+
+  &::before {
+    content: "de ";
+  }
+
+  &::after {
+    content: " por";
+    text-decoration: line-through;
+  }
+}
+
+.sellingPriceLabel {
+  font-size: 0;
+}
+
+.sellingPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}

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

@@ -1,5 +1,5 @@
 .contentContainer {
-  padding: 32px 72px 16px 72px;
+  padding: 32px 72px 0 72px;
   .contentItem {
     display: flex;