feat(pdp): Adiciona slider layout

This commit is contained in:
Cainã Milech 2023-01-26 18:08:57 -03:00
parent a2c9c02a40
commit c085281a68
14 changed files with 262 additions and 108 deletions

View File

@ -7,13 +7,40 @@
"tab-layout#details", "tab-layout#details",
/*"html#description",*/ /*"html#description",*/
/*"flex-layout.row#description",*/ /*"flex-layout.row#description",*/
"flex-layout.row#specifications-title", /*"flex-layout.row#specifications-title",*/
"product-specification-group#table", /*"product-specification-group#table",*/
"shelf.relatedProducts",
"list-context.product-list#prateleira",
/*"shelf.relatedProducts",*/
"product-questions-and-answers" "product-questions-and-answers"
] ]
}, },
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf"],
"children": ["rich-text#prateleira", "slider-layout#prateleira"]
},
"rich-text#prateleira": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Você também pode gostar:",
"blockClass": "title-prateleira"
}
},
"slider-layout#prateleira": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 1
},
"infinite": true,
"fullWidth": false,
"blockClass": "prateleira"
}
},
"tab-layout#details": { "tab-layout#details": {
"children": ["tab-list#details", "tab-content#details"], "children": ["tab-list#details", "tab-content#details"],
"props": { "props": {
@ -86,6 +113,7 @@
"product-images#description": { "product-images#description": {
"props": { "props": {
"displayMode": "first-image", "displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "description-imagem" "blockClass": "description-imagem"
} }
}, },
@ -188,8 +216,7 @@
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
"props": { "props": {
"preventVerticalStretch": true, "preventVerticalStretch": true,
"rowGap": 0, "rowGap": 0
"width": "46%"
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",

View File

@ -9,14 +9,10 @@
] ]
}, },
"responsive-layout.desktop#productSummaryList": { "responsive-layout.desktop#productSummaryList": {
"children": [ "children": ["flex-layout.row#summaryListDesktop"]
"flex-layout.row#summaryListDesktop"
]
}, },
"responsive-layout.mobile#productSummaryList": { "responsive-layout.mobile#productSummaryList": {
"children": [ "children": ["flex-layout.row#summaryListMobile"]
"flex-layout.row#summaryListMobile"
]
}, },
"product-price-savings#summaryPercentage": { "product-price-savings#summaryPercentage": {
"props": { "props": {
@ -36,7 +32,7 @@
] ]
}, },
"flex-layout.row#summaryListDesktop": { "flex-layout.row#summaryListDesktop": {
"props":{ "props": {
"fullWidth": true, "fullWidth": true,
"colSizing": "auto", "colSizing": "auto",
"blockClass": "summaryListDesktop" "blockClass": "summaryListDesktop"
@ -69,9 +65,7 @@
] ]
}, },
"flex-layout.row#productSpecifications": { "flex-layout.row#productSpecifications": {
"children": [ "children": ["product-specification-group#summary"]
"product-specification-group#summary"
]
}, },
"product-summary-name#summaryListDesktop": { "product-summary-name#summaryListDesktop": {
"props": { "props": {
@ -100,18 +94,13 @@
"colSizing": "auto", "colSizing": "auto",
"colGap": 5 "colGap": 5
}, },
"children": [ "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
"add-to-cart-button",
"flex-layout.row#buyNowButton"
]
}, },
"flex-layout.row#buyNowButton": { "flex-layout.row#buyNowButton": {
"props": { "props": {
"blockClass": "buyNowButton" "blockClass": "buyNowButton"
}, },
"children": [ "children": ["add-to-cart-button#buyNow"]
"add-to-cart-button#buyNow"
]
}, },
"add-to-cart-button#buyNow": { "add-to-cart-button#buyNow": {
@ -123,10 +112,7 @@
} }
}, },
"flex-layout.col#priceSummaryListDesktop": { "flex-layout.col#priceSummaryListDesktop": {
"children": [ "children": ["product-selling-price#summary", "product-list-price#summary"]
"product-selling-price#summary",
"product-list-price#summary"
]
}, },
"stack-layout#summaryListDesktop": { "stack-layout#summaryListDesktop": {
"children": [ "children": [
@ -144,7 +130,7 @@
} }
}, },
"flex-layout.row#summaryListMobile": { "flex-layout.row#summaryListMobile": {
"props":{ "props": {
"preserveLayoutOnMobile": true, "preserveLayoutOnMobile": true,
"colSizing": "auto", "colSizing": "auto",
"blockClass": "summaryListMobile", "blockClass": "summaryListMobile",

View File

@ -6,9 +6,9 @@
"flex-layout.col#productRating", "flex-layout.col#productRating",
"product-summary-space", "product-summary-space",
"product-list-price#summary", "product-list-price#summary",
"flex-layout.row#selling-price-savings", "flex-layout.row#selling-price-savings"
"product-installments#summary", /*"product-installments#summary",
"add-to-cart-button" "add-to-cart-button"*/
] ]
}, },
"flex-layout.col#productRating": { "flex-layout.col#productRating": {
@ -20,9 +20,9 @@
"stack-layout#prodsum": { "stack-layout#prodsum": {
"children": [ "children": [
"product-summary-image#shelf", "product-summary-image#shelf"
"vtex.product-highlights@2.x:product-highlights#collection", /*"vtex.product-highlights@2.x:product-highlights#collection",*/
"modal-trigger#quickview" // Check quickview.jsonc /*"modal-trigger#quickview" // Check quickview.jsonc*/
] ]
}, },
@ -54,19 +54,21 @@
"product-list-price#summary": { "product-list-price#summary": {
"props": { "props": {
"blockClass": "summary" "blockClass": "summary",
"labelListPrice": "teste"
} }
}, },
"flex-layout.row#selling-price-savings": { "flex-layout.row#selling-price-savings": {
"props": { "props": {
"colGap": 2, /*"colGap": 2,*/
"preserveLayoutOnMobile": true, "preserveLayoutOnMobile": true,
"preventHorizontalStretch": true, "preventHorizontalStretch": true,
"marginBottom": 4 /*"marginBottom": 4,*/
"horizontalAlign": "center"
}, },
"children": [ "children": [
"product-selling-price#summary", "product-selling-price#summary"
"product-price-savings#summary" /*"product-price-savings#summary"*/
] ]
}, },
"product-installments#summary": { "product-installments#summary": {

View File

@ -24,3 +24,24 @@
content: "de "; content: "de ";
font-weight: 400; font-weight: 400;
} }
.listPrice--summary {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
margin-bottom: 8px;
}
.listPrice--summary :global(.vtex-product-price-1-x-currencyCode--summary)::before {
content: "de ";
}
.listPrice--summary :global(.vtex-product-price-1-x-listPriceValue--summary):last-child::after {
content: " por";
}
.sellingPrice--summary {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}

View File

@ -1,42 +1,24 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { /*
border-radius: 50%; 0 - 600PX: Phone
} 600 - 900px: Table portrait
900 - 1200px: Tablet landscape
.container :global(.vtex-modal-layout-0-x-triggerContainer) { [1200 - 1800] is where our nortal styles apply
opacity: 0; 1800px + : Big desktop
transition: opacity 200ms ease-in-out; */
} /* Media Query M3 */
/* Grid breakpoints */
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
}
.nameContainer { .nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
text-align: center; text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.nameContainer .productBrand {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #000000;
} }
.image { .spacer {
border-radius: 0.25rem; display: none;
} }

View File

@ -7,3 +7,14 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container--title-prateleira {
margin-top: 16px;
margin-bottom: 12px;
}
.container--title-prateleira .paragraph--title-prateleira {
margin: 0;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
}

View File

@ -1,31 +1,33 @@
.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 */
.paginationDotsContainer--prateleira {
align-items: center;
}
.paginationDotsContainer--prateleira .paginationDot--prateleira {
background-color: #000000;
margin-left: 6px;
margin-right: 6px;
}
.paginationDotsContainer--prateleira .paginationDot--prateleira--isActive {
background-color: #fff;
border: 0.5px solid #000000;
width: 17px !important;
height: 17px !important;
} }
.sliderLayoutContainer--carousel { .slide--prateleira {
background-color: #F0F0F0; margin-right: 8px;
min-height: 450px; margin-left: 8px;
margin-bottom: 32px;
} }
.sliderTrackContainer { .sliderArrows--prateleira {
max-width: 100%; margin: 14px;
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
} }

