Wishlist
The Wishlist component can be used on the My account Wishlist dynamic page.
Example image
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 (<WishListpageTitle={data.pageTitle}emptyStateImage={data.emptyStateImage}emptyStateTitle={data.emptyStateTitle}emptyStateSubtitle={data.emptyStateSubtitle}emptyStateCTALabel={data.emptyStateCTALabel}emptyStateCTALink={data.emptyStateCTALink}items={wishlist}removeLineItems={removeLineItems}/>);};export default WishlistTastic;