Thiago.bronisio/challenge-vtex-io-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: finalização da pagina de produto

Browse Source
This commit is contained in:
Thiago Bronisio 2023-02-08 00:20:20 -03:00
parent 753c9494fa
commit dfcdf6c354
16 changed files with 719 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
react/components/Html/styles.css
View File

@ -61,6 +61,14 @@
} }
} }
/*
PRATELEIRA DE PRODUTOS
*/
[class*="html--product-summary"]{
display: flex;
flex-direction: column;
}
/* /*
NEWSLETTER NEWSLETTER
*/ */

9
react/components/PixDiscount/PixDiscount.tsx
View File

@ -1,9 +1,14 @@
import React from "react"; import React, { useEffect } from "react";
import { useProduct } from "vtex.product-context"; import { useProduct } from "vtex.product-context";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
const PixDiscount = () => { const PixDiscount = () => {
useEffect(() => {
const inputCep = document.querySelector(".vtex-address-form-4-x-input");
inputCep?.setAttribute("placeholder", "Digite seu CEP");
});
const productContextValue = useProduct(); const productContextValue = useProduct();
const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
const discount = (Number(productPrice) * 10) / 100; const discount = (Number(productPrice) * 10) / 100;
@ -19,7 +24,7 @@ const PixDiscount = () => {
</div> </div>
<div className={styles["container-price"]}> <div className={styles["container-price"]}>
<p className={styles["price-pix"]}>R$ {totalDiscount.toFixed(2)}</p> <p className={styles["price-pix"]}>R$ {totalDiscount.toFixed(2).replace(".", ",")}</p>
<p className={styles["discount"]}>10% de desconto</p> <p className={styles["discount"]}>10% de desconto</p>
</div> </div>
</div> </div>

124
store/blocks/pdp/product.jsonc
View File

@ -3,8 +3,8 @@
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
"tab-layout#description", "html#description",
"list-context.product-list#prateleira", "html#teste",
"flex-layout.row#newsletter-container" "flex-layout.row#newsletter-container"
] ]
}, },
@ -99,14 +99,15 @@
/* /*
DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#DESCRIPTION) DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#DESCRIPTION)
*/ */
"html#container-description": { "html#container-description": {
"props": { "props": {
"testId": "product-description",
"tag": "div", "tag": "div",
"blockClass": "container-description" "blockClass": "container-description"
}, },
"children": ["flex-layout.row#product-description"] "children": ["flex-layout.row#product-description"]
}, },
"flex-layout.row#product-description": { "flex-layout.row#product-description": {
"props": { "props": {
@ -121,13 +122,6 @@
"testId": "product-images", "testId": "product-images",
"blockClass": "image-description" "blockClass": "image-description"
}, },
"children": ["html#product-image"]
},
"html#product-image":{
"props": {
"testId": "product-images"
},
"children": ["product-images#description"] "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": { "flex-layout.row#description": {
"children": ["product-description"] "children": ["product-description"]
}, },
"html#description":{
"props": {
"testId": "product-description"
},
"children": ["tab-layout#description"]
},
"tab-layout#description": { "tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"], "children": ["tab-list#description", "tab-content#description"],
@ -241,9 +235,16 @@
/* /*
PRATELEIRA DE PRODUTOS QUE QUE O CLIENTE PODE GOSTAR 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": { "list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf#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": { "product-summary.shelf#prateleira": {
@ -252,17 +253,24 @@
"html#product-summary": { "html#product-summary": {
"props":{ "props":{
"testId": "vtex-product-summary", "testId": "product-summary-list",
"blockClass": "product-summary" "blockClass": "product-summary"
}, },
"children": [ "children": [
"stack-layout#prodsum", "product-summary-image#image-prateleira",
"product-summary-name#name-prateleira", "product-summary-name#name-prateleira",
"product-list-price#promotion-prateleira", "product-list-price#promotion-prateleira",
"product-selling-price#price-prateleira" "product-selling-price#price-prateleira"
] ]
}, },
"product-summary-image#image-prateleira": {
"props":{
"showBadge": false,
"blockClass": "image-prateleira"
}
},
"product-summary-name#name-prateleira": { "product-summary-name#name-prateleira": {
"props": { "props": {
"blockClass": "name-prateleira" "blockClass": "name-prateleira"
@ -290,6 +298,13 @@
} }
}, },
"html#vtex-product-summary":{
"props":{
"testId": "vtex-product-summary"
},
"children": ["slider-layout#prateleira"]
},
"slider-layout#prateleira": { "slider-layout#prateleira": {
"props": { "props": {
"itemsPerPage": { "itemsPerPage": {
@ -298,7 +313,6 @@
"phone": 2 "phone": 2
}, },
"infinite": true, "infinite": true,
"fullWidth": false,
"blockClass": "prateleira" "blockClass": "prateleira"
} }
}, },
@ -376,18 +390,25 @@
"rowGap": 0 "rowGap": 0
}, },
"children": [ "children": [
"flex-layout.row#product-name", "html#product-name",
"product-identifier.product", "html#product-code",
"flex-layout.row#selling-price", "html#product-price",
"product-installments#parcelaProduct", "html#parcelaProdutct",
"html#pix-discount", "html#pix-discount",
"availability-subscriber", "availability-subscriber",
"html#sku-selector", "html#sku-selector",
"html#buy-button", "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": { "flex-layout.row#product-name": {
"props": { "props": {
"marginBottom": 3 "marginBottom": 3
@ -395,6 +416,35 @@
"children": ["vtex.store-components:product-name"] "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": { "product-installments#parcelaProduct": {
"props": { "props": {
"installmentsCriteria": "max-quantity-without-interest", "installmentsCriteria": "max-quantity-without-interest",
@ -421,8 +471,8 @@
"sku-selector": { "sku-selector": {
"props": { "props": {
"blockClass": "sku-selector", "blockClass": "sku-selector",
"imageHeight": 40, "imageHeight": 48,
"imageWidth": 40, "imageWidth": 48,
"variationsSpacing": 3, "variationsSpacing": 3,
"showValueNameForImageVariation": true "showValueNameForImageVariation": true
} }
@ -431,7 +481,7 @@
"html#buy-button": { "html#buy-button": {
"props": { "props": {
"tag": "div", "tag": "div",
"testId": "buy-button", "testId": "add-to-cart-button",
"blockClass": "buy-button" "blockClass": "buy-button"
}, },
"children": ["html#product-quantity","add-to-cart-button"] "children": ["html#product-quantity","add-to-cart-button"]
@ -445,6 +495,20 @@
"children": ["product-quantity"] "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 ASSINANTES DE PRODUTOS INDISPONIVEIS
*/ */
@ -465,7 +529,7 @@
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product", "html#product-code",
"flex-layout.row#availability", "flex-layout.row#availability",
"sku-selector" "sku-selector"
] ]

