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/product-image' into desenvolvimento

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-08 13:43:04 -03:00
commit 3d879a66c9
19 changed files with 316 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/Todo.md
View File

@ -5,13 +5,13 @@
- [x] (a) inciando projeto {cm:2023-01-25}
os Requisitos cobrados serão:
os Requisitos cobrados serão: {cm:2023-02-07}
# Dev
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p {cm:2023-02-07}
- FIXME [Blocos que devem ser ajustado e desenvolvidos](tabLayout_com_descrição_até_troca_e_devolução_e_seu_conteúdo){
- FIXME [Blocos que devem ser ajustado e desenvolvidos](6){
- [x] 1. BreadCrumb; {cm:2023-01-31}
@ -19,15 +19,13 @@ os Requisitos cobrados serão:
- HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens {cm:2023-02-03}
- HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo,
- HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo, {cm:2023-02-07}
- HACK 5. prateleira de produtos,
- HACK 5. prateleira de produtos, {cm:2023-02-07}
- HACK 6. Newsletter.
- HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
- HACK 7. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
- HACK 8.Fazer o cep
- HACK 7.Fazer o cep
- FIXME COLOCAR OS TESTESID!!!!!

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

@ -1,11 +1,52 @@
/* [class*=html--pdp-breadcrumb]{
} */
.html--pdp-productMain{
padding-right: 2.778%;
padding-left: 2.778%;
display: flex;
}
.html--StackLayout,.html--pdp-InfoBuy{
width: 50%;
}
.html--buy-button{
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px;
margin-top: 16px;
}
.html--pdp-productMain :global(.vtex-button){
display: none;
}
.html--buy-button :global(.vtex-button){
display: block;
background: black;
height: 49px;
max-width: 77.354%;
}
.html--pdp-section_descriptions{
display: flex;
flex-direction: column;
gap: 32px;
padding: 0px 40px 0px 40px;
}
@media screen and (min-width: 1920px){
.html--buy-button :global(.vtex-button){
max-width: 766px;
width: 80.126%;
}
.html--pdp-productMain{
padding-right: 12.5393%;
padding-left: 12.5393%;
margin: 0;
gap: 32px;
max-height: 100%;
}
.html--pdp-section_descriptions{
padding: 0px 12.5393% 0px 12.5393%;
}
}
.html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
gap: 32px;
}
@ -65,6 +106,28 @@
}
}
@media screen and (max-width: 1024px) {
.html--buy-button{
align-items: normal;
flex-direction: column;
}
.html--buy-button :global(.vtex-button){
max-width: 93.662%;
width: 100%;
height: 74px;
}
.html--buy-button :global(.vtex-button) :global(.vtex-button__label){
padding-left: 21.92%;
padding-right: 21.92%;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.html--pdp-productMain{
flex-direction: column;
align-items: center;
}
.html--StackLayout,.html--pdp-InfoBuy{
width: 89.23%;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
border-bottom: 1px solid rgba(185, 185, 185, 1);
padding-bottom: 16px;

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

@ -2,6 +2,7 @@
"store.product": {
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"html#departaments",
"flex-layout.row#specifications-title",
"html#carousel"
@ -65,69 +66,49 @@
}
},
"tab-content.item#descriptionpdp": {
"children":[
"html#description"
],
"children": ["html#description"],
"props": {
"tabId": "descrição1"
}
},
"tab-content#pdp": {
"children":[
"tab-content.item#descriptionpdp"
]
"children": ["tab-content.item#descriptionpdp"]
},
"tab-content.item#descriptionpdp2": {
"children":[
"html#description"
],
"children": ["html#description"],
"props": {
"tabId": "descrição2"
}
},
"tab-content#pdp2": {
"children":[
"tab-content.item#descriptionpdp2"
]
"children": ["tab-content.item#descriptionpdp2"]
},
"tab-content.item#descriptionpdp3": {
"children":[
"html#description"
],
"children": ["html#description"],
"props": {
"tabId": "descrição3"
}
},
"tab-content#pdp3": {
"children":[
"tab-content.item#descriptionpdp3"
]
"children": ["tab-content.item#descriptionpdp3"]
},
"tab-content.item#descriptionpdp4": {
"children":[
"html#description"
],
"children": ["html#description"],
"props": {
"tabId": "descrição4"
}
},
"tab-content#pdp4": {
"children":[
"tab-content.item#descriptionpdp4"
]
"children": ["tab-content.item#descriptionpdp4"]
},
"tab-content.item#descriptionpdp5": {
"children":[
"html#description"
],
"children": ["html#description"],
"props": {
"tabId": "descrição5"
}
},
"tab-content#pdp5": {
"children":[
"tab-content.item#descriptionpdp5"
]
"children": ["tab-content.item#descriptionpdp5"]
},
"html#prateleira": {
"props": {
@ -269,18 +250,20 @@
"testId": "Product-Images",
"blockClass": "pdp-productMain"
},
"children": ["flex-layout.row#product-main"]
"children": ["html#stack", "html#right-col"]
},
"flex-layout.row#product-main": {
"props": {
"blockClass": "pdp-flexProduct",
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
"marginTop": 0,
"marginBottom": 0,
"paddingTop": 0,
"paddingBottom": 0,
"paddingright":0,
"paddingleft":0
}
},
"stack-layout": {
@ -321,17 +304,18 @@
"children": ["flex-layout.row#description"]
},
"flex-layout.col#stack": {
"html#stack": {
"children": ["stack-layout"],
"props": {
"rowGap": 10,
"width": "50%",
"blockClass": "StackLayout",
"htmlId": "teste"
"blockClass": "StackLayout"
}
},
"flex-layout.row#product-image": {
"props":{
"blockClass": "product-image"
},
"children": ["product-images"]
},
"product-images": {
@ -349,6 +333,7 @@
},
"product-images#description": {
"props": {
"blockClass": "img-description",
"maxHeight": 872,
"testid": "product-images",
"aspectRatio": {
@ -362,10 +347,9 @@
"zoomMode": "disabled"
}
},
"flex-layout.col#right-col": {
"html#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
"blockClass": "pdp-InfoBuy"
},
"children": [
"flex-layout.row#product-name",
@ -376,7 +360,7 @@
"sku-selector",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"html#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
@ -421,6 +405,9 @@
},
"flex-layout.row#buy-button": {
"children": ["product-quantity", "add-to-cart-button"]
},
"html#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7,
@ -449,7 +436,7 @@
"paddingTop": 7
},
"children": [
"flex-layout.col#stack",
"html#stack",
"flex-layout.col#right-col-availability"
]
},
@ -461,7 +448,6 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
]

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

@ -8,14 +8,20 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
padding: 0 40px 16px;
margin-left: auto;
margin-right: auto;
max-width: 96rem;
padding-top: 16px;
padding-right: 4%;
padding-left: 4%;
}
@media screen and (min-width: 1920px) {
.container {
padding-right: 14.063%;
padding-left: 14.063%;
}
}
@media screen and (max-width: 1024px) {
.container {
padding: 0 0 0 10.67%;
text-align: center;
padding: 0;
}
}
.container .term, .container .termArrow {

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

@ -12,21 +12,17 @@
padding: 0 0.5rem;
}
.flexRowContent {
padding: 0;
margin: 0;
.flexRowContent--title .stretchChildrenWidth {
width: 100% !important;
}
.flexRowContent--buy-button {
gap: 10px;
.flexRowContent--product-image {
justify-content: flex-end;
}
.flexRowContent--buy-button .stretchChildrenWidth {
padding: 0;
justify-content: flex-start;
@media screen and (min-width: 1920px) {
.flexRowContent--product-image .stretchChildrenWidth {
max-width: max-content;
}
.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
background: black;
height: 49px;
max-width: 526px;
}
@media screen and (min-width: 1024px) {
@ -141,6 +137,11 @@
align-items: end;
flex-direction: column-reverse;
}
@media screen and (max-width: 1024px) {
.flexRowContent--title {
display: flex;
}
}
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
top: 33%;
@ -169,6 +170,7 @@
height: max-content;
min-height: max-content;
max-width: 274px;
max-height: 100%;
}
}
@media screen and (max-width: 1024px) {
@ -181,6 +183,11 @@
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
max-width: 100%;
}
@media screen and (min-width: 1920px) {
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
max-width: 96rem;
}
}
.flexRow--pdp-price .flexRowContent--pdp-price {
justify-content: center;

12
styles/css/vtex.product-customizer.css Normal file
View File

@ -0,0 +1,12 @@
/*
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 */
.textInputValue, .productAssemblyGroupNameRow {
display: none;
}

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

@ -10,6 +10,12 @@
.product-identifier--productReference {
display: block;
text-align: end;
margin-top: 8px;
padding-right: 8px;
padding-right: 40px;
font-size: 14px;
line-height: 19px;
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference {
text-align: start;
}
}

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

@ -23,11 +23,6 @@
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;

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

@ -10,7 +10,7 @@
.quantitySelectorStepper {
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
min-width: 100%;
padding: 3.5px 0;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
@ -34,4 +34,6 @@
.quantitySelectorContainer {
justify-content: center;
align-items: center;
width: 128px;
margin-bottom: 0;
}

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

@ -57,7 +57,7 @@
}
@media screen and (max-width: 1024px) {
.nameContainer .productNameContainer--pdp-name {
max-height: 80px;
max-height: 50px;
}
}

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

@ -7,6 +7,21 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.shareLabel, .skuSelectorNameSeparator, .skuSelectorSelectorImageValue {
display: none;
}
@media screen and (max-width: 1024px) {
.productImagesContainer--carousel .productImagesGallerySlide {
width: 100% !important;
}
}
@media screen and (min-width: 1920px) {
.productImagesContainer--carousel .carouselGaleryCursor {
max-height: 100%;
}
}
.productNameContainer--quickview {
padding-right: 40px !important;
}
@ -15,10 +30,26 @@
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer .skuSelectorSubcontainer {
max-width: 93.663%;
}
@media screen and (max-width: 1024px) {
.skuSelectorContainer .skuSelectorSubcontainer {
height: max-content;
}
}
.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList {
height: 40.61px;
}
.skuSelectorContainer .skuSelectorItemImage {
width: 48px;
height: 48px;
}
@media screen and (max-width: 1024px) {
.skuSelectorContainer .skuSelectorItemImage {
margin: 0;
}
}
.skuSelectorContainer .skuSelectorItem--selected .frameAround {
border-radius: 24px;
border: 2px solid #000000;
@ -32,8 +63,15 @@
left: 0;
right: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
height: 75px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
height: 48px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "ES:";
@ -55,6 +93,7 @@
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "S:";
@ -83,16 +122,20 @@
line-height: 34px;
color: #575757;
}
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
text-align: start;
}
}
.carouselContainer {
padding: 0 40px 0;
max-width: 906px;
}
.carouselContainer .productImage {
max-width: 85.238%;
}
@media screen and (min-width: 1920px) {
.carouselContainer .productImage {
min-width: 904px;
max-width: 100%;
}
}
@ -117,14 +160,23 @@
border-radius: 8px;
max-height: 100% !important;
}
@media screen and (max-width: 1024px) {
.carouselContainer .productImage .productImageTag--main {
max-height: 100% !important;
max-width: 98.657%;
}
}
.productImageTag--img-description {
max-width: 872px;
}
.carouselGaleryThumbs {
display: block;
height: max-content;
}
.carouselGaleryThumbs .productImagesThumb {
width: max-content !important;
background: white;
height: 100% !important;
margin-right: 1em;
}
@media screen and (max-width: 1024px) {
@ -144,12 +196,12 @@
}
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 4.9em;
min-height: 100%;
}
}
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px;
width: 90px;
min-height: 90px;
}
.productDescriptionContainer .productDescriptionTitle {

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

@ -1,10 +1,14 @@
.container{
padding: 0 40px 16px;
margin-left: auto;
margin-right: auto;
max-width: 96rem;
padding-top:16px;
padding-right: 4%;
padding-left: 4%;
@media screen and (min-width: 1920px){
padding-right: 14.063%;
padding-left: 14.063%;
}
@media screen and (max-width: 1024px){
padding: 0 0 0 10.67%;
text-align: center;
padding: 0;
}
.term,.termArrow{
display: none;

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

@ -2,22 +2,20 @@
.flexRowContent--main-header {
padding: 0 0.5rem;
}
.flexRowContent{
padding: 0;
margin: 0;
&--buy-button{
gap: 10px;
.flexRowContent--title{
.stretchChildrenWidth{
padding: 0;
justify-content: flex-start;
:global(.vtex-button){
background: black;
height: 49px;
max-width: 526px;
}
width: 100% !important;
}
}
.flexRowContent--product-image{
justify-content: flex-end;
@media screen and (min-width: 1920px){
.stretchChildrenWidth{
max-width: max-content;
}
}
}
@media screen and (min-width: 1024px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
@ -132,6 +130,10 @@
.flexRowContent--title{
align-items: end;
flex-direction: column-reverse;
@media screen and (max-width: 1024px){
display: flex;
}
}
.flexRowContent--pdp-carrousel{
:global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){
@ -159,6 +161,7 @@
height: max-content;
min-height: max-content;
max-width: 274px;
max-height: 100%;
}
}
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
@ -171,6 +174,9 @@
.flexRow--pdp-carrousel{
:global(.vtex-store-components-3-x-container){
max-width: 100%;
@media screen and (min-width: 1920px){
max-width: 96rem;
}
}
}
.flexRow--pdp-price{

3
styles/sass/pages/product/vtex.product-customizer.scss Normal file
View File

@ -0,0 +1,3 @@
.textInputValue,.productAssemblyGroupNameRow{
display: none;
}

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

@ -2,7 +2,11 @@
&--productReference{
display: block;
text-align: end;
margin-top: 8px;
padding-right: 8px;
padding-right: 40px;
font-size: 14px;
line-height: 19px;
@media screen and (max-width: 1024px){
text-align: start;
}
}
}

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

@ -1,7 +1,7 @@
.quantitySelectorStepper{
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
min-width: 100%;
padding: 3.5px 0;
:global(.vtex-numeric-stepper-wrapper){
:global(.vtex-numeric-stepper-container){
@ -28,4 +28,6 @@
.quantitySelectorContainer{
justify-content: center;
align-items: center;
width: 128px;
margin-bottom: 0;
}

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

@ -49,7 +49,7 @@
.productNameContainer--pdp-name{
@media screen and (max-width: 1024px){
max-height: 80px;
max-height: 50px;
}
}
}

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

@ -1,12 +1,39 @@
.shareLabel,.skuSelectorNameSeparator,.skuSelectorSelectorImageValue{
display: none;
}
.productImagesContainer--carousel{
.productImagesGallerySlide{
@media screen and (max-width: 1024px){
width: 100% !important;
}
}
.carouselGaleryCursor{
@media screen and (min-width: 1920px){
max-height: 100%;
}
}
}
.productNameContainer--quickview{
padding-right: 40px !important;
}
.skuSelectorContainer{
display: flex;
flex-direction: column-reverse;
.skuSelectorSubcontainer{
max-width: 93.663%;
@media screen and (max-width: 1024px){
height: max-content;
}
.skuSelectorOptionsList{
height: 40.61px;
}
}
.skuSelectorItemImage{
width: 48px;
height: 48px;
@media screen and (max-width: 1024px){
margin: 0;
}
}
.skuSelectorItem--selected{
.frameAround{
@ -25,9 +52,14 @@
}
.skuSelectorSubcontainer-{
&-cor{
height: 75px;
.skuSelectorOptionsList{
height: 48px;
}
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{
content: "ES:";
}
@ -53,6 +85,7 @@
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{
content: "S:";
}
@ -85,13 +118,15 @@
font-size: 20px;
line-height: 34px;
color: #575757;
@media screen and (max-width: 1024px){
text-align: start;
}
}
.carouselContainer{
padding: 0 40px 0;
max-width: 906px;
.productImage{
max-width:85.238%;
@media screen and (min-width: 1920px){
min-width: 904px;
max-width:100%;
}
@media screen and (max-width: 1024px){
@ -109,16 +144,22 @@
&-main{
border-radius: 8px;
max-height: 100% !important;
@media screen and (max-width: 1024px){
max-height: 100% !important;
max-width: 98.657%;
}
}
}
}
}
.productImageTag--img-description{
max-width: 872px;
}
.carouselGaleryThumbs{
display: block;
height: max-content;
.productImagesThumb{
width: max-content !important;
background:white;
height: 100% !important;
margin-right: 1em;
@media screen and (max-width: 1024px){
width: 30% !important;
@ -131,13 +172,13 @@
border-radius: 8px;
min-height: 5.54em;
@media screen and (max-width: 1024px){
min-height: 4.9em;
min-height: 100%;
}
}
}
.thumbImg{
border-radius: 8px;
width: 90px;
min-height: 90px;
}
}
}

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

@ -14,10 +14,6 @@
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;