Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/right-col' into desenvolvimento

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-03 17:53:14 -03:00
commit 3fa54f1d8f
15 changed files with 347 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/Todo.md
View File

@ -11,19 +11,24 @@ os Requisitos cobrados serão:
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c}
- FIXME [Blocos que devem ser ajustado e desenvolvidos](dados_do_produto_e_de_compra-ao_lado_das_imagens){
- [x] 1. BreadCrumb;
- [x] 1. BreadCrumb; {cm:2023-01-31}
- HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens),
- [x] 2. todo o bloco de imagens do produto, {cm:2023-01-31}
- HACK 3. tabLayout com descrição até troca e devolução e seu conteúdo,
- HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens
- HACK 4. prateleira de produtos,
- HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo,
- HACK 5. Newsletter.
- HACK 5. prateleira de produtos,
- HACK 6. Newsletter.
- HACK 7. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
- FIXME COLOCAR OS TESTESID!!!!!
- HACK dados_do_produto_e_de_compra-ao_lado_das_imagens
}

2
react/Example.tsx
View File

@ -1,3 +1,3 @@
import Example from "./components/Example/Example";
export default Example;
export default Example;

5
react/components/Example/Example.tsx
View File

@ -1,9 +1,10 @@
import React from 'react'
const Example = () => {
console.log("olá mundo")
return (
<div>Example</div>
<div>Example um</div>
)
}
export default Example
export default Example

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

@ -1,6 +1,9 @@
{
"store.product": {
"children": ["html#breadcrumb", "condition-layout.product#availability"]
"children": ["html#example-component",
"html#breadcrumb",
"condition-layout.product#availability"
]
},
"html#breadcrumb": {
"props": {
@ -10,6 +13,14 @@
},
"children": ["breadcrumb"]
},
"html#example-component": {
"props": {
"tag": "nav",
"testId": "breadcrumbs",
"blockClass": "pdp-exemplo"
},
"children": ["example-component"]
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
@ -44,7 +55,7 @@
"paddingTop": 7,
"paddingBottom": 7
},
"children": ["flex-layout.col#stack"]
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
"stack-layout": {
@ -70,7 +81,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "46%",
"rowGap": 10,
"blockClass": "StackLayout"
}
@ -80,6 +91,7 @@
},
"product-images": {
"props": {
"testid": "product-images",
"aspectRatio": {
"desktop": "auto",
"phone": "auto"
@ -101,10 +113,7 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
@ -113,14 +122,32 @@
"share#default"
]
},
"shipping-simulator": {
"props": {}
},
"product-installments": {
"props": {
"message": "{installmentsNumber} de {installmentValue} sem juros"
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
"marginBottom": 3,
"blockClass": "title"
},
"children": ["vtex.store-components:product-name"]
"children": [
"product-identifier.product",
"vtex.store-components:product-name"
]
},
"product-identifier.product": {
"props": {
"label": "hide", //'default' | 'custom' | 'hide'
"blockClass": "sku"
}
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
@ -131,9 +158,22 @@
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"marginBottom": 7,
"blockClass": "buy-button"
},
"children": ["add-to-cart-button"]
"children": ["product-quantity", "add-to-cart-button"]
},
"product-quantity": {
"props": {
"width": "20%",
"showLabel": false,
"size": "regular"
}
},
"add-to-cart-button": {
"props": {
"text": "ADICIONAR À SACOLA"
}
},
"flex-layout.row#product-availability": {

1
store/interfaces.json
View File

@ -2,6 +2,7 @@
"example-component": {
"component": "Example"
},
"html": {
"component": "html",
"composition": "children"

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

@ -12,6 +12,23 @@
padding: 0 0.5rem;
}
.flexRowContent {
padding: 0;
margin: 0;
}
.flexRowContent--buy-button {
gap: 10px;
}
.flexRowContent--buy-button .stretchChildrenWidth {
padding: 0;
justify-content: flex-start;
}
.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
background: black;
height: 49px;
max-width: 526px;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
@ -118,4 +135,9 @@
}
:global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings {
justify-content: center;
}
.flexRowContent--title {
align-items: end;
flex-direction: column-reverse;
}

16
styles/css/vtex.product-identifier.css
View File

@ -1,3 +1,15 @@
/*
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 */
.product-identifier--productReference {
margin-bottom: 1rem;
}
display: block;
text-align: end;
margin-top: 8px;
padding-right: 8px;
}

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

