feat: ajustes na prateleira de produtos, ajustes na newsletter, começando a estilizar o produto individual

This commit is contained in:
Ramon Dias Ferreira 2023-02-08 16:22:43 -03:00
parent d7c663659b
commit 6505aaea6f
13 changed files with 172 additions and 196 deletions

View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose" "postreleasy": "vtex publish --verbose"
}, },
"dependencies": { "dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x", "vtex.store": "2.x",
"vtex.store-header": "2.x", "vtex.store-header": "2.x",
"vtex.product-summary": "2.x", "vtex.product-summary": "2.x",

View File

@ -13,7 +13,7 @@
// "list-context.product-list", // "list-context.product-list",
// "slider-layout", // "slider-layout",
// "shelf.relatedProducts", // "shelf.relatedProducts",
"newsletter", "newsletter#footer",
"product-questions-and-answers" "product-questions-and-answers"
] ]
}, },
@ -85,7 +85,7 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "60%", "width": "45%",
"rowGap": 0 "rowGap": 0
} }
}, },
@ -98,9 +98,15 @@
"desktop": "auto", "desktop": "auto",
"phone": "16:9" "phone": "16:9"
}, },
"displayThumbnailsArrows": true "thumbnailsOrientation": "horizontal",
"showNavigationArrows": false,
"showPaginationDots": false,
"displayThumbnailsArrows": false,
"blockClass": "produto-carrossel"
} }
}, },
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
"props": { "props": {
"preventVerticalStretch": true, "preventVerticalStretch": true,
@ -108,12 +114,12 @@
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-rating-summary", // "product-rating-summary",
"flex-layout.row#list-price-savings",
// "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments",
"product-separator", // "product-separator",
"product-identifier.product",
"sku-selector", "sku-selector",
"product-quantity", "product-quantity",
"product-assembly-options", "product-assembly-options",
@ -127,9 +133,10 @@
"flex-layout.row#product-name": { "flex-layout.row#product-name": {
"props": { "props": {
"marginBottom": 3 "marginBottom": 3,
"blockClass": "identifier"
}, },
"children": ["vtex.store-components:product-name"] "children": ["vtex.store-components:product-name", "product-identifier.product"]
}, },
"sku-selector": { "sku-selector": {
@ -319,14 +326,6 @@
"list-context.product-list#carousel-list": { "list-context.product-list#carousel-list": {
"blocks": ["product-summary.shelf#carousel-shelf"], "blocks": ["product-summary.shelf#carousel-shelf"],
"children": ["slider-layout#carousel"] "children": ["slider-layout#carousel"]
@ -352,8 +351,15 @@
"showNavigationArrows": "desktopOnly", "showNavigationArrows": "desktopOnly",
"blockClass": "carousel" "blockClass": "carousel"
} }
},
"newsletter#footer": {
"props": {
"label": "Assine nossa newsletter",
"placeholder": "Digite seu e-mail"
}
} }
} }

View File

@ -1,98 +1,18 @@
.flexRowContent--menu-link, /*
.flexRowContent--main-header { 0 - 600PX: Phone
padding: 0 0.5rem; 600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.stretchChildrenWidth {
padding: 0;
} }
@media screen and (min-width: 40em) { .flexRowContent--identifier {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex; display: flex;
max-height: 100%; flex-direction: column;
} align-items: end;
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
} }

View File

@ -1,3 +1,12 @@
.product-identifier--productReference { /*
margin-bottom: 1rem; 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 */
.product-identifier {
text-align: end;
} }

View File

@ -7,10 +7,7 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.html { .element {
background-color: red; align-items: center;
} text-align: center;
.html--pdp-breadcrumb {
background-color: green;
} }

View File

@ -1,42 +1,17 @@
.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) { .element {
opacity: 1; align-items: center;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
}
.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;
} }
.image { .imageContainer {
border-radius: 0.25rem; height: 60%;
} }

View File

@ -1,31 +1,30 @@
/*
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 */
.slideChildrenContainer {
text-align: center;
margin-bottom: 67px;
}
.sliderLayoutContainer { .sliderLayoutContainer {
justify-content: center; padding: 0 40px;
} }
.sliderLayoutContainer--carousel { .slide {
background-color: #F0F0F0; background-color: #FFFFFF;
min-height: 450px;
} }
.sliderTrackContainer { .paginationDot {
max-width: 100%; background-color: #000000;
} }
.paginationDotsContainer { .paginationDot--carousel--isActive {
margin-top: .5rem; background-color: #Fff;
margin-bottom: .5rem; border: 0.5px solid #000000;
}
.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

@ -7,19 +7,34 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container {
padding: 0 40px;
}
.productNameContainer {
text-align: end;
}
.productDescriptionContainer { .productDescriptionContainer {
width: 43.89%; width: 43.89%;
} }
.productImagesContainer { .productImagesContainer {
width: 43.89%; width: 43.89%;
margin-right: 32px;
} }
.productImage { .productImage {
display: flex; display: flex;
} }
.produto-carrossel .swiper-wrapper {
gap: 16px;
}
.discountInsideContainer {
display: none;
}
.newsletter { .newsletter {
color: #FFFFFF; color: #FFFFFF;
background: #000000; background: #000000;

View File

@ -1,8 +0,0 @@
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
}

View File

@ -0,0 +1,13 @@
.stretchChildrenWidth{
padding: 0;
}
.flexRowContent--identifier{
display: flex;
flex-direction: column;
align-items: end;
}

View File

@ -0,0 +1,10 @@
.element{
align-items: center;
text-align: center;
}
.imageContainer{
height: 60%;
}

View File

@ -0,0 +1,24 @@
.slideChildrenContainer{
text-align: center;
margin-bottom: 67px;
}
.sliderLayoutContainer{
padding: 0 40px;
}
.slide{
background-color: #FFFFFF;
}
.paginationDot{
background-color: #000000;
}
.paginationDot--carousel--isActive{
background-color: #Fff;
border: 0.5px solid #000000;
}

View File

@ -1,17 +1,34 @@
.container {
padding: 0 40px;
}
.productNameContainer{
text-align: end;
}
.productDescriptionContainer{ .productDescriptionContainer{
width: 43.89%; width: 43.89%;
} }
.productImagesContainer{ .productImagesContainer{
width: 43.89%; width: 43.89%;
margin-right: 32px;
} }
.productImage{ .productImage{
display: flex; display: flex;
} }
.produto-carrossel{
.swiper-wrapper{
gap: 16px
}
}
.discountInsideContainer{
display: none;
}
.newsletter{ .newsletter{
color: #FFFFFF; color: #FFFFFF;