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 layout ultrawide

Browse Source
This commit is contained in:
Cainã Milech 2023-01-31 18:46:06 -03:00
parent 8ee093fd3c
commit 1e22e81ab8
16 changed files with 270 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/components/Html/styles.css
View File

@ -61,3 +61,7 @@
padding: 0 64px;
}
}
[class*="html--containerbotao"] {
display: contents;
}

6
store/blocks/home/home.jsonc
View File

@ -2,9 +2,9 @@
"store.home": {
"blocks": [
"list-context.image-list#demo",
"example-component", /* You can make references to blocks defined in other files.
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
"flex-layout.row#deals",
"example-component",
/* You can make references to blocks defined in other files.
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
"__fold__",
"rich-text#shelf-title",
"flex-layout.row#shelf",

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

@ -1,18 +1,10 @@
{
"store.product": {
"children": [
/*"html#breadcrumb",*/
"breadcrumb#pdp",
"condition-layout.product#availability",
"tab-layout#details",
/*"html#description",*/
/*"flex-layout.row#description",*/
/*"flex-layout.row#specifications-title",*/
/*"product-specification-group#table",*/
"list-context.product-list#prateleira",
/*"shelf.relatedProducts",*/
/*"product-questions-and-answers",*/
"newsletter"
]
},
@ -27,7 +19,7 @@
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf"],
"children": ["rich-text#prateleira", "slider-layout#prateleira"]
"children": ["rich-text#prateleira", "html#slidercontainer"]
},
"rich-text#prateleira": {
"props": {
@ -49,10 +41,18 @@
"blockClass": "prateleira"
}
},
"html#slidercontainer": {
"props": {
"testId": "product-summary-list",
"tag": "div"
},
"children": ["slider-layout#prateleira"]
},
"breadcrumb#pdp": {
"props": {
"blockClass": "testebread",
"testId": "breadcrumbs",
"blockClass": "breadcrumb",
"showOnMobile": true
}
},
@ -86,11 +86,6 @@
"flex-layout.row#product-main": {
"props": {
/*"colGap": 7,*/
/*"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingBottom": 7,*/
"blockClass": "container-produto"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@ -125,8 +120,9 @@
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
"children": ["html#imagens"]
},
"product-images": {
"props": {
"showNavigationArrows": false,
@ -141,6 +137,11 @@
"blockClass": "images-container"
}
},
"html#imagens": {
"props": { "testId": "product-images" },
"children": ["product-images"]
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
@ -150,20 +151,13 @@
"flex-layout.row#product-name",
"html#codigo",
"product-rating-summary",
/*"flex-layout.row#list-price-savings", desconto*/
"flex-layout.row#selling-price",
"product-installments",
"Pix",
/*"product-separator",*/
"sku-selector",
/*"product-quantity",*/
/*"product-assembly-options",*/
/*"product-gifts",*/
/*"flex-layout.row#buy-button",*/
"html#pix",
"html#skus",
"html#qtd-btn",
"availability-subscriber",
"shipping-simulator"
/*"share#default"*/
]
},
@ -190,6 +184,14 @@
"children": ["product-identifier.product"]
},
"html#pix": {
"props": {
"testId": "pix-price",
"blockClass": "pix"
},
"children": ["Pix"]
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
@ -197,6 +199,10 @@
"blockClass": "skus"
}
},
"html#skus": {
"props": { "testId": "sku-selector" },
"children": ["sku-selector"]
},
"flex-layout.row#buy-button": {
"props": {
@ -213,7 +219,15 @@
"testId": "qtd-btn",
"blockClass": "qtd-btn"
},
"children": ["product-quantity", "add-to-cart-button"]
"children": ["html#quantidade", "html#botao"]
},
"html#botao": {
"props": {
"tag": "div",
"testId": "add-to-cart-button",
"blockClass": "containerbotao"
},
"children": ["add-to-cart-button"]
},
"product-quantity": {
@ -221,14 +235,17 @@
"blockClass": "quantidade"
}
},
"html#quantidade": {
"props": {
"tag": "div",
"testId": "product-quantity",
"blockClass": "containerquantidade"
},
"children": ["product-quantity"]
},
"flex-layout.row#product-availability": {
"props": {
/*"colGap": 7,*/
/*"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingBottom": 7,*/
"blockClass": "container-produto"
},
"children": [

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

@ -1,5 +1,9 @@
{
"product-summary.shelf": {
"html#prateleira": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "item-prateleira"
},
"children": [
"stack-layout#prodsum",
"product-summary-name",
@ -7,10 +11,11 @@
"product-summary-space",
"product-list-price#summary",
"flex-layout.row#selling-price-savings"
/*"product-installments#summary",
"add-to-cart-button"*/
]
},
"product-summary.shelf": {
"children": ["html#prateleira"]
},
"flex-layout.col#productRating": {
"props": {
"blockClass": "productRating"

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

@ -7,7 +7,7 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.container--testebread {
.container--breadcrumb {
margin-left: 40px;
margin-right: 40px;
font-style: normal;
@ -16,29 +16,35 @@
line-height: 19px;
color: #929292;
}
.container--testebread .homeIcon--testebread {
@media screen and (min-width: 1921px) {
.container--breadcrumb {
margin-left: 360px;
margin-right: 360px;
}
}
.container--breadcrumb .homeIcon--breadcrumb {
display: none;
}
.container--testebread .homeLink--testebread {
.container--breadcrumb .homeLink--breadcrumb {
vertical-align: top;
}
.container--testebread .homeLink--testebread::after {
.container--breadcrumb .homeLink--breadcrumb::after {
content: "Home";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.container--testebread .link--testebread--1 {
.container--breadcrumb .link--breadcrumb--1 {
font-size: 0;
}
.container--testebread .link--testebread--1::after {
.container--breadcrumb .link--breadcrumb--1::after {
content: "Sapatos";
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.container--testebread .termArrow--testebread,
.container--testebread .term--testebread {
.container--breadcrumb .termArrow--breadcrumb,
.container--breadcrumb .term--breadcrumb {
display: none;
}

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

@ -30,6 +30,15 @@
padding-left: 40px;
padding-right: 40px;
}
@media screen and (min-width: 1921px) {
.flexRow--container-produto {
padding-left: 360px;
padding-right: 360px;
}
}
.flexRow--container-produto :global(.vtex-store-components-3-x-container) {
display: contents;
}
.flexRowContent--container-produto {
gap: 32px;

29
styles/css/vtex.product-quantity.css
View File

@ -17,11 +17,6 @@
display: none;
}
/*.vtex-numeric-stepper__input {
border-left: none;
border-right: none;
height: 50px;
}*/
.hideDecorators {
border: 1px solid red;
border-left: none;
@ -29,24 +24,11 @@
height: 49px;
}
/*.numeric-stepper__plus-button {
border: none;
height: 50px;
}*/
/*.quantitySelectorInputContainer {
height: 50px;
}*/
/*.availableQuantityContainer {
border: 1px solid yellow;
margin: 0;
padding: 0;
}
*/
.quantitySelectorContainer--quantidade {
margin-right: 5px;
margin-right: 10px;
margin-bottom: 16px;
padding: 0;
height: 100%;
/*height: 49px;*/
}
@media screen and (max-width: 768px) {
.quantitySelectorContainer--quantidade {
@ -54,14 +36,9 @@
}
}
/*.summaryContainer {
background-color: blue;
border: 1px solid orange;
height: 49px;
}*/
:global(.vtex-numeric-stepper__input) {
height: 49px;
width: 30px;
width: 32px;
border-right: 0;
border-left: 0;
font-weight: 400;

39
styles/css/vtex.slider-layout.css
View File

@ -12,9 +12,20 @@
padding-right: 40px;
justify-content: center;
}
@media screen and (min-width: 1921px) {
.sliderLayoutContainer--prateleira {
padding-left: 360px;
padding-right: 360px;
}
}
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.1773%;
}
@media screen and (min-width: 1921px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.914%;
}
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.63%;
@ -54,14 +65,38 @@
}
.sliderArrows--prateleira {
margin: 14px;
margin: 30px;
}
@media screen and (min-width: 1921px) {
.sliderArrows--prateleira {
margin: 350px;
}
}
@media screen and (max-width: 1024px) {
.sliderArrows--prateleira {
margin: 28px;
margin: 30px;
}
}
@media screen and (max-width: 768px) {
.sliderArrows--prateleira {
margin: 34px;
}
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow) {
visibility: hidden;
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow)::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png);
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow) {
visibility: hidden;
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow)::before {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-caina.png);
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}

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

@ -348,8 +348,9 @@
.container--descricao {
margin: 0;
}
@media screen and (max-width: 1024px) {
.container--descricao {
.productDescriptionContainer--descricao {
border-bottom: 1px solid #bfbfbf;
padding-bottom: 16px;
}
@ -362,32 +363,41 @@
color: #575757;
margin-bottom: 8px;
}
@media screen and (min-width: 1921px) {
.productDescriptionTitle--descricao {
font-size: 32px;
}
}
@media screen and (max-width: 1024px) {
.productDescriptionTitle--descricao {
font-size: 20px;
}
}
.content--descricao {
/*.content--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (max-width: 1024px) {
.content--descricao {
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}
}*/
.productDescriptionText--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (max-width: 768px) {
@media screen and (min-width: 1921px) {
.productDescriptionText--descricao {
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
.productDescriptionText--descricao {
font-size: 14px;
line-height: 19px;
@ -615,4 +625,12 @@
line-height: 19px;
color: #fff;
padding: 0;
}
:global(.vtex-store-footer-2-x-socialNetworksContainer) {
margin: 0;
}
:global(.vtex-store-footer-2-x-acceptedPaymentMethodContainer) {
margin: 0;
}

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

@ -11,6 +11,12 @@
padding-left: 40px;
padding-right: 40px;
}
@media screen and (min-width: 1921px) {
.container--details {
padding-left: 360px;
padding-right: 360px;
}
}
.listContainer {
border-bottom: 1px solid #bfbfbf;
@ -47,6 +53,12 @@
background-color: transparent;
cursor: pointer;
}
@media screen and (max-width: 1024px) {
.listItem :global(.vtex-button) {
width: 100%;
display: flex;
}
}
.listItem :global(.vtex-button) {
background-color: transparent;
border: none;
@ -60,9 +72,14 @@
margin: 0;
padding: 0;
}
@media screen and (min-width: 1921px) {
.listItem :global(.vtex-button__label) {
font-size: 24px;
}
}
.listItemActive {
border-bottom: 2px solid #000000;
/*border-bottom: 2px solid $color-black-100;*/
}
.listItemActive :global(.vtex-button__label) {
color: #000000;
@ -77,10 +94,18 @@
.listItemActive--descricao {
border-bottom: 2px solid #000000;
padding-left: 14px;
padding-right: 14px;
}
@media screen and (min-width: 1921px) {
.listItemActive--descricao {
border-bottom: 3px solid #000000;
}
}
@media screen and (max-width: 1024px) {
.listItemActive--descricao {
border: none;
padding: 0;
}
}
.listItemActive--descricao :global(.vtex-button) {

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

@ -1,4 +1,4 @@
.container--testebread {
.container--breadcrumb {
margin-left: 40px;
margin-right: 40px;
font-style: normal;
@ -6,12 +6,16 @@
font-size: 14px;
line-height: 19px;
color: $color-gray6;
@media screen and (min-width: 1921px) {
margin-left: 360px;
margin-right: 360px;
}
.homeIcon--testebread {
.homeIcon--breadcrumb {
display: none;
}
.homeLink--testebread {
.homeLink--breadcrumb {
vertical-align: top;
&::after {
content: "Home";
@ -22,7 +26,7 @@
}
}
.link--testebread--1 {
.link--breadcrumb--1 {
font-size: 0;
&::after {
@ -33,8 +37,8 @@
}
}
.termArrow--testebread,
.term--testebread {
.termArrow--breadcrumb,
.term--breadcrumb {
display: none;
}
}

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

@ -18,6 +18,13 @@
.flexRow--container-produto {
padding-left: 40px;
padding-right: 40px;
@media screen and (min-width: 1921px) {
padding-left: 360px;
padding-right: 360px;
}
:global(.vtex-store-components-3-x-container) {
display: contents;
}
}
.flexRowContent--container-produto {

32
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -8,12 +8,6 @@
display: none;
}
/*.vtex-numeric-stepper__input {
border-left: none;
border-right: none;
height: 50px;
}*/
.hideDecorators {
border: 1px solid red;
border-left: none;
@ -21,39 +15,19 @@
height: 49px;
}
/*.numeric-stepper__plus-button {
border: none;
height: 50px;
}*/
/*.quantitySelectorInputContainer {
height: 50px;
}*/
/*.availableQuantityContainer {
border: 1px solid yellow;
margin: 0;
padding: 0;
}
*/
.quantitySelectorContainer--quantidade {
margin-right: 5px;
margin-right: 10px;
margin-bottom: 16px;
padding: 0;
height: 100%;
/*height: 49px;*/
@media screen and (max-width: 768px) {
margin: 0 0 10px 0;
}
}
/*.summaryContainer {
background-color: blue;
border: 1px solid orange;
height: 49px;
}*/
:global(.vtex-numeric-stepper__input) {
height: 49px;
width: 30px;
width: 32px;
border-right: 0;
border-left: 0;
font-weight: 400;

34
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -2,9 +2,16 @@
padding-left: 40px;
padding-right: 40px;
justify-content: center;
@media screen and (min-width: 1921px) {
padding-left: 360px;
padding-right: 360px;
}
.sliderTrackContainer--prateleira {
width: 97.1773%;
@media screen and (min-width: 1921px) {
width: 97.914%;
}
@media screen and (max-width: 1024px) {
width: 97.63%;
}
@ -46,14 +53,35 @@
}
.sliderArrows--prateleira {
margin: 14px;
margin: 30px;
@media screen and (min-width: 1921px) {
margin: 350px;
}
@media screen and (max-width: 1024px) {
margin: 28px;
margin: 30px;
}
@media screen and (max-width: 768px) {
margin: 34px;
}
}
.sliderLayoutContainer {
//ARROWS CUSTOM
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
visibility: hidden;
&::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png);
}
}
:global(.vtex-slider-layout-0-x-sliderLeftArrow) {
visibility: hidden;
&::before {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-caina.png);
}
}
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}

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

@ -389,6 +389,9 @@
.container--descricao {
margin: 0;
}
.productDescriptionContainer--descricao {
@media screen and (max-width: 1024px) {
border-bottom: 1px solid $color-gray9;
padding-bottom: 16px;
@ -400,26 +403,34 @@
line-height: 32px;
color: $color-gray8;
margin-bottom: 8px;
@media screen and (min-width: 1921px) {
font-size: 32px;
}
@media screen and (max-width: 1024px) {
font-size: 20px;
}
}
.content--descricao {
/*.content--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}
}*/
.productDescriptionText--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
@media screen and (max-width: 768px) {
@media screen and (min-width: 1921px) {
font-size: 18px;
line-height: 25px;
}
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
@ -650,3 +661,10 @@
}
}
}
//BUG SCROLL
:global(.vtex-store-footer-2-x-socialNetworksContainer) {
margin: 0;
}
:global(.vtex-store-footer-2-x-acceptedPaymentMethodContainer) {
margin: 0;
}

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

@ -1,6 +1,10 @@
.container--details {
padding-left: 40px;
padding-right: 40px;
@media screen and (min-width: 1921px) {
padding-left: 360px;
padding-right: 360px;
}
}
.listContainer {
@ -34,6 +38,10 @@
:global(.vtex-button) {
background-color: transparent;
cursor: pointer;
@media screen and (max-width: 1024px) {
width: 100%;
display: flex;
}
}
:global(.vtex-button) {
@ -49,11 +57,15 @@
text-transform: capitalize;
margin: 0;
padding: 0;
@media screen and (min-width: 1921px) {
font-size: 24px;
}
}
}
.listItemActive {
border-bottom: 2px solid $color-black-100;
/*border-bottom: 2px solid $color-black-100;*/
:global(.vtex-button__label) {
color: $color-black-100;
margin: 0;
@ -66,8 +78,14 @@
.listItemActive--descricao {
border-bottom: 2px solid $color-black-100;
padding-left: 14px;
padding-right: 14px;
@media screen and (min-width: 1921px) {
border-bottom: 3px solid $color-black-100;
}
@media screen and (max-width: 1024px) {
border: none;
padding: 0;
}
:global(.vtex-button) {
border: none;