cainamilech/challenge-vtex-io-caina
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pdp): Adiciona slider layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,13 +7,40 @@
"tab-layout#details",
/*"html#description",*/
/*"flex-layout.row#description",*/
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
/*"flex-layout.row#specifications-title",*/
/*"product-specification-group#table",*/
"list-context.product-list#prateleira",
/*"shelf.relatedProducts",*/
"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": {
"children": ["tab-list#details", "tab-content#details"],
"props": {
@ -86,6 +113,7 @@
"product-images#description": {
"props": {
"displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "description-imagem"
}
},
@ -188,8 +216,7 @@
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0,
"width": "46%"
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",

30
store/blocks/product-summary/product-summary-list.jsonc
View File

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

24
store/blocks/product-summary/product-summary.jsonc
View File

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

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

@ -23,4 +23,25 @@
.installments--parcelamentos .installmentValue::before {
content: "de ";
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;
}

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

@ -1,42 +1,24 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
}
/*
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 */
.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;
padding-top: 8px;
padding-bottom: 8px;
}
.nameContainer .productBrand {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #000000;
}
.image {
border-radius: 0.25rem;
}
.spacer {
display: none;
}

13
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,15 @@
1800px + : Big desktop
*/
/* 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;
}

56
styles/css/vtex.slider-layout.css
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 {
background-color: #F0F0F0;
min-height: 450px;
.slide--prateleira {
margin-right: 8px;
margin-left: 8px;
margin-bottom: 32px;
}
.sliderTrackContainer {
max-width: 100%;
}
.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;
}
.sliderArrows--prateleira {
margin: 14px;
}

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

@ -44,6 +44,7 @@
.productImagesThumb {
max-width: 90px;
width: 90px !important;
margin-right: 16px;
}
@ -289,6 +290,9 @@
border: 1px solid red;
}
.subscriberContainer {
position: relative;
}
.subscriberContainer .title {
font-size: 0;
margin: 0;
@ -330,21 +334,24 @@
color: #989898;
}
.subscriberContainer .content :global(.vtex-input-prefix__group) {
border: none;
border: 0.6px solid #989898;
border-radius: 0%;
}
.subscriberContainer .content .inputEmail,
.subscriberContainer .content .inputName {
border: 0.6px solid #989898;
margin: 0;
}
.subscriberContainer .content .submit {
position: absolute;
top: 55px;
width: 100%;
cursor: pointer;
}
.subscriberContainer .content .submit :global(.vtex-button) {
width: 100%;
background-color: #000000;
border: none;
border-radius: 0%;
height: 49px;
}
.subscriberContainer .content .submit :global(.vtex-button__label) {
@ -356,4 +363,15 @@
font-size: 18px;
line-height: 25px;
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;
}

29
styles/sass/pages/product/vtex.product-price.scss
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;
}

16
styles/sass/pages/product/vtex.product-summary.scss Normal file
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;
}

12
styles/sass/pages/product/vtex.rich-text.scss
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;
}
}

29
styles/sass/pages/product/vtex.slider-layout.scss Normal file
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;
}

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

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

1
styles/sass/utils/_vars.scss
View File

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