Guides

User Reminder 顧客通知

Suggest Edits

Introduction

為了支援SHOPLINE新開發的功能 "Coupon Center 領券中心" 中的優惠券通知，並維持既有 會員推薦通知 之運作，對於有開啟Layout Engine的店家，需調整代碼以支援新功能。

更多資訊關於"Coupon Center 領券中心": https://support.shoplineapp.com/hc/zh-tw/articles/20748112984473

1. menu_panel.liquid

步驟一：找出要修改的程式碼

找到以下開頭的程式碼 <ul class="MenuPanel-mainMenu">

步驟二：刪除舊程式碼（Optional）

若在程式碼中看到 會員推薦通知 之程式碼（如下，可搜尋member_referral_reward_hint），請先將其整段刪除。
若沒有可忽略此步驟。

{% if member_referral_reward_hint %}
  <li class="List-item member-referral-customer-popup member-referral-customer-popup-mobile hidden">
    <a href="/users/sign_up" class="member-referral-link">
      <div class="fa fa-gift icon"></div>
      <div>{{member_referral_reward_hint}}</div>
    </a>
  </li>
{% endif %}

步驟三：加入新程式碼

在 <ul class="MenuPanel-mainMenu"> 後加入以下程式碼

{% user_reminder_mobile %}{% end_user_reminder_mobile %}

2. navigation_bar_desktop.liquid

步驟一：找出要修改的程式碼

找到以下開頭的程式碼 <ul class="NavigationBar-actionMenu nav-color">

步驟二：刪除舊程式碼（Optional）

若在程式碼中看到 會員推薦通知 之程式碼（如下，可搜尋member_referral_reward_hint），請先將其整段刪除。
若沒有可忽略此步驟。

{% if member_referral_reward_hint %}
   <div class="member-referral-customer-popup member-referral-customer-popup-desktop hidden">
     <div class="body">
       <div class="close-section">
         <div class="close-button"></div>
       </div>
       <div class="description">
         <img src="{{ system.static_asset_root }}/member-referral-popup-icon.svg" class="icon">
         <div class="text">{{member_referral_reward_hint}}</div>
       </div>
       <a href="/users/sign_up" class="action-button">
         {{ 'shopline_translations.themes.member_referral.sign_up' | translate }}
         </a>
     </div>
   </div>
 {% endif %}

步驟三：調整程式碼結構

原本的程式碼會將登入和未登入分開撰寫

{% if customer == blank %}
  <!-- Sign-in button -->
  <li class="List-item" style="position:relative;">
    <a href="/users/sign_in" class="NavigationBar-actionMenu-button nav-color">
      <svg class="icons icon-person">
        <use xlink:href="#icon-person"></use>
      </svg>
    </a>
  </li>

{% else %}
  <!-- Member Center button -->
  <li class="List-item">
    <a href="/users/{{ customer.id }}/edit" class="NavigationBar-actionMenu-button nav-color">
      <svg class="icons icon-person">
        <use xlink:href="#icon-person"></use>
      </svg>
    </a>
  </li>
{% endif %}

本改動將會把判斷的 if, else, endif 向內搬。先將 if 內移一層至 <a> 上方，並將下方的 {% else %} 到 {% endif %} 段落移至 </li> 上方

  <li class="List-item" style="position:relative;">
    {% if customer == blank %}
      <a href="/users/sign_in" class="NavigationBar-actionMenu-button nav-color">
        <svg class="icons icon-person">
          <use xlink:href="#icon-person"></use>
        </svg>
      </a>
    {% else %}
      <li class="List-item">
        <a href="/users/{{ customer.id }}/edit" class="NavigationBar-actionMenu-button nav-color">
          <svg class="icons icon-person">
            <use xlink:href="#icon-person"></use>
          </svg>
        </a>
      </li>
    {% endif %}
  </li>

