Skip to content

Conversation

@herzog31
Copy link
Member

@herzog31 herzog31 commented Jun 30, 2021

Description

  • Added new React project at extensions/product-recs/react-components which will be published to npm as @adobe/aem-core-cif-product-recs-extension.
  • Added new jest-extension job on CircleCI to test the extension react project.
  • Updated validateQueries.test.js schema test to test against the extended Adobe Commerce 2.4.2 EE schema with Product Recommendation extension installed.
  • This is added to Venia via CIF-2144 - Create a React project with a Recommendation component aem-cif-guides-venia#153.

Overview of new components, contexts, hooks and functions:

Element Purpose
ProductRecsGallery + ProductCard Renders up to 5 products from the Adobe Commerce Product Recommendations Service
StorefrontInstanceContext Fetches the storefront instance context from GraphQL and provides it to all components that use the Recommendations JS SDK. For better performance, the result will be cached in the session storage.
useRecommendations Hook which encapsulates the Recommendations JS SDK and returns the product data based on the provided settings. Customers can reuse this hook to build their own React components that display product recommendation data.
useVisibilityObserver Hook to observe if a given element is in the viewport and was therefore viewed by the visitor. This is used to trigger MSE events.
Portal Updated component to now take either a selector or DOM element as root for a React portal.
PortalPlacer Component that automatically creates portals for each DOM element of the given selector. It will create an instance of the component that is passed as an argument. All dataset attributes of the DOM element will be passed as props to the React component. PortalPlacer will re-render the subtree if it receives any change events from the AEM Sites editor, so changes done by authors are applied correctly. The component is used in Venia, to spawn a new instance of ProductRecsGallery for each placeholder that is rendered by the AEM Product Recommendations server-side component.
createProductPageUrl Simple function to generate a URL to the product redirect servlet based on a product SKU.
usePageType Hook that returns the type of the current page, based on the presence of product or category components. This is required for both MSE and the Recommendations JS SDK.
useEditorEvents Hook that listens to events from the AEM Sites editor and updates an internal state for each event. Every component that uses the hook will automatically re-render on editor events.

Related Issue

Depends on #606.

How Has This Been Tested?

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes and the overall coverage did not decrease.
  • All unit tests pass on CircleCi.
  • I ran all tests locally and they pass.

herzog31 and others added 29 commits June 2, 2021 14:34
@herzog31 herzog31 added the feature New feature or request label Jun 30, 2021
Copy link
Contributor

@dplaton dplaton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had only minor comments, so 👍 We should still think of a better name, though...

Base automatically changed from issues/CIF-2143 to master July 8, 2021 14:05
@herzog31 herzog31 requested a review from buuhuu July 14, 2021 09:50
@buuhuu buuhuu merged commit 09fdd3c into master Jul 21, 2021
@buuhuu buuhuu deleted the issue/CIF-2144 branch July 21, 2021 15:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants