Мне удалось создать всплывающее уведомление onLineAdd всякий раз, когда человек добавляет что-то в свою корзину, однако я не могу понять, как отображать информацию о продукте и отображать ее в тосте.
То, что я ищу, это onLineAdd, чтобы вызвать уведомление, в котором говорится: «XXX (с изображением) добавлено в корзину». Это возможно?
Мой код:
const open = useCallback(() => {
console.info("Opening product added popup, with image and title.")
}, []);
<ShopifyCartProvider
onLineAdd = {open}
onCreate = {open}>
{children}
</ShopifyCartProvider>
Это даже реализовано в официальном магазине водорода shopify: (Попробуйте добавить что-нибудь в корзину здесь) https://shopify.supply/products/entrepreneur-tee
Глядя на исходный код CartProvider
(ссылка), мне не кажется вероятным, что это предназначенное место для таких вещей, как открытие тостов с информацией о продукте, иначе я бы предположил, что разработчики shopify просто не пропустили бы передачу ЛЮБАЯ информация/параметры для методов «события», например onLineAdd
(не совсем уверен, в чем смысл этих методов без передачи им какой-либо контекстной информации, но не копал так глубоко).
Поэтому я предлагаю вам изучить другие компоненты, например AddToCartButton
(ссылка) (или что вы используете для запуска этого onLineAdd
-события?), которые, кажется, с гораздо большей вероятностью предоставят нужную вам информацию:
const handleAddItem = useCallback(() => {
setAddingItem(true);
linesAdd([
{
quantity,
merchandiseId: variantId || '',
attributes,
sellingPlanId,
},
]);
}, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
return (
<>
<BaseButton
{...passthroughProps}
disabled = {disabled}
onClick = {onClick}
defaultOnClick = {handleAddItem}
>
{children}
</BaseButton>
...
так что вы могли бы предоставить свой собственный метод handleAddItem
, который откроет ваш тост, а затем установит его в качестве реквизита defaultOnClick
?
Может быть, есть другие задействованные компоненты, которые могли бы сделать то же самое?
Если вы настаиваете на том, чтобы сделать это так же, как они сделали это в официальном магазине, на который вы ссылаетесь, возможно, сравнение источника CartProvider
на github с тем, что они сделали с ним в магазине (ссылка), может пролить свет на то, как сделать так же!
PS: простите, если я упускаю из виду что-то очевидное, никогда не работал с водородом Shopify ;)