Уведомление о всплывающей корзине - Shopify Hydrogen

Question

Мне удалось создать всплывающее уведомление onLineAdd всякий раз, когда человек добавляет что-то в свою корзину, однако я не могу понять, как отображать информацию о продукте и отображать ее в тосте.

То, что я ищу, это onLineAdd, чтобы вызвать уведомление, в котором говорится: «XXX (с изображением) добавлено в корзину». Это возможно?

Мой код:

      const open = useCallback(() => {
    console.log("Opening product added popup, with image and title.")
}, []);

<ShopifyCartProvider
    onLineAdd={open}
    onCreate={open}>
    {children}
</ShopifyCartProvider>

Это даже реализовано в официальном магазине водорода shopify: (Попробуйте добавить что-нибудь в корзину здесь)https://shopify.supply/products/entrepreneur-tee

Answer 1

Глядя на исходный код (ссылка), мне кажется маловероятным, что это предназначенное место для таких вещей, как открытие тостов с информацией о продукте, в противном случае я бы предположил, что разработчики Shopify просто не пропустили бы передачу ЛЮБОЙ информации/параметров к «событийным» методам, например (не совсем уверен, в чем смысл этих методов без передачи им какой-либо контекстной информации, но не копал так глубоко).

Поэтому я предлагаю вам изучить другие компоненты, напримерAddToCartButton(ссылка) (или что вы используете для запуска этогоonLineAdd-event?), который, по-видимому, с гораздо большей вероятностью предоставит необходимую вам информацию:

        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 ;)