OzBrowning Posted March 28, 2021 Share Posted March 28, 2021 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 Beyondspace 1 Link to comment
Beyondspace Posted March 29, 2021 Share Posted March 29, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
OzBrowning Posted March 29, 2021 Author Share Posted March 29, 2021 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. Beyondspace 1 Link to comment
Solution creedon Posted March 29, 2021 Solution Share Posted March 29, 2021 Quote I figured out how to do this last night, but it is a little slow. As bangank36 mentioned you can get the tags from within the page. let tags = $( '#productWrapper' ) .attr ( 'class' ) .split ( ' ' ) .filter ( clss => clss.startsWith ( 'tag-' ) ); Let us know how it goes. paul2009 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Beyondspace Posted March 30, 2021 Share Posted March 30, 2021 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 creedon 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
OzBrowning Posted March 30, 2021 Author Share Posted March 30, 2021 Thank you both for this! As you say, this is certain to be quicker. I will try to implement it today. Link to comment
OzBrowning Posted March 30, 2021 Author Share Posted March 30, 2021 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. Beyondspace 1 Link to comment
creedon Posted March 31, 2021 Share Posted March 31, 2021 (edited) 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. Edited April 1, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
OzBrowning Posted March 31, 2021 Author Share Posted March 31, 2021 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! Beyondspace and creedon 2 Link to comment
stevedigital Posted July 16 Share Posted July 16 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. E-W 1 Link to comment
E-W Posted Wednesday at 01:33 PM Share Posted Wednesday at 01:33 PM 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? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment