Implement custom wishlist page
Replace the default wishlist page with your own block-based page.
Steps
-
Create a wishlist component in your theme and register it as a block. ( In this example, the block name is
custom/shopify-wishlist-test) -
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;
- Inside your custom component block, you can utilize either of these two hooks to access the product data. import the
useWishlistProductIdsoruseWishlistProductshook 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;