Guides
Start typing to search…

[即將上線] 部落格重構 - 在部落格文章中添加相關商品

Introduction

支援在部落格文章中放置相關商品，相關商品展示規則請參考以下範例

  • 桌機端一行展示四個相關商品
  • 手機端一行展示兩個相關商品
  • 至多展示八個相關商品

桌機端一行展示四個商品

手機端一行展示兩個商品


修改步驟

步驟一：確認網店套用的店面版型是否有支援此功能

在部落格頁面加上相關商品僅支援以下版型，修改之前請先確認目前套用的版型有無支援：

  • Ultra Chic
  • Kingsman
  • Varm
  • Philia
  • Sangria
  • Bianco
  • Dusk
  • Skya
  • Doris Bien


步驟二：新增程式碼

以下是您需要新增程式碼的操作步驟，請依照描述和示例，找到指定檔案後新增程式碼：


A. 檔案名稱：post.liquid

  1. 引入對應腳本文件

請至檔案 post.liquid 上層引入腳本文件，加入 {{ 'post_related_products.js' | asset_source }}

...
{{ 'post_related_products.js' | asset_source }}
<div class="block-inner">
  <div class="pd-box">
    <div class="container">
      ...
    </div>
  </div>
</div>
  1. 請複製以下程式碼
{% if shop.features contains 'blog_revamp_related_products' and products.size > 0 %}
  <div class="ProductDetail-relatedProducts">
    <h3 class="ProductDetail-relatedProducts-title primary-border-color-after">
      {{ 'shopline_translations.themes.products.related_products' | translate }}
    </h3>
    <div class="ProductDetail-relatedProducts-list">
      {% for product in products %}
        {% if theme.settings.enabled_quick_cart or shop.features contains 'plp_wishlist' and theme.settings.plp_wishlist %}
          {% quick_product_thumb %} {% end_quick_product_thumb %}
        {% else %}
          {% product_thumb %} {% end_product_thumb %}
        {% endif %}
        <script type="application/json" id="product-info-{{ product.id }}">
          {
            "status": {{ product.sold_out }},
            "rank": {{ forloop.index }}
          }
        </script>
      {% endfor %}
    </div>
  </div>
{% endif %}
  1. 找到指定位置，並添加上述程式碼至以下位置
  • 找到 元素<div class="container"> 並添加上述程式至元素最底下
<div class="block-inner">
  <div class="pd-box">
    <div class="container">
      ...
      添加程式碼至此
    </div>
  </div>
</div>
  • 完整範例
<div class="block-inner">
  <div class="pd-box">
    <div class="container">
      ...
      {% if shop.features contains 'blog_revamp_related_products' and products.size > 0 %}
        <div class="ProductDetail-relatedProducts">
          <h3 class="ProductDetail-relatedProducts-title primary-border-color-after">
            {{ 'shopline_translations.themes.products.related_products' | translate }}
          </h3>
          <div class="ProductDetail-relatedProducts-list">
            {% for product in products %}
              {% if theme.settings.enabled_quick_cart or shop.features contains 'plp_wishlist' and                      theme.settings.plp_wishlist %}
                {% quick_product_thumb %} {% end_quick_product_thumb %}
              {% else %}
                {% product_thumb %} {% end_product_thumb %}
              {% endif %}
              <script type="application/json" id="product-info-{{ product.id }}">
                {
                  "status": {{ product.sold_out }},
                  "rank": {{ forloop.index }}
                }
              </script>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>

以上步驟中的代碼均為範例，具體代碼結構、樣式、腳本、實現方式，開發者可自行調整。



B. 添加語系檔案 - 檔案名稱：en.json(若無 en.json 可跳過此步驟)


  1. 找到 shopline_translations 區塊，並按照以下指示添加以下語系程式碼
"related_products": "Related Products"
  • 曾經在 shopline_translations 中添加過 blog 區塊的語系，則請在底下新增上述語系程式碼

Note: 添加完成後如下圖，請確保在"related_products": "Related Products" 的上一行尾端有加上 ,

  • 若從未在 shopline_translations 中添加過 blog 區塊的語系，則請在底下新增上述語系程式碼

C. 添加語系檔案 - 檔案名稱：vi.json (若無 vi.json 可跳過此步驟)

  1. 找到 shopline_translations 區塊，並按照以下指示添加以下語系程式碼
"related_products": "Related Products"
  • 曾經在 shopline_translations 中添加過 blog 區塊的語系，則請在底下新增上述語系程式碼

Note: 添加完成後如下圖，請確保在"related_products": "Related Products" 的上一行尾端有加上 ,

  • 若從未在 shopline_translations 中添加過 blog 區塊的語系，則請在底下新增上述語系程式碼

D. 添加語系檔案 - 檔案名稱：zh-hant.json 若無 zh-hant.json 可跳過此步驟)

  1. 找到 shopline_translations 區塊，並按照以下指示添加以下語系程式碼
"related_products": "相關產品"
  • 曾經在 shopline_translations 中添加過 blog 區塊的語系，則請在底下新增上述語系程式碼

Note: 添加完成後如下圖，請確保在"related_products": "Related Products" 的上一行尾端有加上 ,

  • 若從未在 shopline_translations 中添加過 blog 區塊的語系，則請在底下新增上述語系程式碼

Updated about 1 month ago