Shopify Hydrogen 嵌入第三方预订小部件 Bokun

Question

你好，

我正在开发的网站使用Bokun进行在线预订/礼品卡购买。
他们提供了一个预订小部件，本质上是一个脚本标签，可以动态加载预订/礼品卡购买界面。那里没有任何突破性的东西。 嵌入的代码设置在页面内容中并呈现如下...

<div dangerouslySetInnerHTML={{ __html: page.body }} className="" />

但是我正在使用 Shopify Hydrogen（反应/混音）（上面的代码）来呈现以下代码（页面内容）。

<script type="text/javascript" src="https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=XXXXX" async></script>
     
<div class="bokunWidget" data-src="https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX"></div>

我相信我已经解决了安全策略错误，例如*.bokun.io 和 *.polyfill.io

但现在我遇到了（希望）最后一个错误，我似乎无法修复......

Warning: Prop `type` did not match. Server: "text/javascript" Client: "application/ld+json"

有什么想法/建议吗？

谢谢。

Answer 1

好吧，我在其他帖子的帮助下解决了这个问题......

// Optional: In Shopify, add meta data for a page signalling whether your page has the need to include a script from Bokun.  You could also use useLocation() to get the path if you like to hardcode.
const bokun = page.template_bokun?.value ?? "";

// When the remix page has "loaded", call a function
useEffect(() => {
    LoadBokunScript(bokun);
}, []);

// The load bokun script (further down the page somewhere)
function LoadBokunScript(bokun: string) {
    if (bokun == "true") {
    loadScript(
      "https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=xxxxxxxxxxxxxxx",
      () => {
        console.log("Booking interface loaded.");
      },
    );
  }
}

请记住，您的页面内容仍需要包含以下代码...

<div class="bokunWidget" data-src="https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX"></div>

在我的示例中，我创建了一个名为 /book/my-event-1 的自定义路由，仅当存在 bokun 标签时，该路由才提供标准 Shopify 页面。这样我就有两种方式加载 Shopify Hydrogen 页面，即 /pages/my-standard-page、/book/my-event-1。如果标准页面有 bokun 元数据，则会出现 404，因此不会出现重复。稍后可能需要通过 SEO 解决问题，因此请谨慎使用此方法。