From d7e6d87c0d075e4c71f4ccff18ca119e4bfbb90d Mon Sep 17 00:00:00 2001 From: carloswinter Date: Wed, 25 Jan 2023 12:00:41 -0300 Subject: [PATCH] feat(breadcrumb): adiciona breadcrumb conforme o figma --- store/blocks/home/home.jsonc | 8 +++--- store/blocks/pdp/product.jsonc | 5 +++- store/blocks/product-summary/quickview.json | 28 +++++-------------- styles/css/agenciamagma.store-theme.css | 2 +- styles/css/vtex.breadcrumb.css | 27 ++++++++++++++++++ .../product/agenciamagma.store-theme.scss | 3 +- .../sass/pages/product/vtex.breadcrumb.scss | 23 +++++++++++++++ 7 files changed, 67 insertions(+), 29 deletions(-) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ec4a516 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", + "example-component", + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", @@ -40,7 +40,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "never", "blockClass": "carousel" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..0381446 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -91,7 +91,10 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false, + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..1e14a9b 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -12,5 +12,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: transparent; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..dd4d7c7 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,27 @@ +/* +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; + align-items: center; +} +.container .homeLink .homeIcon { + display: none; +} +.container .homeLink::before { + content: "Home"; + font-size: 16px; +} +.container .arrow--1 .link { + font-size: 0; +} +.container .arrow--1 .link::before { + content: "Sapatos"; + font-size: 16px; +} \ 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..25facb9 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: transparent; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..f5fdb5f --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,23 @@ +.container { + display: flex; + align-items: center; + + .homeLink { + .homeIcon { + display: none; + } + } + .homeLink::before { + content: "Home"; + font-size: 16px; + } + .arrow--1 { + .link { + font-size: 0; + } + .link::before { + content: "Sapatos"; + font-size: 16px; + } + } +}