EasyStore 新加坡店商平台，想要在網路上有個網頁販賣商品的商家應該不陌生，這邊來記錄一下佈景主題修改攻略，最近發現 EasyStore 的佈景主題有更新，雖然更新很多樣式，這批新增的主題其實都是一樣的，只有圖片不一樣😏(對我認為來說)，也淘汰了一開始的舊主題，攻略開始！
在產品頁面說明內容添加手風琴 JS & CSS
在啟用的佈景主題點選”編輯原始碼”，進入原始碼編輯頁面，編輯 main-product.liquid 檔案，添加位置第188行吧😎產品說明區塊：<div class=”product-description product__description rte” itemprop=”description”>在這段HTML上面插入下面 CSS Style：
<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 將它包起來如下：
<div class="noah_item">
{{ product.description }}
</div>產品說明區塊的結束標籤</div>後面插入下面手風琴 JS 程式碼：
<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 安裝擴充也有頁籤顯示效果可以使用，攻略就到這裡，使用愉快😜
留言