RamonDiasFerreira/challenge-vtex-io-ramon-dias-ferreira
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

1
manifest.json
View File

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

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

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

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

@ -1,98 +1,18 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
/*
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 */
.stretchChildrenWidth {
padding: 0;
}
@media screen and (min-width: 40em) {
.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 {
.flexRowContent--identifier {
display: flex;
max-height: 100%;
}
.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;
flex-direction: column;
align-items: end;
}

13
styles/css/vtex.product-identifier.css
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;
}

9
styles/css/agenciamagma.store-theme.css → styles/css/vtex.product-sumary.css
View File

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

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

@ -1,42 +1,17 @@
.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;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
/*
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 */
.element {
align-items: center;
text-align: center;
}
.image {
border-radius: 0.25rem;
.imageContainer {
height: 60%;
}

45
styles/css/vtex.slider-layout.css
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 {
justify-content: center;
padding: 0 40px;
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
.slide {
background-color: #FFFFFF;
}
.sliderTrackContainer {
max-width: 100%;
.paginationDot {
background-color: #000000;
}
.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;
.paginationDot--carousel--isActive {
background-color: #Fff;
border: 0.5px solid #000000;
}

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

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

8
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

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

13
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

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

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

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

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

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

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