如何在SvelteKit中发起JSONP请求获取Shopify购物车数据？

可行性确认 #

完全可行。Shopify的/cart.json接口支持JSONP请求，只需在URL后追加?callback=自定义回调名参数即可绕过CORS限制，完全适配你的需求。

SvelteKit中具体实现步骤 #

JSONP依赖浏览器的script标签加载机制，必须在客户端组件中实现（服务器端渲染阶段无法访问window对象），具体代码示例如下：

<script>
  import { onMount } from 'svelte';

  let cartCount = 0;
  let cartItems = [];

  // 封装JSONP请求工具函数
  function fetchCartData(callback) {
    // 生成唯一回调名，避免全局冲突
    const callbackId = `cartCallback_${Date.now()}`;
    const scriptEl = document.createElement('script');

    // 注册全局回调函数
    window[callbackId] = (cartData) => {
      callback(null, cartData);
      // 请求完成后清理资源
      delete window[callbackId];
      document.body.removeChild(scriptEl);
    };

    // 设置请求地址（替换为你的Shopify主域名）
    scriptEl.src = `https://your-shopify-store.myshopify.com/cart.json?callback=${callbackId}`;

    // 处理请求失败情况
    scriptEl.onerror = () => {
      callback(new Error('购物车数据加载失败'), null);
      delete window[callbackId];
      document.body.removeChild(scriptEl);
    };

    document.body.appendChild(scriptEl);
  }

  // 组件挂载后发起请求
  onMount(() => {
    fetchCartData((err, data) => {
      if (!err) {
        cartCount = data.item_count;
        cartItems = data.items;
      } else {
        console.error(err.message);
      }
    });
  });
</script>

<!-- 头部购物车数量展示 -->
<header>
  <nav>
    <span class="cart-badge">购物车: {cartCount}</span>
  </nav>
</header>

<!-- 侧边栏购物车商品列表 -->
<aside class="cart-sidebar">
  {#if cartItems.length}
    <ul>
      {#each cartItems as item}
        <li>
          <span>{item.title}</span>
          <span>× {item.quantity}</span>
        </li>
      {/each}
    </ul>
  {:else}
    <p>购物车暂无商品</p>
  {/if}
</aside>

额外注意事项 #

• 务必替换代码中的your-shopify-store.myshopify.com为你的实际Shopify主域名。
• JSONP仅支持GET请求，刚好匹配/cart.json的请求方式，满足获取购物车数据的需求。
• 若需要实时同步购物车状态（比如用户在主域名操作购物车后，子域名自动更新），可以结合postMessage实现跨域名通信：在Shopify主域名的主题代码中监听购物车变更事件，通过window.postMessage发送更新数据；子域名的SvelteKit项目监听message事件，接收数据并更新组件状态。

内容的提问来源于stack exchange，提问作者pusle