Shopify 结账页面checkouts.liquid添加一个交叉推荐加购产品（适用于shopify plus）

在Shopify 结账页面checkouts.liquid添加一个交叉推荐加购产品（适用于shopify plus）

用到两个模板文件:
settings_schema.json 、checkout.liquid
为了方便管理使用这里用到一个元字段的应用插件：Metafields Guru。

1. 在主题模板中配置几个基础字段的内容信息引用：
   
   实现代码：

{
    "name": "Will: Checkout Product Cross Sell",
    "settings": [
      {
        "type": "checkbox",
        "id": "will_crosssell_enable",
        "label": "开启结账页交叉销售推荐",
        "default": false
      },
      {
        "type": "text",
        "id": "will_crosssell_header",
        "label": "标题",
        "info": "Other customer's favorite items"
      },
      {
        "type": "text",
        "id": "will_crosssell_text",
        "label": "提示文案",
        "info": "Limite-time sale! (CODE: HTG7) Unlock extra f30 savings with our hottest picks."
      },
      {
        "type": "text",
        "id": "will_crosssell_btn",
        "label": "按钮文案",
        "info": "Add to cart",
        "default": "Add to cart"
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在应用插件Metafields Guru中添加相应的产品信息调用
Metafields Guru - Shop - Metafields 添加对应展示加购产品：
Type: JSON Namespace: cross_sell_products Key: item
Eg:

[{"id":41614540406989,"image":"https://us.ciarraappliances.com/cdn/shop/files/1_1.jpg?v=1686299346","title":"Ciarra HOOD TO GO Portable Mini Desktop Range Hood Shadow Noir","price":"$169.99"},{"id":41651319046349,"image":"https://us.ciarraappliances.com/cdn/shop/files/CiarraHOODTOGOPortableMiniDesktopRangeHoodOrange-1.jpg?v=1686283393","title":"Ciarra HOOD TO GO Portable Mini Desktop Range Hood Orangina","price":"$169.99"}]
1

2. checkout.liquid实现功能代码：

         <!--  start cross sell by leo  20230919   -->
          {% if settings.will_crosssell_enable == true %}
          <div class="will-crosssell-adddiv" style="display:none;">
          <div class="will-crosssell">
            <h3>{{settings.will_crosssell_header}}</h3>
            <p>{{settings.will_crosssell_text}}</p>
            <div class="will-crosssell-list">
              {% for product_item in shop.metafields.cross_sell_products.item %}
                <div class="will-crosssell-item">
                  <div class="will-crosssell-item-img">
                    <img src="{{product_item.image}}" />
                  </div>
                  <div class="will-crosssell-title">{{ product_item.title }}<br><sqan class="will--crosssell-price">{{ product_item.price }}</sqan></div>
                  <div class="will-crosssell-btn"><button onclick="addToCart('{{ product_item.id }}')">{{settings.will_crosssell_btn}}</button></div>
                </div>
              {% endfor %}
              </div>
          </div>
          </div>
        <style>
          .will-crosssell{
             display:block;
             margin-bottom: 20px;
             border-top: 1px rgba(0,0,0,0.1) solid;
             padding-top: 2em;
          }
          .will-crosssell-list{
            margin-top: 1em;
          }
          .will-crosssell-item{
             display: flex;
             flex-wrap: nowrap;
             align-items: center;
             margin-bottom: 1rem;
             border: 1px rgba(0,0,0,0.1) solid;
             border-radius: 8px;
             padding: 1em;
          }
          .will-crosssell-item-img{
            max-width: 70px;
          }
         .will-crosssell-item-img img {
            width: 100%;
            border-radius: 8px;
            background: #fff;
            position: relative;
           border: 1px rgba(0,0,0,0.1) solid;
          }
          .will-crosssell-title{
            color: #313131;
            font-weight: 500;
            text-align: left;
            padding-left: 1em;
          }
          .will-crosssell-btn{
            padding-left: 1em;
          }
          .will-crosssell-btn button{
            border-radius: 8px;
            border: 1px rgba(0,0,0,0.1) solid;
            width: 5em;
            height:3em
          }
        </style>
        <script>
          try{
            // 获取要添加的内容
            const willCrosssellContent = document.querySelector('.will-crosssell-adddiv').innerHTML;
            // 获取要添加内容的目标位置
            const sidebarContent = document.querySelector('.order-summary__sections');
            // 将内容添加到目标位置
            sidebarContent.innerHTML += willCrosssellContent;
            
            function addToCart(productId) {
              var formData = new FormData();
              formData.append('id', productId);
              formData.append('quantity', 1);
          
              fetch('/cart/add.js', {
                method: 'POST',
                body: formData
              })
              .then(response => response.json())
              .then(data => {
                // 处理添加到结算列表的响应
                console.log(data);
                window.location.reload()
              })
              .catch(error => {
                // 处理错误
                console.error(error);
              });
            }
          }catch(e){}
        </script>
      {% endif %}
      <!--  end  cross sell by leo  -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

3. 最终实现的效果：