From c8c5560e09ca69cae3d24f665a487dc0f0f4238b Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Tue, 7 Feb 2023 18:33:33 -0300 Subject: [PATCH] feat:adicionando prateleira de produtos --- store/blocks/pdp/product.jsonc | 57 ++++++++++++--- styles/css/vtex.product-summary.css | 73 +++++++++++-------- styles/css/vtex.rich-text.css | 12 ++- styles/css/vtex.slider-layout.css | 43 +++-------- .../pages/product/vtex.product-summary.scss | 46 ++++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 10 +++ .../pages/product/vtex.slider-layout.scss | 5 ++ .../pages/product/vtex.store-components.scss | 2 + 8 files changed, 178 insertions(+), 70 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e2c848e..b91105e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,8 +4,10 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#home", - "product-specification-group#table", - "shelf.relatedProducts", + // "product-specification-group#table", + // "shelf.relatedProducts", + "rich-text#1", + "list-context.product-list#demo1", "newsletter", "product-questions-and-answers" ] @@ -194,8 +196,8 @@ "image#image-1": { "props":{ "src":"assets/sandalia-image.png", - "maxHeight": 872, - "maxWidth": 872, + "maxHeight": "48%", + "maxWidth":"48%", "blockClass":"imageElement" } }, @@ -251,8 +253,8 @@ "props": { "tabId": "description5", "label": "Descrição" + } }, - "tab-content#home": { "props" : { "defaultActiveTab": true @@ -288,10 +290,47 @@ }, "product-quantity#1":{ - "props":{ - "width":"25%" - } -} + "props":{ + "width":"25%" + } + }, + +//estilizando os blocos do carousel + +"list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["slider-layout#demo-products"] +}, +"product-summary.shelf#demo1": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + ] + }, + +"slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + // "children": ["rich-text#1"] + }, + + "rich-text#1": { + "props": { + "text": "Você também pode gostar:" + } + } } + + + diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..1ad8cde 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,57 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 */ +.installmentContainer { + background-color: none; } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } +.productNameContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 0; + margin-bottom: 8px; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; +.priceContainer { + padding: 0; } -.container { - text-align: start; +.price_listPriceContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + padding: 0; + margin-bottom: 8px; } .imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; + margin-bottom: 16px; + width: 314.4px; + height: 314.4px; } +.imageContainer .imageNormal { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index d55774d..1373242 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -9,4 +9,14 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); /*font*/ /*colors*/ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..d55774d 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,12 @@ -.sliderLayoutContainer { - justify-content: center; -} - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; -} - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +/* +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 */ \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..d0df8e8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,46 @@ +.installmentContainer { + background-color: none; +} + +.productNameContainer { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} +.nameContainer { + padding:0; + margin-bottom: 8px; +} +.priceContainer { + padding: 0; +} + +.price_listPriceContainer { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + padding: 0; + margin-bottom: 8px; +} + +.imageContainer { + margin-bottom: 16px; + // background-color: #EDEDED; + width: 314.4px; + height: 314.4px; + + + .imageNormal { + width: 100%; + height: 100%; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..27eef50 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,10 @@ +.container { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + display: flex; + justify-content: center; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..10da759 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,5 @@ +// .slideChildrenContainer{ +// width: 314.4px; +// height: 448.4px; +// } + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4af4d96..65f5c0c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -182,5 +182,7 @@ display: flex; flex-direction: column-reverse; } +//estilização do carousel +