When Product Title has HTML tags in it!

Created by Amanchi Madhav, Modified on Fri, 10 Nov 2023 at 07:51 PM by Amanchi Madhav

This is an unusual case but I've seen it happen with a few stores. The Product title might have some HTML tags on a few stores which will be rendered as text in our UI.
Here is an example:

Here the title has a <sup> tag. This will be fetched from Shopify to be displayed in the Wishlist UI if this product is wishlisted. The problem here is that the Wishlist UI expects the title to be a string and not an HTML element. So, when we fetch this from Shopify, we consider this value as a string and hence, the UI looks something like this:

The <sup> will be added as text. Not something we would want. Same thing happens even in the More details page that comes up when clicked on the product tile.

SOLUTION:

1. Create a snippet file called swym-title-fix.liquid(any other name works).

2. Add the below code in the file:

<script defer>

  function swymupdateproducttitle(){
    const productTitleElements = document.querySelectorAll(".swym-title-1");

    productTitleElements.forEach((element) => {
        element.innerHTML = element.innerText;
    })
  }

  function addswymEventListener(){
    const productTileElements = document.querySelectorAll(".swym-wishlist-item");
     productTileElements.forEach((element) => {
       element.addEventListener('click', (e)=>{
            setTimeout(function(){
               const swymBackButton = document.querySelector(".swym-back-btn");
               swymBackButton.addEventListener('click', (e)=>{
                  swymupdateproducttitle();
                  addswymEventListener();
               });
               swymupdateproducttitle();
            },100);
        })
     })
    
  }

  
  function swymCallbackFn(swat){

    swymupdateproducttitle();
    addswymEventListener();
    
    setTimeout(function(){
      swymupdateproducttitle();
      addswymEventListener();
    }, 3000);
    
  }

  if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);

</script>

3. Add this line of code in theme.liquid:

{% include swym-title-fix %}

This will fix the issue.