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