diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/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", diff --git a/react/Pix.ts b/react/Pix.ts new file mode 100644 index 0000000..06f972d --- /dev/null +++ b/react/Pix.ts @@ -0,0 +1,4 @@ +import Pix from "./components/Pix/Pix"; + + +export default Pix; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..86da4df 100644 --- a/react/components/Html/index.tsx +++ b/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 = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..0a7c193 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,18 @@ +[class*="html--pix"] { + display: flex; + align-items: center; + gap: 26px; + } + + [class*="html--cart-button"] { + display: flex; + gap: 10px; + + } + + @media screen and (max-width: 375px) { + + [class*="html--cart-button"] { + flex-direction: column; + } + } diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..db4b817 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const Pix = () => { + const productContextValue = useProduct()?.product?.priceRange?.sellingPrice + ?.highPrice; + + return ( + <> + + Pix +
+

+ {`R$ ${(productContextValue! - productContextValue! * 0.1) + .toFixed(2) + .replace(".", ",")}` + } +

+

+ 10% de desconto +

+
+ + + + + ); +}; + +export default Pix; + + diff --git a/react/components/Pix/pix-ramon.svg b/react/components/Pix/pix-ramon.svg new file mode 100644 index 0000000..a132f66 --- /dev/null +++ b/react/components/Pix/pix-ramon.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..0811152 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -3,7 +3,7 @@ "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] + "children": ["html#add-to-cart-container"] }, "product-assembly-options": { "children": [ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..eebff39 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,10 +3,17 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + // "flex-layout.row#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + "html#product-description", + "rich-text#carrossel-message", + "list-context.product-list#carousel-list", + // "product-summary.shelf", + // "list-context.product-list", + // "slider-layout", + // "shelf.relatedProducts", + "newsletter#footer", "product-questions-and-answers" ] }, @@ -45,12 +52,7 @@ }, "flex-layout.row#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "blockClass": "product-main" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -78,51 +80,130 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", "rowGap": 0 } }, "flex-layout.row#product-image": { + "children": ["html#product-image"] + }, + + "html#product-image": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "showNavigationArrows": false, + "blockClass": "produto-carrossel" } }, + + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass": "infos" }, "children": [ - "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", + "html#product-name", + // "product-rating-summary", + + // "flex-layout.row#list-price-savings", + "html#price", + "html#installments", + "html#pix", + // "product-separator", + "html#sku-selector", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "html#add-to-cart-container", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#pix": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["Pix"] + }, + + "html#price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + + "html#add-to-cart-container": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "cart-button" + }, + "children": ["html#product-quantity", "add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity", + "blockClass": "cart-button" + }, + "children": ["product-quantity"] + }, + + + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] + }, + "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "identifier" }, - "children": ["vtex.store-components:product-name"] + "children": ["vtex.store-components:product-name", "html#codigo"] + }, + + "html#codigo": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] }, "sku-selector": { @@ -132,21 +213,7 @@ } }, - "flex-layout.row#buy-button": { - "props": { - "marginTop": 4, - "marginBottom": 7 - }, - "children": ["add-to-cart-button"] - }, - "flex-layout.row#product-availability": { - "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 - }, "children": [ "flex-layout.col#stack", "flex-layout.col#right-col-availability" @@ -181,5 +248,196 @@ "Pinterest": true } } + }, + + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#product"] + }, + + "tab-layout#product":{ + "children": [ + "tab-list#product", + "tab-content#product" + ], + "props": { + "blockClass": "product", + "defaultActiveTabId": "product1" + } + }, + + "tab-list#product": { + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] + }, + "tab-list.item#product1": { + "props": { + "tabId": "product1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#product2": { + "props": { + "tabId": "product2", + "label": "Descrição" + } + }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição" + } + }, + + "tab-content#product": { + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] + }, + "tab-content.item#product1": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product1" + } + }, + + "tab-content.item#product2": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product2" + } + }, + "tab-content.item#product3": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product3" + } + }, + "tab-content.item#product4": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product4" + } + }, + "tab-content.item#product5": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product5" + } + }, + + "product-images#description": { + "props": { + "displayMode": "first-image", + "blockClass": "description-imagem", + "zoomFactor": 0 + } + }, + + + "rich-text#carrossel-message": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você tambem pode gostar:", + "blockClass": "carrossel-message" + } + }, + + + + + "list-context.product-list#carousel-list": { + "blocks": ["product-summary.shelf#carousel-shelf"], + "children": ["html#product-summary-list"] + }, + + "product-summary.shelf#carousel-shelf": { + "children": [ + "html#vtex-product-summary" + ] + }, + + "html#vtex-product-summary": { + "props": { + "testId": "vtex-product-summary" + }, + "children": ["product-summary-image", + "product-summary-name", + "product-summary-space", + "product-list-price", + "product-selling-price"] + }, + + + + "html#product-summary-list": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#carousel"] + }, + + + "slider-layout#carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, + + + "newsletter#footer": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } + + } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..f91d537 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + "Pix": { + "component": "Pix" } } + diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..fb924c3 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,36 @@ +/* +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 { + padding: 0 40px; +} + +.homeLink .homeIcon { + display: none; +} +.homeLink::before { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link--1, +.link--2, +.link--3 { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..638c999 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,59 @@ -.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 */ +.stretchChildrenWidth { + padding: 0; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; +.flexCol--infos { + padding-left: 32px; +} + +.flexRowContent { + margin: 0; + padding: 0; +} +@media screen and (max-width: 1024px) { + .flexRowContent .stretchChildrenWidth { + width: initial; } } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; +@media screen and (max-width: 1024px) { + .flexRowContent--product-main { + flex-direction: column; } } -.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 { +.flexRowContent--identifier { + text-align: end; display: flex; - max-height: 100%; + flex-direction: column; + align-items: end; +} +@media screen and (max-width: 1024px) { + .flexRowContent--identifier { + text-align: start; + } } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.flexRow--product-main { + padding: 0 40px; +} +@media screen and (max-width: 1024px) { + .flexRow--product-main .stretchChildrenWidth { + width: 100% !important; + padding-bottom: 24px; + } } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +.flexColChild--infos :global(.vtex-button) { + background-color: black !important; + border: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..c37b733 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,12 @@ -.product-identifier--productReference { - margin-bottom: 1rem; -} +/* +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 */ +.product-identifier { + text-align: end; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..e502035 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,17 @@ +/* +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; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; + display: block; } .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; -} + font-weight: bold; + font-size: 25px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..4c63623 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,26 @@ +/* +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 */ +.quantitySelectorContainer { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + border-left: none; + border-right: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + background-color: #fff; + color: #000; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + color: #000; +} \ No newline at end of file diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.product-sumary.css similarity index 69% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.product-sumary.css index 5e37ba5..9b58164 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.product-sumary.css @@ -7,10 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; +.element { + align-items: center; + text-align: center; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..9db2684 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,21 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { +/* +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 */ +.element { + align-items: center; text-align: center; } -.image { - border-radius: 0.25rem; +.nameContainer { + padding: 16px; } + +.imageNormal { + height: 314px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..e484bd9 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22"); \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..ef37916 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,30 @@ +/* +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 */ .sliderLayoutContainer { - justify-content: center; + padding: 36px 40px; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.slide { + background-color: #FFFFFF; } -.sliderTrackContainer { - max-width: 100%; +.paginationDot { + background-color: #000000; } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.paginationDot--carousel--isActive { + background-color: #Fff; + border: 0.5px solid #000000; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.sliderArrows--carousel { + padding: 0; + margin: 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..80f58d7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,366 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + display: contents; +} + +.productImagesGallerySlide--produto-carrossel { + width: 100% !important; +} + +.productNameContainer { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #292929; +} + +.productNameContainer--quickview { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: left; + padding-bottom: 8px; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; +} + +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} + +.skuSelectorItem { + height: 50px; + width: 50px; +} + +.shippingContainer { + display: flex; + position: relative; +} + +.shippingContainer :global(.vtex-button) { + background-color: #000; + width: 70px; + height: 45px; + color: #fff; + margin-top: 23px; + margin-left: -4px; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} + +.shippingContainer :global(.vtex-input__label)::before { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0px; +} + +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + width: 280px; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: 0px; + top: 25px; +} +@media screen and (max-width: 1120px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -20px; + } +} +@media screen and (max-width: 1100px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -30px; + } +} +@media screen and (max-width: 1035px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -35px; + } +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: 0px; + } +} +@media screen and (max-width: 600px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: inherit; + } +} + +.shareContainer { + display: none; +} + +.shippingTable { + border: none; + font-size: 14px; + font-family: "Open Sans", sans-serif; + text-transform: uppercase; +} + +.shippingTable .shippingTableRadioBtn { + display: none; +} + +.shippingTable .shippingTableHead { + display: contents; +} + +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans", sans-serif; + color: #afafaf; +} + +.shippingTable .shippingTableRow { + text-align: left; +} + +.shippingTable .shippingTableRadioBtn { + display: none; +} + +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHeadDeliveryPrice { + font-weight: 400; +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} +@media screen and (max-width: 1024px) { + .productDescriptionContainer { + width: 100%; + } +} + +.carouselGaleryThumbs { + height: 200px; +} +@media screen and (max-width: 1024px) { + .carouselGaleryThumbs { + display: block; + } +} + +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} + +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; + margin: 2px; +} + +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} + +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgb(213, 213, 213) 48%, currentColor 48%, currentColor 52%, transparent 52%); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0px; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: #989898; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} + +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: #B9B9B9; +} + +.productImageTag--produto-carrossel--main { + max-height: inherit !important; +} + +.productImageTag--description-imagem { + max-height: 100% !important; +} + +.content--description-imagem { + width: 45%; +} +@media screen and (max-width: 1024px) { + .content--description-imagem { + width: 100%; + } +} + .newsletter { - background: red; + background: #000; + color: #fff; + margin-top: 50px; + border-bottom: 2px solid #929292; +} + +.newsletter .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; +} + +.newsletter .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.newsletter .label { + display: flex; + flex-direction: column; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} + +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: #929292; + margin: 16px; +} + +.newsletter .inputGroup { + width: 774px; +} +@media screen and (max-width: 1024px) { + .newsletter .inputGroup { + display: flex; + width: 100%; + } +} + +.newsletter .inputGroup :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid #929292; + border-radius: 0; +} + +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: #000; +} + +.newsletter .inputGroup .buttonContainer { + padding: 0; +} + +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: #000; + border: none; + border-bottom: 2px solid #fff; + border-radius: 0; +} + +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: #000; + border-bottom: 4px solid #fff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..2a45ac9 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,67 @@ +/* +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 { + padding: 0 40px; +} + +.listContainer { + align-items: center; + margin-bottom: 32px; + justify-content: space-around; + border-bottom: 1px solid #BFBFBF; +} +@media screen and (max-width: 1024px) { + .listContainer { + flex-direction: column; + align-content: baseline; + border-bottom: none; + } +} + +.listItem { + margin: 0; + padding: 0; +} +@media screen and (max-width: 1024px) { + .listItem { + width: 100%; + } +} +.listItem :global(.vtex-button) { + border-radius: 0; + background-color: #FFFFFF; + color: #BFBFBF; +} +@media screen and (max-width: 1024px) { + .listItem :global(.vtex-button) { + display: flex; + width: 100%; + } +} + +.listItemActive :global(.vtex-button) { + border: 0; + border-bottom: 1px solid #000000 !important; +} +@media screen and (max-width: 1024px) { + .listItemActive :global(.vtex-button) { + border-bottom: none !important; + } +} + +.contentItem { + display: flex; + margin-bottom: 16px; +} +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column; + } +} \ 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 deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..cbd2cd5 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,32 @@ +.container{ + padding: 0 40px; +} + +.homeLink { + .homeIcon { + display: none; + } + + &::before { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; + } +} + +.link--1, +.link--2, +.link--3 { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; +} 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..1a90b4d --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,58 @@ + +.stretchChildrenWidth{ + padding: 0; +} + +.flexCol--infos{ + padding-left: 32px; +} + +.flexRowContent{ + margin: 0; + padding: 0; + + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: initial; + } + } +} + +.flexRowContent--product-main{ + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + + +.flexRowContent--identifier{ + text-align: end; + display: flex; + flex-direction: column; + align-items: end; + + @media screen and (max-width: 1024px) { + text-align: start; + } +} + +.flexRow--product-main{ + padding: 0 40px; + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: 100% !important; + padding-bottom: 24px; + } + } +} + +.flexColChild--infos :global(.vtex-button){ + background-color: black !important; + border: none; +} + + + + 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..7cb544e --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,10 @@ +.listPrice { + display: block; +} + + +.sellingPriceValue{ + font-weight: bold; + font-size: 25px; +} + diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..c8ab155 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,24 @@ +.quantitySelectorContainer { + margin: 0; + .quantitySelectorTitle { + display: none; + } + .quantitySelectorStepper :global(.vtex-numeric-stepper__input){ + border-left: none; + border-right: none; + } + + .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + background-color: #fff; + color: #000; + } + + .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + color: #000; + } + + + } + + + diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..a0a8cc7 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,13 @@ + +.element{ + align-items: center; + text-align: center; +} + +.nameContainer{ + padding: 16px; +} + +.imageNormal{ + height: 314px !important; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..3c1295a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,2 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22"); + diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..4047b08 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,24 @@ + +.sliderLayoutContainer{ + padding: 36px 40px; +} + +.slide{ + background-color: #FFFFFF; +} + +.paginationDot{ + background-color: #000000; +} + +.paginationDot--carousel--isActive{ + background-color: #Fff; + border: 0.5px solid #000000; +} + +.sliderArrows--carousel { + padding: 0; + margin: 40px; + +} + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..79c06d8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,321 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.container{ + display: contents; +} + +.productImagesGallerySlide--produto-carrossel{ + width: 100% !important; +} + +.productNameContainer { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #292929; +} + +.productNameContainer--quickview { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; + @media screen and (max-width: 1024px) { + text-align: left; + padding-bottom: 8px; + } + + +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} + +.skuSelectorItem { + height: 50px; + width: 50px; +} + +.shippingContainer { + display: flex; + position: relative; +} +.shippingContainer :global(.vtex-button) { + background-color: #000; + width: 70px; + height: 45px; + color: #fff; + margin-top: 23px; + margin-left: -4px; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} + +.shippingContainer :global(.vtex-input__label)::before { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + width: 280px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: 0px; + top: 25px; + @media screen and (max-width: 1120px) { + right: -20px; + } + @media screen and (max-width: 1100px) { + right: -30px; + } + @media screen and (max-width: 1035px) { + right: -35px; + } + @media screen and (max-width: 1024px) { + right: 0px; + } + @media screen and (max-width: 600px) { + position: inherit; + } +} + +.shareContainer { + display: none; +} + +.shippingTable { + border: none; + font-size: 14px; + font-family: "Open Sans", sans-serif; + text-transform: uppercase; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHead { + display: contents; +} +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans", sans-serif; + color: #afafaf; +} +.shippingTable .shippingTableRow { + text-align: left; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHeadDeliveryPrice { + font-weight: 400; +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; + + @media screen and (max-width: 1024px) { + width: 100%; + } +} + +.carouselGaleryThumbs { + height: 200px; + @media screen and (max-width: 1024px) { + display: block; + } + +} +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; + margin: 2px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgb(213, 213, 213) 48%, currentColor 48%, currentColor 52%, transparent 52%); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: #989898; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: #B9B9B9; +} + +.productImageTag--produto-carrossel--main{ + max-height: inherit !important; +} + + +.productImageTag--description-imagem{ + max-height: 100% !important; +} + +.content--description-imagem{ + width: 45%; + @media screen and (max-width: 1024px) { + width: 100%; + } + +} + +.newsletter { + background: #000; + color: #fff; + margin-top: 50px; + border-bottom: 2px solid #929292; +} +.newsletter .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; +} +.newsletter .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.newsletter .label { + display: flex; + flex-direction: column; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: #929292; + margin: 16px; +} +.newsletter .inputGroup { + width: 774px; + @media screen and (max-width: 1024px) { + display: flex; + width: 100%; + } +} +.newsletter .inputGroup :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid #929292; + border-radius: 0; +} +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: #000; +} +.newsletter .inputGroup .buttonContainer { + padding: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: #000; + border: none; + border-bottom: 2px solid #fff; + border-radius: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: #000; + border-bottom: 4px solid #fff; +} + + diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..692ffbe --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,59 @@ +.container{ + padding: 0 40px; +} + + + +.listContainer{ + align-items: center; + margin-bottom: 32px; + justify-content: space-around; + border-bottom: 1px solid #BFBFBF; + + @media screen and (max-width: 1024px) { + flex-direction: column; + align-content: baseline; + border-bottom: none; + } +} + +.listItem{ + margin: 0; + padding: 0; + @media screen and (max-width: 1024px) { + width: 100%; + } + + :global(.vtex-button){ + border-radius: 0; + background-color: #FFFFFF; + color: #BFBFBF; + @media screen and (max-width: 1024px) { + display: flex; + width: 100%; + } + + } +} + +.listItemActive :global(.vtex-button) { + border: 0; + border-bottom: 1px solid #000000 !important; + @media screen and (max-width: 1024px) { + border-bottom: none !important; + } + } + + +.contentItem{ + display: flex; + margin-bottom: 16px; + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + + + + +