From 9f01aa6aada6365fba565f36de4777032ddf2e02 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 10 Feb 2023 12:47:25 -0300 Subject: [PATCH 1/5] feat(ProductImage): fix product image --- manifest.json | 1 - store/blocks/pdp/product.jsonc | 16 +++--- styles/css/agenciamagma.store-theme.css | 4 +- styles/css/vtex.product-price.css | 16 +++--- styles/css/vtex.store-components.css | 49 ++++++++++++++++- .../product/agenciamagma.store-theme.scss | 5 +- .../pages/product/vtex.store-components.scss | 53 +++++++++++++++++-- 7 files changed, 119 insertions(+), 25 deletions(-) diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..c0db49a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -91,7 +91,11 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "thumbnailMaxHeight": 90, + "showPaginationDots": false, + "showNavigationArrows": false } }, "flex-layout.col#right-col": { @@ -101,20 +105,20 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", + // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", + // "product-separator", "sku-selector", "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..6586462 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..6b5431c 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,6 +1,6 @@ .listPrice { color: #727273; - margin-bottom: .25rem; + margin-bottom: 0.25rem; font-size: 1rem; } @@ -21,17 +21,17 @@ .savings { font-weight: 500; - color: #79B03A; + color: #79b03a; } .sellingPriceValue--summary { font-size: 1.25rem; font-weight: 600; - color: #2E2E2E; + color: #2e2e2e; } .savings--summary { - background: #8BC34A; + background: #8bc34a; border-radius: 1000px; align-items: center; display: flex; @@ -41,21 +41,21 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; } .savings-discount--summary { font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding-left: 0.5rem; padding-right: 0.5rem; } .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -74,6 +74,6 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..b4ee58f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,51 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.vtex-flex-layout-0-x-stretchChildrenWidth { + width: 46.11% !important; +} + +.relative :first-child { + min-width: 100%; +} + +.productImage { + height: 664px; +} + +.productImageTag { + min-height: 100%; +} + +.productImageTag--main { + width: unset !important; + min-height: 100% !important; + max-height: unset !important; +} + +.figure { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin-right: 16px; +} + +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.thumbImg { + width: 90px; + height: 90px; + border-radius: 8px !important; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..5e004ae 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } - diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..3659790 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,50 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.vtex-flex-layout-0-x-stretchChildrenWidth { + width: 46.11% !important; +} + +.relative { + :first-child { + min-width: 100%; + } +} + +.productImage { + height: 664px; +} + +.productImageTag { + min-height: 100%; +} + +.productImageTag--main { + width: unset !important; + min-height: 100% !important; + max-height: unset !important; +} + +.figure { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin-right: 16px; +} + +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.thumbImg { + width: 90px; + height: 90px; + border-radius: 8px !important; +} From 64fc2a938b4f5f02c0544dbbebef355bd3dd5813 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 10 Feb 2023 19:33:02 -0300 Subject: [PATCH 2/5] feat(tabLayout): created tab layout --- store/blocks/pdp/product.jsonc | 120 +++++++++++++++++- styles/css/vtex.flex-layout.css | 110 ++-------------- styles/css/vtex.store-components.css | 14 ++ styles/css/vtex.tab-layout.css | 36 ++++++ .../sass/pages/product/vtex.flex-layout.scss | 3 + .../pages/product/vtex.store-components.scss | 14 ++ .../sass/pages/product/vtex.tab-layout.scss | 27 ++++ 7 files changed, 222 insertions(+), 102 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c0db49a..d6836a4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,112 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#description", + "tab-layout#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"] + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": [], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": [], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": [], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": [], + "props": { + "tabId": "description5" + } + }, "html#breadcrumb": { "props": { "tag": "section", @@ -30,7 +129,20 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": ["product-images#description", "flex-layout.col#description"] + }, + "product-description#notitle": { + "props": { "showTitle": false } + }, + "flex-layout.col#description": { + "props": { + "preventVerticalStretch": true, + "rowGap": 5 + }, + "children": ["product-description", "product-description#notitle"] + }, + "product-images#description": { + "props": { "displayMode": "first-image" } }, "condition-layout.product#availability": { "props": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..55b5032 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,12 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +/* +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 */ +.flexRow { + margin: 32px 72px 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b4ee58f..36ab70e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -54,4 +54,18 @@ width: 90px; height: 90px; border-radius: 8px !important; +} + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..ea739c4 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,36 @@ +/* +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 */ +.listContainer { + width: 94.44%; + margin: 0 40px; + padding: 0 80px; + border-bottom: 1px solid #bfbfbf; + justify-content: space-between; +} + +.listContainer :global(.vtex-button) { + background: white; + border: 0; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-bottom: 0; +} + +.listItemActive :global(.vtex-button) { + color: black; + padding-bottom: 0; +} + +.listItemActive { + border-bottom: 2px solid black; + margin-bottom: unset; +} \ 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 new file mode 100644 index 0000000..415280b --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,3 @@ +.flexRow { + margin: 32px 72px 16px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3659790..7ec920b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -48,3 +48,17 @@ height: 90px; border-radius: 8px !important; } + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..58f6761 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,27 @@ +.listContainer { + width: 94.44%; + margin: 0 40px; + padding: 0 80px; + border-bottom: 1px solid #bfbfbf; + justify-content: space-between; +} + +.listContainer :global(.vtex-button) { + background: white; + border: 0; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-bottom: 0; +} + +.listItemActive :global(.vtex-button) { + color: black; + padding-bottom: 0; +} + +.listItemActive { + border-bottom: 2px solid black; + margin-bottom: unset; +} From 594c240fe763a6d659a9c7492d53e0e0bec319c7 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 10 Feb 2023 22:15:06 -0300 Subject: [PATCH 3/5] feat(shelf): created shelf --- store/blocks/pdp/product.jsonc | 35 ++++++++- styles/css/vtex.flex-layout.css | 2 +- styles/css/vtex.product-sumary.css | 12 +++ styles/css/vtex.product-summary.css | 75 +++++++++++-------- styles/css/vtex.rich-text.css | 9 ++- styles/css/vtex.slider-layout.css | 42 ++++------- styles/css/vtex.store-components.css | 4 + .../sass/pages/product/vtex.flex-layout.scss | 2 +- .../pages/product/vtex.product-summary.scss | 45 +++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 7 ++ .../pages/product/vtex.slider-layout.scss | 12 +++ .../pages/product/vtex.store-components.scss | 4 + 12 files changed, 188 insertions(+), 61 deletions(-) create mode 100644 styles/css/vtex.product-sumary.css 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 d6836a4..45ed312 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,10 +7,42 @@ "tab-layout#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + "rich-text#carrouselText", + "list-context.product-list#carousel", "product-questions-and-answers" ] }, + + "rich-text#carrouselText": { + "props": { + "text": "Você também pode gostar:", + "textPosition": "CENTER" + } + }, + + "slider-layout#carouselSLider": { + "props": { + "itemsPerPage": { + "desktop": 4 + } + } + }, + + "list-context.product-list#carousel": { + "children": ["slider-layout#carouselSLider"], + "blocks": ["product-summary.shelf#productShelf"] + }, + + "product-summary.shelf#productShelf": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-space", + "product-summary-price" + ] + }, + "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"] }, @@ -127,6 +159,7 @@ }, "flex-layout.row#description": { "props": { + "blockClass": "containerFlexRow", "marginBottom": 7 }, "children": ["product-images#description", "flex-layout.col#description"] diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 55b5032..c3ed26a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,6 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.flexRow { +.flexRow--containerFlexRow { margin: 32px 72px 16px; } \ No newline at end of file diff --git a/styles/css/vtex.product-sumary.css b/styles/css/vtex.product-sumary.css new file mode 100644 index 0000000..cde578d --- /dev/null +++ b/styles/css/vtex.product-sumary.css @@ -0,0 +1,12 @@ +/* +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 */ +.discountInsideContainer { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..719d659 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,55 @@ -.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 */ +/* Grid breakpoints */ +.imageNormal { + width: 100vw; + height: 100vw; } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; } -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +.installmentContainer { + display: none; } -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 16px 16px 8px; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +.priceContainer { + margin: unset; + padding: unset; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..d7a012c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,11 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..98fc396 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,21 @@ -.sliderLayoutContainer { - justify-content: center; +/* +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 */ +.paginationDot { + background: #000000; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; +.paginationDot--isActive { + border: 0.5px solid #000000; + background: white; } .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; -} + margin-top: 36px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 36ab70e..9940aec 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -68,4 +68,8 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.discountInsideContainer { + display: none; } \ 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 415280b..322ac00 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,3 @@ -.flexRow { +.flexRow--containerFlexRow { margin: 32px 72px 16px; } 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..c51bf62 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,45 @@ +.imageNormal { + width: 100vw; + height: 100vw; +} + +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} + +.installmentContainer { + display: none; +} + +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; +} + +.nameContainer { + padding: 16px 16px 8px; +} +.priceContainer { + margin: unset; + padding: unset; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..1e50b8f 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,7 @@ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} 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..1b25670 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,12 @@ +.paginationDot { + background: #000000; +} + +.paginationDot--isActive { + border: 0.5px solid #000000; + background: white; +} + +.paginationDotsContainer { + margin-top: 36px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7ec920b..82ed130 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -62,3 +62,7 @@ line-height: 22px; color: #929292; } + +.discountInsideContainer { + display: none; +} From 447b6dfd167678db01752aaebea90b01ceda2cbb Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 10 Feb 2023 22:21:45 -0300 Subject: [PATCH 4/5] feat(breadCrumb): created breadcrumb --- styles/css/vtex.breadcrumb.css | 53 +++++++++++++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 49 +++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..23e4983 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,53 @@ +@charset "UTF-8"; +/* +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 */ +.container { + display: flex; + font-size: 14px; + color: gray; + margin: 0 40px; +} +.container .homeIcon { + height: 0; + display: none; +} +.container .homeLink::before { + content: "Home"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .link--1 { + font-size: 0; +} +.container .link--1::before { + content: "Sapatos"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; +} +.container .link--2 { + font-size: 0; +} +.container .link--2::before { + content: "Sandália"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; +} +.container .termArrow, +.container .term { + display: none; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..5343fc8 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,49 @@ +.container { + display: flex; + font-size: 14px; + color: gray; + margin: 0 40px; + .homeIcon { + height: 0; + display: none; + } + + .homeLink { + &::before { + content: "Home"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + } + + .link--1 { + font-size: 0; + &::before { + content: "Sapatos"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; + } + } + + .link--2 { + font-size: 0; + &::before { + content: "Sandália"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; + } + } + + .termArrow, + .term { + display: none; + } +} From c90218a770793935c4167f611907672f5bf216ef Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 10 Feb 2023 23:45:20 -0300 Subject: [PATCH 5/5] feat(flexCol): created flex col --- store/blocks/pdp/product.jsonc | 29 ++++-- styles/css/vtex.flex-layout.css | 9 ++ styles/css/vtex.product-identifier.css | 25 ++++- styles/css/vtex.product-price.css | 93 ++++--------------- styles/css/vtex.store-components.css | 30 ++++++ .../sass/pages/product/vtex.flex-layout.scss | 9 ++ .../product/vtex.product-identifier.scss | 15 +++ .../pages/product/vtex.product-price.scss | 13 +++ .../pages/product/vtex.store-components.scss | 30 ++++++ 9 files changed, 170 insertions(+), 83 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 45ed312..b25c15f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -243,6 +243,21 @@ "showNavigationArrows": false } }, + + "flex-layout.col#skuCol": { + "props": { + "blockClass": "skuProduct" + }, + "children": ["product-identifier.product"] + }, + + "product-installments": { + "props": { + "message": "{installmentsNumber} {hasInterest, select, true {x} false {}} de {installmentValue} sem juros", + "blockClass": "installmentsPrice" + } + }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -250,17 +265,14 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", + "flex-layout.col#skuCol", "product-rating-summary", // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", // "product-separator", "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#cartPlus", "availability-subscriber", "shipping-simulator" // "share#default" @@ -284,11 +296,16 @@ "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "buttonCart" }, "children": ["add-to-cart-button"] }, + "flex-layout.row#cartPlus": { + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c3ed26a..86dc184 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,4 +9,13 @@ /* Grid breakpoints */ .flexRow--containerFlexRow { margin: 32px 72px 16px; +} + +.flexColChild--skuProduct { + text-align: end; +} + +.flexRowContent--buttonCart :global(.vtex-button) { + background: black; + border: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..49ed9b6 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,24 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +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 */ +.product-identifier__label { + display: none; } + +.product-identifier__value { + text-align: end; + color: rgba(146, 146, 146, 0.48); + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 6b5431c..de9f116 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,22 @@ -.listPrice { - color: #727273; - margin-bottom: 0.25rem; - font-size: 1rem; +/* +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 */ +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; font-weight: 700; -} - -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79b03a; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2e2e2e; -} - -.savings--summary { - background: #8bc34a; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #ffffff; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #ffffff; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: 0.875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #ffffff; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-size: 25px; + line-height: 38px; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9940aec..5543faa 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -72,4 +72,34 @@ .discountInsideContainer { display: none; +} + +.productBrand { + text-align: end; +} + +.productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.skuSelectorItemTextValue { + padding: unset; +} + +.skuSelectorItem { + border-radius: 50%; + width: 45px; + height: 45px; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} + +.frameAround { + border-radius: 50%; } \ 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 322ac00..c832a4d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,12 @@ .flexRow--containerFlexRow { margin: 32px 72px 16px; } + +.flexColChild--skuProduct { + text-align: end; +} + +.flexRowContent--buttonCart :global(.vtex-button) { + background: black; + border: 0; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..5b7a765 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,15 @@ +.product-identifier__label { + display: none; +} + +.product-identifier__value { + text-align: end; + color: rgba(146, 146, 146, 0.48); + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +.product-identifier__separator { + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..0b631c8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,13 @@ +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.sellingPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 82ed130..cd51ca2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -66,3 +66,33 @@ .discountInsideContainer { display: none; } + +.productBrand { + text-align: end; +} + +.productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.skuSelectorItemTextValue { + padding: unset; +} + +.skuSelectorItem { + border-radius: 50%; + width: 45px; + height: 45px; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} + +.frameAround { + border-radius: 50%; +}