Display product tags on product page

Site URL: https://www.rookspress.com/products/babel

Hi,

Does anyone know if it is possible to use code injection and jquery to display a list of a product's tags on the product page?

Thanks,

Oz

5 hours ago, OzBrowning said:

Site URL: https://www.rookspress.com/products/babel

Hi,

Does anyone know if it is possible to use code injection and jquery to display a list of a product's tags on the product page?

Thanks,

Oz

You mean tag like this? And where you want to place them 

Hi, thanks for the response. I figured out how to do this last night, but it is a little slow.

I used jquery to get the json for the current page and then render the item.tags array as a list of HTML a elements, which I then add into the design using jquery .after.

I gave the resulting element a class so I can style it using custom css.

However this is quite slow, and I think there might be a quicker and easier method so I will keep investigating.

17 hours ago, OzBrowning said:

Hi, thanks for the response. I figured out how to do this last night, but it is a little slow.

I used jquery to get the json for the current page and then render the item.tags array as a list of HTML a elements, which I then add into the design using jquery .after.

I gave the resulting element a class so I can style it using custom css.

However this is quite slow, and I think there might be a quicker and easier method so I will keep investigating.

Thanks to creedon, using our method is quicker since it does not have to parse all the product content via JSON, just read the tag class and use string manipulation to format it

Thank you both for this! As you say, this is certain to be quicker. I will try to implement it today.

Oh, one problem with this method is that all the tags are lower case. This would be problematic for me because the tags are author names with varying capitalisation (e.g. a surname like McCoy).

I think I will have to stick to the JSON method, but thanks for this alternative which I expect will be very helpful for others searching for this information.

Quote

I think I will have to stick to the JSON method

As an alternative you might use the within page tag as a keyword into an author data structure.

const authorData = {

  'tag-david-blandy' : "David Blandy',
  'tag-real-mccoy' : 'Real McCoy'
  
  }

There is the downside of having to maintain the data but that seems a small price compared to the JSON loading.

I was trying to use the tags to reduce the amount of data maintenance to be honest. Previously I was manually adding author to the description and manually linking it to the tag.

Right now the JSON pull is adding a very small time to load, and it’s asynchronous anyway so the worst case is the author blinks in shortly after load. But generally it’s not noticeable. I think this is the best balance I’m going to find! 

Here's the code I created for my site to use tags on product pages to selectively be used as breadcrumbs - I use the header code injection at the store level to add this code to the site:

document.addEventListener('DOMContentLoaded', (event) => {
  try {
    let tags = Array.from(document.querySelector('.ProductItem').classList)
      .filter(clss => clss.startsWith('tag-'))
      .map(tag => tag.replace('tag-', ''));

    let newSpan = document.createElement('span');
    newSpan.classList.add('ProductItem-nav-breadcrumb-separator');
    let breadcrumbDiv = document.querySelector('.ProductItem-nav-breadcrumb');

const tagInfos = {
'eye-bee-m': { text: 'Eye Bee M', href: '/ideas/' },
'chatgpt': { text: 'ChatGPT', href: '/ideas/' },
'openai': { text: 'OpenAI', href: '/' },
'tensorflow': { text: 'TensorFlow', href: '/ideas/' },
'pytorch': { text: 'PyTorch', href: '/ideas/' }
};

    tags.forEach(tag => {
      let tagInfo = tagInfos[tag];

      if (tagInfo) {
        let newLink = document.createElement('a');
        newLink.textContent = tagInfo.text;
        newLink.href = tagInfo.href + tag;
        newLink.prepend(document.createTextNode(' '));
 newLink.append(document.createTextNode(' '));
        newLink.prepend(newSpan.cloneNode());

        breadcrumbDiv.insertBefore(newLink, breadcrumbDiv.children[1]);
      }
    });

  } catch(ex) {
    console.error(ex);
  }
});

Hope this helps as you can modify it to do many other things with tags.

On 7/16/2023 at 5:00 PM, stevedigital said:

Here's the code I created for my site to use tags on product pages to selectively be used as breadcrumbs - I use the header code injection at the store level to add this code to the site:

document.addEventListener('DOMContentLoaded', (event) => {
  try {
    let tags = Array.from(document.querySelector('.ProductItem').classList)
      .filter(clss => clss.startsWith('tag-'))
      .map(tag => tag.replace('tag-', ''));

    let newSpan = document.createElement('span');
    newSpan.classList.add('ProductItem-nav-breadcrumb-separator');
    let breadcrumbDiv = document.querySelector('.ProductItem-nav-breadcrumb');

const tagInfos = {
'eye-bee-m': { text: 'Eye Bee M', href: '/ideas/' },
'chatgpt': { text: 'ChatGPT', href: '/ideas/' },
'openai': { text: 'OpenAI', href: '/' },
'tensorflow': { text: 'TensorFlow', href: '/ideas/' },
'pytorch': { text: 'PyTorch', href: '/ideas/' }
};

    tags.forEach(tag => {
      let tagInfo = tagInfos[tag];

      if (tagInfo) {
        let newLink = document.createElement('a');
        newLink.textContent = tagInfo.text;
        newLink.href = tagInfo.href + tag;
        newLink.prepend(document.createTextNode(' '));
 newLink.append(document.createTextNode(' '));
        newLink.prepend(newSpan.cloneNode());

        breadcrumbDiv.insertBefore(newLink, breadcrumbDiv.children[1]);
      }
    });

  } catch(ex) {
    console.error(ex);
  }
});

Hope this helps as you can modify it to do many other things with tags.

This is awesome! I'm looking for a way to put the tag below the product title on the product page. Is it possible to modify this code to put it there?