View File

@ -44,6 +44,7 @@
.productImagesThumb { .productImagesThumb {
max-width: 90px; max-width: 90px;
width: 90px !important;
margin-right: 16px; margin-right: 16px;
} }
@ -289,6 +290,9 @@
border: 1px solid red; border: 1px solid red;
} }
.subscriberContainer {
position: relative;
}
.subscriberContainer .title { .subscriberContainer .title {
font-size: 0; font-size: 0;
margin: 0; margin: 0;
@ -330,21 +334,24 @@
color: #989898; color: #989898;
} }
.subscriberContainer .content :global(.vtex-input-prefix__group) { .subscriberContainer .content :global(.vtex-input-prefix__group) {
border: none; border: 0.6px solid #989898;
border-radius: 0%;
} }
.subscriberContainer .content .inputEmail, .subscriberContainer .content .inputEmail,
.subscriberContainer .content .inputName { .subscriberContainer .content .inputName {
border: 0.6px solid #989898;
margin: 0; margin: 0;
} }
.subscriberContainer .content .submit { .subscriberContainer .content .submit {
position: absolute; position: absolute;
top: 55px; top: 55px;
width: 100%; width: 100%;
cursor: pointer;
} }
.subscriberContainer .content .submit :global(.vtex-button) { .subscriberContainer .content .submit :global(.vtex-button) {
width: 100%; width: 100%;
background-color: #000000; background-color: #000000;
border: none;
border-radius: 0%;
height: 49px; height: 49px;
} }
.subscriberContainer .content .submit :global(.vtex-button__label) { .subscriberContainer .content .submit :global(.vtex-button__label) {
@ -357,3 +364,14 @@
line-height: 25px; line-height: 25px;
color: #fff; color: #fff;
} }
.subscriberContainer .content :global(.vtex-input__error) {
margin: 0;
font-size: 12px;
line-height: 16px;
}
.subscriberContainer .success {
position: absolute;
top: 90px;
font-size: 12px;
line-height: 16px;
}

