feat: adiciona estilização das imagens do produto

react/components/Html/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
-import './styles.css';
+import "./styles.css";
 
 const CSS_HANDLES = ["html"] as const;
 

react/components/Html/styles.css

@@ -1,3 +1,12 @@
-[class*=".html--breadcrumb"] {
+[class*="html--buy-button"] {
-  background: red;
+  display: flex;
+  gap: 10px;
+  margin-bottom: 5px;
+}
+
+[class*="html--buy-button"] :global(.vtex-button) {
+  height: 49px;
+  background: black;
+  border: none;
+  border-radius: 0;
 }

store/blocks/pdp/product.jsonc

@@ -67,6 +67,7 @@
     ]
   },
 
+
   "product-specification-badges": {
     "props": {
       "specificationGroupName": "Group",
@@ -111,13 +112,21 @@
       "product-installments",
       "product-separator",
       "sku-selector",
-      "flex-layout.row#buy-button",
+      "html#buy-button",
+      // "flex-layout.row#buy-button",
       "product-gifts",
       "availability-subscriber",
       "shipping-simulator"
     ]
   },
 
+  "html#buy-button": {
+    "props": {
+      "blockClass": "buy-button"
+    },
+    "children": ["product-quantity", "add-to-cart-button"]
+  },
+
   "html#product-name": {
     "props": {
       "blockClass": "product-name"
@@ -211,5 +220,12 @@
       "width": "28%",
       "showLabel": false
     }
+  },
+
+  "product-installments": {
+    "props": {
+      "installmentsCriteria": "max-quality-without-interest",
+      "blockClass": "fees"
+    }
   }
 }

styles/configs/style.json

