Rafael_Sampaio_de_Oliveira/challenge-vtex-io-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/adiciona-produto-indisponivel-1440px' (#20) from feature/adiciona-produto-indisponivel-1440px into feature/adiciona-prateleira

Browse Source 
Reviewed-on: #20
This commit is contained in:
Rafael Sampaio de Oliveira 2023-02-01 13:25:01 +00:00
commit bd42ab478d
12 changed files with 488 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@
// "shelf.relatedProducts",
"rich-text#shelfTitle",
"list-context.product-list#shelfProducts",
"newsletter#pageProduct",
"product-questions-and-answers"
]
},
@ -125,7 +126,7 @@
"product-gifts",
// "flex-layout.row#buy-button",
"html#buy-button",
"availability-subscriber",
// "availability-subscriber",
"shipping-simulator",
"share#default"
]
@ -205,8 +206,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {
@ -244,8 +245,21 @@
]
},
"product-summary-image": {
"props": {
"showBadge": false
}
},
"list-context.product-list#shelfProducts": {
"blocks": ["product-summary.shelf#shelfProducts"],
"children": ["slider-layout#demo-products"]
},
"newsletter#pageProduct": {
"props": {
"blockClass": "pageProduct",
"label": "Assine nossa newsletter",
"placeholder": "Digite seu e-mail"
}
}
}

7
store/blocks/product-price.jsonc
View File

@ -16,6 +16,13 @@
}
},
"product-selling-price#shelf": {
"props": {
"blockClass": "shelf",
"message": "{sellingPriceValue}"
}
},
"flex-layout.row#list-price-savings": {
"props": {
"colGap": 2,

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

@ -111,5 +111,5 @@
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #292929;
color: #000000;
}

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

@ -13,4 +13,12 @@
display: flex;
justify-content: center;
align-items: center;
}
.brandName {
font-style: normal;
font-weight: 400;
line-height: 25px;
text-align: center;
color: #000000;
}

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

@ -15,7 +15,7 @@
}
.paginationDot--shelf {
background: #292929;
background: #000000;
width: 10px !important;
height: 10px !important;
}
@ -23,6 +23,22 @@
.paginationDot--shelf--isActive {
width: 17px !important;
height: 17px !important;
border: 0.5px solid #292929;
border: 0.5px solid #000000;
background: transparent;
}
.sliderLeftArrow--shelf {
visibility: hidden;
}
.sliderLeftArrow--shelf::after {
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png");
}
.sliderRightArrow--shelf {
visibility: hidden;
}
.sliderRightArrow--shelf::before {
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
}

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

@ -140,7 +140,7 @@
position: absolute;
left: 232px;
top: 33%;
background: #292929;
background: #000000;
border: none;
border-radius: 0;
}
@ -169,7 +169,7 @@
visibility: visible;
content: "Não sei meu CEP";
font-size: 12px;
color: #292929;
color: #000000;
text-decoration-line: underline;
}
@ -198,7 +198,7 @@
content: "Entrega";
text-transform: uppercase;
display: block;
color: #292929;
color: #000000;
}
.shippingTableHeadDeliveryEstimate {
@ -215,7 +215,7 @@
content: "Prazo";
text-transform: uppercase;
display: block;
color: #292929;
color: #000000;
}
.shippingTableHeadDeliveryPrice {
@ -232,7 +232,7 @@
content: "Frete";
text-transform: uppercase;
display: block;
color: #292929;
color: #000000;
}
.shippingTableRadioBtn {
@ -263,4 +263,189 @@
.skuSelectorOptionsList {
margin: 0;
}
:global(.vtex-address-form-4-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
.price_sellingPriceContainer {
margin-bottom: 32px;
}
.price_sellingPriceLabel {
display: none;
}
.price_sellingPrice {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
.newsletter--pageProduct {
height: 175px;
margin: 64px 0 32px 0;
background: #000000;
display: flex;
}
.container--pageProduct {
padding: 0;
padding-top: 32px;
width: 53.75%;
max-width: unset;
}
.form--pageProduct {
max-width: unset;
}
.label--pageProduct {
display: flex;
flex-direction: column;
gap: 16px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #fff;
}
.label--pageProduct::after {
content: "Receba ofertas e novidades por e-mail";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
.buttonContainer--pageProduct {
padding: 0;
}
.buttonContainer--pageProduct :global(.vtex-button) {
border: none;
border-bottom: 4px solid #ffffff;
border-radius: 0;
background: transparent;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #fff;
}
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
border-bottom: 1px solid #ffffff;
}
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0;
}
.subscriberContainer {
margin-top: 43px;
}
.subscriberContainer .title {
font-size: 0;
margin: 0;
}
.subscriberContainer .title::after {
content: "Produto indisponível";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .subscribeLabel {
font-size: 0;
}
.subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.form {
width: 100%;
margin: 0;
}
.form .content {
display: grid;
grid-template-areas: "nm em" "sub sub";
justify-content: inherit;
gap: 8px;
width: 100%;
max-width: 399px;
}
.form .content .inputName {
grid-area: nm;
width: 100%;
margin: 0;
}
.form .content .inputName :global(.vtex-input-prefix__group) {
border: 1px solid #868686;
border-radius: 0;
}
.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: #989898;
}
.form .content .inputEmail {
grid-area: em;
width: 100%;
margin: 0;
}
.form .content .inputEmail :global(.vtex-input-prefix__group) {
border: 1px solid #868686;
border-radius: 0;
}
.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: #989898;
}
.form .content .submit {
grid-area: sub;
width: 100%;
margin: 0;
margin-top: 7px;
}
.form .content .submit :global(.vtex-button) {
height: 49px;
background: #000000;
border: none;
border-radius: 0;
}
.form .content .submit :global(.vtex-button__label) {
font-size: 0;
}
.form .content .submit :global(.vtex-button__label)::after {
content: "avise-me";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #fff;
}

17
styles/css/vtex.styleguide.css
View File

@ -1,4 +1,13 @@
.hideDecorators {
border-left: 0;
border-right: 0;
}
/*
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@300;400;500;600;700&display=swap%27");
/* Grid breakpoints */
.input {
border: none;
}

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

@ -50,8 +50,8 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #292929;
border-bottom: 2px solid #292929;
color: #000000;
border-bottom: 2px solid #000000;
border-radius: 0;
text-transform: capitalize;
}

8
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -4,3 +4,11 @@
justify-content: center;
align-items: center;
}
.brandName {
font-style: normal;
font-weight: 400;
line-height: 25px;
text-align: center;
color: $color-black;
}

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

@ -16,3 +16,21 @@
border: 0.5px solid $color-black;
background: transparent;
}
.sliderLeftArrow--shelf {
visibility: hidden;
&::after {
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png");
}
}
.sliderRightArrow--shelf {
visibility: hidden;
&::before {
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
}
}

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

@ -264,3 +264,205 @@
.skuSelectorOptionsList {
margin: 0;
}
:global(.vtex-address-form-4-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
.price_sellingPriceContainer {
margin-bottom: 32px;
}
.price_sellingPriceLabel {
display: none;
}
.price_sellingPrice {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: $color-black;
}
.newsletter--pageProduct {
height: 175px;
margin: 64px 0 32px 0;
background: $color-black;
display: flex;
}
.container--pageProduct {
padding: 0;
padding-top: 32px;
width: 53.75%;
max-width: unset;
}
.form--pageProduct {
max-width: unset;
}
.label--pageProduct {
display: flex;
flex-direction: column;
gap: 16px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $color-white;
}
.label--pageProduct::after {
content: "Receba ofertas e novidades por e-mail";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray7;
}
.buttonContainer--pageProduct {
padding: 0;
}
.buttonContainer--pageProduct :global(.vtex-button) {
border: none;
border-bottom: 4px solid $color-gray11;
border-radius: 0;
background: transparent;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-white;
}
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
border-bottom: 1px solid $color-gray11;
}
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0;
}
.subscriberContainer {
margin-top: 43px;
.title {
font-size: 0;
margin: 0;
&::after {
content: "Produto indisponível";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray12;
}
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray12;
}
}
}
.form {
width: 100%;
margin: 0;
.content {
display: grid;
grid-template-areas:
"nm em"
"sub sub";
justify-content: inherit;
gap: 8px;
width: 100%;
max-width: 399px;
.inputName {
grid-area: nm;
width: 100%;
margin: 0;
& :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray12;
border-radius: 0;
}
& :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: $color-gray13;
}
}
.inputEmail {
grid-area: em;
width: 100%;
margin: 0;
& :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray12;
border-radius: 0;
}
& :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: $color-gray13;
}
}
.submit {
grid-area: sub;
width: 100%;
margin: 0;
margin-top: 7px;
& :global(.vtex-button) {
height: 49px;
background: $color-black;
border: none;
border-radius: 0;
}
& :global(.vtex-button__label) {
font-size: 0;
&::after {
content: "avise-me";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $color-white;
}
}
}
}
}

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

@ -1,6 +1,6 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
$color-black: #292929;
$color-black: #000000;
$color-white: #fff;
@ -14,6 +14,9 @@ $color-gray7: #929292;
$color-gray8: #575757;
$color-gray9: #afafaf;
$color-gray10: #bfbfbf;
$color-gray11: #ffffff;
$color-gray12: #868686;
$color-gray13: #989898;
$color-blue: #4267b2;