diff --git a/CHANGELOG.md b/CHANGELOG.md index ab756edf..ff9ea430 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Added +- Example of multiple search gallery layouts usage ## [4.2.1] - 2020-12-14 ### Fixed diff --git a/manifest.json b/manifest.json index 064a7631..ac2b9978 100644 --- a/manifest.json +++ b/manifest.json @@ -47,6 +47,7 @@ "vtex.product-list": "0.x", "vtex.add-to-cart-button": "0.x", "vtex.product-bookmark-interfaces": "1.x", + "vtex.responsive-layout": "0.x", "vtex.slider-layout": "0.x", "vtex.store-image": "0.x", "vtex.store-icons": "0.x", diff --git a/store/blocks/product-summary/product-specification-list.jsonc b/store/blocks/product-summary/product-specification-list.jsonc new file mode 100644 index 00000000..57d44af6 --- /dev/null +++ b/store/blocks/product-summary/product-specification-list.jsonc @@ -0,0 +1,29 @@ +{ + "product-specification-group#summary": { + "children": [ + "product-specification#summary" + ] + }, + "product-specification#summary": { + "children": [ + "flex-layout.row#summarySpecificationValues" + ] + }, + "flex-layout.row#summarySpecificationValues": { + "props": { + "preventHorizontalStretch": true, + "colGap": 3 + }, + "children": [ + "rich-text#summarySpecificationBullet", + "product-specification-values" + ] + }, + "rich-text#summarySpecificationBullet": { + "props": { + "text": "•", + "textColor": "c-action-primary", + "blockClass": "summarySpecificationBullet" + } + } +} diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc new file mode 100644 index 00000000..cfc32260 --- /dev/null +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -0,0 +1,216 @@ +{ + "product-summary.shelf#listLayout": { + "props": { + "blockClass": "listLayout" + }, + "children": [ + "responsive-layout.desktop#productSummaryList", + "responsive-layout.mobile#productSummaryList" + ] + }, + "responsive-layout.desktop#productSummaryList": { + "children": [ + "flex-layout.row#summaryListDesktop" + ] + }, + "responsive-layout.mobile#productSummaryList": { + "children": [ + "flex-layout.row#summaryListMobile" + ] + }, + "product-price-savings#summaryPercentage": { + "props": { + "message": "{savingsPercentage}", + "blockClass": "summaryPercentage" + } + }, + "flex-layout.row#savingsSummaryListDesktop": { + "props": { + "colSizing": "auto", + "colGap": 3, + "blockClass": "savingsSummaryListDesktop" + }, + "children": [ + "product-price-savings#summaryPercentage", + "product-price-savings#summary" + ] + }, + "flex-layout.row#summaryListDesktop": { + "props":{ + "fullWidth": true, + "colSizing": "auto", + "blockClass": "summaryListDesktop" + }, + "children": [ + "flex-layout.row#summaryLeftListDesktop", + "flex-layout.col#summaryRightListDesktop" + ] + }, + "flex-layout.row#summaryLeftListDesktop": { + "props": { + "blockClass": "summaryLeftListDesktop", + "colSizing": "auto", + "colGap": 7 + }, + "children": [ + "stack-layout#summaryListDesktop", + "flex-layout.col#summaryDetailsListDesktop" + ] + }, + "flex-layout.col#summaryDetailsListDesktop": { + "props": { + "preventVerticalStretch": true + }, + "children": [ + "vtex.store-components:product-brand#summaryListDesktop", + "product-summary-name#summaryListDesktop", + "flex-layout.col#productRating", + "flex-layout.row#productSpecifications" + ] + }, + "flex-layout.row#productSpecifications": { + "children": [ + "product-specification-group#summary" + ] + }, + "product-summary-name#summaryListDesktop": { + "props": { + "blockClass": "summaryListDesktop" + } + }, + "vtex.store-components:product-brand#summaryListDesktop": { + "props": { + "displayMode": "text", + "blockClass": "summaryListDesktop" + } + }, + "flex-layout.col#summaryRightListDesktop": { + "props": { + "blockClass": "summaryRightListDesktop", + "preventVerticalStretch": true + }, + "children": [ + "flex-layout.row#savingsSummaryListDesktop", + "flex-layout.col#priceSummaryListDesktop", + "flex-layout.row#buyButtonsSummaryListDesktop" + ] + }, + "flex-layout.row#buyButtonsSummaryListDesktop": { + "props": { + "colSizing": "auto", + "colGap": 5 + }, + "children": [ + "add-to-cart-button", + "flex-layout.row#buyNowButton" + ] + }, + "flex-layout.row#buyNowButton": { + "props": { + "blockClass": "buyNowButton" + }, + "children": [ + "add-to-cart-button#buyNow" + ] + }, + + "add-to-cart-button#buyNow": { + "props": { + "text": "BUY NOW", + "isOneClickBuy": true, + "onClickEventPropagation": "enabled", + "blockClass": "buyNow" + } + }, + "flex-layout.col#priceSummaryListDesktop": { + "children": [ + "product-selling-price#summary", + "product-list-price#summary" + ] + }, + "stack-layout#summaryListDesktop": { + "children": [ + "product-summary-image#summaryListDesktop", + "vtex.product-highlights@2.x:product-highlights#collection", + "modal-trigger#quickview" // Check quickview.jsonc + ] + }, + "product-summary-image#summaryListDesktop": { + "props": { + "showBadge": false, + "aspectRatio": "1:1", + "maxHeight": 180, + "blockClass": "summaryListDesktop" + } + }, + "flex-layout.row#summaryListMobile": { + "props":{ + "preserveLayoutOnMobile": true, + "colSizing": "auto", + "blockClass": "summaryListMobile", + "colGap": 5 + }, + "children": [ + "stack-layout#summaryListMobile", + "flex-layout.col#summaryDetailsListMobile" + ] + }, + "stack-layout#summaryListMobile": { + "children": [ + "product-summary-image#summaryListMobile", + "vtex.product-highlights@2.x:product-highlights#collection", + "modal-trigger#quickview" // Check quickview.jsonc + ] + }, + "product-summary-image#summaryListMobile": { + "props": { + "showBadge": false, + "aspectRatio": "1:1", + "maxHeight": 220, + "blockClass": "summaryListMobile" + } + }, + "flex-layout.col#summaryDetailsListMobile": { + "props": { + "preventVerticalStretch": true, + "width": "grow", + "blockClass": "summaryDetailsListMobile" + }, + "children": [ + "flex-layout.col#summaryUpDetailsListMobile", + "flex-layout.col#summaryDownDetailsListMobile" + ] + }, + "flex-layout.col#summaryUpDetailsListMobile": { + "props": { + "preventVerticalStretch": true, + "blockClass": "summaryUpDetailsListMobile" + }, + "children": [ + "vtex.store-components:product-brand#summaryListMobile", + "product-summary-name#summaryListMobile", + "product-rating-inline" + ] + }, + "flex-layout.col#summaryDownDetailsListMobile": { + "props": { + "preventVerticalStretch": true + }, + "children": [ + "product-selling-price#summary", + "product-installments#summary" + ] + }, + "vtex.store-components:product-brand#summaryListMobile": { + "props": { + "displayMode": "text", + "blockClass": "summaryListMobile" + } + }, + "product-summary-name#summaryListMobile": { + "props": { + "tag": "div", + "blockClass": "summaryListMobile" + } + } +} diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index 11f4ad69..afabee36 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -3,7 +3,7 @@ "children": [ "stack-layout#prodsum", "product-summary-name", - "product-rating-inline", + "flex-layout.col#productRating", "product-summary-space", "product-list-price#summary", "flex-layout.row#selling-price-savings", @@ -11,6 +11,12 @@ "add-to-cart-button" ] }, + "flex-layout.col#productRating": { + "props": { + "blockClass": "productRating" + }, + "children": ["product-rating-inline"] + }, "stack-layout#prodsum": { "children": [ diff --git a/store/blocks/search.jsonc b/store/blocks/search.jsonc index 93652790..26f511e5 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -69,10 +69,7 @@ "props": { "pagination": "show-more", "preventRouteChange": false, - "mobileLayout": { - "mode1": "small", - "mode2": "normal" - } + "defaultGalleryLayout": "grid" } }, "flex-layout.row#searchbread": { @@ -111,18 +108,21 @@ } }, "flex-layout.row#searchinfo": { - "children": ["flex-layout.col#productCount", "flex-layout.col#orderby"] + "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"] }, - "flex-layout.col#productCount": { - "children": ["total-products.v2"], + "flex-layout.row#orderByAndSwitcher": { + "children": ["order-by.v2", "gallery-layout-switcher"], "props": { - "blockClass": "productCountCol" + "horizontalAlign": "right", + "preventHorizontalStretch": true, + "blockClass": "orderByAndSwitcher", + "colGap": 3 } }, - "flex-layout.col#orderby": { - "children": ["order-by.v2"], + "flex-layout.col#productCount": { + "children": ["total-products.v2"], "props": { - "blockClass": "orderByCol" + "blockClass": "productCountCol" } }, "flex-layout.row#fetchprevious": { @@ -158,7 +158,8 @@ "mobileLayout": { "mode1": "small", "mode2": "normal" - } + }, + "defaultGalleryLayout": "grid" } }, "flex-layout.row#contentmobile": { @@ -202,9 +203,9 @@ } }, "flex-layout.col#switcherMobile": { - "children": ["search-layout-switcher"], + "children": ["gallery-layout-switcher"], "props": { - "blockClass": "switcherMobileCol" + "verticalAlign": "middle" } }, "search-not-found-layout": { @@ -225,6 +226,78 @@ }, "gallery": { - "blocks": ["product-summary.shelf"] + "props": { + "layouts": [ + { + "name": "grid", + "component": "GridSummary", + "itemsPerRow": { + "(min-width:1300px)": 4, + "desktop": 3, + "tablet": 3, + "phone": 2 + } + }, + { + "name": "list", + "component": "ListSummary", + "itemsPerRow": 1 + } + ], + "ListSummary": "product-summary.shelf#listLayout", + "GridSummary": "product-summary.shelf" + } + }, + "gallery-layout-switcher": { + "children": [ + /* + * For accessbility to work properly, + * It's important to define the options in the same order as the layouts + */ + "gallery-layout-option#grid", + "gallery-layout-option#list" + ] + }, + "gallery-layout-option#grid": { + "props": { + "name": "grid" + }, + "children": [ + "icon-grid", + "responsive-layout.desktop#textOptionGrid" + ] + }, + "gallery-layout-option#list": { + "props": { + "name": "list" + }, + "children": [ + "icon-inline-grid", + "responsive-layout.desktop#textOptionList" + ] + }, + "responsive-layout.desktop#textOptionGrid": { + "children": [ + "rich-text#option-grid" + ] + }, + "responsive-layout.desktop#textOptionList": { + "children": [ + "rich-text#option-list" + ] + }, + "rich-text#option-grid": { + "props": { + "text": "Grid", + "textColor": "c-auto", + "blockClass": "layout-option" + } + }, + "rich-text#option-list": { + "props": { + "text": "List", + "textColor": "c-auto", + "blockClass": "layout-option" + } } } diff --git a/styles/css/search/vtex.flex-layout.css b/styles/css/search/vtex.flex-layout.css new file mode 100644 index 00000000..b66758e2 --- /dev/null +++ b/styles/css/search/vtex.flex-layout.css @@ -0,0 +1,34 @@ +.flexRow--orderByAndSwitcher { + padding-right: 1.5em; +} + +.flexRowContent--savingsSummaryListDesktop { + justify-content: flex-start; +} + +.flexCol--summaryRightListDesktop { + justify-content: space-around; +} + +.flexRow--buyNowButton :global(.vtex-button) { + background: #eef3f7; + border-color:#eef3f7; + color: #0f3e99; +} + +.flexRow--buyNowButton:hover :global(.vtex-button) { + background: #dbe9fd; + border-color:#dbe9fd; +} + +.flexCol--productRating { + margin-bottom: 3rem; +} + +.flexCol--summaryDetailsListMobile { + justify-content: space-between; +} + +.flexCol--summaryUpDetailsListMobile { + margin-bottom: 0.25rem +} diff --git a/styles/css/search/vtex.product-summary.css b/styles/css/search/vtex.product-summary.css new file mode 100644 index 00000000..f160ecaa --- /dev/null +++ b/styles/css/search/vtex.product-summary.css @@ -0,0 +1,31 @@ +.nameContainer--summaryListDesktop { + padding-top: 0.25rem; + padding-bottom: 0.75rem; + justify-content: start; +} + +.nameContainer--summaryListMobile { + padding-top: 0.25rem; + padding-bottom: 0.5rem; + justify-content: start; +} + +.brandName--summaryListMobile { + font-weight: 400; + font-size: 0.875rem; + color: black; +} + +.container--listLayout { + max-width: none !important; +} + +.image--summaryListDesktop { + width: 180px !important; +} + +.image--summaryListMobile { + width: 140px !important; + min-width: 140px; + height: inherit !important; +} diff --git a/styles/css/search/vtex.rich-text.css b/styles/css/search/vtex.rich-text.css new file mode 100644 index 00000000..b187dad1 --- /dev/null +++ b/styles/css/search/vtex.rich-text.css @@ -0,0 +1,14 @@ +.container--layout-option { + margin-left: 0.3em; +} + +.paragraph--layout-option { + margin: 0; +} + +.paragraph--summarySpecificationBullet { + margin: 0; + line-height: initial; + font-size: 1.25rem; + line-height: 1.15rem; +} diff --git a/styles/css/search/vtex.store-components.css b/styles/css/search/vtex.store-components.css new file mode 100644 index 00000000..f86b6148 --- /dev/null +++ b/styles/css/search/vtex.store-components.css @@ -0,0 +1,12 @@ +.productBrandName--summaryListDesktop { + text-decoration: none; + font-weight: 500; + color: #0067C7; + font-size: .875rem; +} + +.productBrandName--summaryListMobile { + text-decoration: none; + color: #0067C7; + font-size: .875rem; +} diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 2e5fae35..707b86cf 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -74,10 +74,6 @@ width: 38%; } -.flexCol--switcherMobileCol { - width: 20%; -} - .flexRow--quickviewMainRow { display: flex; max-height: 100%; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index a069e45d..95f4cfe6 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -35,6 +35,13 @@ 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 { @@ -54,4 +61,19 @@ .installments--summary { margin-bottom: 2rem; font-size: 0.875rem; -} \ No newline at end of file +} + +.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; +} diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 6833cf97..0a6e4202 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -14,7 +14,7 @@ @media screen and (max-width: 40em) { .container :global(.vtex-modal-layout-0-x-triggerContainer) { display: none; - } + } } .nameContainer { diff --git a/styles/css/vtex.reviews-and-ratings.css b/styles/css/vtex.reviews-and-ratings.css index 7affbdbc..1c7beaef 100644 --- a/styles/css/vtex.reviews-and-ratings.css +++ b/styles/css/vtex.reviews-and-ratings.css @@ -5,8 +5,7 @@ } .inlineContainer { - margin-left: 0rem ; - margin-bottom: 3rem; + margin-left: 0rem; } .star--filled { diff --git a/styles/css/vtex.search-result.css b/styles/css/vtex.search-result.css new file mode 100644 index 00000000..2473e1c3 --- /dev/null +++ b/styles/css/vtex.search-result.css @@ -0,0 +1,22 @@ +.galleryLayoutOptionButton { + background-color: #F0F0F0; + color: #3F3F40; + padding: 0.375rem 0.75rem 0.375rem 0.75rem; +} + +.galleryLayoutOptionButton--selected { + background-color: #3F3F40; + color: #FFFFFF; +} + +.galleryLayoutSwitcher { + border-radius: 4px 4px 4px 4px; + justify-content: center; + overflow: hidden; + width: auto !important; + align-self: center +} + +.galleryItem--list { + border-bottom: 1px #E7E9EE solid; +}