feat: estiliza as informações sobre o produto

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

react/components/Html/index.tsx

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

react/components/Html/styles.css

@@ -0,0 +1,3 @@
+[data-testeid="breadcrumb"] {
+  background-color: yellow;
+}

store/blocks/minicart.jsonc

@@ -2,7 +2,8 @@
   "add-to-cart-button": {
     "props": {
       "addToCartFeedback": "customEvent",
-      "customPixelEventId": "add-to-cart-button"
+      "customPixelEventId": "add-to-cart-button",
+      "blockClass": "button-add"
     }
   },
 

store/blocks/pdp/product.jsonc

@@ -91,7 +91,7 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "displayThumbnailsArrows": false
     }
   },
   "flex-layout.col#right-col": {
@@ -101,12 +101,11 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "product-installments#m3-academy",
-      "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
@@ -118,6 +117,15 @@
     ]
   },
 
+  "product-installments#m3-academy": {
+    "props": {
+      "installmentsCriteria": "max-quantity-without-interest",
+      "markers": ["discount", "vezes"],
+      "blockClass": "m3-custom-installments",
+      "message": "ou {installmentsNumber}<vezes>x</vezes> de {installmentValue} <discount>sem juros</discount>"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3

styles/css/agenciamagma.store-theme.css

@@ -7,10 +7,9 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
+/*.html {
   background-color: red;
-}
+}*/
-
+/*.html--pdp-breadcrumb {
-.html--pdp-breadcrumb {
   background-color: green;
-}
+}*/

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

@@ -0,0 +1,44 @@
+.add-to-cart-button {
+  background-color: black;
+  color: white;
+}
+
+.buttonText {
+  visibility: hidden;
+}
+
+.button-add {
+  background-color: black;
+}
+
+
+.__label {
+  padding: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.buttonText::after {
+  width: 398px;
+  height: 25px;
+  content: "Adicionar à sacola";
+  visibility: visible;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #ffffff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.buttonDataContainer {
+  background: black;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,35 @@
+.homeIcon {
+  visibility: hidden;
+}
+
+.arrow--1 {
+  visibility: hidden;
+  content: "";
+}
+
+.arrow--1::after {
+  visibility: visible;
+  content: "Home";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.link--2 {
+  visibility: hidden;
+  content: "";
+}
+
+.link--2::after {
+  visibility: visible;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  content: "Sapatos";
+}

styles/css/vtex.flex-layout.css

@@ -43,7 +43,7 @@
 }
 
 .flexRow--deals {
-  background-color: #0F3E99;
+  background-color: #0f3e99;
   padding: 14px 0px;
 }
 
@@ -83,6 +83,7 @@
   max-height: 100%;
 }
 
+
 .flexColChild--quickviewDetails:first-child {
   overflow-y: auto;
   height: 66% !important;

styles/css/vtex.product-identifier.css

@@ -1,3 +1,29 @@
 .product-identifier--productReference {
   margin-bottom: 1rem;
 }
+
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  text-align: right;
+  position: absolute;
+  right: 0;
+  margin-right: 40px;
+}
+
+.product-identifier--productReference {
+  position: relative;
+  font-family: "Open Sans";
+  text-align: right;
+  display: flex;
+  align-self: flex-end;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: right;
+  color: rgba(146, 146, 146, 0.48);
+}

styles/css/vtex.product-price.css

@@ -1,6 +1,6 @@
 .listPrice {
   color: #727273;
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
   font-size: 1rem;
 }
 
@@ -10,8 +10,12 @@
 }
 
 .sellingPriceValue {
-  font-size: 2.25rem;
+  font-family: "Open Sans";
+  font-style: normal;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
@@ -20,18 +24,19 @@
 }
 
 .savings {
+  display: none;
   font-weight: 500;
-  color: #79B03A;
+  color: #79b03a;
 }
 
 .sellingPriceValue--summary {
   font-size: 1.25rem;
   font-weight: 600;
-  color: #2E2E2E;
+  color: #2e2e2e;
 }
 
 .savings--summary {
-  background: #8BC34A;
+  background: #8bc34a;
   border-radius: 1000px;
   align-items: center;
   display: flex;
@@ -41,21 +46,24 @@
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
+}
+.listPrice {
+  display: none;
 }
 
 .savings-discount--summary {
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
 .listPrice--summary {
   margin-bottom: 0.25rem;
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
 .installments--summary {
@@ -74,6 +82,6 @@
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
   padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,4 @@
+.quantitySelectorTitle {
+  display: none;
+}
+

styles/css/vtex.store-components.css

@@ -9,4 +9,17 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
-}
+}
+
+.productNameContainer {
+  width: 664px;
+  height: 34px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+  margin-right: 40px;
+}

styles/css/vtex.styleguide.css

@@ -0,0 +1,4 @@
+.hideDecorators {
+  border-left: none;
+  border-right: none;
+}

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +1,7 @@
-.html {
+/*.html {
   background-color: red;
-}
+}*/
 
-.html--pdp-breadcrumb {
+/*.html--pdp-breadcrumb {
   background-color: green;
-}
+}*/
-