Thiago.bronisio/challenge-vtex-io-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona estilizacao em produtos indisponiveis

Browse Source
This commit is contained in:
Thiago Bronisio 2023-01-24 00:31:38 -03:00
parent cbd5dd4fdc
commit 1869e0a85f
9 changed files with 440 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
store/blocks/pdp/product-assembly.jsonc
View File

@ -1,6 +1,7 @@
{
"sticky-layout#buy-button": {
"props": {
"blockClass": "button-quantity",
"position": "bottom"
},
"children": ["flex-layout.row#buy-button"]

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

@ -79,6 +79,9 @@
},
"product-images": {
"props": {
"thumbnailsOrientation": "horizontal",
"showPaginationDots": false,
"showNavigationArrows": false,
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
@ -102,7 +105,6 @@
"product-separator",
"availability-subscriber",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
@ -132,7 +134,7 @@
"marginTop": 4,
"marginBottom": 7
},
"children": ["add-to-cart-button"]
"children": ["product-quantity","add-to-cart-button"]
},
"flex-layout.row#product-availability": {
@ -166,4 +168,5 @@
},
"children": ["availability-subscriber"]
}
}

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

@ -12,10 +12,6 @@
margin: 0;
width: 100%;
}
.flexRowContent .productNameContainer--quickview {
display: flex;
text-align: end;
}
.flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings {
display: none;
}

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

