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 安裝擴充也有頁籤顯示效果可以使用,攻略就到這裡,使用愉快😜
留言