feat: Container da imagem do produto principal finalizado Desktop

react/Installments.tsx

@@ -0,0 +1,3 @@
+import { Installments } from "./components/installments";
+
+export default Installments;

react/ProductReference.tsx

@@ -0,0 +1,3 @@
+import { ProductReference } from "./components/product-reference";
+
+export default ProductReference;

react/components/installments/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react'
+import { useProduct } from 'vtex.product-context'
+import styles from "./styles.css";
+
+export const Installments: FC = () => {
+
+  const productContextValue = useProduct();
+  console.log(productContextValue?.product?.priceRange.sellingPrice)
+
+  let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4;
+
+  return (
+    <div className={styles.containerProductReference}>
+      <span className={styles.sellingPrice}><span className={styles.sellingPriceBold}>4 x</span> de <span className={styles.sellingPriceBold}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</span> sem juros</span>
+    </div>
+  );
+}

react/components/installments/styles.css

@@ -0,0 +1,10 @@
+.sellingPrice{
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+.sellingPriceBold{
+  font-weight: 700;
+}

react/components/product-reference/index.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react'
+import { useProduct } from 'vtex.product-context'
+import styles from "./styles.css";
+
+export const ProductReference: FC = () => {
+
+  const productContextValue = useProduct();
+  console.log(productContextValue)
+
+  return (
+    <div className={styles.containerProductReference}>
+      <span className={styles.productReference}>{productContextValue?.product?.productReference}</span>
+    </div>
+  );
+}

react/components/product-reference/styles.css

@@ -0,0 +1,12 @@
+.containerProductReference{
+  display: flex;
+  justify-content: right;
+}
+
+.productReference{
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: right;
+  color: rgba(146, 146, 146, 0.48);
+}

react/types/index.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

store/blocks/pdp/product.jsonc

@@ -8,7 +8,10 @@
       "product-specification-group#table",
       "shelf.relatedProducts",
       "product-questions-and-answers"
-    ]
+    ],
+    "props": {
+      "paddingLeft": 7
+    }
   },
   "html#breadcrumb": {
     "props": {
@@ -34,6 +37,7 @@
   },
   "condition-layout.product#availability": {
     "props": {
+      "blockClass": "vtex.store-components-3",
       "conditions": [
         {
           "subject": "isProductAvailable"
@@ -42,6 +46,7 @@
       "Then": "flex-layout.row#product-main",
       "Else": "flex-layout.row#product-availability"
     }
+
   },
   "flex-layout.row#product-main": {
     "props": {
@@ -50,9 +55,10 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "container-product-main"
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": ["html#stack", "flex-layout.col#right-col"]
   },
 
   "stack-layout": {
@@ -75,12 +81,12 @@
     }
   },
 
-  "flex-layout.col#stack": {
+  "html#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "46.18%",
+      "width": "100%",
-      "rowGap": 7,
+      "rowGap": 0,
-      "colGap": 7
+      "colGap": 0
     }
   },
   "flex-layout.row#product-image": {
@@ -88,6 +94,7 @@
   },
   "product-images": {
     "props": {
+      "blockClass": "product-images-pdp",
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"
@@ -95,22 +102,21 @@
       "showNavigationArrows": false,
       "displayThumbnailsArrows": false,
       "thumbnailsOrientation": "horizontal",
-      "colGap": 7,
+      "showPaginationDots": false,
-      "defaultSize": 665,
+      "thumbnailMaxHeight": 90
-      "maxHeight": 665
     }
   },
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
-      "rowGap": 0
+      "rowGap": 0,
+      "width": "100%"
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-rating-summary",
+      "product-reference",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "installments",
       "product-separator",
       "product-identifier.product",
       "sku-selector",
@@ -124,9 +130,16 @@
     ]
   },
 
+  "product-reference": {
+    "props": {
+      "blockClass": "title-product-reference"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "marginBottom": 3,
+      "blockClass": "name-product-h1"
     },
     "children": ["vtex.store-components:product-name"]
   },
@@ -154,7 +167,7 @@
       "paddingTop": 7
     },
     "children": [
-      "flex-layout.col#stack",
+      "html#stack",
       "flex-layout.col#right-col-availability"
     ]
   },

store/interfaces.json

@@ -2,6 +2,12 @@
   "example-component": {
     "component": "Example"
   },