@@ -253,84 +253,84 @@
         "measure": [30, 34, 20],
         "styles": {
           "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "700",
             "fontSize": "3rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "700",
             "fontSize": "2.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "700",
             "fontSize": "1.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.5rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.875rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "500",
             "fontSize": "1rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "500",
             "fontSize": "0.875rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "500",
             "fontSize": "1.25rem",
             "textTransform": "uppercase",

styles/css/agenciamagma.store-theme.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Cores */
 /* Grid breakpoints */
 .html {
   background-color: none;

styles/css/global.css

@@ -0,0 +1,9 @@
+/*
+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 */
+/* Grid breakpoints */

styles/css/vtex.add-to-cart-button.css

@@ -7,6 +7,9 @@
 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 */
 .buttonText {
   font-size: 0;

styles/css/vtex.breadcrumb.css

@@ -6,17 +6,28 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Cores */
 /* Grid breakpoints */
-.homeIcon {
+.container {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.homeIcon,
+.homeLink {
   display: none;
 }
 
+.arrow--1 {
+  padding-left: 0;
+}
 .arrow--1 .caretIcon {
   display: none;
 }
 
 .link--1 {
   font-size: 0px;
+  padding-left: 0;
 }
 .link--1::after {
   content: "Home";

styles/css/vtex.flex-layout.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Cores */
 /* Grid breakpoints */
 .flexRowContent--buy-button-row :global(.vtex-button) {
   background: #000000;

styles/css/vtex.product-identifier.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Cores */
 /* Grid breakpoints */
 .product-identifier__label {
   display: none;

styles/css/vtex.product-price.css

@@ -6,6 +6,9 @@
 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 */
 .sellingPriceValue {
   font-weight: 700;
@@ -15,7 +18,7 @@
 }
 
 .installments {
-  font-size: 0;
+  font-size: 0px;
 }
 .installments .installmentsNumber--36 {
   font-weight: 700;

styles/css/vtex.rich-text.css

@@ -6,4 +6,5 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Cores */
 /* Grid breakpoints */

styles/css/vtex.store-components.css

@@ -6,6 +6,9 @@
 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 */
 .newsletter {
   background: #000000;
@@ -15,10 +18,12 @@
 :global(.vtex-numeric-stepper__input) {
   border-right: none;
   border-left: none;
+  border-color: #cccccc;
 }
 
 :global(.vtex-numeric-stepper__minus-button) {
   background: #fff;
+  border-color: #cccccc;
 }
 :global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) {
   font-size: 16px;
@@ -28,6 +33,7 @@
 
 :global(.vtex-numeric-stepper__plus-button) {
   background: #fff;
+  border-color: #cccccc;
 }
 :global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) {
   font-size: 16px;
@@ -35,6 +41,10 @@
   color: #000000;
 }
 
+.container {
+  padding: 0 40px;
+}
+
 .productNameContainer {
   font-weight: 300;
   font-size: 20px;
@@ -43,6 +53,25 @@
   color: #575757;
 }
 
+.productImage .productImageTag {
+  max-height: unset !important;
+}
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+}
+
+.productImagesThumb {
+  width: unset !important;
+  margin-bottom: 0 !important;
+  margin-right: 16px;
+}
+.productImagesThumb .thumbImg {
+  max-width: 90px;
+  width: 100%;
+  height: 90px;
+}
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column;
@@ -105,12 +134,45 @@
   display: none;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
-  left: 3px;
+  left: 8px;
-  top: 2px;
+  top: 5px;
   right: 5px;
   bottom: 3px;
   transform: rotateY(180deg);
 }
+.skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #000000;
+}
+.skuSelectorContainer .skuSelectorItem--selected .diagonalCross {
+  color: #000000;
+}
+.skuSelectorContainer .skuSelectorItemImage--sku-size .diagonalCross {
+  left: 4px;
+  top: 5px;
+  right: 3px;
+  bottom: 3px;
+  transform: rotateY(180deg);
+}
+
+.subscriberContainer {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+.submit :global(.vtex-button) {
+  background: #000000;
+  height: 40px;
+  margin-top: -1px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+}
 
 .skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size {
   color: #000000;
@@ -197,6 +259,8 @@
 .shippingTable {
   display: flex;
   flex-direction: column;
+  border: none;
+  margin-top: 0;
 }
 .shippingTable .shippingTableHead {
   display: block;
@@ -233,10 +297,26 @@
   line-height: 19px;
   color: #202020;
 }
+.shippingTable .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableCellDeliveryName {
+  width: 23.9263%;
+  padding: 0 0 15px 0;
+}
+.shippingTable .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableCellDeliveryEstimate {
+  width: 41.7177%;
+  padding: 0 0 15px 0;
+}
+.shippingTable .shippingTableCellDeliveryPrice,
+.shippingTable .shippingTableHeadDeliveryPrice {
+  width: 14.7239%;
+  padding: 0 0 15px 0;
+}
 
 .shippingTableBody .shippingtableRow {
   display: flex;
   flex-direction: row;
+  text-align: left;
 }
 .shippingTableBody .shippingTableCellDeliveryEstimate {
   display: flex;

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -1,8 +1,15 @@
-.homeIcon {
+.container {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.homeIcon,
+.homeLink {
   display: none;
 }
 
 .arrow--1 {
+  padding-left: 0;
   .caretIcon {
     display: none;
   }
@@ -10,6 +17,7 @@
 
 .link--1 {
   font-size: 0px;
+  padding-left: 0;
 
   &::after {
     content: "Home";

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

@@ -7,7 +7,7 @@
 }
 
 .installments {
-  font-size: 0;
+  font-size: 0px;
 
   .installmentsNumber--36 {
     font-weight: 700;

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

@@ -6,10 +6,12 @@
 :global(.vtex-numeric-stepper__input) {
   border-right: none;
   border-left: none;
+  border-color: $gray-200;
 }
 
 :global(.vtex-numeric-stepper__minus-button) {
   background: $white;
+  border-color: $gray-200;
 
   :global(.vtex-numeric-stepper__minus-button__text) {
     font-size: 16px;
@@ -21,6 +23,7 @@
 
 :global(.vtex-numeric-stepper__plus-button) {
   background: $white;
+  border-color: $gray-200;
 
   :global(.vtex-numeric-stepper__plus-button__text) {
     font-size: 16px;
@@ -30,14 +33,43 @@
   }
 }
 
+// TITULO E IMAGENS
+.container {
+  padding: 0 40px;
+}
+
 .productNameContainer {
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
   text-align: right;
+
   color: $gray-100;
 }
 
+.productImage {
+  .productImageTag {
+    max-height: unset !important;
+  }
+}
+
+.carouselGaleryThumbs {
+margin-top: 16px;
+}
+
+.productImagesThumb {
+  width: unset !important;
+  margin-bottom: 0 !important;
+  margin-right: 16px;
+
+  .thumbImg {
+    max-width: 90px;
+    width: 100%;
+    height: 90px;
+  }
+}
+
+// sku Tamanho e Cor
 .skuSelectorContainer {
   display: flex;
   flex-direction: column;
@@ -120,13 +152,58 @@
     }
 
     .diagonalCross {
-      left: 3px;
+      left: 8px;
-      top: 2px;
+      top: 5px;
       right: 5px;
       bottom: 3px;
       transform: rotateY(180deg);
     }
   }
+
+  .skuSelectorItem--selected {
+    .skuSelectorItemTextValue {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+
+      color: $black;
+    }
+
+    .diagonalCross {
+      color: $black;
+    }
+  }
+
+  .skuSelectorItemImage--sku-size {
+    .diagonalCross {
+      left: 4px;
+      top: 5px;
+      right: 3px;
+      bottom: 3px;
+      transform: rotateY(180deg);
+    }
+  }
+}
+
+.subscriberContainer {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+
+  color: $gray;
+}
+
+.submit {
+  :global(.vtex-button) {
+    background: $black;
+    height: 40px;
+    margin-top: -1px;
+
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    color: $white;
+  }
 }
 
 .skuSelectorItem--sku-size-selected {
@@ -237,6 +314,8 @@
 .shippingTable {
   display: flex;
   flex-direction: column;
+  border: none;
+  margin-top: 0;
 
   .shippingTableHead {
     display: block;
@@ -284,12 +363,31 @@
       }
     }
   }
+
+  .shippingTableHeadDeliveryName,
+.shippingTableCellDeliveryName {
+  width: 23.9263%;
+  padding: 0 0 15px 0;
+}
+
+.shippingTableHeadDeliveryEstimate,
+.shippingTableCellDeliveryEstimate {
+  width: 41.7177%;
+  padding: 0 0 15px 0;
+}
+
+.shippingTableCellDeliveryPrice,
+.shippingTableHeadDeliveryPrice {
+  width: 14.7239%;
+  padding: 0 0 15px 0;
+}
 }
 
 .shippingTableBody {
   .shippingtableRow {
     display: flex;
     flex-direction: row;
+    text-align: left;
   }
 
   .shippingTableCellDeliveryEstimate {

styles/sass/utils/_vars.scss

@@ -1,3 +1,7 @@
+/* Fontes */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
+
+/* Cores */
 $color-black: #292929;
 $black-100: #202020;
 $black: #000000;
@@ -6,6 +10,7 @@ $white: #fff;
 
 $gray: #929292;
 $gray-100: #575757;
+$gray-200: #cccccc;
 
 
 $color-gray: #6c6c6c;