@ -89,4 +89,22 @@
:global(.vtex-shelf-1-x-slide) .listPrice {
text-align: center;
margin-bottom: 16px;
}
.savings, .listPriceValue {
display: none;
}
.installments {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments .installmentsNumber, .installments .installmentValue {
font-weight: 700;
}
.installments .installmentsNumber::after {
content: "x";
}

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

@ -0,0 +1,37 @@
/*
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 */
.quantitySelectorStepper {
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
padding: 3.5px 0;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
border: none;
max-width: 28px;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button) {
border: none;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) {
color: #000;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text) {
color: #000;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
border: none;
background: #fff;
}
.quantitySelectorContainer {
justify-content: center;
align-items: center;
}

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

@ -7,36 +7,81 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.skuSelectorContainer--m3-custom-sku-selector {
.productNameContainer--quickview {
padding-right: 40px !important;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector {
border-radius: 50%;
.skuSelectorContainer .skuSelectorItemImage {
width: 48px;
height: 48px;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
.skuSelectorContainer .skuSelectorItem--selected .frameAround {
border-radius: 24px;
border: 2px solid #000000;
}
.skuSelectorContainer .frameAround {
width: 48px;
height: 48px;
z-index: 5;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "ES:";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS ";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
width: 40px;
height: 40px;
top: -2px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
width: 40px;
height: 40px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "S:";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTROS ";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorItemImageValue--m3-custom-sku-selector {
border-radius: 50%;
.skuSelectorContainer .skuSelectorInternalBox {
border: 2px solid #B9B9B9;
}
.skuSelectorContainer--m3-custom-sku-selector .diagonalCross--m3-custom-sku-selector {
border-radius: 50%;
.skuSelectorContainer .skuSelectorItemImageValue, .skuSelectorContainer .skuSelectorInternalBox {
width: 100%;
border-radius: 24px;
}
.skuSelectorContainer .diagonalCross {
border: 1px solid #D5D5D5;
border-radius: 24px;
}
.productNameContainer--quickview {
text-align: end;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.carouselContainer {

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

@ -2,7 +2,22 @@
.flexRowContent--main-header {
padding: 0 0.5rem;
}
.flexRowContent{
padding: 0;
margin: 0;
&--buy-button{
gap: 10px;
.stretchChildrenWidth{
padding: 0;
justify-content: flex-start;
:global(.vtex-button){
background: black;
height: 49px;
max-width: 526px;
}
}
}
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
@ -114,4 +129,9 @@
justify-content: center;
}
}
.flexRowContent--title{
align-items: end;
flex-direction: column-reverse;
}

8
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -0,0 +1,8 @@
.product-identifier{
&--productReference{
display: block;
text-align: end;
margin-top: 8px;
padding-right: 8px;
}
}

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

@ -0,0 +1,31 @@
.quantitySelectorStepper{
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
padding: 3.5px 0;
:global(.vtex-numeric-stepper-wrapper){
:global(.vtex-numeric-stepper-container){
:global(.vtex-numeric-stepper__input){
border: none;
max-width: 28px;
}
:global(.vtex-numeric-stepper__plus-button){
border: none;
}
:global(.vtex-numeric-stepper__plus-button__text){
color: #000;
}
:global(.vtex-numeric-stepper__minus-button__text){
color: #000;
}
:global(.vtex-numeric-stepper__minus-button){
border: none;
background: #fff;
}
}
}
}
.quantitySelectorContainer{
justify-content: center;
align-items: center;
}

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

@ -1,9 +1,27 @@
.skuSelectorContainer--m3-custom-sku-selector{
.productNameContainer--quickview{
padding-right: 40px !important;
}
.skuSelectorContainer{
display: flex;
flex-direction: column-reverse;
.frameAround--m3-custom-sku-selector{
border-radius: 50%;
.skuSelectorItemImage{
width: 48px;
height: 48px;
}
.skuSelectorItem--selected{
.frameAround{
border-radius: 24px;
border: 2px solid #000000
}
}
.frameAround{
width: 48px;
height: 48px;
z-index: 5;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.skuSelectorSubcontainer-{
&-cor{
@ -20,6 +38,18 @@
}
}
&-tamanho{
.frameAround{
width: 40px;
height: 40px;
top: -2px;
}
.skuSelectorItemTextValue{
padding: 0;
}
.skuSelectorInternalBox{
width: 40px;
height: 40px;
}
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
@ -34,16 +64,28 @@
}
}
.skuSelectorItemImageValue--m3-custom-sku-selector{
border-radius: 50%;
.skuSelectorInternalBox{
border: 2px solid #B9B9B9;
}
.skuSelectorItemImageValue,.skuSelectorInternalBox{
width: 100%;
border-radius: 24px;
}
.diagonalCross--m3-custom-sku-selector{
border-radius: 50%;
}
.diagonalCross{
border: 1px solid #D5D5D5;
border-radius: 24px;
}
}
.productNameContainer--quickview{
text-align: end;
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.carouselContainer{
padding: 0 40px 0;
.productImage{

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

@ -84,3 +84,21 @@
margin-bottom: 16px;
}
}
.savings,.listPriceValue{
display: none;
}
.installments{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-size: 16px;
line-height: 22px;
color: #929292;
.installmentsNumber,.installmentValue{
font-weight: 700;
}
.installmentsNumber{
&::after{
content: "x";
}
}
}