diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a4f1b1a..5278ee3 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -61,6 +61,14 @@ } } +/* + PRATELEIRA DE PRODUTOS +*/ +[class*="html--product-summary"]{ + display: flex; + flex-direction: column; +} + /* NEWSLETTER */ diff --git a/react/components/PixDiscount/PixDiscount.tsx b/react/components/PixDiscount/PixDiscount.tsx index 0387cb5..21c5d9b 100644 --- a/react/components/PixDiscount/PixDiscount.tsx +++ b/react/components/PixDiscount/PixDiscount.tsx @@ -1,9 +1,14 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useProduct } from "vtex.product-context"; import styles from "./styles.module.css"; const PixDiscount = () => { + useEffect(() => { + const inputCep = document.querySelector(".vtex-address-form-4-x-input"); + inputCep?.setAttribute("placeholder", "Digite seu CEP"); + }); + const productContextValue = useProduct(); const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; const discount = (Number(productPrice) * 10) / 100; @@ -19,7 +24,7 @@ const PixDiscount = () => {
-

R$ {totalDiscount.toFixed(2)}

+

R$ {totalDiscount.toFixed(2).replace(".", ",")}

10% de desconto

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 9ae6b63..66ef4be 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,8 +3,8 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#description", - "list-context.product-list#prateleira", + "html#description", + "html#teste", "flex-layout.row#newsletter-container" ] }, @@ -99,14 +99,15 @@ /* DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#DESCRIPTION) */ -"html#container-description": { - "props": { - "tag": "div", - "blockClass": "container-description" + "html#container-description": { + "props": { + "testId": "product-description", + "tag": "div", + "blockClass": "container-description" + }, + "children": ["flex-layout.row#product-description"] }, - "children": ["flex-layout.row#product-description"] -}, "flex-layout.row#product-description": { "props": { @@ -121,13 +122,6 @@ "testId": "product-images", "blockClass": "image-description" }, - "children": ["html#product-image"] - }, - - "html#product-image":{ - "props": { - "testId": "product-images" - }, "children": ["product-images#description"] }, @@ -138,16 +132,16 @@ } }, - "image#product": { - "props": { - "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" - } - }, - "flex-layout.row#description": { "children": ["product-description"] }, + "html#description":{ + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"], @@ -241,9 +235,16 @@ /* PRATELEIRA DE PRODUTOS QUE QUE O CLIENTE PODE GOSTAR */ + "html#teste":{ + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#prateleira"] + }, + "list-context.product-list#prateleira": { "blocks": ["product-summary.shelf#prateleira"], - "children": ["rich-text#title-prateleira","slider-layout#prateleira"] + "children": ["rich-text#title-prateleira","html#vtex-product-summary"] }, "product-summary.shelf#prateleira": { @@ -252,20 +253,28 @@ "html#product-summary": { "props":{ - "testId": "vtex-product-summary", + "testId": "product-summary-list", "blockClass": "product-summary" }, "children": [ - "stack-layout#prodsum", + "product-summary-image#image-prateleira", "product-summary-name#name-prateleira", "product-list-price#promotion-prateleira", "product-selling-price#price-prateleira" ] }, + "product-summary-image#image-prateleira": { + "props":{ + "showBadge": false, + "blockClass": "image-prateleira" + } + }, + "product-summary-name#name-prateleira": { "props": { "blockClass": "name-prateleira" + } }, @@ -290,6 +299,13 @@ } }, + "html#vtex-product-summary":{ + "props":{ + "testId": "vtex-product-summary" + }, + "children": ["slider-layout#prateleira"] + }, + "slider-layout#prateleira": { "props": { "itemsPerPage": { @@ -298,7 +314,6 @@ "phone": 2 }, "infinite": true, - "fullWidth": false, "blockClass": "prateleira" } }, @@ -376,18 +391,25 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "flex-layout.row#selling-price", - "product-installments#parcelaProduct", + "html#product-name", + "html#product-code", + "html#product-price", + "html#parcelaProdutct", "html#pix-discount", "availability-subscriber", "html#sku-selector", "html#buy-button", - "shipping-simulator" + "html#shipping-simulator" ] }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -395,6 +417,35 @@ "children": ["vtex.store-components:product-name"] }, + "html#product-code":{ + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#product-price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + "flex-layout.row#product-price": { + "props": { + "blockClass": "selling-price" + }, + "children": [ + "product-selling-price" + ] + }, + + "html#parcelaProdutct":{ + "props": { + "testId": "product-installments" + }, + "children": ["product-installments#parcelaProduct"] + }, + "product-installments#parcelaProduct": { "props": { "installmentsCriteria": "max-quantity-without-interest", @@ -421,8 +472,8 @@ "sku-selector": { "props": { "blockClass": "sku-selector", - "imageHeight": 40, - "imageWidth": 40, + "imageHeight": 48, + "imageWidth": 48, "variationsSpacing": 3, "showValueNameForImageVariation": true } @@ -431,7 +482,7 @@ "html#buy-button": { "props": { "tag": "div", - "testId": "buy-button", + "testId": "add-to-cart-button", "blockClass": "buy-button" }, "children": ["html#product-quantity","add-to-cart-button"] @@ -445,6 +496,20 @@ "children": ["product-quantity"] }, + "html#shipping-simulator":{ + "props": { + "testId": "shipping-simulator" + }, + "children": ["flex-layout.col#shipping-simulator"] + }, + + "flex-layout.col#shipping-simulator":{ + "props":{ + "blockClass": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + /* ASSINANTES DE PRODUTOS INDISPONIVEIS */ @@ -465,7 +530,7 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", + "html#product-code", "flex-layout.row#availability", "sku-selector" ] diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 9927dfc..887651e 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,4 +1,10 @@ { + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, "flex-layout.row#selling-price": { "props": { "blockClass": "selling-price", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f72126c..ab160a8 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -73,7 +73,7 @@ } } .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { - width: 375px; + width: 399px; } @media only screen and (max-width: 1024px) { .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { @@ -99,6 +99,12 @@ align-items: center; width: 100%; background-color: #000000; + margin-top: 64px; +} +@media only screen and (max-width: 1024px) { + .flexRow--newsletter-container { + margin-top: 34px; + } } .flexRow--newsletter-container .flexRowContent--newsletter-container { display: flex; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 5dc687b..fab6fdb 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -47,17 +47,59 @@ } /* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */ -.listPrice { - font-family: "Opens Sans", sans-serif; - line-height: 19px; - color: #bababa; +.listPrice--promotion-prateleira { + padding: 0 16px 8px 16px; + font-weight: 400; font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; } -.listPrice .listPriceValue::before { +@media only screen and (max-width: 1024px) { + .listPrice--promotion-prateleira { + padding: 0 8px 8px 8px; + font-size: 12px; + line-height: 16px; + } +} +.listPrice--promotion-prateleira .listPriceValue::before { content: "de "; font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #bababa; } -.listPrice .listPriceValue::after { +@media only screen and (max-width: 1024px) { + .listPrice--promotion-prateleira .listPriceValue::before { + font-size: 12px; + line-height: 16px; + } +} +.listPrice--promotion-prateleira .listPriceValue::after { content: " por"; font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #bababa; +} +@media only screen and (max-width: 1024px) { + .listPrice--promotion-prateleira .listPriceValue::after { + font-size: 12px; + line-height: 16px; + } +} + +.sellingPrice--price-prateleira { + padding: 0 16px; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +@media only screen and (max-width: 1024px) { + .sellingPrice--price-prateleira { + padding: 0 8px; + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..05173a4 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,68 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 */ +/* + PRATELEIRA DE PRODUTO +*/ +.containerNormal { + max-width: unset !important; } - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.containerNormal .element { + padding: 0; } - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +.containerNormal .element .imageContainer--image-prateleira { + display: flex; + height: 314.4px; } - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; +@media only screen and (min-width: 1921px) { + .containerNormal .element .imageContainer--image-prateleira { + height: 434.4px; } } - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +@media only screen and (max-width: 1024px) { + .containerNormal .element .imageContainer--image-prateleira { + height: 291.21px; + } +} +@media only screen and (max-width: 768px) { + .containerNormal .element .imageContainer--image-prateleira { + height: 124.81px; + } +} +.containerNormal .element .imageContainer--image-prateleira .imageNormal { + height: 100%; + width: 100%; + object-fit: contain; + max-height: unset !important; } -.brandName { - font-weight: 600; +.nameContainer--name-prateleira { + padding: 16px 16px 8px 16px; + display: flex; + justify-content: center; + align-items: center; +} +@media only screen and (max-width: 1024px) { + .nameContainer--name-prateleira { + padding: 16px 8px 8px 8px; + } +} +.nameContainer--name-prateleira .productNameContainer--name-prateleira { + font-weight: 400; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { + line-height: 25px; text-align: center; + color: #000000; } - -.image { - border-radius: 0.25rem; -} +@media only screen and (max-width: 1024px) { + .nameContainer--name-prateleira .productNameContainer--name-prateleira { + font-size: 14px; + line-height: 19px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..a9810ba 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,80 @@ -.sliderLayoutContainer { - justify-content: center; +/* +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--prateleira { + padding-left: 40px !important; + padding-right: 40px !important; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + padding: 0 19.2px 49px 19.2px; } - -.sliderTrackContainer { - max-width: 100%; +@media only screen and (max-width: 1024px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + padding: 0 17.2px 41px 17.2px; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media only screen and (max-width: 768px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + padding: 0 14.7px 33px 14.7px; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira { + margin: 0 8px; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +@media only screen and (max-width: 1024px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira { + margin: 0 6px; + } } +@media only screen and (max-width: 768px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira { + margin: 0 4px; + } +} +@media only screen and (max-width: 768px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slideChildrenContainer--prateleira { + height: 273.8px; + width: 100%; + } +} +.sliderLayoutContainer--prateleira .paginationDotsContainer--prateleira { + display: flex; + align-items: center; +} +.sliderLayoutContainer--prateleira .paginationDotsContainer--prateleira .paginationDot--prateleira { + background-color: #000000; +} +.sliderLayoutContainer--prateleira .paginationDotsContainer--prateleira .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background-color: #fff; + border: 0.5px solid #000000; +} +.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira { + visibility: hidden; + margin: 0 0 0 40px; + padding: 0; + height: 29.6px; + width: 11.21px; +} +.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png"); +} +.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira { + visibility: hidden; + margin: 0 40px 0 0; + padding: 0; + height: 29.6px; + width: 11.21px; +} +.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png"); +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 61fb3af..f0cf8df 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -74,12 +74,11 @@ .skuSelectorContainer { display: flex; flex-direction: column-reverse; + /* COR */ + /* TAMANHO */ } -.skuSelectorContainer .skuSelectorName { - font-size: 0; -} -.skuSelectorContainer .skuSelectorNameSeparator { - font-size: 0; +.skuSelectorContainer .skuSelectorSubcontainer--cor { + margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor::before { content: "OUTRAS CORES:"; @@ -89,6 +88,38 @@ font-size: 14px; color: #929292; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 8px 0 0 0; + height: 48px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector { + margin: 0 16px 0 0; + height: 48px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector { + width: 48px; + height: 48px; + border: 1px solid #b9b9b9; + border-radius: 24px; + top: 0; + left: 0; + right: 0; + z-index: 2; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorInternalBox--sku-selector { + width: 48px; + height: 48px; + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector { + border: 2px solid #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { content: "OUTROS TAMANHOS:"; font-family: "Open Sans", sans-serif; @@ -97,40 +128,57 @@ font-size: 14px; color: #929292; } -.skuSelectorContainer .skuSelectorTextContainer { - display: none; +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 8px 0 0 0; + height: 40px; } -.skuSelectorContainer .skuSelectorOptionsList { - margin-top: 8px; - margin-left: 0; +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; } -.skuSelectorContainer .skuSelectorSelectorImageValue { - font-size: 0; -} - -/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ -.skuSelectorOptionsList .skuSelectorItem { +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector { + margin: 0 16px 0 0; width: 40px; height: 40px; } -.skuSelectorOptionsList .skuSelectorItem:first-child { - margin-left: 0; -} -.skuSelectorOptionsList .skuSelectorItem .frameAround { +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector { + width: 40px; + height: 40px; + border: 1px solid #989898; border-radius: 50%; - border-color: #000000; - color: #000000; + top: 0; + left: 0; + right: 0; + z-index: 2; } -.skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue { - max-width: 100%; +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector { + width: 40px; + height: 40px; + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector .skuSelectorItemTextValue { + height: 19px; + width: 17px; + padding: 0; display: flex; justify-content: center; - color: #000000; + align-items: center; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); } -.skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { - border-radius: 50%; +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector { + border: 2px solid #000000; } -.skuSelectorOptionsList .diagonalCross { +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue { + color: #000000 !important; +} +.skuSelectorContainer .skuSelectorTextContainer { + display: none; +} + +/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ +.diagonalCross { margin: 5px; background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%); transform: rotate(90deg); @@ -168,7 +216,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } .subscriberContainer .form :global(.vtex-store-components-3-x-content) { display: block; - width: 374.65px; + width: 399px; margin-top: 16px; } @media only screen and (max-width: 1024px) { @@ -178,7 +226,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } } .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { - width: 182.46px; + width: 195.5px; margin-right: 10.08px; margin-bottom: 15px; } @@ -192,7 +240,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ border-radius: 0; } .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { - padding: 0 14px; + padding: 12px 14px; font-size: 12px; line-height: 28px; color: #929292; @@ -202,9 +250,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ left: 51%; top: 0%; border-radius: 0; - width: 182.46px; + width: 195.5px; font-weight: 400; - margin-bottom: 15px; + margin: 0; } @media only screen and (max-width: 1024px) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { @@ -218,7 +266,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ border-radius: 0; } .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { - padding: 0 14px; + padding: 12px 14px; font-size: 12px; line-height: 28px; color: #929292; @@ -260,11 +308,14 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ /* BUSCA DE CEP */ .shippingContainer { display: flex; + flex-direction: column; + width: 409px; + position: relative; } @media only screen and (max-width: 768px) { .shippingContainer { display: block; - position: relative; + max-width: 296px; } } .shippingContainer :global(.vtex-address-form__postalCode) { @@ -279,6 +330,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { position: relative; + width: 280px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { font-size: 0; @@ -300,9 +352,37 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ width: 100%; } } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + padding: 16.5px 62px 16.5px 16px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { position: absolute; } +@media only screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + top: 0; + right: 0; + margin: 0; + } +} +@media only screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + top: unset; + right: unset; + margin-top: 8px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__suffix) { + padding: 0; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; margin-top: 25px; @@ -330,12 +410,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ height: 49px; width: 49px; margin-top: 27px !important; - position: relative; - right: 148px; - font-size: 0; + position: absolute; + left: 231px; border-radius: 0; background-color: #000000; border: none; + font-size: 0; cursor: pointer; } @media only screen and (max-width: 768px) { @@ -344,6 +424,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ margin: 0 !important; position: absolute; right: 0; + left: unset; top: 27px; } } @@ -456,11 +537,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ /* DESCRIÇÃO DO PRODUTO */ .productDescriptionContainer { - margin-left: 16px; + margin: 16px 0 0 16px; } @media only screen and (max-width: 1024px) { .productDescriptionContainer { - margin: 0; + border-bottom: 1px solid #bfbfbf; + margin: 16px 0 0 0; } } .productDescriptionContainer .productDescriptionTitle { @@ -491,6 +573,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .productDescriptionContainer .productDescriptionText { font-size: 14px; line-height: 19px; + margin-bottom: 16px; } } @media only screen and (min-width: 1921px) { diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 60c1d76..987a29e 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -11,4 +11,8 @@ /* CORREÇÃO BUG DE SCROLL NA PAGINA */ .socialNetworksContainer { margin: 0 !important; +} + +.acceptedPaymentMethodContainer { + margin: 0 !important; } \ No newline at end of file diff --git a/styles/sass/pages/footer/vtex.store-footer.scss b/styles/sass/pages/footer/vtex.store-footer.scss index 4618a7f..83cf223 100644 --- a/styles/sass/pages/footer/vtex.store-footer.scss +++ b/styles/sass/pages/footer/vtex.store-footer.scss @@ -2,3 +2,6 @@ .socialNetworksContainer { margin: 0 !important; } +.acceptedPaymentMethodContainer { + margin: 0 !important; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 5d19c48..7b31771 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -52,7 +52,7 @@ margin: 0; } .flexRowContent--message-availability { - width: 375px; + width: 399px; @include mq(md, max) { width: 100%; } @@ -78,6 +78,10 @@ align-items: center; width: 100%; background-color: $color-black-padrao; + margin-top: 64px; + @include mq(md, max) { + margin-top: 34px; + } .flexRowContent--newsletter-container { display: flex; flex-direction: column; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 8fc8d8b..d0ba244 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -40,20 +40,53 @@ } /* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */ -.listPrice { - font-family: "Opens Sans", sans-serif; - line-height: 19px; - color: #bababa; - +.listPrice--promotion-prateleira { + padding: 0 16px 8px 16px; + font-weight: 400; font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + @include mq(md, max) { + padding: 0 8px 8px 8px; + font-size: 12px; + line-height: 16px; + } .listPriceValue { &::before { content: "de "; font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #bababa; + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } } &::after { content: " por"; font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #bababa; + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } } } } + +.sellingPrice--price-prateleira { + padding: 0 16px; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black-padrao; + @include mq(md, max) { + padding: 0 8px; + font-size: 18px; + line-height: 25px; + } +} 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..70d1bd0 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,68 @@ +/* + PRATELEIRA DE PRODUTO +*/ + +.containerNormal { + max-width: unset !important; + .element { + padding: 0; + .imageContainer--image-prateleira { + display: flex; + height: 314.4px; + @include mq(xl, min) { + height: 434.4px; + } + @include mq(md, max) { + height: 291.21px; + } + @include mq(sm, max) { + height: 124.81px; + } + .imageNormal { + height: 100%; + width: 100%; + object-fit: contain; + max-height: unset !important; + } + } + } +} + +// .containerNormal { +// max-width: 100% !important; +// margin-right: 16px; +// .element { +// padding: 0; + +// .imageStackContainer { +// width: 100%; +// height: 100%; +// .imageNormal { +// width: 100%; +// height: 100%; +// object-fit: cover; +// max-height: unset !important; +// } +// } +// } +// } +.nameContainer--name-prateleira { + padding: 16px 16px 8px 16px; + display: flex; + justify-content: center; + align-items: center; + @include mq(md, max) { + padding: 16px 8px 8px 8px; + } + .productNameContainer--name-prateleira { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: $color-black-padrao; + @include mq(md, max) { + font-size: 14px; + line-height: 19px; + } + } +} 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..572cc4e --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,66 @@ +.sliderLayoutContainer--prateleira { + padding-left: 40px !important; + padding-right: 40px !important; + .sliderTrackContainer--prateleira { + padding: 0 19.2px 49px 19.2px; + @include mq(md, max) { + padding: 0 17.2px 41px 17.2px; + } + @include mq(sm, max) { + padding: 0 14.7px 33px 14.7px; + } + .slide--prateleira { + margin: 0 8px; + @include mq(md, max) { + margin: 0 6px; + } + @include mq(sm, max) { + margin: 0 4px; + } + } + + .slideChildrenContainer--prateleira { + @include mq(sm, max) { + height: 273.8px; + width: 100%; + } + } + } + .paginationDotsContainer--prateleira { + display: flex; + align-items: center; + .paginationDot--prateleira { + background-color: $color-black-padrao; + } + .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background-color: $color-white; + border: 0.5px solid $color-black-padrao; + } + } + + .sliderLeftArrow--prateleira { + visibility: hidden; + margin: 0 0 0 40px; + padding: 0; + height: 29.6px; + width: 11.21px; + &::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png"); + } + } + + .sliderRightArrow--prateleira { + visibility: hidden; + margin: 0 40px 0 0; + padding: 0; + height: 29.6px; + width: 11.21px; + &::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png"); + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0595ee3..881ac14 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -61,15 +61,9 @@ display: flex; flex-direction: column-reverse; - .skuSelectorName { - font-size: 0; - } - - .skuSelectorNameSeparator { - font-size: 0; - } - + /* COR */ .skuSelectorSubcontainer--cor { + margin: 0; &::before { content: "OUTRAS CORES:"; font-family: "Open Sans", sans-serif; @@ -78,9 +72,43 @@ font-size: 14px; color: $color-gray-6; } + .skuSelectorNameContainer { + margin: 8px 0 0 0; + height: 48px; + .skuSelectorOptionsList { + margin: 0; + .skuSelectorItem--sku-selector { + margin: 0 16px 0 0; + height: 48px; + .frameAround--sku-selector { + width: 48px; + height: 48px; + border: 1px solid $color-gray11; + border-radius: 24px; + top: 0; + left: 0; + right: 0; + z-index: 2; + } + } + .skuSelectorInternalBox--sku-selector { + width: 48px; + height: 48px; + border-radius: 50%; + } + + .skuSelectorItem--selected { + .frameAround--sku-selector { + border: 2px solid $color-black-padrao; + } + } + } + } } + /* TAMANHO */ .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; &::before { content: "OUTROS TAMANHOS:"; font-family: "Open Sans", sans-serif; @@ -89,58 +117,75 @@ font-size: 14px; color: $color-gray-6; } + .skuSelectorNameContainer { + margin: 8px 0 0 0; + height: 40px; + .skuSelectorOptionsList { + margin: 0; + + .skuSelectorItem--sku-selector { + margin: 0 16px 0 0; + width: 40px; + height: 40px; + .frameAround--sku-selector { + width: 40px; + height: 40px; + border: 1px solid $color-gray-8; + border-radius: 50%; + top: 0; + left: 0; + right: 0; + z-index: 2; + } + + .skuSelectorInternalBox--sku-selector { + width: 40px; + height: 40px; + border-radius: 50%; + .skuSelectorItemTextValue { + height: 19px; + width: 17px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + + .skuSelectorItem--selected { + .frameAround--sku-selector { + border: 2px solid $color-black-padrao; + } + .skuSelectorItemTextValue { + color: $color-black-padrao !important; + } + } + } + } } .skuSelectorTextContainer { display: none; } - - .skuSelectorOptionsList { - margin-top: 8px; - margin-left: 0; - } - - .skuSelectorSelectorImageValue { - font-size: 0; - } } /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ -.skuSelectorOptionsList { - .skuSelectorItem { - width: 40px; - height: 40px; - &:first-child { - margin-left: 0; - } - .frameAround { - border-radius: 50%; - border-color: $color-black-padrao; - color: $color-black-padrao; - } - .skuSelectorItemTextValue { - max-width: 100%; - display: flex; - justify-content: center; - color: $color-black-padrao; - } - .skuSelectorInternalBox { - border-radius: 50%; - } - } - - .diagonalCross { - margin: 5px; - background-image: linear-gradient( - to top right, - transparent 44%, - rgba(0, 0, 0, 0.3) 48%, - currentColor 48%, - currentColor 0, - transparent 0% - ); - transform: rotate(90deg); - } +.diagonalCross { + margin: 5px; + background-image: linear-gradient( + to top right, + transparent 44%, + rgba(0, 0, 0, 0.3) 48%, + currentColor 48%, + currentColor 0, + transparent 0% + ); + transform: rotate(90deg); } /*PRODUTO INDISPONIVEL && @@ -176,14 +221,14 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ position: relative; :global(.vtex-store-components-3-x-content) { display: block; - width: 374.65px; + width: 399px; margin-top: 16px; @include mq(md, max) { width: 100%; max-width: 100%; } .inputName { - width: 182.46px; + width: 195.5px; margin-right: 10.08px; margin-bottom: 15px; @include mq(md, max) { @@ -195,7 +240,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ border-radius: 0; } :global(.vtex-styleguide-9-x-input) { - padding: 0 14px; + padding: 12px 14px; font-size: 12px; line-height: 28px; color: $color-gray-6; @@ -206,9 +251,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ left: 51%; top: 0%; border-radius: 0; - width: 182.46px; + width: 195.5px; font-weight: 400; - margin-bottom: 15px; + margin: 0; @include mq(md, max) { width: -webkit-fill-available; margin: 0 0 0 8px; @@ -219,7 +264,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ border: 0.6px solid $color-gray-6; border-radius: 0; :global(.vtex-styleguide-9-x-input) { - padding: 0 14px; + padding: 12px 14px; font-size: 12px; line-height: 28px; color: $color-gray-6; @@ -266,9 +311,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ /* BUSCA DE CEP */ .shippingContainer { display: flex; + flex-direction: column; + width: 409px; + position: relative; @include mq(sm, max) { display: block; - position: relative; + max-width: 296px; } :global(.vtex-address-form__postalCode) { display: flex; @@ -277,8 +325,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ @include mq(sm, max) { display: block; } + :global(.vtex-input) { position: relative; + width: 280px; :global(.vtex-input__label) { font-size: 0; &::before { @@ -296,11 +346,35 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ @include mq(sm, max) { width: 100%; } + :global(.vtex-address-form-4-x-input) { + padding: 16.5px 62px 16.5px 16px; + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: $color-gray-10; + } + } } :global(.vtex-input__error) { position: absolute; + @include mq(md, max) { + top: 0; + right: 0; + margin: 0; + } + @include mq(sm, max) { + top: unset; + right: unset; + margin-top: 8px; + } } } + :global(.vtex-input__suffix) { + padding: 0; + } :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; @@ -311,6 +385,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ font-size: 12px; line-height: 16px; text-decoration: underline; + @include mq(sm, max) { left: 0; margin-top: 8px; @@ -328,12 +403,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ height: 49px; width: 49px; margin-top: 27px !important; - position: relative; - right: 148px; - font-size: 0; + position: absolute; + left: 231px; border-radius: 0; - background-color: $color-black-padrao; + background-color: #000000; border: none; + font-size: 0; cursor: pointer; @include mq(sm, max) { @@ -341,6 +416,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ margin: 0 !important; position: absolute; right: 0; + left: unset; top: 27px; } &::before { @@ -456,9 +532,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ /* DESCRIÇÃO DO PRODUTO */ .productDescriptionContainer { - margin-left: 16px; + margin: 16px 0 0 16px; @include mq(md, max) { - margin: 0; + border-bottom: 1px solid $color-gray12; + margin: 16px 0 0 0; } .productDescriptionTitle { font-weight: 400; @@ -482,6 +559,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ @include mq(md, max) { font-size: 14px; line-height: 19px; + margin-bottom: 16px; } @include mq(xl, min) { font-size: 18px;