diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf new file mode 100644 index 0000000..d9a9e27 Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..66acb20 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/react/Installments.tsx b/react/Installments.tsx new file mode 100644 index 0000000..37b09f1 --- /dev/null +++ b/react/Installments.tsx @@ -0,0 +1,3 @@ +import { Installments } from "./components/installments"; + +export default Installments; diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx new file mode 100644 index 0000000..c951523 --- /dev/null +++ b/react/ProductReference.tsx @@ -0,0 +1,3 @@ +import { ProductReference } from "./components/product-reference"; + +export default ProductReference; diff --git a/react/components/installments/index.tsx b/react/components/installments/index.tsx new file mode 100644 index 0000000..0ee84ad --- /dev/null +++ b/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 ( +
+ 4 x de R$ {sellingPrice.toFixed(2).replace(".", ",")} sem juros +
+ ); +} diff --git a/react/components/installments/styles.css b/react/components/installments/styles.css new file mode 100644 index 0000000..5d7eba2 --- /dev/null +++ b/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; +} diff --git a/react/components/product-reference/index.tsx b/react/components/product-reference/index.tsx new file mode 100644 index 0000000..220b937 --- /dev/null +++ b/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 ( +
+ {productContextValue?.product?.productReference} +
+ ); +} diff --git a/react/components/product-reference/styles.css b/react/components/product-reference/styles.css new file mode 100644 index 0000000..1493c49 --- /dev/null +++ b/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); +} diff --git a/react/types/index.d.ts b/react/types/index.d.ts new file mode 100644 index 0000000..cbe652d --- /dev/null +++ b/react/types/index.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c192455..936f99c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/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%", - "rowGap": 7, - "colGap": 7 + "width": "100%", + "rowGap": 0, + "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, - "defaultSize": 665, - "maxHeight": 665 + "showPaginationDots": false, + "thumbnailMaxHeight": 90 } }, "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "width": "100%" }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", + "product-reference", "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" ] }, diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..cf685ef 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,6 +2,12 @@ "example-component": { "component": "Example" }, + "product-reference": { + "component": "ProductReference" + }, + "installments": { + "component": "Installments" + }, "html": { "component": "html", "composition": "children" diff --git a/styles/configs/font-face.css b/styles/configs/font-face.css index 9a1582b..1feca3e 100644 --- a/styles/configs/font-face.css +++ b/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; - src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap') format("opentype"); + font-family: "Open Sans", sans-serif; + src: url('assets/fonts/OpenSans-Light.ttf'); + 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; } diff --git a/styles/configs/style.json b/styles/configs/style.json index ee3264d..9864c85 100644 --- a/styles/configs/style.json +++ b/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", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 51d2038..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,7 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html--pdp-breadcrumb { - padding-left: 40px; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex-store-components-3.css b/styles/css/vtex-store-components-3.css new file mode 100644 index 0000000..3afa73c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 529d592..5ec3b43 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/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; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..b8a2d20 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,27 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.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) { - .flexRowContent--menu-link, - .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-active { + width: 100%; } +.swiper-wrapper .swiper-slide { + width: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..cc015d0 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,22 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; +/* +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 */ +.currencyContainer { font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .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; -} + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..c60db02 100644 --- a/styles/css/vtex.store-components.css +++ b/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; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index 61ddc3b..8b13789 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,10 +1 @@ -.html { - // background-color: red; -} - -.html--pdp-breadcrumb { - padding-left: 40px; -} - - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index cd5d14f..a423a10 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,3 +1,7 @@ +:global(.vtex-breadcrumb-1-x-container){ + padding: 0 40px; +} + .homeIcon, .caretIcon{ display: none; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..7e27fca --- /dev/null +++ b/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%; + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..7870d4e --- /dev/null +++ b/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; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..b70f851 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,38 @@ .newsletter{ background: red; -} \ No newline at end of file +} + +.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; +}