@ -0,0 +1,53 @@
/*
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 */
.quantitySelectorContainer {
height: 49px;
margin-top: 8px;
margin-bottom: 16px;
width: 149px;
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
.quantitySelectorContainer .quantitySelectorStepper {
height: 49px;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
width: 31.6px;
height: 49px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: none;
border-right: none;
color: #929292;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) {
height: 49px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: #fff;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
height: 49px;
width: 10px;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: #fff;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -11,8 +12,11 @@
margin: 0;
padding: 0 40px;
max-width: 100%;
/* TITULO, NOME DO PRODUTO */
/* TAMANHO E CORES DOS PRODUTOS */
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*PRODUTO INDISPONIVEL, TEXTOS */
/* FORMULARIO DE PRODUTO INDISPONIVEL */
}
.container .productNameContainer--quickview {
text-align: end;
@ -21,88 +25,170 @@
line-height: 34px;
color: #575757;
}
.container .skuSelectorContainer--sku-selector {
.container .skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorName {
.container .skuSelectorContainer .skuSelectorName {
font-size: 0;
}
.container .skuSelectorContainer .skuSelectorNameSeparator {
font-size: 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
content: "OUTRAS CORES:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: 19px;
font-size: 14px;
color: #929292;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: 19px;
font-size: 14px;
color: #929292;
}
.container .skuSelectorContainer .skuSelectorTextContainer {
display: none;
}
.container .skuSelectorContainer .skuSelectorOptionsList {
margin-top: 8px;
margin-left: 0;
}
.container .skuSelectorContainer .skuSelectorSelectorImageValue {
font-size: 0;
}
.container .skuSelectorOptionsList .skuSelectorItem {
width: 40px;
height: 40px;
}
.container .skuSelectorOptionsList .skuSelectorItem:first-child {
margin-left: 0;
}
.container .skuSelectorOptionsList .frameAround {
border-radius: 50%;
border-color: #000000;
}
.container .skuSelectorOptionsList .skuSelectorItemTextValue {
max-width: 100%;
display: flex;
justify-content: center;
color: #000000;
}
.container .skuSelectorOptionsList .diagonalCross {
margin: 4px;
}
.container .skuSelectorOptionsList .skuSelectorInternalBox {
border-radius: 50%;
}
.container .carouselGaleryThumbs {
margin: 16px 0;
}
.container .carouselGaleryThumbs .thumbImg {
width: 90px;
height: 90px;
border-radius: 8px;
}
.container .carouselGaleryThumbs .productImagesThumb {
margin-right: 16px;
height: 100% !important;
width: 90px !important;
}
.container .carouselGaleryThumbs .productImagesThumbCaret {
display: none;
}
.container .subscriberContainer {
width: 100%;
}
.container .subscriberContainer .title {
font-size: 0;
margin-bottom: 0;
}
.container .subscriberContainer .title::before {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.container .subscriberContainer .subscribeLabel {
font-size: 0;
}
.container .subscriberContainer .subscribeLabel::before {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
color: #868686;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector {
height: 40px;
width: 40px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .frameAround--sku-selector {
height: 40px;
width: 40px;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector {
border-radius: 50%;
border: 1px solid #989898;
height: 40px;
width: 40px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector:focus {
border-color: black;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector .valueWrapper--sku-selector {
position: absolute;
left: -4px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
color: #929292;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--sku-selector {
height: 48px;
width: 48px;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .frameAround--sku-selector {
border-radius: 50%;
}
.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorInternalBox--sku-selector {
border-radius: 50%;
}
.container .subscriberContainer .form .content {
display: block;
.container .form {
position: relative;
}
.container .subscriberContainer .form .content .inputName {
width: 185px;
height: 40px;
.container .form :global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block;
margin-top: 16px;
}
.container .subscriberContainer .form .content .inputName .vtex-input .flex-row {
border: none;
.container .form :global(.vtex-store-components-3-x-content) .inputName {
width: 182.46px;
margin-right: 10.08px;
margin-bottom: 15px;
}
.container .subscriberContainer .form .content .inputEmail {
width: 185px;
height: 40px;
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292;
border-radius: 0;
}
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: #929292;
}
.container .form :global(.vtex-store-components-3-x-content) .inputEmail {
position: absolute;
top: 0%;
left: 51%;
top: 0%;
border-radius: 0;
width: 182.46px;
font-weight: 400;
margin-bottom: 15px;
}
.container .subscriberContainer .form .content .submit {
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292;
border-radius: 0;
}
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: #929292;
}
.container .form :global(.vtex-store-components-3-x-content) .submit {
width: 100%;
margin-bottom: 16px;
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
width: 100%;
height: 49px;
background-color: #000000;
border: none;
border-radius: 0;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
content: "AVISE-ME";
color: #fff;
font-weight: 600;
font-size: 18px;
line-height: 25px;
font-family: "Open sans", sans-serif;
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}

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

@ -3,10 +3,6 @@
margin: 0;
width: 100%;
.productNameContainer--quickview {
display: flex;
text-align: end;
}
.flexCol--right-col {
.flexColChild--right-col {
.list-price-savings {

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

@ -0,0 +1,44 @@
.quantitySelectorContainer {
height: 49px;
margin-top: 8px;
margin-bottom: 16px;
width: 149px;
.quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper {
height: 49px;
:global(.vtex-numeric-stepper__input) {
width: 31.6px;
height: 49px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: none;
border-right: none;
color: $color-gray-6;
}
:global(.vtex-numeric-stepper__plus-button) {
height: 49px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: $color-white;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-black-padrao;
}
:global(.vtex-numeric-stepper__minus-button) {
height: 49px;
width: 10px;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: $color-white;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-black-padrao;
}
}
}

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

@ -3,7 +3,7 @@
padding: 0 40px;
max-width: 100%;
/* TITULO, NOME DO PRODUTO */
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
.productNameContainer--quickview {
text-align: end;
font-weight: 300;
@ -11,107 +11,200 @@
line-height: 34px;
color: $color-gray-7;
}
/* TAMANHO E CORES DOS PRODUTOS */
.skuSelectorContainer--sku-selector {
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
text-transform: uppercase;
}
.skuSelectorItem--sku-selector {
height: 40px;
width: 40px;
.frameAround--sku-selector {
height: 40px;
width: 40px;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.skuSelectorInternalBox--sku-selector {
border-radius: 50%;
border: 1px solid $color-gray-8;
height: 40px;
width: 40px;
&:focus {
border-color: black;
}
.valueWrapper--sku-selector {
position: absolute;
left: -4px;
}
}
}
.skuSelectorName {
font-size: 0;
}
.skuSelectorNameSeparator {
font-size: 0;
}
.skuSelectorSubcontainer--cor {
.skuSelectorName {
&::before {
content: "OUTRAS CORES:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: 19px;
font-size: 14px;
color: $color-gray-6;
}
}
.skuSelectorSubcontainer--tamanho {
&::before {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: 19px;
font-size: 14px;
color: $color-gray-6;
}
}
.skuSelectorTextContainer {
display: none;
}
.skuSelectorOptionsList {
margin-top: 8px;
margin-left: 0;
}
.skuSelectorSelectorImageValue {
font-size: 0;
}
}
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
.skuSelectorOptionsList {
.skuSelectorItem {
width: 40px;
height: 40px;
&:first-child {
margin-left: 0;
}
}
.frameAround {
border-radius: 50%;
border-color: $color-black-padrao;
}
.skuSelectorItemTextValue {
max-width: 100%;
display: flex;
justify-content: center;
color: $color-black-padrao;
}
.diagonalCross {
margin: 4px;
}
.skuSelectorInternalBox {
border-radius: 50%;
}
}
.carouselGaleryThumbs {
margin: 16px 0;
.thumbImg {
width: 90px;
height: 90px;
border-radius: 8px;
}
.productImagesThumb {
margin-right: 16px;
height: 100% !important;
width: 90px !important;
}
.productImagesThumbCaret {
display: none;
}
}
/*PRODUTO INDISPONIVEL, TEXTOS */
.subscriberContainer {
width: 100%;
.title {
font-size: 0;
margin-bottom: 0;
&::before {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray-9;
}
}
.subscribeLabel {
font-size: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
text-transform: uppercase;
}
.skuSelectorNameSeparator {
color: $color-gray-6;
}
.skuSelectorSelectorImageValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
text-transform: uppercase;
}
.skuSelectorOptionsList {
.skuSelectorItem--sku-selector {
height: 48px;
width: 48px;
}
.frameAround--sku-selector {
border-radius: 50%;
}
.skuSelectorInternalBox--sku-selector {
border-radius: 50%;
}
color: $color-gray-9;
}
}
}
.subscriberContainer {
.form {
.content {
display: block;
position: relative;
.inputName {
width: 185px;
height: 40px;
.vtex-input {
.flex-row {
border: none;
}
/* FORMULARIO DE PRODUTO INDISPONIVEL */
.form {
position: relative;
:global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block;
margin-top: 16px;
.inputName {
width: 182.46px;
margin-right: 10.08px;
margin-bottom: 15px;
:global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6;
border-radius: 0;
}
:global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: $color-gray-6;
}
}
.inputEmail {
position: absolute;
left: 51%;
top: 0%;
border-radius: 0;
width: 182.46px;
font-weight: 400;
margin-bottom: 15px;
:global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6;
border-radius: 0;
:global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: $color-gray-6;
}
}
.inputEmail {
width: 185px;
height: 40px;
position: absolute;
top: 0%;
left: 51%;
}
.submit {
}
.submit {
width: 100%;
margin-bottom: 16px;
:global(.vtex-button) {
width: 100%;
height: 49px;
background-color: $color-black-padrao;
border: none;
border-radius: 0;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: "AVISE-ME";
color: $color-white;
font-weight: 600;
font-size: 18px;
line-height: 25px;
font-family: "Open sans", sans-serif;
}
:global(.vtex-button__label) {
padding: 0;
}
}
}
}

1
styles/sass/utils/_vars.scss
View File

@ -10,6 +10,7 @@ $color-gray5: #e5e5e5;
$color-gray-6: #929292;
$color-gray-7: #575757;
$color-gray-8: #989898;
$color-gray-9: #868686;
$color-blue: #4267b2;