feat: introducing a custom element for rendering multiple product cards

[manikandan-ravikumar]

Context

This pull request introduces the new DynamicCards web component, which enables the dynamic rendering of multiple Shopify products in a grid layout, along with related utilities, mock support, and Storybook stories. The main changes include the implementation of the DynamicCards component, supporting utilities for markup and product parsing, styling, and documentation/demo setup.

Key changes:

New Component: DynamicCards

• Introduced the DynamicCards web component (nosto-dynamic-cards) for rendering batches of products dynamically, with support for lazy loading, product recommendations, and batch fetching from Shopify sections. Includes a method to set global defaults for the component.
• Registered the component and its defaults setter in the main export file for package-wide availability.

Utilities & Helpers

• Added a utility for generating mock markup for product cards, used for testing and demonstration purposes.
• Implemented a utility to robustly detect and parse repeating product card elements from arbitrary DOM structures, aiding in the extraction and sorting of product items.

Styling

• Added a CSS stylesheet for the mock product card, defining a consistent visual appearance for mock/demo cards.

Storybook & Documentation

• Created a comprehensive Storybook story for DynamicCards, including controls for Shopify shop, template/section, product count, columns, and mock mode. This allows for interactive demos and visual testing of the component in various configurations.

Related Jira ticket

Screenshots

[Copilot]

Pull request overview

This pull request introduces a new DynamicCards component intended to render multiple product cards dynamically. However, the implementation has several critical issues that prevent it from functioning correctly:

Changes:

• Added DynamicCards component with support for loading products from Nosto recommendations and rendering them via Shopify sections
• Added utility files (productResultsParser.ts, markup.ts, styles.css) that are not integrated with the component
• Added Storybook stories that incorrectly reference the DynamicCard component instead of DynamicCards
• Exported DynamicCards and setDynamicCardsDefaults in main.ts

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 23 comments.

Show a summary per file

File	Description
src/main.ts	Exports the new DynamicCards component and its defaults setter function
src/components/DynamicCards/DynamicCards.ts	Main component implementation with issues in type definitions, documentation, naming, and base class selection
src/components/DynamicCards/DynamicCards.stories.tsx	Storybook stories that incorrectly render DynamicCard instead of DynamicCards
src/components/DynamicCards/styles.css	CSS styles for mock cards that are never imported or used
src/components/DynamicCards/markup.ts	Mock markup generator that is never imported or used
src/components/DynamicCards/productResultsParser.ts	DOM parsing utility that is never imported or used