盖茨比第 3 方脚本未按预期工作

Question

我在将 fastspring 包含到我的 gatsby 项目时遇到了问题。问题如下：我在 html 头部添加了脚本，但它不适用于所有页面（仅当我刷新页面时它才有效）我试图通过在 html.js 中插入脚本来解决这个问题，使用 gatsby-ssr.js 和 gatsby-browser.js

盖茨比-browser.js

我在 gatsby-ssr.js 中放入了相同的代码，我也尝试过使用 Helmet，但对我没有任何作用我希望它可以在所有页面上工作而无需刷新页面，所以如果有人可以帮我解决这个问题。提前致谢！ :)

Answer 1

这似乎是个老问题，但有人可能仍然有这个问题。我确实搜索了一段时间的解决方案，最后，我采用了以下方法。

我创建了一个名为 FastSpringStoreApi.js 的组件。它加载 FastSpring API 并从中订阅 2 个回调事件 - data-popup-closed 和 data-data-callback。我用这两个来分派我在 FastSpring 提供程序中监听的自定义 js 事件。这 2 个事件包含商店正常运行所需的所有信息（商品、定价、购物车信息）

注意：我将数据保存到sessionStorage中是有原因的。该事件可以在 React 水合物之前被分派。在这种情况下，我将会话存储中的数据作为我的 reducer 中的初始状态。

import React from 'react';
import {
  FS_EVENTS,
  FS_SESSION_KEY
} from './FastSpringStore.keys';

export default ({ storeFrontId }) => (
  <>
    <script
      type="text/javascript"
      dangerouslySetInnerHTML= {{
        __html:`
          function raiseFSPopupCloseEvent(data) {
            var popupCloseEvent = new CustomEvent(
             '${FS_EVENTS.POPUP_CLOSE}',
             { detail: data }
            );
            window.dispatchEvent(popupCloseEvent);
          }
          
          function raiseFSDataUpdateEvent(data) {
            var dataUpdateEvent = new CustomEvent(
             '${FS_EVENTS.DATA_UPDATE}',
             { detail: data }
            );
            
            window
              .sessionStorage
              .setItem(
                '${FS_SESSION_KEY}',
                 JSON.stringify(data)
               )
              
            window.dispatchEvent(dataUpdateEvent);
          }
        `
      }}
    />
    <script
      id="fsc-api"
      src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.5/fastspring-builder.min.js"
      type="text/javascript"
      data-popup-closed="raiseFSPopupCloseEvent"
      data-data-callback="raiseFSDataUpdateEvent"
      data-continuous="true"
      data-storefront={storeFrontId}
    />
  </>
)

我只在 gatsby-ssr.js 中加载这个组件

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <FastSpringStoreApi
      key="fast-spring-store-api"
      storeFrontId="..."
    />,
  ])
}

我有 FasSpringStore 提供商，我可以在其中订阅我的 fs 事件。看起来像这样。有了它，我可以获取所有需要的数据，深入到任何组件。

useEffect(() => {
    const onPopupClosed = (data) => {
      // Popup was closed and order was finished (we have order id)
      if (_has(data.detail, 'id')) {
        // Navigate to home page
        // TODO: Show thank you page in the future
        navigate('/')
        dispatch(cleanShopStore())
      }
    }

    const onDataUpdate = (data) => {
      dispatch(
        setOrderInfo(
          mapFSDataToPayload(
            data.detail
          )
        )
      )
    }

    window.addEventListener(FS_EVENTS.POPUP_CLOSE, onPopupClosed, false);
    window.addEventListener(FS_EVENTS.DATA_UPDATE, onDataUpdate, false);


    return () => {
      window.removeEventListener(FS_EVENTS.POPUP_CLOSE, onPopupClosed)
      window.removeEventListener(FS_EVENTS.DATA_UPDATE, onDataUpdate)
      window.sessionStorage.removeItem(FS_SESSION_KEY)
    }
  }, [])

在 gatsby-ssr.js 中，我用商店提供程序包装我的根元素

export const wrapRootElement = ({ element }) => (
  <FastSpringStoreProvider>
    {element}
  </FastSpringStoreProvider>
);

gatsby-browser.js

export const wrapRootElement = ({ element }) => (
  <FastSpringStoreProvider>
    {element}
  </FastSpringStoreProvider>
);

希望这能为 FastSpring 的实施提供一些思路。

盖茨比第 3 方脚本未按预期工作

Gatsby 3rd party scripts not working as intended

javascript

reactjs

gatsby

react-helmet