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

feat: Cria bloco de prateleira

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-01-30 21:37:44 -03:00
parent 38ce16fbf5
commit fbe6eb7bbd
14 changed files with 222 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,9 @@
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"tab-layout",
"shelf.relatedProducts",
// "product-summary.shelf#carousel",
"rich-text#carousel",
"list-context.product-list#product-carousel",
"product-questions-and-answers",
"newsletter"
]
@ -69,15 +71,6 @@
]
},
// "product-specification-badges": {
// "props": {
// "specificationGroupName": "Group",
// "specificationName": "On Sale",
// "visibleWhen": "True",
// "displayValue": "SPECIFICATION_NAME"
// }
// },
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
@ -335,6 +328,28 @@
}
},
"rich-text#carousel": {
"props": {
"text": "Você também pode gostar:",
"textAlignment": "CENTER",
"textPosition": "CENTER",
"blockClass": "carousel-title"
}
},
"product-summary.shelf#carousel": {
"children": [
"product-summary-image",
"product-summary-name",
"product-price"
]
},
"list-context.product-list#product-carousel": {
"blocks": ["product-summary.shelf#carousel"],
"children": ["slider-layout#demo-products"]
},
"newsletter": {
"props": {
"label": "Assine nossa newsletter",

4
styles/css/vtex.breadcrumb.css
View File

@ -8,11 +8,11 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
margin: 6px 36px;
padding: 16px 36px;
}
@media screen and (min-width: 112.5em) {
.container {
margin: 6px 356px;
margin: 0px 356px;
}
}
.container .link,

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

@ -9,6 +9,7 @@
/* Grid breakpoints */
.flexRowContent {
margin: 0;
padding-top: 0;
}
.flexRowContent--menu-link,

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

@ -1,42 +1,73 @@
.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 */
:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
width: 314px;
}
.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;
}
.imageWrapper {
height: 314px;
display: flex;
justify-content: center;
align-items: center;
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
padding: 0 0 8px;
}
.nameContainer .brandName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #000000;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
.container {
text-align: start;
:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
margin: 0;
padding-bottom: 8px;
}
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before {
content: "de ";
}
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after {
content: " por";
}
.imageContainer {
text-align: center;
:global(.vtex-slider-layout-0-x-sliderRightArrow) :global(.vtex-slider-layout-0-x-caretIcon)::after {
display: block;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
}
.image {
border-radius: 0.25rem;
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
:global(.vtex-slider-layout-0-x-paginationDotsContainer) :global(.vtex-slider-layout-0-x-paginationDot--shelf) {
color: #000000;
}

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

@ -7,3 +7,10 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.paragraph--carousel-title {
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
margin: 0;
}

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

@ -27,7 +27,6 @@
.productImageTag--main {
max-height: max-content !important;
max-width: 664px;
}
.carouselGaleryThumbs {
@ -96,6 +95,12 @@
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
order: 1;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
@ -335,8 +340,10 @@
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
grid-area: email;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button) {
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
grid-area: submit;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button) {
background-color: #000000;
border: none;
border-radius: 0;
@ -363,6 +370,8 @@
position: relative;
}
.newsletter :global(.vtex-store-components-3-x-form) .label {
display: flex;
flex-direction: column;
color: #fff;
font-weight: 400;
font-size: 24px;
@ -373,12 +382,9 @@
font-size: 18px;
line-height: 25px;
color: #929292;
position: absolute;
top: 85px;
right: 225px;
}
.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
padding-top: 52px;
padding-top: 16px;
}
.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) {
border: none;

1
styles/css/vtex.tab-layout.css
View File

@ -57,6 +57,7 @@
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
display: block;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {
font-weight: 400;

4
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -1,8 +1,8 @@
.container {
margin: 6px 36px;
padding: 16px 36px;
@media screen and (min-width: 112.5em) {
margin: 6px 356px;
margin: 0px 356px;
}
.link,

1
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -1,5 +1,6 @@
.flexRowContent {
margin: 0;
padding-top: 0;
}
.flexRowContent--menu-link,

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

@ -0,0 +1,86 @@
// :global(.vtex-slider-layout-0-x-slide--shelf) {
// width: 300px;
// }
:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
width: 314px;
}
.imageWrapper {
height: 314px;
display: flex;
justify-content: center;
align-items: center;
}
.nameContainer {
padding: 0 0 8px;
.brandName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $black;
}
}
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
:global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: $black;
}
}
:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-300;
margin: 0;
padding-bottom: 8px;
:global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-currencyContainer) {
&::before {
content: "de ";
}
&::after {
content: " por";
}
}
}
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
// display: none;
:global(.vtex-slider-layout-0-x-caretIcon) {
// display: none;
&::after {
display: block;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
}
}
}
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
:global(.vtex-slider-layout-0-x-paginationDotsContainer) {
:global(.vtex-slider-layout-0-x-paginationDot--shelf) {
color: $black;
}
}

7
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -0,0 +1,7 @@
.paragraph--carousel-title {
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $gray-600;
margin: 0;
}

5
styles/sass/pages/product/vtex.shelf.scss
View File

@ -1,5 +0,0 @@
.title {
font-weight: 400;
font-size: 24px;
line-height: 38px;
}

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

@ -16,7 +16,7 @@
.productImageTag--main {
max-height: max-content !important;
max-width: 664px;
// max-width: 664px;
}
.carouselGaleryThumbs {
@ -96,6 +96,14 @@
.skuSelectorSubcontainer--tamanho {
order: 1;
.skuSelectorNameContainer {
margin: 0;
.skuSelectorOptionsList {
margin: 0;
}
}
.skuSelectorItemTextValue {
padding: 0;
margin: auto;
@ -384,8 +392,11 @@
grid-area: email;
}
:global(.vtex-button) {
.submit {
grid-area: submit;
}
:global(.vtex-button) {
background-color: $black;
border: none;
border-radius: 0;
@ -409,6 +420,7 @@
.newsletter {
display: block;
background: $black;
:global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px;
width: 774px;
@ -416,6 +428,8 @@
position: relative;
.label {
display: flex;
flex-direction: column;
color: $white;
font-weight: 400;
font-size: 24px;
@ -426,14 +440,11 @@
font-size: 18px;
line-height: 25px;
color: $gray-500;
position: absolute;
top: 85px;
right: 225px;
}
}
:global(.vtex-store-components-3-x-inputGroup) {
padding-top: 52px;
padding-top: 16px;
:global(.vtex-input-prefix__group) {
border: none;

1
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -65,6 +65,7 @@
// }
:global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
display: block;
// max-width: 872px;
}