Jump to content

How to add a code block class to all product pages

Recommended Posts

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 by spongebob-smc
Link to comment
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
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
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>

 

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
  • 2 years later...

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
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.