forked from M3-Academy/challenge-vtex-io
desenvolvimento #5
12
docs/Todo.md
12
docs/Todo.md
@ -11,7 +11,7 @@ os Requisitos cobrados serão: {cm:2023-02-07}
|
||||
|
||||
- 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](6){
|
||||
- FIXME [Blocos que devem ser ajustado e desenvolvidos](testeid){
|
||||
|
||||
- [x] 1. BreadCrumb; {cm:2023-01-31}
|
||||
|
||||
@ -23,9 +23,9 @@ os Requisitos cobrados serão: {cm:2023-02-07}
|
||||
|
||||
- HACK 5. prateleira de produtos, {cm:2023-02-07}
|
||||
|
||||
- HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
|
||||
- HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) {cm:2023-02-10}
|
||||
|
||||
- HACK 7.Fazer o cep
|
||||
- HACK 7.Fazer o cep {cm:2023-02-10}
|
||||
|
||||
- FIXME COLOCAR OS TESTESID!!!!!
|
||||
|
||||
@ -36,8 +36,8 @@ os Requisitos cobrados serão: {cm:2023-02-07}
|
||||
|
||||
{cm:2023-01-25}
|
||||
|
||||
* FIXME Bloco de Preço com Desconto deve ser CUSTOM
|
||||
* FIXME Bloco de Preço com Desconto deve ser CUSTOM {cm:2023-02-10}
|
||||
|
||||
* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
|
||||
* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. {cm:2023-02-10}
|
||||
|
||||
* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento.
|
||||
* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. {cm:2023-02-10}
|
||||
|
||||
3
react/CEP.tsx
Normal file
3
react/CEP.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import CEP from "./components/ProductContext/cep";
|
||||
|
||||
export default CEP;
|
||||
3
react/Placeholder.tsx
Normal file
3
react/Placeholder.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import Placeholder from "./components/ProductContext/Placeholder";
|
||||
|
||||
export default Placeholder;
|
||||
@ -20,7 +20,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class="pix_wrapper-price"]{
|
||||
.html--pdp-pixPrice div span[datatype='span_wrapper'] p{
|
||||
margin: 0;
|
||||
}
|
||||
.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class="pix_wrapper-price"]{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
@ -29,7 +32,7 @@
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class='pix_wrapper-Discount']{
|
||||
.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class='pix_wrapper-Discount']{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
@ -46,7 +49,9 @@
|
||||
.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.html--card-button{
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.html--buy-button{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@ -55,13 +60,13 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
|
||||
display: block;
|
||||
display: none;
|
||||
}
|
||||
.html--buy-button :global(.vtex-button){
|
||||
display: block;
|
||||
background: black;
|
||||
height: 49px;
|
||||
max-width: 77.354%;
|
||||
max-width: 97.05%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.html--pdp-section_descriptions{
|
||||
@ -73,7 +78,7 @@
|
||||
@media screen and (min-width: 1920px){
|
||||
.html--buy-button :global(.vtex-button){
|
||||
max-width: 766px;
|
||||
width: 80.126%;
|
||||
width: 96%;
|
||||
}
|
||||
.html--pdp-productMain,.html--availability{
|
||||
padding-right: 12.5393%;
|
||||
@ -193,3 +198,17 @@
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) a{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-line: underline;
|
||||
color: #000000;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) a span{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,36 +1,43 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { useProduct } from 'vtex.product-context';
|
||||
|
||||
const Pix: React.FC = () => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
useEffect(() => {
|
||||
if (buttonRef.current) {
|
||||
buttonRef.current.innerHTML = 'Novo texto';
|
||||
buttonRef.current.setAttribute('placeholder', 'Novo placeholder');
|
||||
}
|
||||
}, []);
|
||||
type price = {
|
||||
discountRate:number
|
||||
}
|
||||
const Pix = ({ discountRate}:price) => {
|
||||
const { product } = useProduct()
|
||||
|
||||
let pixprice = product?.priceRange.sellingPrice.lowPrice
|
||||
let desconto = 10
|
||||
let desconto = discountRate >= 0 ? discountRate : 10;
|
||||
let finalprice = pixprice - (pixprice/desconto)
|
||||
let RoundedNumber = Number(Math.round(finalprice * 100) / 100);
|
||||
const formattedNumber = RoundedNumber.toLocaleString('pt-BR', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
console.log('productContex',product)
|
||||
return (
|
||||
<div className='pix_wrapper'>
|
||||
<img className='pix_wrapper-img' src="https://agenciamagma.vteximg.com.br/arquivos/ids/166877/pixrallenson.sv" alt="Logo do Pix" />
|
||||
<span datatype='span_wrapper'>
|
||||
<span className='pix_wrapper-price'>
|
||||
<p className='pix_wrapper-price'>
|
||||
R$ {formattedNumber}
|
||||
</span>
|
||||
<span className='pix_wrapper-Discount'> {desconto} % de desconto</span>
|
||||
</p>
|
||||
<p className='pix_wrapper-Discount'> {desconto} % de desconto</p>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Pix.schema = {
|
||||
title:"Pix-Price",
|
||||
description:"quantos % o pagamento via pix irá proporcionar",
|
||||
type:"object",
|
||||
properties:{
|
||||
discountRate:{
|
||||
title: "Pix-Price",
|
||||
description:"quantos % o pagamento via pix irá proporcionar",
|
||||
type:"number",
|
||||
default:10
|
||||
}
|
||||
}
|
||||
}
|
||||
export default Pix
|
||||
|
||||
22
react/components/ProductContext/Placeholder.tsx
Normal file
22
react/components/ProductContext/Placeholder.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
const Placeholder = () => {
|
||||
if (typeof document !== "undefined") {
|
||||
const Placeholder = document.querySelector(".vtex-address-form-4-x-input")
|
||||
const placeholdertamanho = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--tamanho .vtex-store-components-3-x-skuSelectorName");
|
||||
const placeholdercor = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--cor .vtex-store-components-3-x-skuSelectorName");
|
||||
console.log(placeholdertamanho)
|
||||
if(placeholdertamanho){
|
||||
placeholdertamanho.textContent = "OUTROS TAMANHOS:";
|
||||
}
|
||||
if(placeholdercor){
|
||||
placeholdercor.textContent = "OUTRAS CORES:";
|
||||
}
|
||||
Placeholder?.setAttribute("Placeholder","Digite seu CEP")
|
||||
}
|
||||
return(
|
||||
<>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Placeholder;
|
||||
50
react/components/ProductContext/cep.tsx
Normal file
50
react/components/ProductContext/cep.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
|
||||
const CEP = () => {
|
||||
function handleButtonClick(){
|
||||
setTimeout(() => {
|
||||
if (typeof document !== "undefined"){
|
||||
const tr = document.querySelector('.vtex-store-components-3-x-shippingTableRow');
|
||||
const trRow = document.querySelectorAll('.vtex-store-components-3-x-shippingTableBody .vtex-store-components-3-x-shippingTableRow ');
|
||||
const tdEstimate = document.querySelectorAll('.vtex-store-components-3-x-shippingTableCellDeliveryEstimate');
|
||||
const thEstimate = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryEstimate');
|
||||
const thPrice = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryPrice');
|
||||
if(tdEstimate){
|
||||
tdEstimate.forEach((row) => {
|
||||
if(row.parentNode){
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
});
|
||||
|
||||
trRow.forEach((row, index) => {
|
||||
const td = tdEstimate[index];
|
||||
row.appendChild(td);
|
||||
});
|
||||
}
|
||||
if(tr){
|
||||
if(thEstimate){
|
||||
thEstimate.textContent = "PRAZO";
|
||||
tr.removeChild(thEstimate);
|
||||
tr.appendChild(thEstimate);
|
||||
}
|
||||
if(thPrice){
|
||||
thPrice.textContent = "FRETE";
|
||||
tr.removeChild(thPrice);
|
||||
tr.insertBefore(thPrice,thEstimate);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
if (typeof document !== "undefined") {
|
||||
const btnCep = document.querySelector(".vtex-store-components-3-x-shippingContainer .vtex-button");
|
||||
if (btnCep) {
|
||||
btnCep.addEventListener('click', handleButtonClick);
|
||||
}
|
||||
}
|
||||
return(
|
||||
<>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default CEP;
|
||||
@ -1,6 +1,8 @@
|
||||
{
|
||||
"store.product": {
|
||||
"children": [
|
||||
"html#Placeholder",
|
||||
"html#CEP",
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"html#departaments",
|
||||
@ -8,12 +10,25 @@
|
||||
"html#carousel"
|
||||
]
|
||||
},
|
||||
"html#Pix":{
|
||||
"html#Pix": {
|
||||
"props": {
|
||||
"testId": "pix-price",
|
||||
"blockClass": "pdp-pixPrice"
|
||||
},
|
||||
"children": ["Pix"]
|
||||
},
|
||||
"html#Placeholder": {
|
||||
"children": ["Placeholder"]
|
||||
},
|
||||
"html#CEP": {
|
||||
"children": ["CEP"]
|
||||
},
|
||||
"html#tab-layout": {
|
||||
"props": {
|
||||
"testId": "tab-layout"
|
||||
},
|
||||
"children": ["tab-layout#pdp"]
|
||||
},
|
||||
"tab-layout#pdp": {
|
||||
"children": [
|
||||
"tab-list#pdp",
|
||||
@ -118,13 +133,14 @@
|
||||
},
|
||||
"html#prateleira": {
|
||||
"props": {
|
||||
"testId": "vtex-product-sumary"
|
||||
"testId": "vtex-product-summary"
|
||||
},
|
||||
"children": [
|
||||
"product-summary-image#shelfpdp",
|
||||
"stack-layout#pdp",
|
||||
"product-summary-name",
|
||||
"product-list-price#summary",
|
||||
"product-selling-price#summary"
|
||||
"html#selling-price",
|
||||
"flex-layout.row#selling-price-savingspdp"
|
||||
]
|
||||
},
|
||||
"html#carousel": {
|
||||
@ -138,11 +154,17 @@
|
||||
},
|
||||
"list-context.product-list#pdp": {
|
||||
"blocks": ["product-summary.shelf#Pdp"],
|
||||
"children": ["slider-layout#demo-products#pdp"],
|
||||
"children": ["html#slider"],
|
||||
"props": {
|
||||
"orderBy": "OrderByTopSaleDESC"
|
||||
}
|
||||
},
|
||||
"html#slider": {
|
||||
"props": {
|
||||
"testId": "product-summary-list"
|
||||
},
|
||||
"children": ["slider-layout#demo-products#pdp"]
|
||||
},
|
||||
"slider-layout#demo-products#pdp": {
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
@ -155,14 +177,9 @@
|
||||
"blockClass": "pdp-carrousel"
|
||||
}
|
||||
},
|
||||
|
||||
"product-summary.shelf#Pdp": {
|
||||
"children": [
|
||||
"stack-layout#pdp",
|
||||
"product-summary-name",
|
||||
"product-list-price#summary",
|
||||
"product-selling-price#summarypdp",
|
||||
"flex-layout.row#selling-price-savingspdp"
|
||||
"html#prateleira"
|
||||
]
|
||||
},
|
||||
|
||||
@ -208,8 +225,6 @@
|
||||
"children": ["breadcrumb"]
|
||||
},
|
||||
|
||||
|
||||
|
||||
"flex-layout.row#specifications-title": {
|
||||
"children": ["rich-text#specifications"]
|
||||
},
|
||||
@ -249,7 +264,7 @@
|
||||
"testId": "Product-Images",
|
||||
"blockClass": "pdp-productMain"
|
||||
},
|
||||
"children": ["html#stack", "html#right-col"]
|
||||
"children": ["html#stack", "html#right-col"]
|
||||
},
|
||||
"flex-layout.row#product-main": {
|
||||
"props": {
|
||||
@ -260,8 +275,8 @@
|
||||
"marginBottom": 0,
|
||||
"paddingTop": 0,
|
||||
"paddingBottom": 0,
|
||||
"paddingright":0,
|
||||
"paddingleft":0
|
||||
"paddingright": 0,
|
||||
"paddingleft": 0
|
||||
}
|
||||
},
|
||||
|
||||
@ -291,7 +306,7 @@
|
||||
"testId": "product-description",
|
||||
"blockClass": "pdp-section_descriptions"
|
||||
},
|
||||
"children": ["tab-layout#pdp"]
|
||||
"children": ["html#tab-layout"]
|
||||
},
|
||||
|
||||
"html#description": {
|
||||
@ -307,12 +322,13 @@
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"width": "50%",
|
||||
"blockClass": "StackLayout"
|
||||
"blockClass": "StackLayout",
|
||||
"testId": "product-images"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#product-image": {
|
||||
"props":{
|
||||
"props": {
|
||||
"blockClass": "product-image"
|
||||
},
|
||||
"children": ["product-images"]
|
||||
@ -351,52 +367,83 @@
|
||||
"blockClass": "pdp-InfoBuy"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"html#product-name",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"html#product-installments",
|
||||
"html#Pix",
|
||||
"sku-selector",
|
||||
"html#sku-selector",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
"html#buy-button",
|
||||
"availability-subscriber",
|
||||
"shipping-simulator",
|
||||
"html#shipping-simulator",
|
||||
"share#default"
|
||||
]
|
||||
},
|
||||
"shipping-simulator": {
|
||||
"props": {}
|
||||
"html#shipping-simulator": {
|
||||
"props": {
|
||||
"testId": "shipping-simulator"
|
||||
},
|
||||
"children": ["shipping-simulator"]
|
||||
},
|
||||
"html#product-installments": {
|
||||
"props": {
|
||||
"testId": "product-installments"
|
||||
},
|
||||
"children": ["product-installments"]
|
||||
},
|
||||
"product-installments": {
|
||||
"props": {
|
||||
"message": "{installmentsNumber} de {installmentValue} sem juros"
|
||||
}
|
||||
},
|
||||
|
||||
"html#selling-price": {
|
||||
"props": {
|
||||
"testId": "product-price"
|
||||
},
|
||||
"children": ["product-selling-price#summarypdp"]
|
||||
},
|
||||
|
||||
"product-selling-price#summarypdp": {
|
||||
"props": {
|
||||
"blockClass": "desconto",
|
||||
"message": "de {sellingPriceWithTax} por"
|
||||
}
|
||||
},
|
||||
|
||||
"html#product-name": {
|
||||
"props": {
|
||||
"testId": "product-name"
|
||||
},
|
||||
"children": ["flex-layout.row#product-name"]
|
||||
},
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
"marginBottom": 3,
|
||||
"blockClass": "title"
|
||||
},
|
||||
"children": [
|
||||
"product-identifier.product",
|
||||
"vtex.store-components:product-name"
|
||||
]
|
||||
"children": ["html#código", "vtex.store-components:product-name"]
|
||||
},
|
||||
"html#código": {
|
||||
"props": {
|
||||
"testId": "product-code"
|
||||
},
|
||||
"children": ["product-identifier.product"]
|
||||
},
|
||||
|
||||
"product-identifier.product": {
|
||||
"props": {
|
||||
"label": "hide", //'default' | 'custom' | 'hide'
|
||||
"blockClass": "sku"
|
||||
"label": "hide" //'default' | 'custom' | 'hide'
|
||||
}
|
||||
},
|
||||
"html#sku-selector": {
|
||||
"props": {
|
||||
"testId": "sku-selector"
|
||||
},
|
||||
"children": ["sku-selector"]
|
||||
},
|
||||
"sku-selector": {
|
||||
"props": {
|
||||
"variationsSpacing": 3,
|
||||
@ -405,7 +452,7 @@
|
||||
},
|
||||
|
||||
"flex-layout.row#buy-button": {
|
||||
"children": ["product-quantity", "add-to-cart-button"]
|
||||
"children": ["html#product-quantity", "add-to-cart-button"]
|
||||
},
|
||||
"html#buy-button": {
|
||||
"props": {
|
||||
@ -413,7 +460,13 @@
|
||||
"marginBottom": 7,
|
||||
"blockClass": "buy-button"
|
||||
},
|
||||
"children": ["product-quantity", "add-to-cart-button"]
|
||||
"children": ["html#product-quantity", "html#add-to-cart-button#pdp"]
|
||||
},
|
||||
"html#product-quantity": {
|
||||
"props": {
|
||||
"testId": "product-quantity"
|
||||
},
|
||||
"children": ["product-quantity"]
|
||||
},
|
||||
"product-quantity": {
|
||||
"props": {
|
||||
@ -422,7 +475,14 @@
|
||||
"size": "regular"
|
||||
}
|
||||
},
|
||||
"add-to-cart-button": {
|
||||
"html#add-to-cart-button#pdp": {
|
||||
"props": {
|
||||
"blockClass": "card-button",
|
||||
"testId": "add-to-cart-button"
|
||||
},
|
||||
"children": ["add-to-cart-button#pdp"]
|
||||
},
|
||||
"add-to-cart-button#pdp": {
|
||||
"props": {
|
||||
"text": "ADICIONAR À SACOLA"
|
||||
}
|
||||
@ -432,17 +492,14 @@
|
||||
"props": {
|
||||
"blockClass": "availability"
|
||||
},
|
||||
"children": [
|
||||
"html#stack",
|
||||
"html#right-col-availability"
|
||||
]
|
||||
"children": ["html#stack", "html#right-col-availability"]
|
||||
},
|
||||
"html#right-col-availability": {
|
||||
"props": {
|
||||
"blockClass": "info-availability"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"html#product-name",
|
||||
"flex-layout.row#availability",
|
||||
"sku-selector"
|
||||
]
|
||||
@ -454,7 +511,7 @@
|
||||
"children": ["availability-subscriber"]
|
||||
},
|
||||
|
||||
"availability-subscriber":{
|
||||
"availability-subscriber": {
|
||||
"props": {
|
||||
"blockClass": "message-availability"
|
||||
}
|
||||
|
||||
@ -8,9 +8,15 @@
|
||||
"marginBottom": 4
|
||||
},
|
||||
"children": [
|
||||
"product-selling-price"
|
||||
"html#selling--price"
|
||||
]
|
||||
},
|
||||
"html#selling--price":{
|
||||
"props":{
|
||||
"testId": "product-price"
|
||||
},
|
||||
"children": ["product-selling-price"]
|
||||
},
|
||||
"product-selling-price#ProducyImage":{
|
||||
"props":{
|
||||
"blockClass": "price"
|
||||
|
||||
@ -5,6 +5,12 @@
|
||||
"Pix": {
|
||||
"component": "Pix"
|
||||
},
|
||||
"Placeholder": {
|
||||
"component": "Placeholder"
|
||||
},
|
||||
"CEP": {
|
||||
"component": "CEP"
|
||||
},
|
||||
|
||||
"html": {
|
||||
"component": "html",
|
||||
|
||||
@ -63,22 +63,16 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorName {
|
||||
text-transform: uppercase;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
.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:";
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
|
||||
content: "OUTRAS ";
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -91,16 +85,6 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
|
||||
text-transform: uppercase;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
|
||||
content: "S:";
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
|
||||
content: "OUTROS ";
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorInternalBox {
|
||||
border: 2px solid #B9B9B9;
|
||||
}
|
||||
@ -246,6 +230,13 @@
|
||||
.form {
|
||||
width: max-content;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.form .content {
|
||||
width: 65.532%;
|
||||
height: 108px;
|
||||
@ -255,6 +246,11 @@
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.form .content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.form .content .inputName, .form .content .inputEmail {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
@ -262,6 +258,11 @@
|
||||
margin-right: 0;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.form .content .inputName, .form .content .inputEmail {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
.form .submit {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
@ -269,6 +270,7 @@
|
||||
grid-row: 2;
|
||||
}
|
||||
.form .submit :global(.vtex-button) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #000000;
|
||||
width: 308px;
|
||||
@ -294,4 +296,157 @@
|
||||
line-height: 28px;
|
||||
padding: 14px 14px 16px;
|
||||
color: #989898;
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
display: grid;
|
||||
position: relative;
|
||||
align-items: end;
|
||||
width: max-content;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.shippingContainer {
|
||||
max-width: 100%;
|
||||
min-width: 93.665%;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: grid;
|
||||
grid-column: 1/2;
|
||||
padding: 0;
|
||||
min-width: 230px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
display: block;
|
||||
grid-column: 2/3;
|
||||
background: #000000;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
|
||||
content: "ok";
|
||||
padding: 14px;
|
||||
min-height: 21px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input) {
|
||||
grid-column: 1/2;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) {
|
||||
border: 1px solid #CCCCCC;
|
||||
height: 49px;
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
|
||||
color: #AFAFAF;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 16.5px 16px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
width: max-content;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
|
||||
content: "CALCULAR FRETE:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
width: max-content;
|
||||
position: absolute;
|
||||
grid-column: 3/4;
|
||||
right: 0;
|
||||
bottom: 25%;
|
||||
left: 0;
|
||||
margin-left: 32px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
margin-left: 0;
|
||||
grid-column: 1/4;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTable {
|
||||
border: 0;
|
||||
width: max-content;
|
||||
}
|
||||
.shippingTable .shippingTableHead {
|
||||
display: table-row-group;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow {
|
||||
width: 100%;
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell, .shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel, .shippingTable .shippingTableBody .shippingTableRow .currencyContainer {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #AFAFAF;
|
||||
text-align: start;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -50,24 +50,16 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.skuSelectorName{
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
}
|
||||
.skuSelectorSubcontainer-{
|
||||
&-cor{
|
||||
height: 75px;
|
||||
.skuSelectorOptionsList{
|
||||
height: 48px;
|
||||
}
|
||||
.skuSelectorTextContainer{
|
||||
.skuSelectorName{
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
&::after{
|
||||
content: "ES:";
|
||||
}
|
||||
&::before{
|
||||
content: "OUTRAS ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-tamanho{
|
||||
.frameAround{
|
||||
@ -82,18 +74,6 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.skuSelectorTextContainer{
|
||||
.skuSelectorName{
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
&::after{
|
||||
content: "S:";
|
||||
}
|
||||
&::before{
|
||||
content: "OUTROS ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -218,6 +198,11 @@
|
||||
|
||||
.form{
|
||||
width: max-content;
|
||||
@media screen and (max-width: 1024px){
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.content{
|
||||
width: 65.532%;
|
||||
height: 108px;
|
||||
@ -226,12 +211,18 @@
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 8px;
|
||||
@media screen and (max-width: 1024px){
|
||||
width: 100%;
|
||||
}
|
||||
.inputName,.inputEmail{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
min-width: 150px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 7px;
|
||||
@media screen and (max-width: 1024px){
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit{
|
||||
@ -240,6 +231,7 @@
|
||||
grid-column: span 2;
|
||||
grid-row: 2;
|
||||
:global(.vtex-button){
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #000000;
|
||||
width: 308px;
|
||||
@ -268,5 +260,158 @@
|
||||
color: #989898;
|
||||
}
|
||||
}
|
||||
.shippingContainer{
|
||||
display: grid;
|
||||
position: relative;
|
||||
align-items: end;
|
||||
width: max-content;
|
||||
@media screen and (max-width: 1024px){
|
||||
max-width: 100%;
|
||||
min-width: 93.665%;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
height: 100px;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode ){
|
||||
display: grid;
|
||||
grid-column: 1 / 2;
|
||||
padding: 0;
|
||||
min-width: 230px;
|
||||
@media screen and (max-width: 1024px){
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
:global(.vtex-button){
|
||||
display: block;
|
||||
grid-column: 2 / 3;
|
||||
background: #000000;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
:global(.vtex-button__label){
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
&::after{
|
||||
content: "ok";
|
||||
padding: 14px;
|
||||
min-height: 21px;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(.vtex-input){
|
||||
grid-column: 1 / 2;
|
||||
:global(.vtex-input-prefix__group){
|
||||
border: 1px solid #CCCCCC;
|
||||
height: 49px;
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
:global(.vtex-address-form-4-x-input){
|
||||
color: #AFAFAF;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 16.5px 16px;
|
||||
}
|
||||
}
|
||||
:global(.vtex-input__label){
|
||||
font-size: 0;
|
||||
width:max-content;
|
||||
&::after{
|
||||
content: "CALCULAR FRETE:";
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL){
|
||||
width: max-content;
|
||||
position: absolute;
|
||||
grid-column: 3 / 4;
|
||||
right: 0;
|
||||
bottom: 25%;
|
||||
left: 0;
|
||||
margin-left: 32px;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-line:underline;
|
||||
@media screen and (max-width: 1024px){
|
||||
margin-left: 0;
|
||||
grid-column:1 / 4;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shippingTable{
|
||||
border: 0;
|
||||
width: max-content;
|
||||
.shippingTableHead{
|
||||
display: table-row-group;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
.shippingTableRow{
|
||||
width: 100%;
|
||||
.shippingTableHeadDeliveryName,.shippingTableHeadDeliveryEstimate,.shippingTableHeadDeliveryPrice{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shippingTableBody{
|
||||
.shippingTableRow{
|
||||
.shippingTableCell{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.shippingTableCellDeliveryName{
|
||||
.shippingTableLabel{
|
||||
.shippingTableRadioBtn{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shippingTableCell,.shippingTableLabel,.currencyContainer{
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #AFAFAF;
|
||||
text-align: start;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user