Implement custom wishlist page

Steps

1. Create a wishlist component in your theme and register it as a block. ( In this example, the block name is custom/shopify-wishlist-test)

2. Replace the current wishlist page with your own custom page. When exporting, use the page name WishList.

Example page:

const pagesData = {
  title: 'Wishlist',
  blocks: [
    {
      attributes: {},
      name: 'custom/shopify-wishlist-test', // Use the registered block in step one.
      innerBlocks: [],
      clientId: '973a144a-2b29-4bb3-869f-416f37a1c',
      isValid: true,
    },
  ],
};
export default pagesData;

3. Inside your custom component block, you can utilize either of these two hooks to access the product data. import the useWishlistProductIds or useWishlistProducts hook from @appmaker-xyz/shopify.
   • useWishlistProductIds - Returns the product IDs as an array. If you are utilizing any collection merchandise services, you can use these IDs to query your products.
   • useWishlistProducts - Returns the products as an array in Shopify format.

Hook examples

• Using useWishlistProductIds

  import { runDataSource } from '@appmaker-xyz/core';
  import { useWishlistProductIds } from '@appmaker-xyz/shopify';
  
  const WishTest = (props) => {
   const [products, setProducts] = React.useState([]);
   // Getting wishlisted product ids from hook.
   const { productIds } = useWishlistProductIds();
   const dataSource = {
     attributes: {},
     source: 'shopify',
   };
   useEffect(() => {
     getProducts();
   }, []);
   const getProducts = async () => {
     // getting products data from shopify using product id's.
     const [response] = await runDataSource(
       {
         dataSource,
       },
       {
         methodName: 'products',
         params: {
           ids: productIds,
         },
       },
     );
     if (response?.data?.data?.products?.edges?.length > 0) {
       setProducts(response.data.data.products.edges);
     }
   };
  
   const productsView = products?.map?.(({ node }) => <Text>{node.title}</Text>);
  
   return (
     <View>
       <Text> Wishlist component </Text>
       {productsView}
     </View>
   );
  };

• Using useWishlistProducts

import { useWishlistProducts } from '@appmaker-xyz/shopify';

const WishTest = (props) => {
  const { products, isLoading } = useWishlistProducts();
  if (isLoading) {
    return (
      <View>
        <Text>Loading</Text>
      </View>
    );
  }

  if (products.length > 0) {
    return (
      <View>
        <Text>Wish test component</Text>
        {products.map((product) => (
          <Text key={product.id}>{product.title}</Text>
        ))}
      </View>
    );
  }

  return (
    <View>
      <Text>Empty</Text>
    </View>
  );
};
export default WishTest;