+  "product-reference": {
+    "component": "ProductReference"
+  },
+  "installments": {
+    "component": "Installments"
+  },
   "html": {
     "component": "html",
     "composition": "children"

styles/configs/font-face.css

@@ -1,5 +1,25 @@
+
+
 @font-face {
-  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
+  font-family: "Open Sans", sans-serif;
-  font-family: 'Open Sans', sans-serif;
+  src: url('assets/fonts/OpenSans-Light.ttf');
-  src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap') format("opentype");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Open Sans", sans-serif;
+  src: url('assets/fonts/OpenSans-Regular.ttf');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Open Sans", sans-serif;
+  src: url('assets/fonts/OpenSans-SemiBold.ttf');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Open Sans", sans-serif;
+  src: url('assets/fonts/OpenSans-Bold.ttf');
+  font-weight: 700;
 }

styles/configs/style.json

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

styles/css/agenciamagma.store-theme.css

@@ -6,7 +6,4 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
-.html--pdp-breadcrumb {
-  padding-left: 40px;
-}

styles/css/vtex-store-components-3.css

@@ -0,0 +1,14 @@
+/*
+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 */
+.container {
+  margin: 0;
+  padding: 0;
+  max-width: max-content;
+}

styles/css/vtex.breadcrumb.css

@@ -7,6 +7,10 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+:global(.vtex-breadcrumb-1-x-container) {
+  padding: 0 40px;
+}
+
 .homeIcon, .caretIcon {
   display: none;
 }

styles/css/vtex.flex-layout.css

@@ -1,98 +1,27 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.flexRow--container-product-main {
+  padding: 0 40px;
+}
+.flexRow--container-product-main .flexRowContent--container-product-main {
+  display: grid;
+  grid-template-columns: 48.824% 1fr;
+  grid-column-gap: 32px;
+}
+.flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth {
+  padding-right: 0;
 }
 
-@media screen and (min-width: 40em) {
+.swiper-wrapper .swiper-slide-active {
-  .flexRowContent--menu-link,
+  width: 100%;
-  .flexRowContent--main-header {
-    padding: 0 1rem;
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
 }
+.swiper-wrapper .swiper-slide {
+  width: 100%;
+}

styles/css/vtex.product-price.css

@@ -1,79 +1,22 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+/* Grid breakpoints */
-}
+.currencyContainer {
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
-  color: #727273;
+  font-weight: 700;
-  margin-bottom: 1rem;
+  font-size: 16px;
-}
+  line-height: 22px;
-
+  color: #929292;
-.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.store-components.css

@@ -9,4 +9,36 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
+}
+
+.productImage .productImageTag--main {
+  object-fit: fill !important;
+  max-height: max-content !important;
+}
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+}
+
+.productImagesThumb--product-images-pdp {
+  margin-right: 16px;
+  margin-bottom: 0;
+  width: 90px !important;
+}
+.productImagesThumb--product-images-pdp:last-child {
+  margin-right: 0;
+}
+
+.container {
+  margin: 0;
+  padding: 0;
+  max-width: none;
+}
+
+.productNameContainer {
+  text-align: right;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
 }

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

@@ -1,10 +1 @@
-.html {
-  // background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  padding-left: 40px;
-}
-
-
 

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

@@ -1,3 +1,7 @@
+:global(.vtex-breadcrumb-1-x-container){
+  padding: 0 40px;
+}
+
 .homeIcon, .caretIcon{
   display: none;
 }

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

@@ -0,0 +1,21 @@
+.flexRow--container-product-main{
+  padding: 0 40px;
+  .flexRowContent--container-product-main {
+    display: grid;
+    grid-template-columns: 48.824% 1fr;
+    grid-column-gap: 32px;
+    .stretchChildrenWidth{
+        padding-right: 0;
+    }
+   }
+}
+
+.swiper-wrapper{
+  .swiper-slide-active{
+    width: 100%;
+  }
+
+  .swiper-slide{
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,13 @@
+.currencyContainer{
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
+.installments{
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

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

@@ -1,3 +1,38 @@
 .newsletter{
     background: red;
-}
+}
+
+.productImage{
+  .productImageTag--main{
+    object-fit: fill !important;
+    max-height: max-content !important;
+  }
+}
+
+
+.carouselGaleryThumbs{
+  margin-top: 16px;
+}
+
+.productImagesThumb--product-images-pdp{
+  margin-right: 16px;
+  margin-bottom: 0;
+  width: 90px !important;
+  &:last-child{
+    margin-right: 0;
+  }
+}
+
+.container{
+    margin: 0;
+    padding: 0;
+    max-width: none;
+}
+
+.productNameContainer{
+  text-align: right;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}