spongebob-smc Posted March 23, 2021 Share Posted March 23, 2021 (edited) Site URL: https://mouse-trout-epjy.squarespace.com/shop-all/p/thomas-wilson-cello-sonata-download OK, this is the problem I have: I have 300+ products on this site and I would like to add an accordion dropdown showing delivery info to all product pages. I have this code already working on other pages using JS and a markdown block: <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h3').css('cursor','pointer'); $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle(); $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();}); }); </script> I know that I can do this via the additional info section on products but obviously would need to do that 300+ times which is a pain. So I'm trying to figure out if there's a way I can add a markdown/code block class to all product pages so that every product page will automatically have it. It also means that my client will not have to add the code block when they add products. Any ideas? Thanks in advance 🙂 site pw: spong123 Edited March 23, 2021 by spongebob-smc Beyondspace 1 Link to comment
spongebob-smc Posted March 24, 2021 Author Share Posted March 24, 2021 12 hours ago, bangank36 said: You can use javascript to load the content from external page and append it into product description, or place the markdown block in footer (hidden) and move it to content using javascript Okay thanks, but the part I am unsure about is how to append it to all product descriptions? I am new to JS so not quite sure yet 🙂 Link to comment
spongebob-smc Posted March 30, 2021 Author Share Posted March 30, 2021 @tuanphan any ideas? Link to comment
tuanphan Posted March 31, 2021 Share Posted March 31, 2021 On 3/30/2021 at 7:32 PM, spongebob-smc said: @tuanphan any ideas? All products use same accordion dropdown or different? If same, we can add it in Footer, then use script code to move it into Product Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
spongebob-smc Posted April 1, 2021 Author Share Posted April 1, 2021 21 hours ago, tuanphan said: All products use same accordion dropdown or different? If same, we can add it in Footer, then use script code to move it into Product Same dropdown yes. This is a good idea to add it to footer but I don't know how to move it to product? Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 On 4/1/2021 at 8:17 PM, spongebob-smc said: Same dropdown yes. This is a good idea to add it to footer but I don't know how to move it to product? Hi. You can add it to Footer first, then share link to a product, we will give the code to move its position. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
spongebob-smc Posted April 5, 2021 Author Share Posted April 5, 2021 (edited) @tuanphan Okay I have added it to footer. Here is a link to product: https://mouse-trout-epjy.squarespace.com/shop-all/p/alasdair-nicolson-42nd-street-stomp-download The markdown starts with 'shipping information' and I'd like to position it under product details and before related products. Thank you! Edited April 5, 2021 by spongebob-smc Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 11 hours ago, spongebob-smc said: @tuanphan Okay I have added it to footer. Here is a link to product: https://mouse-trout-epjy.squarespace.com/shop-all/p/alasdair-nicolson-42nd-street-stomp-download The markdown starts with 'shipping information' and I'd like to position it under product details and before related products. Thank you! Add this code to Last Line in Code Injection Footer <script> $(document).ready(function() { $('div#page-section-5f4fa1503fcde16f12ffcd23>.row:first-child .span-12').insertAfter('.ProductItem .ProductItem-additional'); }); </script> and add this to Code Injection Header <style> body:not(.collection-type-products.view-item) div#page-section-5f4fa1503fcde16f12ffcd23>.row:first-child .span-12 { display: none; } </style> spongebob-smc 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
spongebob-smc Posted April 6, 2021 Author Share Posted April 6, 2021 That worked PERFECTLY! Thank you so much! Link to comment
therisejourney Posted December 11, 2023 Share Posted December 11, 2023 Hey all! Same issue - We have digital/services products (https://www.therisejourney.com/lunch-learn-programs/p/spoken-word-poetry) and where "💥 Reach out to our team to book your session! 💥" it currently links we'd like to instead inject a code box (from hubspot) so folks could download the pricing sheet rather than a link. Thoughts? Help? Thanks! Link to comment
tuanphan Posted December 13, 2023 Share Posted December 13, 2023 On 12/12/2023 at 12:09 AM, therisejourney said: Hey all! Same issue - We have digital/services products (https://www.therisejourney.com/lunch-learn-programs/p/spoken-word-poetry) and where "💥 Reach out to our team to book your session! 💥" it currently links we'd like to instead inject a code box (from hubspot) so folks could download the pricing sheet rather than a link. Thoughts? Help? Thanks! You can add Hubspot Code Block in Additional Info, then we can give code to move it to current position Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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