跨境电商Shopify的解决方案

Shopify背景介绍

什么是Shopify

程序员开发的一个电商平台，基于Ruby On Rails

是国外最大的独立商城平台，不限制产品，不限制品类，不限制数量，只需要完善和维护好每一个产品，并且为你的网站带来流量。

和国内淘宝，京东电商平台的不同:

类似淘宝和京东实在大流量的平台基础上开店，面临着高额的成本和同行的竞争。Shopify可以生成独立的电商网站，只需要为你的平台吸引流量即可

Shopify提供的能力

（1）店铺设计

（2）购物车

（3）店铺管理

（4）市场营销（宣传，折扣）

（5）产品管理

（6）虚拟主机服务

（7）移动端支持

（8）24小时支持

（9）支付功能

（10）插件开发

（11）订单管理

Shopify总结

优点：

Shopify对店铺设计的每个细节基本都能进行配置，所见即所得，可扩展性很强。

Shopfiy平台提供了丰富的应用对店铺自定义扩展，有完整的生态

缺点：

国内可参考的资料比较少，二次开发的配置较为繁琐

Shopify二开方式（推荐3种）

Shopify官网：https://www.shopify.cn/

shopify开发者地址：https://shopify.dev/

1.Apps

Shopify提供了丰富的Apps在线商城(https://apps.shopify.com/)。

也支持独立开发者开发定制化的App(https://shopify.dev/apps/getting-started)

例如查找Odoo对接插件：搜索Odoo,结果如下

总结：有现成的插件固然好，但投入生产有待测试和风险评估。自研App难度系数略高，需要学习成本。

2.线上代码

shopify的在线商店的每个页面都能进行代码层面的修改，以达到定制化的目的

进入shopify管理平台-》在线商店-》模板-》编辑-》编辑代码

代码如下 :

文件结构说明：

assets：img、js、scss 样式存放的地方即主题使用的所有资源，包括图像、样式表和javascript文件

config：一个settings_schema.json文件和一个settings_data.json文件。

layout：主题布局模板，默认情况下是theme.liquid。

locales：主题的翻译locale文件，为主题提供相关语言的内容。

sections：组成主题的一个个可复用的模块。

snippets：Liquid代码片段文件，这些代码片段可以在主题的其他模板中引用。

templates：包含所有其他的Liquid模板，包括用户账号相关的模板。

若你使用的是theme kit则还有一个文件config.yml

Liquid页面支持H5，CSS3和JS，可以在页面通过ajax调用后端接口，axios等方式理论上也可以，但还未验证。需要注意的是后端接口的地址都需要做域名映射，并有SSL认证，接口要做跨域处理。否则调用都会失败

总结：比较适合做页面渲染功能，在赤菟中可以增加3D效果，植入three.js

3.接口集成

shopify提供了丰富的接口给调用（https://shopify.dev/api/admin）

提供了.Net开发包-ShopifySharp：https://shopify.dev/apps/tools/api-libraries#third-party-admin-api-libraries

(1)引入Nuget包

(2).接口配置

myshopifyurl和shopifyaccesstoken,如下所示：

  "ShopifySettings": {
    "MyShopifyUrl": "https://15251611633.myshopify.com/", 
    "ShopAccessToken": "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" 
  }

(3).接口调试并封装

以订单查询为例：

创建订单服务实例：

  _orderService = new ShopifySharp.OrderService(_shopifySettings.MyShopifyUrl, _shopifySettings.ShopAccessToken);

获取订单列表：

public async Task<ListResult<Order>> GetOrderList()
 {
     return await _orderService.ListAsync();
 }

4.http请求-Graphql API

参考地址：https://documenter.getpostman.com/view/1522000/UVeGpkAw

A.加入购物车为例：

找到加入购物车方法：Add-To-Cart-Product

对应的请求如下：

curl --location --request POST 'https://jaipur-sale.myshopify.com/api/2022-01/graphql.json' \
--header 'X-Shopify-Storefront-Access-Token: 3063d271692e39e68a07a3640d357e56' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"mutation createCart($cartInput: CartInput) {\n  cartCreate(input: $cartInput) {\n    cart {\n      id\n      createdAt\n      updatedAt\n      lines(first:10) {\n        edges {\n          node {\n            id\n            merchandise {\n              ... on ProductVariant {\n                id\n              }\n            }\n          }\n        }\n\n      }\n      attributes {\n        key\n        value\n      }\n      estimatedCost {\n        totalAmount {\n          amount\n          currencyCode\n        }\n        subtotalAmount {\n          amount\n          currencyCode\n        }\n        totalTaxAmount {\n          amount\n          currencyCode\n        }\n        totalDutyAmount {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n}\n","variables":{"cartInput":{"lines":[{"quantity":5,"merchandiseId":"gid://shopify/ProductVariant/41425686757571"},{"quantity":2,"merchandiseId":"gid://shopify/ProductVariant/41425682235587"}]}}}'

本地打开postman,换成我们的post请求：

请求头如下：换成自己店铺的地址***.myshopify.com

请求内容Body如下:

{"query":"mutation createCart($cartInput: CartInput) {\n  cartCreate(input: $cartInput) {\n    cart {\n      id\n      createdAt\n      updatedAt\n      lines(first:10) {\n        edges {\n          node {\n            id\n            merchandise {\n              ... on ProductVariant {\n                id\n              }\n            }\n          }\n        }\n\n      }\n      attributes {\n        key\n        value\n      }\n      estimatedCost {\n        totalAmount {\n          amount\n          currencyCode\n        }\n        subtotalAmount {\n          amount\n          currencyCode\n        }\n        totalTaxAmount {\n          amount\n          currencyCode\n        }\n        totalDutyAmount {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n}\n","variables":{"cartInput":{"lines":[{"quantity":5,"merchandiseId":"gid://shopify/ProductVariant/41425686757571"},{"quantity":2,"merchandiseId":"gid://shopify/ProductVariant/41425682235587"}]}}}

对应截图，其中购物车内容换成具体变体的Id和对应的下单数量