最後將 {% else %} 到 {% endif %} 中的 <li> 和 </li> 這兩行刪除

  <li class="List-item" style="position:relative;">
    {% if customer == blank %}
      <a href="/users/sign_in" class="NavigationBar-actionMenu-button nav-color">
        <svg class="icons icon-person">
          <use xlink:href="#icon-person"></use>
        </svg>
      </a>
    {% else %}
    	<a href="/users/{{ customer.id }}/edit" class="NavigationBar-actionMenu-button nav-color">
        <svg class="icons icon-person">
          <use xlink:href="#icon-person"></use>
        </svg>
      </a>
    {% endif %}
  </li>

步驅四：加入新程式碼

在 </li> 上方加入 {% user_reminder_desktop %}{% end_user_reminder_desktop %}，完成後如下

<!-- Sign-in or Member Center -->
<li class="List-item" style="position:relative;">
  {% if customer == blank %}
    <a href="/users/sign_in" class="NavigationBar-actionMenu-button nav-color">
      <svg class="icons icon-person">
        <use xlink:href="#icon-person"></use>
      </svg>
    </a>
  {% else %}
    <a href="/users/{{ customer.id }}/edit" class="NavigationBar-actionMenu-button nav-color">
      <svg class="icons icon-person">
        <use xlink:href="#icon-person"></use>
      </svg>
    </a>
  {% endif %}
  {% user_reminder_desktop %}{% end_user_reminder_desktop %}
</li>

3. theme.css.liquid

將下列 css 加在檔案最下方，#c74060 為 ultra_chic 預設主色，可自行替換為其他色碼

/* mobile user reminder */
.basic-popover-mobile {
	 background-color: #c74060;
	 padding: 15px !important;
}
.basic-popover-mobile .member-referral-link {
	 display: flex;
	 align-items: center;
	 color: #fff !important;
}
.basic-popover-mobile .member-referral-link .icon {
	 margin-right: 12px;
	 font-size: 20px;
}
.basic-popover-mobile .member-referral-link:hover {
	 color: #fff !important;
}
.user-reminder-mobile .member-referral-link > * {
	 color: #fff;
}

/* desktop user reminder */
.basic-popover-desktop {
  position: absolute;
  background-color: #fff;
  width: 186px;
  height: auto;
  box-shadow: 3px 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), -1px -2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translate(-129px, 15px);
}
.basic-popover-desktop::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 1rem solid black;
  border-color: transparent transparent #fff #fff;
  top: 2px;
  left: 152px;
  transform-origin: 0 0;
  transform: rotate(135deg);
  box-shadow: -3px 3px 4px -3px rgba(0, 0, 0, 0.1);
}
.basic-popover-desktop .body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  height: 100%;
}
.basic-popover-desktop .body .close-section {
  cursor: pointer;
  display: flex;
  align-self: flex-end;
  padding: 5px;
  color: #A1A1A1;
}
.basic-popover-desktop .body .close-button {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 15px;
  right: 15px;
}
.basic-popover-desktop .body .close-button:before, .basic-popover-desktop .body .close-button:after {
  position: absolute;
  right: 11px;
  top: 6px;
  content: '';
  height: 14px;
  width: 1px;
}
.basic-popover-desktop .body .close-button:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.basic-popover-desktop .body .close-button:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.basic-popover-desktop .body .description {
  width: 112px;
  text-align: center;
  margin-bottom: 8px;
}
.basic-popover-desktop .body .description .icon {
  width: 81px;
  height: 77px;
}
.basic-popover-desktop .body .action-button {
  color: #fff;
  background-color: #c74060;
  border-radius: 0.5rem;
  padding: 7px;
  width: 156px;
  border: none;
  font-size: 14px;
  text-align: center;
}
.basic-popover-desktop .body .action-button:hover {
	color: #c74060;
  background-color: #fff;
}
@media screen and (max-width: 991px) {
  .basic-popover-desktop {
    transform: translate(-29px, 48px);
  }
}
@media screen and (max-width: 768px) {
  user-reminder-desktop {
    display: none;
  }
}

Updated 9 months ago