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

feat:modifica botoes de tamanho do produto

Browse Source
This commit is contained in:
Naian Felix dos Santos 2023-01-31 15:43:21 -03:00
parent a0a2843b89
commit 41964c97ff
17 changed files with 266 additions and 91 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",

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

@ -108,7 +108,6 @@
"product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
@ -134,10 +133,12 @@
"flex-layout.row#buy-button": {
"props": {
"blockClass": "button-container",
"marginTop": 4,
"preventHorizontalStretch": true,
"marginBottom": 7
},
"children": ["add-to-cart-button"]
"children": ["product-quantity", "add-to-cart-button"]
},
"flex-layout.row#product-availability": {

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

@ -19,6 +19,15 @@
.container .homeLink {
display: none;
}
.container .homeLink .link--1 {
padding-left: 0;
}
.container .arrow--1 {
padding-left: 0;
}
.container .arrow--1 .link--1 {
padding-left: 0;
}
.container .arrow--1 .caretIcon {
display: none;
}

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

@ -12,7 +12,20 @@
padding: 0;
margin: 0;
}
.flexRowContent .flexColChild .product-identifier--productReference {
float: right;
}
.product-images {
padding-left: 0;
}
.product-identifier__label {
display: none;
}
.flexRowContent--button-container :global(.vtex-button) {
background-color: #000;
border: 0;
height: 50px;
}

17
styles/css/vtex.oriduct-price.css Normal file
View File

@ -0,0 +1,17 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
/* Grid breakpoints */
.currencyInteger {
display: none;
}
.savings {
display: none;
}

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

@ -1,79 +1,32 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
/* Grid breakpoints */
.listPrice,
.savings {
display: none;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}

41
styles/css/vtex.product-quantity.css Normal file
View File

@ -0,0 +1,41 @@
@charset "UTF-8";
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
/* Grid breakpoints */
.quantitySelectorContainer {
border: 0;
margin: 0;
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
:global(.vtex-numeric-stepper__input),
:global(.vtex-numeric-stepper__plus-button),
:global(.vtex-numeric-stepper__minus-button) {
height: 50px;
background-color: white;
}
:global(.vtex-numeric-stepper__input) {
border-left: 0;
border-right: 0;
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
}
:global(.vtex-add-to-cart-button-0-x-buttonText)::before {
content: "ADICIONAR Á SACOLA";
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}

3
styles/css/vtex.produvt-quantity.css
View File

@ -11,6 +11,9 @@
.quatitySelectorContainer {
border: 0;
}
.quatitySelectorContainer .quantitySelectorTitle {
display: none;
}
.quatitySelectorContainer .quatitySelectorStepper {
border: 0;
}

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

@ -36,6 +36,39 @@
color: #000;
border: 2px;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::before {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
display: none;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::before {
content: "OUTRAS CORES: ";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .skuSelectorContainer .skuSelectorInternalBox {
padding: 0;
border-radius: 50%;

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

@ -7,8 +7,15 @@
}
.homeLink {
display: none;
.link--1 {
padding-left: 0;
}
}
.arrow--1 {
padding-left: 0;
.link--1 {
padding-left: 0;
}
.caretIcon {
display: none;
}

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

@ -0,0 +1,24 @@
.flexRowContent {
padding: 0;
margin: 0;
.flexColChild {
.product-identifier--productReference {
float: right;
}
}
}
.product-images {
padding-left: 0;
}
.product-identifier__label {
display: none;
}
.flexRowContent--button-container {
:global(.vtex-button) {
background-color: #000;
border: 0;
height: 50px;
}
}

21
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,21 @@
.listPrice,
.savings {
display: none;
}
.sellingPrice {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}

30
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,30 @@
.quantitySelectorContainer {
border: 0;
margin: 0;
.quantitySelectorTitle {
display: none;
}
}
:global(.vtex-numeric-stepper__input),
:global(.vtex-numeric-stepper__plus-button),
:global(.vtex-numeric-stepper__minus-button) {
height: 50px;
background-color: white;
}
:global(.vtex-numeric-stepper__input) {
border-left: 0;
border-right: 0;
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
&::before {
content: "ADICIONAR Á SACOLA";
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
}

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

@ -1,9 +0,0 @@
.quatitySelectorContainer {
border: 0;
.quatitySelectorStepper {
border: 0;
.hideDecorator {
background-color: blueviolet;
}
}
}

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

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

@ -26,6 +26,46 @@
}
}
}
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-size: 0;
&::before {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
.skuSelectorSubcontainer--cor {
.skuSelectorImageValue {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorNameSeparator {
display: none;
}
.skuSelectorName {
font-size: 0;
&::before {
content: "OUTRAS CORES: ";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
.skuSelectorInternalBox {
padding: 0;

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

@ -1,7 +0,0 @@
.flexRowContent {
padding: 0;
margin: 0;
}
.product-images {
padding-left: 0;
}