javascript 购物车吐司通知- Shopify氢气

lawou6xi  于 2022-12-21  发布在  Java
关注(0)|答案(2)|浏览(123)
    • bounty将在5天后过期**。回答此问题可获得+100的声誉奖励。haveman正在寻找规范答案

我设法创建了onLineAdd toast通知,每当有人添加东西到他们的购物车,但是,我似乎不能掌握如何显示产品信息,并显示在toast。
我正在寻找的是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

6l7fqoea

6l7fqoea1#

要在将产品添加到购物车时在toast通知中显示产品信息,您需要将必要的信息传递给onLineAdd回调函数。
一种方法是修改open回调函数以接受表示添加到购物车的产品的参数,然后使用此信息在toast通知中显示相应的产品信息。
您还需要修改ShopifyCartProvider组件,以便将必要的产品信息传递给onLineAdd回调函数。您可以通过访问传递给onLineAdd回调函数的事件负载中的产品信息来执行此操作。
例如:

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

<ShopifyCartProvider
    onLineAdd={(event) => open(event.product)}
    onCreate={(event) => open(event.product)}>
    {children}
</ShopifyCartProvider>
    • ShopifyCartProvider**组件将产品信息作为参数从事件有效负载传递到打开回调函数。然后,您可以使用此信息在toast通知中显示相应的产品信息。
4jb9z9bj

4jb9z9bj2#

查看CartProvider的源代码(link),在我看来,这不太可能是用产品信息打开祝酒词这样的事情的预期位置,否则我会假设shopify devs不会简单地省略向“事件”方法传递任何信息/参数,比如onLineAdd(不太确定那些没有传递任何上下文信息的方法有什么意义,但没有深入挖掘)。
因此,我建议您研究其他组件,例如AddToCartButtonlink)(或者您使用什么来触发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属性?
也许还有其他组件可以做同样的事情?
如果你坚持用你链接到的官方商店里的方法来做,也许比较一下github上CartProvider的源代码和他们在商店里用它做的事情(link)也会对如何做有所启发!
PS:原谅我忽略了一些明显的东西,我从来没有用过shopify氢;)

相关问题