使用jQuery Ajax从Shopify获取数据的解决方案咨询

嘿，我太懂这种官方文档看得头大的感觉了——别慌，我给你拆解两个实用的方案，对应你要获取数据的不同场景：

这个API是Shopify专门给前端用的，不需要后端中转，安全性也有保障，适合展示公开的店铺内容。

步骤1：获取Storefront API访问令牌 #

• 登录你的Shopify店铺后台，进入「设置」→「应用和销售渠道」→「开发应用」
• 点击「创建应用」，给应用起个名字，然后在「配置Storefront API」里勾选你需要的权限（比如读取商品、读取集合）
• 拉到页面底部，点击「保存」，然后就能看到生成的Storefront API访问令牌了，把它存好。

步骤2：用jQuery Ajax调用API #

这里以GraphQL请求为例（比REST更灵活，能精准获取你要的字段）：

// 替换成你的店铺域名和令牌
const shopDomain = 'your-shop-name.myshopify.com';
const storefrontToken = 'your-storefront-access-token';

// 构造GraphQL查询，比如获取前3个商品的标题和价格
const query = `
  query {
    products(first: 3) {
      edges {
        node {
          title
          priceRange {
            minVariantPrice {
              amount
              currencyCode
            }
          }
        }
      }
    }
  }
`;

$.ajax({
  url: `https://${shopDomain}/api/2024-07/graphql.json`, // 注意API版本号，用最新稳定版就行
  method: 'POST',
  headers: {
    'Content-Type': 'application/graphql',
    'X-Shopify-Storefront-Access-Token': storefrontToken
  },
  data: query,
  success: function(response) {
    console.log('获取到的商品数据：', response.data.products.edges);
    // 这里可以处理数据渲染到页面
  },
  error: function(xhr, status, error) {
    console.error('请求出错：', error, xhr.responseText);
  }
});

如果习惯用REST API，也可以这么写（比如获取商品列表）：

$.ajax({
  url: `https://${shopDomain}/api/2024-07/products.json?limit=3`,
  method: 'GET',
  headers: {
    'X-Shopify-Storefront-Access-Token': storefrontToken
  },
  success: function(response) {
    console.log('商品数据：', response.products);
  },
  error: function(xhr, status, error) {
    console.error('请求失败：', error);
  }
});

Admin API权限很高，绝对不能直接在前端代码里暴露密钥（会导致店铺被恶意操作），所以必须通过你的后端做中转代理。

步骤1：获取Admin API凭证 #

• 同样在Shopify后台的「开发应用」里，创建或打开已有的应用，进入「配置Admin API权限」，勾选你需要的权限（比如读取订单、读取客户）
• 保存后，在「API凭证」页面可以拿到API密钥、API密码，还有你的店铺域名。

步骤2：搭建后端代理（以Node.js/Express为例） #

先写一个简单的后端接口，负责转发请求到Shopify Admin API：

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 替换成你的Admin API凭证和店铺域名
const shopifyDomain = 'your-shop-name.myshopify.com';
const adminApiKey = 'your-admin-api-key';
const adminApiPassword = 'your-admin-api-password';
const apiVersion = '2024-07';

// 前端调用的接口，比如获取订单列表
app.get('/api/shopify/orders', async (req, res) => {
  try {
    const response = await axios.get(
      `https://${adminApiKey}:${adminApiPassword}@${shopifyDomain}/admin/api/${apiVersion}/orders.json?limit=5`,
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );
    res.json(response.data);
  } catch (error) {
    res.status(error.response.status).json(error.response.data);
  }
});

app.listen(3000, () => {
  console.log('代理服务器运行在http://localhost:3000');
});

步骤3：前端用jQuery Ajax调用自己的后端接口 #

$.ajax({
  url: 'http://localhost:3000/api/shopify/orders',
  method: 'GET',
  success: function(response) {
    console.log('后台订单数据：', response.orders);
    // 处理数据逻辑
  },
  error: function(xhr, status, error) {
    console.error('请求出错：', error);
  }
});

• API版本号：Shopify的API会定期更新，建议用最新的稳定版（比如2024-07），避免旧版本失效。
• CORS问题：如果用Storefront API时遇到跨域错误，去Shopify后台的应用设置里，把你的前端域名添加到「允许的来源」列表里。
• 权限控制：不管是Storefront还是Admin API，只勾选你需要的最小权限，避免权限过大带来风险。

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