ReadyProductSelector

The ReadyProductSelector is a versatile React component designed for your Shopify app. It allows users to browse and select products or variants from their Shopify store, providing a seamless integration with Shopify's resource picker.

Import

import { ReadyProductSelector } from 'path/to/ReadyProductSelector';

Props

Prop	Type	Default	Description
`title`	string	Required	The title displayed at the top of the component
`subtitle`	string	`""`	An optional subtitle for additional context
`products`	array	Required	An array of selected products
`setProducts`	function	Required	A function to update the selected products
`type`	string	`"product"`	The type of resource to select (`"product"` or `"variant"`)
`multiple`	boolean	`false`	Whether multiple selections are allowed
`action`	string	`"select"`	The action to perform in the resource picker
`filterVariant`	boolean	`true`	Whether to filter variants in the selection
`children`	React.ReactNode	`null`	Optional child components to render

Usage

import { useState } from 'react';
import { ReadyProductSelector } from './ReadyProductSelector';
 
function ProductPage() {
  const [selectedProducts, setSelectedProducts] = useState([]);
 
  return (
    <ReadyProductSelector
      title="Select Products"
      subtitle="Choose products to feature"
      products={selectedProducts}
      setProducts={setSelectedProducts}
      multiple={true}
    />
  );
}

Functionality

Product Selection: Users can browse and select products using Shopify's resource picker.
Display Selected Products: Shows selected products with their image, title, and variant information.
Remove Products: Allows users to remove individual products from the selection.
Variant Handling: Can filter and display product variants based on the filterVariant prop.

Component Structure

The component is wrapped in a Shopify Polaris Card for consistent styling.
It uses various Polaris components like BlockStack, InlineStack, Button, Select, and Thumbnail for layout and UI elements.
Selected products are displayed in a list, each within a bordered box.

Notes

The component integrates with the shopify.resourcePicker API for product selection.
It normalizes the data returned from the resource picker to maintain a consistent structure.
The component handles both single and multiple product selections.

Customization

You can customize the appearance and behavior of the ReadyProductSelector by adjusting the props or modifying the component's internal structure. Consider extending the component or wrapping it in a higher-order component for more advanced customizations.

ReadyTable ReadyDatePicker