From 964eb850d051a2b56851b032be44390c2612f6f1 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Thu, 13 Feb 2020 11:32:22 -0300 Subject: [PATCH 1/6] Update logic for rendering blocks to make it more reliable --- react/BaseContent.tsx | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/react/BaseContent.tsx b/react/BaseContent.tsx index e16d53b4..fe08e1cf 100644 --- a/react/BaseContent.tsx +++ b/react/BaseContent.tsx @@ -7,7 +7,7 @@ import React, { memo, } from 'react' import { FormattedMessage } from 'react-intl' -import { ExtensionPoint, useChildBlock } from 'vtex.render-runtime' +import { ExtensionPoint, useTreePath, useRuntime } from 'vtex.render-runtime' import { useOrderForm } from 'vtex.order-manager/OrderForm' import { useCssHandles } from 'vtex.css-handles' @@ -22,6 +22,12 @@ interface Props { finishShoppingButtonLink: string } +interface BlocksFromExtension { + blockId: string + extensionPointId: string + children: boolean +} + const CSS_HANDLES = [ 'minicartContentContainer', 'minicartProductListContainer', @@ -45,6 +51,8 @@ const Content: FC = ({ finishShoppingButtonLink, children }) => { const push = useDebouncedPush() const handles = useCssHandles(CSS_HANDLES) const { variation } = useMinicartState() + const { extensions } = useRuntime() + const { treePath } = useTreePath() useEffect(() => { if (loading) { @@ -66,8 +74,24 @@ const Content: FC = ({ finishShoppingButtonLink, children }) => { } sticky` const isCartEmpty = !loading && orderForm.items.length === 0 - const hasProductListBlock = useChildBlock({ id: 'minicart-product-list' }) - const hasMinicartSummaryBlock = useChildBlock({ id: 'minicart-summary' }) + + /** + * The logic below is to check if the user provided the blocks + * 'minicart-product-list' and 'minicart-summary' via 'blocks' + * instead of 'children' in their implementation of 'minicart-base-content'. + * The blocksFromUserImplementation variable represents the result of concatenating + * the 'blocks' and the 'children' arrays from blocks.json. + */ + const blocksFromUserImplementation = extensions[treePath].blocks + const minicartBlocksFromUserImplementation = blocksFromUserImplementation.filter( + (block: BlocksFromExtension) => { + !block.children && + (block.extensionPointId === 'minicart-product-list' || + block.extensionPointId === 'minicart-summary') + } + ) + const shouldRenderUsingBlocks = + minicartBlocksFromUserImplementation.length === 2 if (isCartEmpty) { return ( @@ -78,7 +102,7 @@ const Content: FC = ({ finishShoppingButtonLink, children }) => { ) } - if (hasProductListBlock && hasMinicartSummaryBlock) { + if (shouldRenderUsingBlocks) { return (
Date: Thu, 13 Feb 2020 11:32:44 -0300 Subject: [PATCH 2/6] Update default implementation --- manifest.json | 3 +-- store/blocks.jsonc | 17 +++++++++++++---- styles/css/vtex.flex-layout.css | 3 +++ styles/css/vtex.sticky-layout.css | 1 + 4 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 styles/css/vtex.flex-layout.css diff --git a/manifest.json b/manifest.json index 09a5a9f9..e143e7ac 100644 --- a/manifest.json +++ b/manifest.json @@ -32,8 +32,7 @@ "vtex.checkout-summary": "0.x", "vtex.checkout-resources": "0.x", "vtex.flex-layout": "0.x", - "vtex.rich-text": "0.x", - "vtex.sticky-layout": "0.x" + "vtex.rich-text": "0.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/store/blocks.jsonc b/store/blocks.jsonc index b2947ac2..562d007b 100644 --- a/store/blocks.jsonc +++ b/store/blocks.jsonc @@ -5,15 +5,24 @@ }, "minicart-base-content": { "blocks": ["minicart-empty-state"], - "children": ["minicart-product-list", "sticky-layout#minicart-footer"] + "children": ["minicart-product-list", "flex-layout.row#minicart-footer"] }, - "sticky-layout#minicart-footer": { + "flex-layout.row#minicart-footer": { "props": { - "position": "bottom", - "blockClass": "minicart-default" + "blockClass": "minicart-footer" }, + "children": ["flex-layout.col#minicart-footer"] + }, + "flex-layout.col#minicart-footer": { "children": ["minicart-summary", "minicart-checkout-button"] }, + // "sticky-layout#minicart-footer": { + // "props": { + // "position": "bottom", + // "blockClass": "minicart-default" + // }, + // "children": ["minicart-summary", "minicart-checkout-button"] + // }, "minicart-product-list": { "blocks": ["product-list#minicart"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css new file mode 100644 index 00000000..ab39b92f --- /dev/null +++ b/styles/css/vtex.flex-layout.css @@ -0,0 +1,3 @@ +.flexRow--minicart-footer { + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); +} \ No newline at end of file diff --git a/styles/css/vtex.sticky-layout.css b/styles/css/vtex.sticky-layout.css index c0161736..f3d58f1b 100644 --- a/styles/css/vtex.sticky-layout.css +++ b/styles/css/vtex.sticky-layout.css @@ -1,3 +1,4 @@ .container--minicart-default { + background-color: #ffffff; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); } \ No newline at end of file From 42acf26d26e211d497e86316ea47e1e42071fa2e Mon Sep 17 00:00:00 2001 From: victorhmp Date: Thu, 13 Feb 2020 11:36:47 -0300 Subject: [PATCH 3/6] Update CHANGELOG --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c322459c..53781ff2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,10 +6,12 @@ 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] +### Fixed +- Transparency effect in 'drawer' variant. ## [2.43.2] - 2020-02-12 ### Fixed -- Correctly add SKUs that might have attachments. +- [Legacy] Correctly add SKUs that might have attachments. ## [2.43.1] - 2020-02-05 ### Removed From d8324906b1cb4ade09ccba10bec12d65fac7c0b8 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Thu, 13 Feb 2020 11:37:46 -0300 Subject: [PATCH 4/6] Update docs --- docs/README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index 107b9cb2..24f9f7ea 100644 --- a/docs/README.md +++ b/docs/README.md @@ -60,9 +60,15 @@ According to the `minicart.v2` composition, it can be highly customizable using }, "minicart-base-content": { "blocks": ["minicart-empty-state"], - "children": ["minicart-product-list", "sticky-layout#minicart-footer"] + "children": ["minicart-product-list", "flex-layout.row#minicart-footer"] }, - "sticky-layout#minicart-footer": { + "flex-layout.row#minicart-footer": { + "props": { + "blockClass": "minicart-footer" + }, + "children": ["flex-layout.col#minicart-footer"] + }, + "flex-layout.col#minicart-footer": { "children": ["minicart-summary", "minicart-checkout-button"] }, "minicart-product-list": { From 0f35517e06f6dd3161175614554314dec82e15c1 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Thu, 13 Feb 2020 11:38:04 -0300 Subject: [PATCH 5/6] Remove unnecessary code --- store/blocks.jsonc | 7 ------- 1 file changed, 7 deletions(-) diff --git a/store/blocks.jsonc b/store/blocks.jsonc index 562d007b..c5f9fd17 100644 --- a/store/blocks.jsonc +++ b/store/blocks.jsonc @@ -16,13 +16,6 @@ "flex-layout.col#minicart-footer": { "children": ["minicart-summary", "minicart-checkout-button"] }, - // "sticky-layout#minicart-footer": { - // "props": { - // "position": "bottom", - // "blockClass": "minicart-default" - // }, - // "children": ["minicart-summary", "minicart-checkout-button"] - // }, "minicart-product-list": { "blocks": ["product-list#minicart"] }, From 05022f24b767c0b3af85292ad81213617bee24c9 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Thu, 13 Feb 2020 12:05:59 -0300 Subject: [PATCH 6/6] Delete unnecessary vtex.sticky-layout styles --- styles/css/vtex.sticky-layout.css | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 styles/css/vtex.sticky-layout.css diff --git a/styles/css/vtex.sticky-layout.css b/styles/css/vtex.sticky-layout.css deleted file mode 100644 index f3d58f1b..00000000 --- a/styles/css/vtex.sticky-layout.css +++ /dev/null @@ -1,4 +0,0 @@ -.container--minicart-default { - background-color: #ffffff; - box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); -} \ No newline at end of file