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;