Question 11973 in Shopify Question posted in
The Shopify help center can be found here.

jQuery Find not working with HTML template – Shopify

I have a Shopify liquid I load into HTML Template

<script type="text/template" id="description">
  <div class="product-ddd">
    {{ product.description }}
  </div>

</script>
<script>
  $("#description").each(function() {
    console.log($(this).html());
  });
</script>

For some reason, find is not working

<script>
  $("#description").find('h4').each(function() {
    console.log($(this).html());
  });
</script>

This is what {{ product.description }} returns

<div class="product-ddd">
  <h4>DETAILS &amp; DIMENSIONS</h4>
  <p>A trendy fashion-forward look has never been so comfortable. This full-length maxi dress for women is a must-have year-round style. Featuring a lovely scoop neckline, elbow-length sleeves, full A-line skirt, ankle-length hemline, and it is made from
    a soft comfortable stretch material. Pair this maxi dress with a denim or leather jacket for a stylishly edgy look. Available in four stylish colors and it is machine washable for easy care. Made in the USA from a comfortable stretch material.
  </p>
  <h4>FABRIC CONTENT &amp; CARE</h4>
</div>

This is the final Script Template

<script type="text/template" id="hesdsdllo">
  <div class="product-ddd">
    <h4>DETAILS &amp; DIMENSIONS</h4>
    <p>A trendy fashion-forward look has never been so comfortable. This full-length maxi dress for women is a must-have year-round style. Featuring a lovely scoop neckline, elbow-length sleeves, full A-line skirt, ankle-length hemline, and it is made from
      a soft comfortable stretch material. Pair this maxi dress with a denim or leather jacket for a stylishly edgy look. Available in four stylish colors and it is machine washable for easy care. Made in the USA from a comfortable stretch material.
      <br
        data-mce-fragment="1">&nbsp;</p>
    <h4>FABRIC CONTENT &amp; CARE</h4>
  </div>
</script>
Tags:

2

Answers


  1. 0

    Are you sure the template parser replaces {{ product.description }} only? I suspect it replaces the whole <script></script> block. Try this way:

    $(".product-ddd h4").each(function(){
    console.log($(this).html());
});
    Login or Signup to reply.
  2. 0

    The issue is because the <script> tag is of type="text/template". This means that the HTML within it is not rendered as part of the DOM, but instead treated as plain text.

    Therefore, to get the content from it, you need to parse the string to create a DOM from it and then use jQuery (or plain JS) methods to retrieve whatever values you need from it. Try this:

    let htmlTemplate = $("#description").text();
$(htmlTemplate).find('h4').each(function() {
  console.log($(this).html());
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/template" id="description">
  <div class="product-ddd">
    <h4>DETAILS &amp; DIMENSIONS</h4>
    <p>A trendy fashion-forward look has never been so comfortable. This full-length maxi dress for women is a must-have year-round style. Featuring a lovely scoop neckline, elbow-length sleeves, full A-line skirt, ankle-length hemline, and it is made from
      a soft comfortable stretch material. Pair this maxi dress with a denim or leather jacket for a stylishly edgy look. Available in four stylish colors and it is machine washable for easy care. Made in the USA from a comfortable stretch material.
    </p>
    <h4>FABRIC CONTENT &amp; CARE</h4>
  </div>
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search