Replacing Text with Javascript on Shopify Cart Page

Question

In this store - https://commonfibers.com/cart - there's a private app that is creating line item properties on some products. Example - https://gyazo.com/aa86c0696b406e5c128df7640f353c7f .

I want to clean up the display of the line item properties. So this text: Art: 'Art - Blank (e9bd8c48c4134298bb9013bb595d8c6b)' would instead look like this: Art: 'Art - Blank'

I have created this.liquid file:

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var divArt = document.getElementsByClassName('property-Art');
    var text = divArt.innerText;
    for (var i = 0; i < divArt.length; i++) {
      var text = divArt[i].innerText;
      console.log("Beginning text - " + text);
      text = text.replace(/\s*\(.*?\)\s*/g, '');
      console.log("Processed text - " + text);
      console.log("innerText - " + divArt[i].innerText);
    };
  }, false);

</script>

And its working in that it removes the unwanted content. What I'm stuck on is how to insert the processed text back into the DOM so it shows up in the browser. I can see the replace logic works as I'm console.log it - https://gyazo.com/6f3aed206ccd08343dc50415c8dcae01 . But my efforts to get it to display to the user have failed so far.

Thanks!

Answer 1

You need to assign the result text back to something. Try adding this at the end of your function:

divArt[i].innerText = text;