Introduction

為了支援新功能「優惠活動首次購買條件可區分通路」以及「優惠活動支援 APP 適用通路」，對於有開啟 Layout Engine 商家需要調整程式碼以支援新功能，優惠活動頁展示首購限定條件、適用通路。

修改步驟

步驟一：確認套用的 theme 是否有支援此功能

Layout Engine 目前僅支援 UltraChic

步驟二：新增程式碼

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

檔案名稱：promotion_page.liquid

請到 promotion_page.liquid ，為優惠活動頁面增加首購限定和適用通路的文字展示支援。
搜尋程式碼 ng-bind-html="::getFormattedDateString ，該程式碼通常出現在第 22 行附近，找到後請在其下方新增以下程式碼區塊

<div ng-if="promotion.first_purchase_only" ng-bind-html="getFirstPurchaseOnlyText()"></div>

新增第二段程式碼，請搜尋 <div ng-bind-html="getPromotionSummary()" />，該程式碼出現在第 44 行附近，找到後請在下方新增以下程式碼區塊

<div class="available-platforms">{% raw %}{{'promotions.page.available_platform' | translate}}{% endraw %}
  <b>
    <ng-container ng-repeat="platform in availablePlatform">
      <span ng-if="$index > 0">/</span>
      <span ng-if="platform === 'selected_retail'"
        ng-click="showSelectedRetail()"
        class="show-selected-retail-button"
        ng-bind-html="'promotions.available_platform.' + platform | translate">
      </span>
      <span ng-if="platform !== 'selected_retail'"
        ng-bind-html="'promotions.available_platform.' + platform | translate">
      </span>
    </ng-container>
  </b>
</div>

以下為 promotion_page.liquid 修改後的範例（請勿直接複製此段落到你的檔案）

{{ 'page-promotions.css' | asset_source_tag: render_to_top: true }}
{{ 'page-categories.css' | asset_source_tag: render_to_top: true }}

<div class="ProductList-breadcrumb nav-bg-color hidden-xs">
  <div class="block-inner">
    <a class="Label" href="/products">{{ 'shopline_translations.themes.products.view_all' | translate }}</a>
    <span class="promotion-title dark-primary" ng-non-bindable>{{ promotion.title }}</span>
  </div>
</div>

{% if promotion.banner_media_url %}
  <div class="PromotionPage-banner">
    <img class="sl-lazy-image" alt="{{ promotion.banner_media_alt }}" src="{{ promotion.banner_media_url }}" />
  </div>
{% endif %}

<div class="PromotionInfo">
  <div class="PromotionInfo-icon">
    <img src="https://s3-ap-southeast-1.amazonaws.com/static.shoplineapp.com/web/assets/icon_promotion.svg" width="158" height="150" alt="promotion hint">
  </div>
  <div class="PromotionInfo-qualifications">
    <div ng-bind-html="::getFormattedDateString('promotions.page.end_at', '{{ end_date }}')"></div>
    <div ng-if="promotion.first_purchase_only" ng-bind-html="getFirstPurchaseOnlyText()"></div>
    <div>
      {% if promotion.requires_membership == true %}
        {% if promotion.membership_tiers.size >= 1 %}
          {% if shop.current_locale.code contains 'zh' %}
            <b>{{ promotion.membership_tiers | map: 'name' | join: '，' }}</b>
          {% else %}
            <b>{{ promotion.membership_tiers | map: 'name' | join: ', ' }}</b>
          {% endif %}
          {{ 'shopline_translations.themes.promotions.membership.only' | translate }}
        {% elsif is_specific_member %}
          {{ 'shopline_translations.themes.promotions.membership.specific_member_only' | translate }}
        {% else %}
          {{ 'shopline_translations.themes.promotions.membership.member_only' | translate }}
        {% endif %}
      {% else %}
        {{ 'shopline_translations.themes.promotions.membership.all' | translate }}
      {% endif %}
    </div>
  </div>
  <div class="PromotionInfo-summary">
    <div ng-bind-html="getPromotionSummary()"></div>
    <div class="available-platforms">{% raw %}{{'promotions.page.available_platform' | translate}}{% endraw %}
      <b>
        <ng-container ng-repeat="platform in availablePlatform">
          <span ng-if="$index > 0">/</span>
          <span ng-if="platform === 'selected_retail'"
            ng-click="showSelectedRetail()"
            class="show-selected-retail-button"
            ng-bind-html="'promotions.available_platform.' + platform | translate">
          </span>
          <span ng-if="platform !== 'selected_retail'"
            ng-bind-html="'promotions.available_platform.' + platform | translate">
          </span>
        </ng-container>
      </b>
    </div>
    {% if promotion.term != '' %}
      {% javascript_cloak %}
      {% show_on_ready %}
        <div class="show-term-button" ng-click="showTermModal('{{ promotion.term | escape }}')">
          {% raw %}{{ 'promotions.page.term.title' | translate }}{% endraw %}
        </div>
      {% end_javascript_cloak %}
    {% endif %}
  </div>
</div>

Note: 修改檔案完後請依照順序點選「保存」和「出版」

檔案名稱：page-promotions.css.liquid

請到 page-promotions.css.liquid 為新增文字區塊添加樣式，滾動到檔案最下方，並新增以下程式碼

.PromotionInfo-summary .available-platforms{
  font-weight: 500;
  .show-selected-retail-button{
    text-decoration: underline;
    cursor: pointer;
  }
}

Note: 修改檔案完後請依照順序點選「保存」和「出版」

下方為示意圖 (請注意此僅為示意圖，展示文字會依據您的設定而有所不同)
進入活動頁面，上方活動訊息欄位會增加適用通路欄位，如果該活動有設定首購限定，則會展示首購限定訊息