From ba3ac378f9e5defaba6c769e3e0f6c19fa2f5a4b Mon Sep 17 00:00:00 2001 From: Rallenson Date: Fri, 10 Feb 2023 06:37:31 -0300 Subject: [PATCH] feat(sku-seletor):concertando skuSelectorName --- react/components/Html/styles.css | 7 +- react/components/ProductContext/Pix.tsx | 6 +- .../components/ProductContext/Placeholder.tsx | 9 +++ store/blocks/pdp/product.jsonc | 77 ++++++++----------- styles/css/vtex.store-components.css | 24 +----- .../pages/product/vtex.store-components.scss | 28 +------ 6 files changed, 57 insertions(+), 94 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 38702cf..961c1b0 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -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; diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx index d26a5ca..dd63cfa 100644 --- a/react/components/ProductContext/Pix.tsx +++ b/react/components/ProductContext/Pix.tsx @@ -17,10 +17,10 @@ const Pix = () => {
Logo do Pix - +

R$ {formattedNumber} - - {desconto} % de desconto +

+

{desconto} % de desconto
) diff --git a/react/components/ProductContext/Placeholder.tsx b/react/components/ProductContext/Placeholder.tsx index f8f0fc1..136ddd4 100644 --- a/react/components/ProductContext/Placeholder.tsx +++ b/react/components/ProductContext/Placeholder.tsx @@ -3,6 +3,15 @@ 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( diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index eb3bd21..15e7ed2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,20 +10,20 @@ "html#carousel" ] }, - "html#Pix":{ + "html#Pix": { "props": { "testId": "pix-price", "blockClass": "pdp-pixPrice" }, "children": ["Pix"] }, - "html#Placeholder":{ + "html#Placeholder": { "children": ["Placeholder"] }, - "html#CEP":{ + "html#CEP": { "children": ["CEP"] }, - "html#tab-layout":{ + "html#tab-layout": { "props": { "testId": "tab-layout" }, @@ -133,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#summarypdp" + "html#selling-price", + "flex-layout.row#selling-price-savingspdp" ] }, "html#carousel": { @@ -162,9 +163,7 @@ "props": { "testId": "product-summary-list" }, - "children": [ - "slider-layout#demo-products#pdp" - ] + "children": ["slider-layout#demo-products#pdp"] }, "slider-layout#demo-products#pdp": { "props": { @@ -178,14 +177,9 @@ "blockClass": "pdp-carrousel" } }, - "product-summary.shelf#Pdp": { "children": [ - "stack-layout#pdp", - "product-summary-name", - "product-list-price#summary", - "html#selling-price", - "flex-layout.row#selling-price-savingspdp" + "html#prateleira" ] }, @@ -198,7 +192,7 @@ "marginBottom": 4 }, "children": [ - "product-selling-price#summarypdp", + "product-selling-price#summary", "product-price-savings#summary" ] }, @@ -231,8 +225,6 @@ "children": ["breadcrumb"] }, - - "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -272,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": { @@ -283,8 +275,8 @@ "marginBottom": 0, "paddingTop": 0, "paddingBottom": 0, - "paddingright":0, - "paddingleft":0 + "paddingright": 0, + "paddingleft": 0 } }, @@ -330,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"] @@ -389,28 +382,28 @@ "share#default" ] }, - "html#shipping-simulator":{ - "props":{ + "html#shipping-simulator": { + "props": { "testId": "shipping-simulator" }, - "children": ["shipping-simulator"] - }, - "html#product-installments":{ - "props":{ + "children": ["shipping-simulator"] + }, + "html#product-installments": { + "props": { "testId": "product-installments" }, - "children": ["product-installments"] - }, + "children": ["product-installments"] + }, "product-installments": { "props": { "message": "{installmentsNumber} de {installmentValue} sem juros" } }, - "html#selling-price":{ - "props":{ - "testId": "product-price" - }, + "html#selling-price": { + "props": { + "testId": "product-price" + }, "children": ["product-selling-price#summarypdp"] }, @@ -432,10 +425,7 @@ "marginBottom": 3, "blockClass": "title" }, - "children": [ - "html#código", - "vtex.store-components:product-name" - ] + "children": ["html#código", "vtex.store-components:product-name"] }, "html#código": { "props": { @@ -502,10 +492,7 @@ "props": { "blockClass": "availability" }, - "children": [ - "html#stack", - "html#right-col-availability" - ] + "children": ["html#stack", "html#right-col-availability"] }, "html#right-col-availability": { "props": { @@ -524,7 +511,7 @@ "children": ["availability-subscriber"] }, - "availability-subscriber":{ + "availability-subscriber": { "props": { "blockClass": "message-availability" } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index eed5941..051d83d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -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; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 71fd205..61f2b5c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -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 "; - } - } - } } }