用ajax替换整个html并且行为与直接访问页面相同
我想从 Shopify 商店主页向 Shopify 结账页面发出 ajax 请求，注入一些信息并显示它。当您被重定向到结帐页面时，Shopify 会显示加载程序图标，并在后台执行一堆 xmr 请求并注入结帐信息。
我找不到用 ajax 响应替换当前主页的方法。它显示加载程序图标，但不会执行应由该注入的 html 触发的进一步 xmr 请求。我什至尝试复制结账页面源 html 并使用浏览器控制台替换主页 html，但也没有成功。
我的问题是如何替换当前页面 html 并使其行为与我访问该 ajax 调用页面完全相同。
这是结帐页面的 html 源代码（由于大小限制删除了一些部分）：
<!DOCTYPE html>
<html lang="es-ES" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, user-scalable=0">
<meta name="referrer" content="origin">
<link rel="dns-prefetch preconnect" href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/">
<title>Información - de pago</title>
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/vendors~app.latest.es.187d1b212c4e881b9db2.css" crossorigin="anonymous" rel="stylesheet" />
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/app.latest.es.471ab696711f9560487b.css" crossorigin="anonymous" rel="stylesheet" />
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information~Payment~ShopPay.latest.es.aa824bd76c428cd0a36c.css" crossorigin="anonymous" rel="stylesheet" />
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information.latest.es.1c8e26726a720c39a947.css" crossorigin="anonymous" rel="stylesheet" />
<link rel="dns-prefetch" href="https://fonts.shopifycdn.com">
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="preload" href="https://fonts.shopifycdn.com/roboto/roboto_n4.da808834c2315f31dd3910e2ae6b1a895d7f73f5.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=bac2abff6393ba563d8fc7df116bdcfb84b8e16847d09a49d0f3f0e0da71266f" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.shopifycdn.com/roboto/roboto_n5.126dd24093e910b23578142c0183010eb1f2b9be.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=5e4bba89500e37d34236f4de27db40ebeb2138892435a026fec5232229c5089d" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(https://fonts.shopifycdn.com/roboto/roboto_n4.da808834c2315f31dd3910e2ae6b1a895d7f73f5.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=bac2abff6393ba563d8fc7df116bdcfb84b8e16847d09a49d0f3f0e0da71266f) format('woff2'),url(https://fonts.shopifycdn.com/roboto/roboto_n4.a512c7b68cd7f12c72e1a5fd58e7f7315c552e93.woff?valid_until=MTY0NzM3ODQ0Nw&hmac=63e69061d1319e9a4afe823fdb3a234bdaae9a51f05978d42b396d6656bdd4b9) format('woff');
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.shopifycdn.com/roboto/roboto_n5.126dd24093e910b23578142c0183010eb1f2b9be.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=5e4bba89500e37d34236f4de27db40ebeb2138892435a026fec5232229c5089d) format('woff2'),url(https://fonts.shopifycdn.com/roboto/roboto_n5.ef0ac6b5ed77e19e95b9512154467a6fb9575078.woff?valid_until=MTY0NzM3ODQ0Nw&hmac=8cb52c905e8ae19b306405070e6b390ec34ea7333fc910e75fef37db05a8e8f1) format('woff');
}
</style>
<style>
html {
font-size: 62.5%;
}
body {
background-color: #E5E5E5;
}
.Loading {
overflow-y: scroll;
}
.Loading #app {
opacity: 0;
}
#app {
opacity: 1;
transition: opacity 100ms ease-in-out;
}
.Loading .SpinnerWrapper {
opacity: 1;
}
.SpinnerWrapper {
font-size: 1.4rem;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transition: opacity 100ms ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 4.571428571428571em;
height: 4.571428571428571em;
color: #1878b9;
pointer-events: none;
}
.Spinner {
display: block;
max-height: 100%;
max-width: 100%;
fill: currentColor;
opacity: 0;
-webkit-animation: fade-in 200ms ease-in-out 300ms forwards, rotate 500ms linear infinite;
animation: fade-in 200ms ease-in-out 300ms forwards, rotate 500ms linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body class="Loading">
<div id="app"></div>
<div id="SandboxContainer"></div>
<div class="SpinnerWrapper">
<svg class="Spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" focusable="false">
<path d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0v2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14h2z" />
</svg>
</div>
<div data-serialized-id="graphql" data-serialized-value="{"95514a62243fedfcf18f495e3a6fff37d77a59e2344874afc623823ddb{\"sessionToken\":\"bDVWWGhDNEMyeHhhQkXdxOWU3VS9BVDJ5NXdiNHZNWWFlRGFuLzhQRU1PcTlPMlJYYUhCV1Z4UWpQQy9oK3NBbXFtWndvT1Zib3JuSklrNUJldlI4ZnlVQmRSVGNwK1VwODdqMDVEc1lkUDRNQmZjbEdneVVkbob3BhUVlBMUJIVWlTOS9FU1VDTmdVSlZ1N0xtNmIrZ1phWVQvY2VhRThCbkljU0VqeFZ4bTQvS3d5V1FLZTgzOUFaTTlEcUhrZ0tOTkpmNnRjQnpPcXl2RG1TM3lKY1V4NklWU2RjR2hpTktQaFlPeUdaM01hSVhEdldCM21rYU5aaHpzMk9Qcz0tLTNaekRyNGJWbkhUQnMwLVMwRm1LYTJ2TVBFR2dtd3B2TDRTc1E9PQ\"}":{"siberia":false,"shop":{"name":" me":"NegotiationResultPayload"},"__typename":"Session"}}}"></div>
<div data-serialized-id="public-path" data-serialized-value=""https:\/\/cdn.shopify.com\/shopifycloud\/checkout-web\/assets\/""></div>
<div data-serialized-id="cart-token" data-serialized-value=""cdb0daf577ce592e382babbe1587095""></div>
<div data-serialized-id="source-token" data-serialized-value=""cdb0daf577ce52e382babbe1587095""></div>
<div data-serialized-id="checkout-session-identifier" data-serialized-value=""7350eb59894c0830c65cb360e17302c""></div>
<div data-serialized-id="session-token" data-serialized-value=""bDVWWGhDNEMyeHhhQkhNTXdxOWU3VS9BVDJ5NXdiNHZNWWFlRGFuLzhQRU1PcTlPMlJYYUhC4UWpQQy9oK3NBbXFtWndvT1Zib3JuSklrNUJldlI4ZnlVQmRSVGNwK1VwODdqMDVEc1lkUDRNQmZjbEdneVVkbDJob3BhUVlBMUJIVWlTOS9FU1VDTmdVSlZ1N0xtNmIrZ1phWVQvY2VhRThCbkljU0VqeFZ4bTQvS3d5V1FLZTgzOUFaTTlEcUhrZ0tOTkpmNnRjQnpPcXl2RM3lKY1V4NklWU2RjR2hpTktQaFlPeUdaM01hSVhEdldCM21rYU5aaHpzMk9Qcz0tLTNaekRyNGJWbkhUQnMwVEYtLVMwRm1LYTJ2TVBFR2dtd3B2TDRTc1E9PQ""></div>
<div data-serialized-id="session-finished" data-serialized-value="false"></div>
<div data-serialized-id="receipt" data-serialized-value="{"exists":false,"status":null,"in_progress":null}"></div>
<div data-serialized-id="bugsnag-config"
<div data-serialized-id="autocomplete-sandbox" data-serialized-value=""https:\/\/checkout.shopify.com\/59158659227\/sandbox\/checkout_one_web_autocomplete""></div>
<div data-serialized-id="analytics-iframe-url" data-serialized-value=""https:\/\/yoga.com\/59158659227\/checkouts\/checkout_one_web_analytics""></div>
<div data-serialized-id="facebook-pixel-sandbox" data-serialized-value=""https:\/\/checkout.shopify.com\/59158659227\/sandbox\/checkout_one_web_facebook_pixel""></div>
<div data-serialized-id="additional-google-analytics-script-sandbox" data-serialized-value=""https:\/\/checkout.shopify.com\/59158659227\/sandbox\/checkout_one_web_additional_google_analytics_script""></div>
<div data-serialized-id="locale" data-serialized-value=""es-ES""></div>
<div data-serialized-id="deploy-stage" data-serialized-value=""production""></div>
<div data-serialized-id="request-id" data-serialized-value=""25d8faeb-f4f5-4aaf-ba68-9189747c3887""></div>
<div data-serialized-id="login-url" data-serialized-value="null"></div>
<div data-serialized-id="logout-url" data-serialized-value="null"></div>
<div data-serialized-id="internal-link-origins" data-serialized-value="["https:\/\/shop.app"]"></div>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/runtime.latest.es.86b6b287b2c21dd59197.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/vendors~app.latest.es.fd94d3a279887754e1f2.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information~Payment~ShopPay.latest.es.e7da95759e894bea7d6b.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information.latest.es.45caeef86ab72aaf2ff8.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/app.latest.es.019e1cf377ae8f2fa63e.js" crossorigin="anonymous"></script>
</body>
</html>
I want to make ajax request to Shopify checkout page from Shopify store homepage, inject some information and display it. What Shopify do when you get redirected to checkout page is that they display loader icon and in background they do bunch of xmr requests and inject checkout information.
I can not find a way to replace current homepage with ajax response. It displays loader icon, but it won't do further xmr requests that should be trigerred by this injected html. I even tried to copy checkout page source html and replace homepage html with that using browser console, also no success.
My question is how I can replace current page html and make it acting the exact the same way as if I visited that ajax called page.
Here is how it looks html source of checkout page (removed some parts due size limit):
<!DOCTYPE html>
<html lang="es-ES" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, user-scalable=0">
<meta name="referrer" content="origin">
<link rel="dns-prefetch preconnect" href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/">
<title>Información - de pago</title>
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/vendors~app.latest.es.187d1b212c4e881b9db2.css" crossorigin="anonymous" rel="stylesheet" />
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/app.latest.es.471ab696711f9560487b.css" crossorigin="anonymous" rel="stylesheet" />
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information~Payment~ShopPay.latest.es.aa824bd76c428cd0a36c.css" crossorigin="anonymous" rel="stylesheet" />
<link href="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information.latest.es.1c8e26726a720c39a947.css" crossorigin="anonymous" rel="stylesheet" />
<link rel="dns-prefetch" href="https://fonts.shopifycdn.com">
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="preload" href="https://fonts.shopifycdn.com/roboto/roboto_n4.da808834c2315f31dd3910e2ae6b1a895d7f73f5.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=bac2abff6393ba563d8fc7df116bdcfb84b8e16847d09a49d0f3f0e0da71266f" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.shopifycdn.com/roboto/roboto_n5.126dd24093e910b23578142c0183010eb1f2b9be.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=5e4bba89500e37d34236f4de27db40ebeb2138892435a026fec5232229c5089d" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(https://fonts.shopifycdn.com/roboto/roboto_n4.da808834c2315f31dd3910e2ae6b1a895d7f73f5.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=bac2abff6393ba563d8fc7df116bdcfb84b8e16847d09a49d0f3f0e0da71266f) format('woff2'),url(https://fonts.shopifycdn.com/roboto/roboto_n4.a512c7b68cd7f12c72e1a5fd58e7f7315c552e93.woff?valid_until=MTY0NzM3ODQ0Nw&hmac=63e69061d1319e9a4afe823fdb3a234bdaae9a51f05978d42b396d6656bdd4b9) format('woff');
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.shopifycdn.com/roboto/roboto_n5.126dd24093e910b23578142c0183010eb1f2b9be.woff2?valid_until=MTY0NzM3ODQ0Nw&hmac=5e4bba89500e37d34236f4de27db40ebeb2138892435a026fec5232229c5089d) format('woff2'),url(https://fonts.shopifycdn.com/roboto/roboto_n5.ef0ac6b5ed77e19e95b9512154467a6fb9575078.woff?valid_until=MTY0NzM3ODQ0Nw&hmac=8cb52c905e8ae19b306405070e6b390ec34ea7333fc910e75fef37db05a8e8f1) format('woff');
}
</style>
<style>
html {
font-size: 62.5%;
}
body {
background-color: #E5E5E5;
}
.Loading {
overflow-y: scroll;
}
.Loading #app {
opacity: 0;
}
#app {
opacity: 1;
transition: opacity 100ms ease-in-out;
}
.Loading .SpinnerWrapper {
opacity: 1;
}
.SpinnerWrapper {
font-size: 1.4rem;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transition: opacity 100ms ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 4.571428571428571em;
height: 4.571428571428571em;
color: #1878b9;
pointer-events: none;
}
.Spinner {
display: block;
max-height: 100%;
max-width: 100%;
fill: currentColor;
opacity: 0;
-webkit-animation: fade-in 200ms ease-in-out 300ms forwards, rotate 500ms linear infinite;
animation: fade-in 200ms ease-in-out 300ms forwards, rotate 500ms linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body class="Loading">
<div id="app"></div>
<div id="SandboxContainer"></div>
<div class="SpinnerWrapper">
<svg class="Spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" focusable="false">
<path d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0v2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14h2z" />
</svg>
</div>
<div data-serialized-id="graphql" data-serialized-value="{"95514a62243fedfcf18f495e3a6fff37d77a59e2344874afc623823ddb{\"sessionToken\":\"bDVWWGhDNEMyeHhhQkXdxOWU3VS9BVDJ5NXdiNHZNWWFlRGFuLzhQRU1PcTlPMlJYYUhCV1Z4UWpQQy9oK3NBbXFtWndvT1Zib3JuSklrNUJldlI4ZnlVQmRSVGNwK1VwODdqMDVEc1lkUDRNQmZjbEdneVVkbob3BhUVlBMUJIVWlTOS9FU1VDTmdVSlZ1N0xtNmIrZ1phWVQvY2VhRThCbkljU0VqeFZ4bTQvS3d5V1FLZTgzOUFaTTlEcUhrZ0tOTkpmNnRjQnpPcXl2RG1TM3lKY1V4NklWU2RjR2hpTktQaFlPeUdaM01hSVhEdldCM21rYU5aaHpzMk9Qcz0tLTNaekRyNGJWbkhUQnMwLVMwRm1LYTJ2TVBFR2dtd3B2TDRTc1E9PQ\"}":{"siberia":false,"shop":{"name":" me":"NegotiationResultPayload"},"__typename":"Session"}}}"></div>
<div data-serialized-id="public-path" data-serialized-value=""https:\/\/cdn.shopify.com\/shopifycloud\/checkout-web\/assets\/""></div>
<div data-serialized-id="cart-token" data-serialized-value=""cdb0daf577ce592e382babbe1587095""></div>
<div data-serialized-id="source-token" data-serialized-value=""cdb0daf577ce52e382babbe1587095""></div>
<div data-serialized-id="checkout-session-identifier" data-serialized-value=""7350eb59894c0830c65cb360e17302c""></div>
<div data-serialized-id="session-token" data-serialized-value=""bDVWWGhDNEMyeHhhQkhNTXdxOWU3VS9BVDJ5NXdiNHZNWWFlRGFuLzhQRU1PcTlPMlJYYUhC4UWpQQy9oK3NBbXFtWndvT1Zib3JuSklrNUJldlI4ZnlVQmRSVGNwK1VwODdqMDVEc1lkUDRNQmZjbEdneVVkbDJob3BhUVlBMUJIVWlTOS9FU1VDTmdVSlZ1N0xtNmIrZ1phWVQvY2VhRThCbkljU0VqeFZ4bTQvS3d5V1FLZTgzOUFaTTlEcUhrZ0tOTkpmNnRjQnpPcXl2RM3lKY1V4NklWU2RjR2hpTktQaFlPeUdaM01hSVhEdldCM21rYU5aaHpzMk9Qcz0tLTNaekRyNGJWbkhUQnMwVEYtLVMwRm1LYTJ2TVBFR2dtd3B2TDRTc1E9PQ""></div>
<div data-serialized-id="session-finished" data-serialized-value="false"></div>
<div data-serialized-id="receipt" data-serialized-value="{"exists":false,"status":null,"in_progress":null}"></div>
<div data-serialized-id="bugsnag-config"
<div data-serialized-id="autocomplete-sandbox" data-serialized-value=""https:\/\/checkout.shopify.com\/59158659227\/sandbox\/checkout_one_web_autocomplete""></div>
<div data-serialized-id="analytics-iframe-url" data-serialized-value=""https:\/\/yoga.com\/59158659227\/checkouts\/checkout_one_web_analytics""></div>
<div data-serialized-id="facebook-pixel-sandbox" data-serialized-value=""https:\/\/checkout.shopify.com\/59158659227\/sandbox\/checkout_one_web_facebook_pixel""></div>
<div data-serialized-id="additional-google-analytics-script-sandbox" data-serialized-value=""https:\/\/checkout.shopify.com\/59158659227\/sandbox\/checkout_one_web_additional_google_analytics_script""></div>
<div data-serialized-id="locale" data-serialized-value=""es-ES""></div>
<div data-serialized-id="deploy-stage" data-serialized-value=""production""></div>
<div data-serialized-id="request-id" data-serialized-value=""25d8faeb-f4f5-4aaf-ba68-9189747c3887""></div>
<div data-serialized-id="login-url" data-serialized-value="null"></div>
<div data-serialized-id="logout-url" data-serialized-value="null"></div>
<div data-serialized-id="internal-link-origins" data-serialized-value="["https:\/\/shop.app"]"></div>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/runtime.latest.es.86b6b287b2c21dd59197.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/vendors~app.latest.es.fd94d3a279887754e1f2.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information~Payment~ShopPay.latest.es.e7da95759e894bea7d6b.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/Information.latest.es.45caeef86ab72aaf2ff8.js" crossorigin="anonymous"></script>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/app.latest.es.019e1cf377ae8f2fa63e.js" crossorigin="anonymous"></script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这可能不是真正有助于解决问题的答案，但在这里我可以添加浏览器控制台的屏幕截图并编写比注释更多的文本：
您可能永远不会看到关于API的错误关键，那么你必须进一步挖掘可能存在的问题。
由于与 Ajax 相关的所有内容都是 JavaScript，因此浏览器控制台应该向您显示您需要的所有内容。
与字体有关的错误是 401 错误，这意味着
未经授权，也许当从服务器打开 html 文件时您永远不会看到它。与脚本本身不直接相关的一个问题可能是 CSP（内容安全策略） 的更改，这样 Shopify 服务器上就存在脚本，您也可以在浏览器中调用它，但不能将其包含在您自己的网站中。您也许可以通过调整这些脚本的标签来解决它，如果您发现任何迹象，欢迎在您的问题中指定相关问题。您也可以在浏览器控制台中看到这些问题。
此外，您可能会在 Shopify 网站 上为开发人员提供提示，我从未检查过他们提供的文档。
This is likely no answer that helps really to resolve the issue, but here I can add a screenshot of the browser-console and write more text than in the comments:
It might be possible that you never see the error about the API key, then you have to dig further what might be the problem.
As everything related to Ajax is JavaScript the browser console should show you everything you need.
The errors concerning the fonts are 401-errors which means
Unauthorized, perhaps you never see it when the html-file is opened from your server.One issue which is not directly related to the scripts themselves might be a changed CSP (Content Security Policy), so that a script is existing on the Shopify server and you can call it in the browser too, but you can't include it in your own website. You might be able to resolve it by adjusting the tags for these scripts, feel welcome to specify related problems in your question if you find any indications for it. Those issues too you can see in the browser console.
Furthermore you might get hints on the Shopify website for developers, I never checked the documents they offer.