From 036c504d694473f8b6d9070c5adfd1112c1c7d68 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Fri, 3 Feb 2023 16:03:10 -0300 Subject: [PATCH] refactor:estilizando os botoes de product-buy --- ...x-image.svg => pix-image-victor_souza.svg} | 0 react/components/Example/paymentWithPix.tsx | 4 +- react/{Example.tsx => paymentWithPix.tsx} | 0 store/blocks/pdp/product.jsonc | 27 ++++- styles/css/vtex.flex-layout.css | 4 + styles/css/vtex.product-quantity.css | 15 +++ styles/css/vtex.store-components.css | 92 ++++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 5 + .../pages/product/vtex.product-quantity.scss | 3 + .../pages/product/vtex.store-components.scss | 102 +++++++++++++++++- 10 files changed, 245 insertions(+), 7 deletions(-) rename assets/{pix-image.svg => pix-image-victor_souza.svg} (100%) rename react/{Example.tsx => paymentWithPix.tsx} (100%) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/assets/pix-image.svg b/assets/pix-image-victor_souza.svg similarity index 100% rename from assets/pix-image.svg rename to assets/pix-image-victor_souza.svg diff --git a/react/components/Example/paymentWithPix.tsx b/react/components/Example/paymentWithPix.tsx index 5d5f8f5..eef7f2d 100644 --- a/react/components/Example/paymentWithPix.tsx +++ b/react/components/Example/paymentWithPix.tsx @@ -7,12 +7,12 @@ console.log("props",props); const product = useProduct(); - +let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg" return (
- {/* */} + Imagem do icone do pix

{(product?.product?.priceRange.sellingPrice.highPrice || 0) * 0.9}

10 % de desconto

diff --git a/react/Example.tsx b/react/paymentWithPix.tsx similarity index 100% rename from react/Example.tsx rename to react/paymentWithPix.tsx diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 37dd428..45d1297 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -116,10 +116,10 @@ "product-separator", "product-identifier.product", "sku-selector", - "product-quantity", + "flex-layout.row#box-buy", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + // "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator", "share#default" @@ -183,7 +183,7 @@ "share#default": { "props": { "social": { - "Facebook": true, + "Facebook": false, "WhatsApp": true, "Twitter": false, "Pinterest": true @@ -271,6 +271,27 @@ "props": { "tabId":"description1" } +}, + +"flex-layout.row#box-buy" : { + "props":{ + "blockClass": "box-buy" + + }, + "children":[ "product-quantity#1","flex-layout.col#button-2"] +}, + +// "flex-layout.col#button-1":{ +// "children": ["product-quantity#1"] +// }, +"flex-layout.col#button-2":{ + "children": ["flex-layout.row#buy-button"] +}, + +"product-quantity#1":{ + "props":{ + "width":"25%" + } } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 77f7a70..fa6b28f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -29,4 +29,8 @@ .flexCol--right-col { padding-right: 40px; +} + +.stretchChildrenWidth { + width: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..6c0a85e --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,15 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +/*font*/ +/*colors*/ +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index dfd04da..a3375d0 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -73,4 +73,96 @@ .productImagesThumb { width: 15%; +} + +.shippingTableHead { + display: grid; + margin-bottom: 15px; +} + +.shippingTableHeadDeliveryName { + display: flex; +} + +.shippingTableHeadDeliveryEstimate { + display: flex; +} + +.shippingTableHeadDeliveryPrice { + display: flex; +} + +.shippingTableRow { + display: grid; + grid-template-columns: 110px 110px 130px; + grid-template-areas: "t p d "; +} + +.shippingTableHead { + display: flex; + gap: 60px; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName { + grid-area: t; + padding: 0; + margin-bottom: 15px; +} + +.shippingTableCellDeliveryEstimate { + grid-area: d; + padding: 0; +} + +.shippingTableCellDeliveryPrice { + grid-area: p; + padding: 0; +} + +.shareContainer { + display: none; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "Ok"; + color: white; + font-size: 10px; +} + +.shippingContainer :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + position: relative; + height: 49px; + border-radius: 0; +} + +.shippingContainer :global(.vtex-button) { + position: absolute; + top: 731.1px; + right: 563px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 5973b87..ac08351 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -18,3 +18,8 @@ .flexCol--right-col { padding-right: 40px; } + +.stretchChildrenWidth { + width:0; +} + diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..dd527e9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,3 @@ +.quantitySelectorTitle { + display: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f5360b5..076bd2e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -14,8 +14,6 @@ margin:0; } - - .label { font-family: 'Open Sans'; font-style: normal; @@ -63,3 +61,103 @@ .productImagesThumb { width: 15%; } + +// estilização do frete + +//estilização dos topicos +.shippingTableHead { + display: grid; + margin-bottom: 15px; +} +.shippingTableHeadDeliveryName { + display: flex; +} +.shippingTableHeadDeliveryEstimate { + display: flex; +} +.shippingTableHeadDeliveryPrice { + display: flex; +} + +//estilização das colunas +.shippingTableRow { + display: grid; + grid-template-columns: 110px 110px 130px;; + grid-template-areas: "t p d "; +} +.shippingTableHead { + display: flex; + gap: 60px ; +} + +.shippingTableRadioBtn { + display: none; +} +.shippingTableCellDeliveryName { + grid-area: t; + padding: 0; + margin-bottom: 15px; +} + +.shippingTableCellDeliveryEstimate { + grid-area:d; + padding: 0; +} + +.shippingTableCellDeliveryPrice { + grid-area: p; + padding: 0; +} + +.shareContainer { + display: none; +} + +.shippingContainer { + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; + :global(.vtex-button__label ){ + font-size: 0; + &::after { + content: "Ok"; + color:white; + font-size: 10px; + } + } + } +} + +.shippingContainer { + :global(.vtex-input) { + :global(.vtex-input__label ){ + font-size: 0; + &::after { + content: "CALCULAR FRETE:"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } +} +.shippingContainer { + :global(.vtex-input-prefix__group) { + width: 280px; + position: relative; + height: 49px; + border-radius: 0; + } +} +.shippingContainer { + :global(.vtex-button) { + position: absolute; + top: 731.1px; + right: 563px; + } +} +