跨境電商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和對應的下單數量
B.再以獲取購物車為例：
請求頭和請求內容如下：
返回購物車的結果，如下：
Shopify客服：
可以諮詢官方客服，但響應較慢
以上，僅用於學習和總結！