feat: adiciona estlização carrossel e arrows

assets/left-arrow-vitor-soares.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="31" viewBox="0 0 12 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.000193943 15.2383L10.9291 30.1191L11.2002 27.7468L2.30458 15.2383L11.2002 2.89145L10.9291 0.519138L0.000193943 15.2383Z" fill="black"/>
+</svg>

store/blocks/pdp/product.jsonc

@@ -299,7 +299,7 @@
     "props": {
       "itemsPerPage": {
         "desktop": 4,
-        "tablet": 1,
+        "tablet": 3,
         "phone": 1
       },
       "infinite": true,

styles/css/vtex.product-summary.css

@@ -1,42 +1,62 @@
-.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 */
-
+/* Fontes */
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-  opacity: 1;
+/* Cores */
-}
+/* Grid breakpoints */
-
+.imageNormal {
-@media screen and (max-width: 40em) {
+  width: 314px;
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
+  height: 314px;
-    display: none;
-  }
-}
-
-.nameContainer {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
 }
 
 .brandName {
-  font-weight: 600;
+  font-weight: 400;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
+  color: #000000;
 }
 
-.container {
+.nameContainer {
-  text-align: start;
+  padding: 16px 0 8px 0;
 }
 
-.imageContainer {
+.priceContainer {
-  text-align: center;
+  padding: 0;
+}
+.priceContainer .listPriceContainer {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+}
+.priceContainer .listPriceContainer::after {
+  content: "por";
+}
+.priceContainer .listPriceContainer .listPrice {
+  padding: 0 4px 0 0;
+}
+.priceContainer .sellingPriceLabel {
+  display: none;
+}
+.priceContainer .installmentContainer {
+  display: none;
+}
+.priceContainer .price_sellingPrice {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}
+.priceContainer .sellingPriceContainer {
+  padding: 0 0 32px 0;
 }
 
-.image {
+.element {
-  border-radius: 0.25rem;
+  padding: 0;
-}
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,59 @@
+/*
+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 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Cores */
+/* Grid breakpoints */
 .sliderLayoutContainer {
-  justify-content: center;
+  margin-bottom: 64px;
+  padding: 0 67px;
 }
 
-.sliderLayoutContainer--carousel {
+.imageContainer {
-  background-color: #F0F0F0;
+  max-width: 314px;
-  min-height: 450px;
+  width: 100%;
-}
+  height: 314px;
-
+  background: #EDEDED;
-.sliderTrackContainer {
-  max-width: 100%;
 }
 
 .paginationDotsContainer {
-  margin-top: .5rem;
+  align-items: center;
-  margin-bottom: .5rem;
+  gap: 12px;
+}
+.paginationDotsContainer .paginationDot {
+  width: 10px;
+  height: 10px;
+  background-color: #000000;
+  margin: 0;
 }
 
-.layoutContainer--shelf {
+:global(.vtex-slider-layout-0-x-paginationDot--isActive) {
-  margin-top: 20px;
+  width: 17px !important;
-  margin-bottom: 20px;
+  height: 17px !important;
-  max-width: 96rem;
+  background-color: #fff !important;
-  min-height: 550px;
+  border: 0.5px solid #000000;
 }
 
-.slide--shelf {
+.sliderRightArrow {
-  margin-bottom: 25px;
+  visibility: hidden;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
 }
+.sliderRightArrow::after {
+  visibility: visible;
+  content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
+  padding: 0 40px 0 0;
+}
+
+.sliderLeftArrow {
+  visibility: hidden;
+}
+.sliderLeftArrow::before {
+  visibility: visible;
+  content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
+  padding: 0 0 0 40px;
+}

styles/css/vtex.tab-layout.css

@@ -51,6 +51,7 @@
   background-color: #fff;
   width: 114px;
   border: none;
+  padding: 0;
 }
 .listContainer .listItemActive :global(.vtex-button__label) {
   color: #000000;

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

@@ -0,0 +1,60 @@
+.imageNormal {
+  width: 314px;
+  height: 314px;
+}
+
+.brandName {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+
+  color: $black;
+}
+
+.nameContainer {
+  padding: 16px 0 8px 0;
+}
+
+.priceContainer {
+  padding: 0;
+
+  .listPriceContainer {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+
+    color: $gray-700;
+
+    &::after {
+      content: "por";
+    }
+
+    .listPrice {
+      padding: 0 4px 0 0;
+    }
+  }
+
+  .sellingPriceLabel {
+    display: none;
+  }
+
+  .installmentContainer {
+    display: none;
+  }
+
+  .price_sellingPrice {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+
+    color: $black;
+  }
+
+  .sellingPriceContainer {
+    padding: 0 0 32px 0;
+  }
+}
+
+.element {
+  padding: 0;
+}

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

@@ -0,0 +1,50 @@
+.sliderLayoutContainer {
+  margin-bottom: 64px;
+  padding: 0 67px;
+}
+
+.imageContainer {
+  max-width: 314px;
+  width: 100%;
+  height: 314px;
+  background: $gray-600;
+}
+
+.paginationDotsContainer {
+  align-items: center;
+  gap: 12px;
+
+  .paginationDot {
+    width: 10px;
+    height: 10px;
+    background-color: $black;
+    margin: 0;
+  }
+}
+
+:global(.vtex-slider-layout-0-x-paginationDot--isActive) {
+  width: 17px !important;
+  height: 17px !important;
+  background-color: $white !important;
+  border: 0.5px solid $black;
+}
+
+.sliderRightArrow {
+  visibility: hidden;
+
+  &::after {
+    visibility: visible;
+    content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
+    padding: 0 40px 0 0;
+  }
+}
+
+.sliderLeftArrow {
+visibility: hidden;
+
+  &::before {
+  visibility: visible;
+  content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
+  padding: 0 0 0 40px;
+  }
+}

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

@@ -48,6 +48,7 @@
       background-color: $white;
       width: 114px;
       border: none;
+      padding: 0;
     }
 
     :global(.vtex-button__label) {

styles/sass/utils/_vars.scss

@@ -14,6 +14,8 @@ $gray-200: #cccccc;
 $gray-300: #868686;
 $gray-400: #bfbfbf;
 $gray-500: #b9b9b9;
+$gray-600: #EDEDED;
+$gray-700: #bababa;
 
 
 $color-gray: #6c6c6c;