6
store/blocks/product-price.jsonc
View File

@ -1,4 +1,10 @@
{ {
"html#selling-price": {
"props": {
"testId": "product-price"
},
"children": ["flex-layout.row#selling-price"]
},
"flex-layout.row#selling-price": { "flex-layout.row#selling-price": {
"props": { "props": {
"blockClass": "selling-price", "blockClass": "selling-price",

8
styles/css/vtex.flex-layout.css
View File

@ -73,7 +73,7 @@
} }
} }
.flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability {
width: 375px; width: 399px;
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability {
@ -99,6 +99,12 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
background-color: #000000; 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 { .flexRow--newsletter-container .flexRowContent--newsletter-container {
display: flex; display: flex;

54
styles/css/vtex.product-price.css
View File

@ -47,17 +47,59 @@
} }
/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */ /* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
.listPrice { .listPrice--promotion-prateleira {
font-family: "Opens Sans", sans-serif; padding: 0 16px 8px 16px;
line-height: 19px; font-weight: 400;
color: #bababa;
font-size: 14px; 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 "; content: "de ";
font-size: 14px; 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"; content: " por";
font-size: 14px; 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;
}
} }

88
styles/css/vtex.product-summary.css
View File

@ -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;
} }
.containerNormal .element {
.container :global(.vtex-modal-layout-0-x-triggerContainer) { padding: 0;
opacity: 0;
transition: opacity 200ms ease-in-out;
} }
.containerNormal .element .imageContainer--image-prateleira {
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { display: flex;
opacity: 1; height: 314.4px;
} }
@media only screen and (min-width: 1921px) {
@media screen and (max-width: 40em) { .containerNormal .element .imageContainer--image-prateleira {
.container :global(.vtex-modal-layout-0-x-triggerContainer) { height: 434.4px;
display: none;
} }
} }
@media only screen and (max-width: 1024px) {
.nameContainer { .containerNormal .element .imageContainer--image-prateleira {
justify-content: start; height: 291.21px;
padding-top: 1rem; }
padding-bottom: 1rem; }
@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 { .nameContainer--name-prateleira {
font-weight: 600; 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; font-size: 18px;
color: #2E2E2E; line-height: 25px;
}
.container {
text-align: start;
}
.imageContainer {
text-align: center; text-align: center;
color: #000000;
} }
@media only screen and (max-width: 1024px) {
.image { .nameContainer--name-prateleira .productNameContainer--name-prateleira {
border-radius: 0.25rem; font-size: 14px;
line-height: 19px;
}
} }

77
styles/css/vtex.slider-layout.css
View File

@ -1,31 +1,58 @@
.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--prateleira .sliderTrackContainer--prateleira {
.sliderLayoutContainer--carousel { padding: 0 19.2px 49px 19.2px;
background-color: #F0F0F0;
min-height: 450px;
} }
@media only screen and (max-width: 1024px) {
.sliderTrackContainer { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
max-width: 100%; padding: 0 17.2px 41px 17.2px;
}
} }
@media only screen and (max-width: 768px) {
.paginationDotsContainer { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
margin-top: .5rem; padding: 0 14.7px 33px 14.7px;
margin-bottom: .5rem; }
} }
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
.layoutContainer--shelf { margin: 0 8px;
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
} }
@media only screen and (max-width: 1024px) {
.slide--shelf { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
margin-bottom: 25px; margin: 0 6px;
padding-left: .5rem; }
padding-right: .5rem; }
min-height: 550px; @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;
} }

163
styles/css/vtex.store-components.css
View File

@ -74,12 +74,11 @@
.skuSelectorContainer { .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
/* COR */
/* TAMANHO */
} }
.skuSelectorContainer .skuSelectorName { .skuSelectorContainer .skuSelectorSubcontainer--cor {
font-size: 0; margin: 0;
}
.skuSelectorContainer .skuSelectorNameSeparator {
font-size: 0;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor::before { .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
content: "OUTRAS CORES:"; content: "OUTRAS CORES:";
@ -89,6 +88,38 @@
font-size: 14px; font-size: 14px;
color: #929292; 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 { .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@ -97,40 +128,57 @@
font-size: 14px; font-size: 14px;
color: #929292; color: #929292;
} }
.skuSelectorContainer .skuSelectorTextContainer { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
display: none; margin: 8px 0 0 0;
height: 40px;
} }
.skuSelectorContainer .skuSelectorOptionsList { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin-top: 8px; margin: 0;
margin-left: 0;
} }
.skuSelectorContainer .skuSelectorSelectorImageValue { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector {
font-size: 0; margin: 0 16px 0 0;
}
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
.skuSelectorOptionsList .skuSelectorItem {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.skuSelectorOptionsList .skuSelectorItem:first-child { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector {
margin-left: 0; width: 40px;
} height: 40px;
.skuSelectorOptionsList .skuSelectorItem .frameAround { border: 1px solid #989898;
border-radius: 50%; border-radius: 50%;
border-color: #000000; top: 0;
color: #000000; left: 0;
right: 0;
z-index: 2;
} }
.skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector {
max-width: 100%; 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; display: flex;
justify-content: center; 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 { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector {
border-radius: 50%; 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; margin: 5px;
background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%); 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); transform: rotate(90deg);
@ -168,7 +216,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
} }
.subscriberContainer .form :global(.vtex-store-components-3-x-content) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
display: block; display: block;
width: 374.65px; width: 399px;
margin-top: 16px; margin-top: 16px;
} }
@media only screen and (max-width: 1024px) { @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 { .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
width: 182.46px; width: 195.5px;
margin-right: 10.08px; margin-right: 10.08px;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -192,7 +240,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
border-radius: 0; border-radius: 0;
} }
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { .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; font-size: 12px;
line-height: 28px; line-height: 28px;
color: #929292; color: #929292;
@ -202,9 +250,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
left: 51%; left: 51%;
top: 0%; top: 0%;
border-radius: 0; border-radius: 0;
width: 182.46px; width: 195.5px;
font-weight: 400; font-weight: 400;
margin-bottom: 15px; margin: 0;
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
@ -218,7 +266,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
border-radius: 0; border-radius: 0;
} }
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { .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; font-size: 12px;
line-height: 28px; line-height: 28px;
color: #929292; color: #929292;
@ -260,11 +308,14 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
/* BUSCA DE CEP */ /* BUSCA DE CEP */
.shippingContainer { .shippingContainer {
display: flex; display: flex;
flex-direction: column;
width: 409px;
position: relative;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.shippingContainer { .shippingContainer {
display: block; display: block;
position: relative; max-width: 296px;
} }
} }
.shippingContainer :global(.vtex-address-form__postalCode) { .shippingContainer :global(.vtex-address-form__postalCode) {
@ -279,6 +330,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
} }
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
position: relative; position: relative;
width: 280px;
} }
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0; font-size: 0;
@ -300,9 +352,37 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
width: 100%; 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) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
position: absolute; 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) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0; padding: 0;
margin-top: 25px; margin-top: 25px;
@ -330,12 +410,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
height: 49px; height: 49px;
width: 49px; width: 49px;
margin-top: 27px !important; margin-top: 27px !important;
position: relative; position: absolute;
right: 148px; left: 231px;
font-size: 0;
border-radius: 0; border-radius: 0;
background-color: #000000; background-color: #000000;
border: none; border: none;
font-size: 0;
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -344,6 +424,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
margin: 0 !important; margin: 0 !important;
position: absolute; position: absolute;
right: 0; right: 0;
left: unset;
top: 27px; top: 27px;
} }
} }
@ -456,11 +537,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
/* DESCRIÇÃO DO PRODUTO */ /* DESCRIÇÃO DO PRODUTO */
.productDescriptionContainer { .productDescriptionContainer {
margin-left: 16px; margin: 16px 0 0 16px;
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.productDescriptionContainer { .productDescriptionContainer {
margin: 0; border-bottom: 1px solid #bfbfbf;
margin: 16px 0 0 0;
} }
} }
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {
@ -491,6 +573,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
.productDescriptionContainer .productDescriptionText { .productDescriptionContainer .productDescriptionText {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
margin-bottom: 16px;
} }
} }
@media only screen and (min-width: 1921px) { @media only screen and (min-width: 1921px) {

4
styles/css/vtex.store-footer.css
View File

@ -12,3 +12,7 @@
.socialNetworksContainer { .socialNetworksContainer {
margin: 0 !important; margin: 0 !important;
} }
.acceptedPaymentMethodContainer {
margin: 0 !important;
}

3
styles/sass/pages/footer/vtex.store-footer.scss
View File

@ -2,3 +2,6 @@
.socialNetworksContainer { .socialNetworksContainer {
margin: 0 !important; margin: 0 !important;
} }
.acceptedPaymentMethodContainer {
margin: 0 !important;
}

6
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -52,7 +52,7 @@
margin: 0; margin: 0;
} }
.flexRowContent--message-availability { .flexRowContent--message-availability {
width: 375px; width: 399px;
@include mq(md, max) { @include mq(md, max) {
width: 100%; width: 100%;
} }
@ -78,6 +78,10 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
background-color: $color-black-padrao; background-color: $color-black-padrao;
margin-top: 64px;
@include mq(md, max) {
margin-top: 34px;
}
.flexRowContent--newsletter-container { .flexRowContent--newsletter-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

43
styles/sass/pages/product/vtex.product-price.scss
View File

@ -40,20 +40,53 @@
} }
/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */ /* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
.listPrice { .listPrice--promotion-prateleira {
font-family: "Opens Sans", sans-serif; padding: 0 16px 8px 16px;
line-height: 19px; font-weight: 400;
color: #bababa;
font-size: 14px; 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 { .listPriceValue {
&::before { &::before {
content: "de "; content: "de ";
font-size: 14px; font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #bababa;
@include mq(md, max) {
font-size: 12px;
line-height: 16px;
}
} }
&::after { &::after {
content: " por"; content: " por";
font-size: 14px; 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;
}
}

68
styles/sass/pages/product/vtex.product-summary.scss Normal file
View File

@ -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;
}
}
}

51
styles/sass/pages/product/vtex.slider-layout.scss Normal file
View File

@ -0,0 +1,51 @@
.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 {
// margin-bottom: 32px;
// @include mq(md, max) {
// margin-bottom: 24px;
// }
// @include mq(sm, max) {
// margin-bottom: 16px;
// }
// }
}
.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;
}
}
}

188
styles/sass/pages/product/vtex.store-components.scss
View File

@ -61,15 +61,9 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
.skuSelectorName { /* COR */
font-size: 0;
}
.skuSelectorNameSeparator {
font-size: 0;
}
.skuSelectorSubcontainer--cor { .skuSelectorSubcontainer--cor {
margin: 0;
&::before { &::before {
content: "OUTRAS CORES:"; content: "OUTRAS CORES:";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@ -78,9 +72,43 @@
font-size: 14px; font-size: 14px;
color: $color-gray-6; 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 { .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
&::before { &::before {
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@ -89,47 +117,65 @@
font-size: 14px; font-size: 14px;
color: $color-gray-6; 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 { .skuSelectorTextContainer {
display: none; display: none;
} }
.skuSelectorOptionsList {
margin-top: 8px;
margin-left: 0;
}
.skuSelectorSelectorImageValue {
font-size: 0;
}
} }
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*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 { .diagonalCross {
max-width: 100%;
display: flex;
justify-content: center;
color: $color-black-padrao;
}
.skuSelectorInternalBox {
border-radius: 50%;
}
}
.diagonalCross {
margin: 5px; margin: 5px;
background-image: linear-gradient( background-image: linear-gradient(
to top right, to top right,
@ -140,7 +186,6 @@
transparent 0% transparent 0%
); );
transform: rotate(90deg); transform: rotate(90deg);
}
} }
/*PRODUTO INDISPONIVEL && /*PRODUTO INDISPONIVEL &&
@ -176,14 +221,14 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
position: relative; position: relative;
:global(.vtex-store-components-3-x-content) { :global(.vtex-store-components-3-x-content) {
display: block; display: block;
width: 374.65px; width: 399px;
margin-top: 16px; margin-top: 16px;
@include mq(md, max) { @include mq(md, max) {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.inputName { .inputName {
width: 182.46px; width: 195.5px;
margin-right: 10.08px; margin-right: 10.08px;
margin-bottom: 15px; margin-bottom: 15px;
@include mq(md, max) { @include mq(md, max) {
@ -195,7 +240,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
border-radius: 0; border-radius: 0;
} }
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
padding: 0 14px; padding: 12px 14px;
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
color: $color-gray-6; color: $color-gray-6;
@ -206,9 +251,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
left: 51%; left: 51%;
top: 0%; top: 0%;
border-radius: 0; border-radius: 0;
width: 182.46px; width: 195.5px;
font-weight: 400; font-weight: 400;
margin-bottom: 15px; margin: 0;
@include mq(md, max) { @include mq(md, max) {
width: -webkit-fill-available; width: -webkit-fill-available;
margin: 0 0 0 8px; margin: 0 0 0 8px;
@ -219,7 +264,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
border: 0.6px solid $color-gray-6; border: 0.6px solid $color-gray-6;
border-radius: 0; border-radius: 0;
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
padding: 0 14px; padding: 12px 14px;
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
color: $color-gray-6; color: $color-gray-6;
@ -266,9 +311,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
/* BUSCA DE CEP */ /* BUSCA DE CEP */
.shippingContainer { .shippingContainer {
display: flex; display: flex;
flex-direction: column;
width: 409px;
position: relative;
@include mq(sm, max) { @include mq(sm, max) {
display: block; display: block;
position: relative; max-width: 296px;
} }
:global(.vtex-address-form__postalCode) { :global(.vtex-address-form__postalCode) {
display: flex; display: flex;
@ -277,8 +325,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
@include mq(sm, max) { @include mq(sm, max) {
display: block; display: block;
} }
:global(.vtex-input) { :global(.vtex-input) {
position: relative; position: relative;
width: 280px;
:global(.vtex-input__label) { :global(.vtex-input__label) {
font-size: 0; font-size: 0;
&::before { &::before {
@ -296,10 +346,34 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
@include mq(sm, max) { @include mq(sm, max) {
width: 100%; 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) { :global(.vtex-input__error) {
position: absolute; 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) { :global(.vtex-address-form__postalCode-forgottenURL) {
@ -311,6 +385,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-decoration: underline; text-decoration: underline;
@include mq(sm, max) { @include mq(sm, max) {
left: 0; left: 0;
margin-top: 8px; margin-top: 8px;
@ -328,12 +403,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
height: 49px; height: 49px;
width: 49px; width: 49px;
margin-top: 27px !important; margin-top: 27px !important;
position: relative; position: absolute;
right: 148px; left: 231px;
font-size: 0;
border-radius: 0; border-radius: 0;
background-color: $color-black-padrao; background-color: #000000;
border: none; border: none;
font-size: 0;
cursor: pointer; cursor: pointer;
@include mq(sm, max) { @include mq(sm, max) {
@ -341,6 +416,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
margin: 0 !important; margin: 0 !important;
position: absolute; position: absolute;
right: 0; right: 0;
left: unset;
top: 27px; top: 27px;
} }
&::before { &::before {
@ -456,9 +532,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
/* DESCRIÇÃO DO PRODUTO */ /* DESCRIÇÃO DO PRODUTO */
.productDescriptionContainer { .productDescriptionContainer {
margin-left: 16px; margin: 16px 0 0 16px;
@include mq(md, max) { @include mq(md, max) {
margin: 0; border-bottom: 1px solid $color-gray12;
margin: 16px 0 0 0;
} }
.productDescriptionTitle { .productDescriptionTitle {
font-weight: 400; font-weight: 400;
@ -482,6 +559,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
@include mq(md, max) { @include mq(md, max) {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
margin-bottom: 16px;
} }
@include mq(xl, min) { @include mq(xl, min) {
font-size: 18px; font-size: 18px;