html 在Shopify中截断集合描述文本

aoyhnmkz 于 2023-03-06 发布在其他

关注(0)|答案(1)|浏览(112)

我正在尝试在Shopify商店的收藏描述中添加“阅读更多”和“阅读更少”按钮，如何添加液体状态的HTML？目前，{{ collection.description }}是collection.description模板中的唯一内容。HTML在店面上运行良好，但如何添加液体对象的HTML？

...

<p>text before Read More<span id="dots">...</span><span id="more">&nbsp;the remaining
        description</span></p>
<button id="myBtn" onclick="myFunction()">Read more</button>

<script>
    function myFunction() {
        var dots = document.getElementById("dots");
        var moreText = document.getElementById("more");
        var btnText = document.getElementById("myBtn");

        if (dots.style.display === "none") {
            dots.style.display = "inline";
            btnText.innerHTML = "Read more";
            moreText.style.display = "none";
        } else {
            dots.style.display = "none";
            btnText.innerHTML = "Read less";
            moreText.style.display = "inline";
        }
    }
</script>

...

Html

来源：https://stackoverflow.com/questions/69307531/truncating-collection-description-text-in-shopify

1条答案

按热度按时间

bihw5rsg1#

Go to liquid file open collection and paste these code.

<div class="truncate-container">
<div id="truncated-product-description">
  {{ collection.description | truncate: 40 }} <span id="read-more" class="read-additional">Read more</span>
</div>
<div id="product-description">
    {{ collection.description }} <span id="read-less" class="read-additional">Read less</span>
</div>
</div>
<style>
  #product-description {
    display:none;
  }
</style>
<script>
let read_more = document.getElementById('read-more')
let read_less = document.getElementById('read-less');
let truncated_description = document.getElementById('truncated-product-description');
let full_description = document.getElementById('product-description');

read_more.addEventListener('click', showHideDescription)
read_less.addEventListener('click', showHideDescription)

function showHideDescription(){
  let ID = this.id
  if(ID === "read-more"){
    truncated_description.style.display = "none";
    full_description.style.display = "block";
  }else {
    truncated_description.style.display = "block";
    full_description.style.display = "none";    
  }
}
</script>

赞(0）回复(0）举报 2023-03-06

我来回答

html 在Shopify中截断集合描述文本

1条答案

相关问题

热门标签

最新问答