From e1ffa464a07dd454f45967822d56ae076e9fe26a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sun, 22 Jan 2023 20:39:55 -0300 Subject: [PATCH] feat(pdp): Adiciona skus --- store/blocks/pdp/product.jsonc | 1 - .../product-summary/product-summary.jsonc | 4 +- styles/css/vtex.condition-layout.css | 14 ------ styles/css/vtex.flex-layout.css | 13 ------ styles/css/vtex.store-components.css | 41 ++++++++++++----- .../pages/product/vtex.condition-layout.scss | 5 --- .../sass/pages/product/vtex.flex-layout.scss | 17 ------- .../pages/product/vtex.store-components.scss | 44 +++++++++++++------ 8 files changed, 61 insertions(+), 78 deletions(-) delete mode 100644 styles/css/vtex.condition-layout.css delete mode 100644 styles/sass/pages/product/vtex.condition-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 9797d82..3a12e2f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -43,7 +43,6 @@ }, "condition-layout.product#availability": { "props": { - "blockClass": "testecontainer", "conditions": [ { "subject": "isProductAvailable" diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/styles/css/vtex.condition-layout.css b/styles/css/vtex.condition-layout.css deleted file mode 100644 index 2541a87..0000000 --- a/styles/css/vtex.condition-layout.css +++ /dev/null @@ -1,14 +0,0 @@ -/* -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 */ -/* Grid breakpoints */ -.testecontainer { - margin-left: 50px; - border: 1px solid red; - background-color: yellow; -} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 5f30663..97a6d76 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,24 +12,11 @@ text-align: end; } -.flexRowContent--testecontainer { - margin-left: 50px; - border: 1px solid red; - background-color: yellow; -} - .flexRowContent--preco { border: 1px solid red; font-style: normal; font-weight: 700; font-size: 25px; line-height: 38px; - /* identical to box height, or 152% */ color: #000000; -} - -.flexRowContent--container-btn .stretchChildrenWidth { - background-color: yellow; - width: 90%; - padding: 0; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 03ee676..f33b37f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,13 +7,14 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.container { + border: 1px solid red; + margin-left: 40px; + margin-right: 40px; } -.skuSelectorContainer--skus { - display: flex; - flex-direction: column-reverse; +.newsletter { + background: red; } .productBrand--quickview { @@ -23,16 +24,31 @@ color: #575757; } -.testecontainer { - margin-left: 50px; - border: 1px solid red; - background-color: yellow; +.skuSelectorContainer--skus { + display: flex; + flex-direction: column-reverse; } .frameAround--skus { border: none; } +.skuSelectorOptionsList { + margin-left: -5px; +} + +.skuSelectorName { + font-size: 0; +} +.skuSelectorName::after { + content: "OUTRAS CORES"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + .skuSelectorItemTextValue--skus { font-weight: 400; font-size: 14px; @@ -66,6 +82,10 @@ color: #000000; } +.skuSelectorSelectorImageValue { + display: none; +} + .shippingContainer { border: 1px solid red; display: flex; @@ -90,9 +110,6 @@ height: 49px; border-radius: 0%; } -.shippingContainer :global(.vtex-address-form-4-x-input) { - /*background-color: red;*/ -} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; top: 28px; diff --git a/styles/sass/pages/product/vtex.condition-layout.scss b/styles/sass/pages/product/vtex.condition-layout.scss deleted file mode 100644 index 89a599d..0000000 --- a/styles/sass/pages/product/vtex.condition-layout.scss +++ /dev/null @@ -1,5 +0,0 @@ -.testecontainer { - margin-left: 50px; - border: 1px solid red; - background-color: yellow; -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index a96004d..53ea0f3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,28 +3,11 @@ text-align: end; } -.flexRowContent--testecontainer { - margin-left: 50px; - border: 1px solid red; - background-color: yellow; -} - .flexRowContent--preco { border: 1px solid red; font-style: normal; font-weight: 700; font-size: 25px; line-height: 38px; - /* identical to box height, or 152% */ - color: #000000; } - -//CONTAINER QUANTIDADE E BOTAO -.flexRowContent--container-btn { - .stretchChildrenWidth { - background-color: yellow; - width: 90%; - padding: 0; - } -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7b1fdea..8c420fb 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,10 +1,11 @@ -.newsletter { - background: red; +.container { + border: 1px solid red; + margin-left: 40px; + margin-right: 40px; } -.skuSelectorContainer--skus { - display: flex; - flex-direction: column-reverse; +.newsletter { + background: red; } //NOME DO PRODUTO @@ -15,16 +16,33 @@ color: #575757; } -.testecontainer { - margin-left: 50px; - border: 1px solid red; - background-color: yellow; +//SKUS +.skuSelectorContainer--skus { + display: flex; + flex-direction: column-reverse; } .frameAround--skus { border: none; } +.skuSelectorOptionsList { + margin-left: -5px; +} + +.skuSelectorName { + font-size: 0; + + &::after { + content: "OUTRAS CORES"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} + .skuSelectorItemTextValue--skus { font-weight: 400; font-size: 14px; @@ -61,6 +79,10 @@ } } +.skuSelectorSelectorImageValue { + display: none; +} + //FRETE .shippingContainer { @@ -91,10 +113,6 @@ border-radius: 0%; } - :global(.vtex-address-form-4-x-input) { - /*background-color: red;*/ - } - :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; top: 28px;