View File

@ -18,3 +18,32 @@
} }
} }
} }
//PRATELEIRA PRECOS
.listPrice--summary {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray11;
margin-bottom: 8px;
:global(.vtex-product-price-1-x-currencyCode--summary) {
&::before {
content: "de ";
}
}
:global(.vtex-product-price-1-x-listPriceValue--summary) {
&:last-child {
&::after {
content: " por";
}
}
}
}
.sellingPrice--summary {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: $color-black-100;
}

View File

@ -0,0 +1,16 @@
.nameContainer {
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
.productBrand {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-black-100;
}
}
.spacer {
display: none;
}

View File

@ -0,0 +1,12 @@
.container--title-prateleira {
margin-top: 16px;
margin-bottom: 12px;
.paragraph--title-prateleira {
margin: 0;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $color-gray8;
}
}

View File

@ -0,0 +1,29 @@
//DOTS
.paginationDotsContainer--prateleira {
align-items: center;
.paginationDot--prateleira {
background-color: $color-black-100;
margin-left: 6px;
margin-right: 6px;
}
.paginationDot--prateleira--isActive {
background-color: $color-white;
border: 0.5px solid #000000;
width: 17px !important;
height: 17px !important;
}
}
//SLIDES
.slide--prateleira {
margin-right: 8px;
margin-left: 8px;
margin-bottom: 32px;
}
.sliderArrows--prateleira {
margin: 14px;
}

View File

@ -35,6 +35,7 @@
.productImagesThumb { .productImagesThumb {
max-width: 90px; max-width: 90px;
width: 90px !important;
margin-right: 16px; margin-right: 16px;
} }
@ -323,6 +324,8 @@
//PRODUTO INDISPONIVEL //PRODUTO INDISPONIVEL
.subscriberContainer { .subscriberContainer {
position: relative;
.title { .title {
font-size: 0; font-size: 0;
margin: 0; margin: 0;
@ -368,12 +371,12 @@
} }
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
border: none; border: 0.6px solid $color-gray7;
border-radius: 0%;
} }
.inputEmail, .inputEmail,
.inputName { .inputName {
border: 0.6px solid $color-gray7;
margin: 0; margin: 0;
} }
@ -381,10 +384,13 @@
position: absolute; position: absolute;
top: 55px; top: 55px;
width: 100%; width: 100%;
cursor: pointer;
:global(.vtex-button) { :global(.vtex-button) {
width: 100%; width: 100%;
background-color: $color-black-100; background-color: $color-black-100;
border: none;
border-radius: 0%;
height: 49px; height: 49px;
} }
@ -399,5 +405,17 @@
} }
} }
} }
:global(.vtex-input__error) {
margin: 0;
font-size: 12px;
line-height: 16px;
}
}
.success {
position: absolute;
top: 90px;
font-size: 12px;
line-height: 16px;
} }
} }

View File

@ -14,6 +14,7 @@ $color-gray7: #989898;
$color-gray8: #575757; $color-gray8: #575757;
$color-gray9: #bfbfbf; $color-gray9: #bfbfbf;
$color-gray10: #868686; $color-gray10: #868686;
$color-gray11: #bababa;
$color-blue: #4267b2; $color-blue: #4267b2;