feat: estiliza as informações sobre o produto

This commit is contained in:
Leonardo Pereira Rocha 2023-01-26 22:34:05 -03:00
parent c9a06914fb
commit c32372103b
16 changed files with 172 additions and 27 deletions

View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",

View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css"
const CSS_HANDLES = ["html"] as const;

View File

@ -0,0 +1,3 @@
[data-testeid="breadcrumb"] {
background-color: yellow;
}

View File

@ -2,7 +2,8 @@
"add-to-cart-button": {
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button"
"customPixelEventId": "add-to-cart-button",
"blockClass": "button-add"
}
},

View File

@ -91,7 +91,7 @@
"desktop": "auto",
"phone": "16:9"
},
"displayThumbnailsArrows": true
"displayThumbnailsArrows": false
}
},
"flex-layout.col#right-col": {
@ -101,12 +101,11 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
"product-installments#m3-academy",
"sku-selector",
"product-quantity",
"product-assembly-options",
@ -118,6 +117,15 @@
]
},
"product-installments#m3-academy": {
"props": {
"installmentsCriteria": "max-quantity-without-interest",
"markers": ["discount", "vezes"],
"blockClass": "m3-custom-installments",
"message": "ou {installmentsNumber}<vezes>x</vezes> de {installmentValue} <discount>sem juros</discount>"
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3

View File

@ -7,10 +7,9 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.html {
/*.html {
background-color: red;
}
.html--pdp-breadcrumb {
}*/
/*.html--pdp-breadcrumb {
background-color: green;
}
}*/

View File

@ -0,0 +1,44 @@
.add-to-cart-button {
background-color: black;
color: white;
}
.buttonText {
visibility: hidden;
}
.button-add {
background-color: black;
}
.__label {
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
.buttonText::after {
width: 398px;
height: 25px;
content: "Adicionar à sacola";
visibility: visible;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.buttonDataContainer {
background: black;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

View File

@ -0,0 +1,35 @@
.homeIcon {
visibility: hidden;
}
.arrow--1 {
visibility: hidden;
content: "";
}
.arrow--1::after {
visibility: visible;
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.link--2 {
visibility: hidden;
content: "";
}
.link--2::after {
visibility: visible;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
content: "Sapatos";
}

View File

@ -43,7 +43,7 @@
}
.flexRow--deals {
background-color: #0F3E99;
background-color: #0f3e99;
padding: 14px 0px;
}
@ -83,6 +83,7 @@
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;

View File

@ -1,3 +1,29 @@
.product-identifier--productReference {
margin-bottom: 1rem;
}
.product-identifier__label,
.product-identifier__separator {
display: none;
}
.product-identifier__value {
text-align: right;
position: absolute;
right: 0;
margin-right: 40px;
}
.product-identifier--productReference {
position: relative;
font-family: "Open Sans";
text-align: right;
display: flex;
align-self: flex-end;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}

View File

@ -1,6 +1,6 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
margin-bottom: 0.25rem;
font-size: 1rem;
}
@ -10,8 +10,12 @@
}
.sellingPriceValue {
font-size: 2.25rem;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
@ -20,18 +24,19 @@
}
.savings {
display: none;
font-weight: 500;
color: #79B03A;
color: #79b03a;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
color: #2e2e2e;
}
.savings--summary {
background: #8BC34A;
background: #8bc34a;
border-radius: 1000px;
align-items: center;
display: flex;
@ -41,21 +46,24 @@
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
color: #ffffff;
}
.listPrice {
display: none;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
color: #ffffff;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
font-size: 0.875rem;
}
.installments--summary {
@ -74,6 +82,6 @@
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

View File

@ -0,0 +1,4 @@
.quantitySelectorTitle {
display: none;
}

View File

@ -9,4 +9,17 @@
/* Grid breakpoints */
.newsletter {
background: red;
}
}
.productNameContainer {
width: 664px;
height: 34px;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
margin-right: 40px;
}

View File

@ -0,0 +1,4 @@
.hideDecorators {
border-left: none;
border-right: none;
}

View File

@ -1,8 +1,7 @@
.html {
/*.html {
background-color: red;
}
}*/
.html--pdp-breadcrumb {
/*.html--pdp-breadcrumb {
background-color: green;
}
}*/