Wishlist

The Wishlist component can be used on the My account Wishlist dynamic page.

Example image

wishlist.png

Code samples

{
"tasticType": "commercetools/ui/wishlist",
"name": "commercetools UI wishlist",
"icon": "list",
"category": "Wishlist",
"schema": [
{
"name": "Empty State Data",
"fields": [
{
"label": "Page Title",
"field": "pageTitle",
"translatable": true,
"type": "string"
},
{
"label": "Empty State Image",
"field": "emptyStateImage",
"type": "media",
"required": true
},
{
"label": "Empty State Title",
"field": "emptyStateTitle",
"translatable": true,
"type": "string"
},
{
"label": "Empty State Subtitle",
"field": "emptyStateSubtitle",
"translatable": true,
"type": "string"
},
{
"label": "Call to Action Label",
"field": "emptyStateCTALabel",
"translatable": true,
"type": "string"
},
{
"label": "Call to Action Link",
"field": "emptyStateCTALink",
"type": "reference",
"required": true
}
]
}
]
}
import React from 'react';
import { LineItem } from '@Types/wishlist/LineItem';
import WishList from 'components/commercetools-ui/wishlist';
import { useWishlist } from 'frontastic/provider';
const WishlistTastic = ({ data }) => {
const { data: wishlist, removeLineItem } = useWishlist();
const removeLineItems = async (item: LineItem) => {
await removeLineItem(item.lineItemId);
};
return (
<WishList
pageTitle={data.pageTitle}
emptyStateImage={data.emptyStateImage}
emptyStateTitle={data.emptyStateTitle}
emptyStateSubtitle={data.emptyStateSubtitle}
emptyStateCTALabel={data.emptyStateCTALabel}
emptyStateCTALink={data.emptyStateCTALink}
items={wishlist}
removeLineItems={removeLineItems}
/>
);
};
export default WishlistTastic;