Shopify Hydrogen встраивает сторонний виджет бронирования Bokun
Привет,
Веб-сайт, над которым я работаю, использует 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"
Есть идеи/предложения?
Спасибо.
Ответы 1
Хорошо, я решил это с помощью других сообщений на SO...
// 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.info("Booking interface loaded.");
},
);
}
}
Помните, что содержимое вашей страницы по-прежнему должно включать следующий код...
<div class = "bokunWidget" data-src = "https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX"></div>
В моем примере я создал собственный маршрут под названием /book/my-event-1, который обслуживает стандартную страницу Shopify только в том случае, если существует тег bokun. Таким образом, у меня есть два способа загрузить страницу Shopify Hydrogen: /pages/my-standard-page, /book/my-event-1. Если мета-бокун есть для стандартной страницы, это будет ошибка 404, поэтому дублирования нет. Позже могут возникнуть проблемы с SEO, поэтому используйте этот подход с осторожностью.