EZFY Debut theme Read More snippet. Copy into snippets/ezfy-read-more.liquid. No app.

ezfy-debut-read-more.liquid

{% comment %}

Made by ezfycode.com

→ Freebies & Premium plugins:

ezfycode.com/shop

==

Debut Read More 1.1.0;

Version 1.1.0:
- Fixed minor issue with button

{% endcomment %}



  {% if template contains 'product' %}
<script>
  
  
window.ezfyReadMore = window.ezfyReadMore || {};

ezfyReadMore = (function () {
  
  const VIEW_MORE_TEXT = `View More`;
  const VIEW_LESS_TEXT = `View Less`;
  const DESCRIPTION_BLOCKED_CLASS = `product-description--blocked`;
  const MIN_HEIGHT = 250; //if the description is smaller than this, do not hide



  function _isProductPage() {
    return /product/.test(window.location.href);
  }



  function _waitForElement(selector, delay = 50, tries = 250) {
    const element = document.querySelector(selector);

    if (!window[`__${selector}`]) {
      window[`__${selector}`] = 0;
    }

    function _search() {
      return new Promise((resolve) => {
        window[`__${selector}`]++;
        setTimeout(resolve, delay);
      });
    }

    if (element === null) {
      if (window[`__${selector}`] >= tries) {
        window[`__${selector}`] = 0;
        return Promise.reject(null);
      }

      return _search().then(() => _waitForElement(selector));
    } else {
      return Promise.resolve(element);
    }
  }

  function _addStyle(styleString) {
    const style = document.createElement("style");
    style.textContent = styleString;
    document.head.append(style);
  }
  

  
  function blockDescription(){
  const $description = document.querySelector(`.product-description, .product-single__description`);

    if (!$description){
    	return
    }
    
    const height = $description.offsetHeight;
    
    if (height <= MIN_HEIGHT){
    	return;
    }
	
    $description.classList.add(DESCRIPTION_BLOCKED_CLASS);
    
    _addReadMoreButton($description);
  }
  
  async function _addReadMoreButton($description){
   	const buttonHTML = `<button id="ReadMoreEzfyButton" class="btn ReadMoreEzfy">Read More</button>`;
    
    $description.insertAdjacentHTML(`beforeend`, buttonHTML)
    
    const $button = await _waitForElement(`#ReadMoreEzfyButton`);
    
    $button.addEventListener('click', function(){
      
      	const isBlocked = [...$description.classList].includes('product-description--blocked');
      
      if (isBlocked){
      	$description.classList.remove(DESCRIPTION_BLOCKED_CLASS);
        $button.textContent = VIEW_LESS_TEXT;
      } else{
        $description.classList.add(DESCRIPTION_BLOCKED_CLASS);
        $button.textContent = VIEW_MORE_TEXT;
      }


    });
	
  }

  return {
    init: function () {
             
      document.addEventListener("DOMContentLoaded", function () {
 

        if (_isProductPage()){
        blockDescription();
        }

      });

      window.addEventListener("resize", function () {});

      window.addEventListener("load", function () {});

      window.addEventListener("scroll", function () {});
    },
  };
})();

ezfyReadMore.init();
</script>


<style>
  .product-description, 
  .product-single__description{
  	position: relative;
  }
  
  .product-description--blocked{
    position: relative;
    overflow: hidden;
    height: 200px;
       
  }


  .product-description--blocked:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 0;
     box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.6);
    pointer-events: none;
  }

  .product-description--blocked .ReadMoreEzfy{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  
  .ReadMoreEzfy{
      display: block;
    margin: 0 auto;
  }

</style>

{% endif %}


<script>
  /*ezfyignore*/
    function feedback() {
    var e = [
      "background: linear-gradient(-47deg,#8731e8,#4528dc)",
      "border: 1px solid #3E0E02",
      "color: white",
      "display: block",
      "text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)",
      "box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset",
      "line-height: 40px",
      "text-align: center",
      "font-weight: bold",
      "padding: 0px 5px",
    ].join(";");

    function r(e) {
      return (e + "").replace(/&#\d+;/gm, function (e) {
        return String.fromCharCode(e.match(/\d+/gm)[0]);
      });
    }
    var n = r(
      `&#34;&#82;&#101;&#97;&#100;&#32;&#77;&#111;&#114;&#101;&#34;&#32;&#102;&#111;&#114;&#32;&#116;&#104;&#101;&#32;&#68;&#101;&#98;&#117;&#116;&#32;&#84;&#104;&#101;&#109;&#101;&#32;&#98;&#121;&#32;&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#101;&#122;&#102;&#121;&#99;&#111;&#100;&#101;&#46;&#99;&#111;&#109;`,
    );
    console.log(`%c ${n}`, e); /* `*/
  }
feedback();
</script>