EasyStore 新加坡店商平台,想要在網路上有個網頁販賣商品的商家應該不陌生,這邊來記錄一下佈景主題修改攻略,最近發現 EasyStore 的佈景主題有更新,雖然更新很多樣式,這批新增的主題其實都是一樣的,只有圖片不一樣😏(對我認為來說),也淘汰了一開始的舊主題,攻略開始!

在產品頁面說明內容添加手風琴 JS & CSS

在啟用的佈景主題點選”編輯原始碼”,進入原始碼編輯頁面,編輯 main-product.liquid 檔案,添加位置第188行吧😎產品說明區塊:<div class=”product-description product__description rte” itemprop=”description”>在這段HTML上面插入下面 CSS Style:

CSS
<style>
    .accordion {
	    cursor: pointer;
	    padding-left: 10px;
	    border-radius: 10px;
      	margin-bottom: 1px;
	    width: 100%;
	    text-align: left;
	    border: none;
	    outline: none;
	    background-color: #EEE;
	    transition: background-color 0.4s ease;
  }
 	.accordion h4 {
 		margin: 0;
 		padding-top: 10px;
    	padding-bottom: 10px;
    	
 	}
 	.panel.active {
    max-height: 100%; /* 修改為展開的高度 */
  }
   .accordion:hover {
    background-color: #f1f1f1;
  }
  .panel {
  	padding-left: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  }
    </style>

在下一行將 EasyStore 的代碼 {{ product.description }} 插入 HTML 將它包起來如下:

HTML
<div class="noah_item">
{{ product.description }}
</div>

產品說明區塊的結束標籤</div>後面插入下面手風琴 JS 程式碼:

JavaScript
<script>
  //JavaScript函數用於查找和替換標籤
  function replaceTags() {
    var elements = document.querySelectorAll("div.noah_item");
    elements.forEach(function(element, index) {
      var content = element.innerHTML;
      content = content.replace(/\[t\]/g, "<div class='accordion'>");
      content = content.replace(/\[\/t\]/g, "</div>");
      // content = content.replace(/\[c active\]/g, "<div class='panel active'>");
      content = content.replace(/\[c\]/g, "<div class='panel'>");
      content = content.replace(/\[\/\]/g, "</div>");
      element.innerHTML = content;
    });
  }
  // 初始化頁面時執行標籤替換
  replaceTags();
 var accordions = document.querySelectorAll("[class^='accordion']");
var panels = document.querySelectorAll(".panel");
for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
// 初始展開第一個手風琴
accordions[0].click();
</script>

插入對應標籤到產品說明內容中

檔案添加完程式碼後,就是在說明中添加手風琴對應的標籤,標題標籤[t][/t],內容標籤[c][/],在後台編輯器加上如下圖,加標籤時編輯器要切換程式碼編輯再切回來儲存,將需要產生手風琴的標題與內容用上面的標籤包起來,儲存後就可以在產品頁面看到收折的手風琴,如下圖:

總結

也該是總結了~!以上手風琴效果添加攻略到了尾聲,要看完成效果可以到這裡個連結,要注意一下文字編輯器的內容 HTML 的標籤太髒,會導致手風琴破版,尤其是從 Word 複製貼過來,會產生一堆雜碼,EasyStore 安裝擴充也有頁籤顯示效果可以使用,攻略就到這裡,使用愉快😜

最後修改日期: 2024 年 4 月 5 日

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。