react/components/Html/index.tsx

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

react/components/Html/styles.css

@@ -0,0 +1,12 @@
+[class*="html--pix"] {
+  display: flex;
+ }
+
+ [class*="html--cart-button"] {
+  display: flex;
+  gap: 10px;
+
+ }  vtex-button{
+  background-color: black;
+ }
+

react/components/Pix/Pix.tsx

@@ -7,7 +7,7 @@ const Pix = () => {
 
   return (
     <>
-       <div>
+
                 <img src="https://agenciamagma.vtexassets.com/arquivos/pix-ramon.svg" alt="Pix" />
                 <div>
                 <p>
@@ -20,7 +20,7 @@ const Pix = () => {
                     10% de desconto
                 </p>
                 </div>
-            </div>
+ 
 
 
     </>

store/blocks/pdp/product.jsonc

@@ -156,7 +156,8 @@
 
   "html#pix": {
     "props": {
-      "testId": "pix-price"
+      "testId": "pix-price",
+      "blockClass": "pix"
     },
     "children": ["Pix"]
   },
@@ -221,14 +222,6 @@
     }
   },
 
-  // "flex-layout.row#buy-button": {
-  //   "props": {
-  //     "marginTop": 4,
-  //     "marginBottom": 7
-  //   },
-  //   "children": ["product-quantity", "add-to-cart-button"]
-  // },
-
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,

styles/css/vtex.flex-layout.css

@@ -17,7 +17,12 @@
 }
 
 .flexRowContent--identifier {
+  text-align: end;
   display: flex;
   flex-direction: column;
   align-items: end;
 }
+
+.flexRow--product-main {
+  padding: 0 40px;
+}

styles/css/vtex.product-price.css

@@ -1,79 +1,12 @@
+/*
+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 */
 .listPrice {
-  color: #727273;
+  display: block;
-  margin-bottom: .25rem;
-  font-size: 1rem;
-}
-
-.sellingPrice {
-  color: #3f3f40;
-  font-size: 1.25rem;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
-  font-weight: 700;
-}
-
-.installments {
-  color: #727273;
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-summary.css

@@ -12,6 +12,10 @@
   text-align: center;
 }
 
-.imageContainer {
+.imageWrapper {
-  height: 60%;
+  height: 70%;
+}
+
+.nameContainer {
+  padding: 16px;
 }

styles/css/vtex.slider-layout.css

@@ -7,11 +7,6 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.slideChildrenContainer {
-  text-align: center;
-  margin-bottom: 67px;
-}
-
 .sliderLayoutContainer {
   padding: 0 40px;
 }

styles/css/vtex.store-components.css

@@ -7,6 +7,10 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.productImagesGallerySlide--produto-carrossel {
+  width: 100% !important;
+}
+
 .productNameContainer {
   font-family: "Open Sans", sans-serif;
   font-style: normal;
@@ -97,8 +101,6 @@
 
 .shippingTable {
   border: none;
-  bottom: 110px;
-  position: relative;
   font-size: 14px;
   font-family: "Open Sans", sans-serif;
   text-transform: uppercase;
@@ -229,14 +231,14 @@
   color: #B9B9B9;
 }
 
-.productImagesContainer {
-  width: 45%;
-}
-
 .productImageTag--description-imagem {
   max-height: 100% !important;
 }
 
+.content--description-imagem {
+  width: 45%;
+}
+
 .newsletter {
   background: #000;
   color: #fff;

styles/css/vtex.tab-layout.css

@@ -13,7 +13,7 @@
 
 .listContainer {
   align-items: center;
-  margin-bottom: 64px;
+  margin-bottom: 32px;
   justify-content: space-around;
   border-bottom: 1px solid #BFBFBF;
 }

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

@@ -10,8 +10,17 @@
 }
 
 .flexRowContent--identifier{
+  text-align: end;
   display: flex;
   flex-direction: column;
   align-items: end;
 
 }
+
+.flexRow--product-main{
+  padding: 0 40px;
+}
+
+
+
+

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

@@ -0,0 +1,3 @@
+.listPrice {
+  display: block;
+}

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

@@ -4,7 +4,10 @@
   text-align: center;
 }
 
-.imageContainer{
+.imageWrapper{
-  height: 60%;
+  height: 70%;
 }
 
+.nameContainer{
+  padding: 16px;
+}

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

@@ -1,9 +1,4 @@
 
-.slideChildrenContainer{
-  text-align: center;
-  margin-bottom: 67px;
-}
-
 .sliderLayoutContainer{
   padding: 0 40px;
 }

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

@@ -1,3 +1,6 @@
+.productImagesGallerySlide--produto-carrossel{
+  width: 100% !important;
+}
 
 .productNameContainer {
   font-family: "Open Sans", sans-serif;
@@ -49,6 +52,7 @@
   margin-top: 23px;
   margin-left: -4px;
 }
+
 .shippingContainer :global(.vtex-input__label) {
   font-size: 0px;
 }
@@ -81,8 +85,6 @@
 
 .shippingTable {
   border: none;
-  bottom: 110px;
-  position: relative;
   font-size: 14px;
   font-family: "Open Sans", sans-serif;
   text-transform: uppercase;
@@ -130,6 +132,7 @@
   border-radius: 8px;
 }
 
+
 .discountInsideContainer,
 .installmentsPrice {
   display: none;
@@ -199,15 +202,15 @@
   color: #B9B9B9;
 }
 
-.productImagesContainer{
-  width: 45%;
-}
 
 
 .productImageTag--description-imagem{
   max-height: 100% !important;
 }
 
+.content--description-imagem{
+  width: 45%;
+}
 
 .newsletter {
   background: #000;

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

@@ -2,9 +2,11 @@
   padding: 0 40px;
 }
 
+
+
 .listContainer{
   align-items: center;
-  margin-bottom: 64px;
+  margin-bottom: 32px;
   justify-content: space-around;
   border-bottom: 1px solid #BFBFBF;
 }