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

feat(pdp): Adiciona test ids

Browse Source
This commit is contained in:
Cainã Milech 2023-02-01 14:06:23 -03:00
parent 1e22e81ab8
commit 5b93735a80
15 changed files with 129 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,6 +37,7 @@
[class*="html--qtd-btn"] {
display: flex;
height: 49px;
gap: 10px;
}
@media screen and (max-width: 768px) {
[class*="html--qtd-btn"] {

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

@ -1,7 +1,7 @@
{
"store.product": {
"children": [
"breadcrumb#pdp",
"html#breadcontainer",
"condition-layout.product#availability",
"tab-layout#details",
"list-context.product-list#prateleira",
@ -37,7 +37,6 @@
"phone": 2
},
"infinite": true,
/*"fullWidth": false,*/
"blockClass": "prateleira"
}
},
@ -51,12 +50,16 @@
"breadcrumb#pdp": {
"props": {
"testId": "breadcrumbs",
"blockClass": "breadcrumb",
"showOnMobile": true
}
},
"html#breadcontainer": {
"props": {
"testId": "breadcrumbs"
},
"children": ["breadcrumb#pdp"]
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},

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

@ -22,11 +22,15 @@
margin-right: 360px;
}
}
.container--breadcrumb .caretIcon--breadcrumb {
color: #929292;
}
.container--breadcrumb .homeIcon--breadcrumb {
display: none;
}
.container--breadcrumb .homeLink--breadcrumb {
vertical-align: top;
padding-left: 0;
}
.container--breadcrumb .homeLink--breadcrumb::after {
content: "Home";
@ -34,15 +38,25 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container--breadcrumb .link--breadcrumb--1 {
padding-right: 0;
font-size: 0;
color: #929292;
}
.container--breadcrumb .link--breadcrumb--1::after {
content: "Sapatos";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container--breadcrumb .link--breadcrumb--2 {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container--breadcrumb .termArrow--breadcrumb,
.container--breadcrumb .term--breadcrumb {

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

@ -18,22 +18,15 @@
}
.hideDecorators {
border: 1px solid red;
border-left: none;
border-right: none;
height: 49px;
}
.quantitySelectorContainer--quantidade {
margin-right: 10px;
margin-bottom: 16px;
padding: 0;
height: 100%;
}
@media screen and (max-width: 768px) {
.quantitySelectorContainer--quantidade {
margin: 0 0 10px 0;
}
margin: 0;
}
:global(.vtex-numeric-stepper__input) {

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

@ -11,7 +11,6 @@
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
/*min-height: 66px;*/
}
.nameContainer .productBrand {
font-weight: 400;

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

@ -83,17 +83,17 @@
}
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow) {
.sliderLayoutContainer .sliderRightArrow--prateleira {
visibility: hidden;
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow)::after {
.sliderLayoutContainer .sliderRightArrow--prateleira::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png);
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow) {
.sliderLayoutContainer .sliderLeftArrow--prateleira {
visibility: hidden;
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow)::before {
.sliderLayoutContainer .sliderLeftArrow--prateleira::before {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-caina.png);
}

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

@ -52,18 +52,6 @@
width: 100% !important;
}
/*
.swiper-slide-active {
width: 100%;
}*/
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
height: 664px;
}
.caretIcon {
display: none;
}*/
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
@ -296,6 +284,11 @@
.shippingTableHead .shippingTableHeadDeliveryName {
width: 110px;
}
@media screen and (max-width: 350px) {
.shippingTableHead .shippingTableHeadDeliveryName {
width: 90px;
}
}
.shippingTableHead .shippingTableHeadDeliveryEstimate {
order: 3;
}
@ -304,6 +297,11 @@
width: 110px;
font-size: 0;
}
@media screen and (max-width: 350px) {
.shippingTableHead .shippingTableHeadDeliveryPrice {
width: 56px;
}
}
.shippingTableHead .shippingTableHeadDeliveryPrice::after {
content: "FRETE";
font-size: 14px;
@ -324,12 +322,34 @@
padding: 15px 4px 0 0;
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
min-width: 112px;
width: 110px;
}
@media screen and (max-width: 350px) {
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
width: 90px;
min-width: 90px;
padding-right: 0;
}
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 110px;
}
@media screen and (max-width: 768px) {
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 70px;
min-width: 72px;
}
}
@media screen and (max-width: 350px) {
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
min-width: 56px;
width: 56px;
padding-right: 0;
}
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
padding-right: 0;
order: 3;
}
@ -345,6 +365,10 @@
}
}
.productImage--description-imagem {
display: flex;
}
.container--descricao {
margin: 0;
}
@ -374,17 +398,6 @@
}
}
/*.content--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}*/
.productDescriptionText--descricao {
font-weight: 400;
font-size: 16px;

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

@ -40,13 +40,14 @@
.listItem {
background-color: transparent;
padding: 0;
padding: 0 14px 0 14px;
margin: 0;
height: 42px;
}
@media screen and (max-width: 1024px) {
.listItem {
margin: 5px 0;
padding: 0;
}
}
.listItem :global(.vtex-button) {
@ -79,23 +80,26 @@
}
.listItemActive {
/*border-bottom: 2px solid $color-black-100;*/
border-bottom: 2px solid #000000;
}
.listItemActive :global(.vtex-button__label) {
color: #000000;
margin: 0;
padding: 0;
@media screen and (min-width: 1921px) {
.listItemActive {
border-bottom: 3px solid #000000;
}
}
@media screen and (max-width: 1024px) {
.listItemActive {
border: none;
}
}
.listItemActive :global(.vtex-button__label) {
color: #000000;
margin: 0;
padding: 0;
}
.listItemActive--descricao {
border-bottom: 2px solid #000000;
padding-left: 14px;
padding-right: 14px;
}
@media screen and (min-width: 1921px) {
.listItemActive--descricao {

1
styles/sass/pages/product/vtex.add-to-cart-button.scss
View File

@ -1 +0,0 @@

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

@ -10,6 +10,9 @@
margin-left: 360px;
margin-right: 360px;
}
.caretIcon--breadcrumb {
color: $color-gray6;
}
.homeIcon--breadcrumb {
display: none;
@ -17,26 +20,38 @@
.homeLink--breadcrumb {
vertical-align: top;
padding-left: 0;
&::after {
content: "Home";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray6;
}
}
.link--breadcrumb--1 {
padding-right: 0;
font-size: 0;
color: $color-gray6;
&::after {
content: "Sapatos";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray6;
}
}
.link--breadcrumb--2 {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray6;
}
.termArrow--breadcrumb,
.term--breadcrumb {
display: none;

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

@ -9,20 +9,15 @@
}
.hideDecorators {
border: 1px solid red;
border-left: none;
border-right: none;
height: 49px;
}
.quantitySelectorContainer--quantidade {
margin-right: 10px;
margin-bottom: 16px;
padding: 0;
height: 100%;
@media screen and (max-width: 768px) {
margin: 0 0 10px 0;
}
margin: 0;
}
:global(.vtex-numeric-stepper__input) {

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

@ -2,7 +2,6 @@
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
/*min-height: 66px;*/
.productBrand {
font-weight: 400;

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

@ -67,14 +67,14 @@
.sliderLayoutContainer {
//ARROWS CUSTOM
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
.sliderRightArrow--prateleira {
visibility: hidden;
&::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png);
}
}
:global(.vtex-slider-layout-0-x-sliderLeftArrow) {
.sliderLeftArrow--prateleira {
visibility: hidden;
&::before {
visibility: visible;

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

@ -41,19 +41,6 @@
.productImagesGallerySlide--images-container {
width: 100% !important;
}
/*
.swiper-slide-active {
width: 100%;
}*/
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
height: 664px;
}
.caretIcon {
display: none;
}*/
//NOME DO PRODUTO
.productBrand--quickview {
@ -326,6 +313,9 @@
.shippingTableHeadDeliveryName {
width: 110px;
@media screen and (max-width: 350px) {
width: 90px;
}
}
.shippingTableHeadDeliveryEstimate {
@ -336,6 +326,9 @@
display: flex;
width: 110px;
font-size: 0;
@media screen and (max-width: 350px) {
width: 56px;
}
&::after {
content: "FRETE";
font-size: 14px;
@ -361,14 +354,30 @@
}
.shippingTableCellDeliveryName {
min-width: 112px;
width: 110px;
@media screen and (max-width: 350px) {
width: 90px;
min-width: 90px;
padding-right: 0;
}
}
.shippingTableCellDeliveryPrice {
width: 110px;
@media screen and (max-width: 768px) {
width: 70px;
min-width: 72px;
}
@media screen and (max-width: 350px) {
min-width: 56px;
width: 56px;
padding-right: 0;
}
}
.shippingTableCellDeliveryEstimate {
padding-right: 0;
order: 3;
}
}
@ -387,6 +396,10 @@
}
}
.productImage--description-imagem {
display: flex;
}
.container--descricao {
margin: 0;
}
@ -410,17 +423,7 @@
font-size: 20px;
}
}
/*.content--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}*/
.productDescriptionText--descricao {
font-weight: 400;
font-size: 16px;

17
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -28,11 +28,12 @@
.listItem {
background-color: transparent;
padding: 0;
padding: 0 14px 0 14px;
margin: 0;
height: 42px;
@media screen and (max-width: 1024px) {
margin: 5px 0;
padding: 0;
}
:global(.vtex-button) {
@ -64,22 +65,24 @@
}
.listItemActive {
/*border-bottom: 2px solid $color-black-100;*/
border-bottom: 2px solid $color-black-100;
@media screen and (min-width: 1921px) {
border-bottom: 3px solid $color-black-100;
}
@media screen and (max-width: 1024px) {
border: none;
}
:global(.vtex-button__label) {
color: $color-black-100;
margin: 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
border: none;
}
}
.listItemActive--descricao {
border-bottom: 2px solid $color-black-100;
padding-left: 14px;
padding-right: 14px;
@media screen and (min-width: 1921px) {
border-bottom: 3px solid $color-black-100;
}