How to add accordion functionality into product description ?!

On 1/4/2022 at 11:45 AM, jpeter said:

@ellerxyz Yeah, the original references the description. Here's some new JS code that will rely on the cart button and place the accordion above it:

(function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var cartButton = document.querySelector('.sqs-add-to-cart-button-wrapper');                    
  
  if(accordion && cartButton) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    
    // Add accordion before the cart button.
    cartButton.before(accordion);
  }
})()

 

Thank you so much this is what I was also looking for!! Now I tried adding it to the original code like this:

<script>
(function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var description = document.querySelector('.ProductItem-details-excerpt');                    
  
  if(accordion && description) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    
    // Add accordion after the description.
    description.after(accordion);
   
  }
})()
  
  (function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var cartButton = document.querySelector('.sqs-add-to-cart-button-wrapper');                    
  
  if(accordion && cartButton) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    
    // Add accordion before the cart button.
    cartButton.before(accordion);
  }
})()
</script>

That didn't work so I was wondering how do I add those lines of codes to move the cart button below the description but above the accordian?

Thanks you guys have been amazing to us who don't know much about code lol!

13 hours ago, Indi said:

That's so weird I have looked on both Safari and Chrome and it's still displaying at the bottom for me. Do you have any clue why that might be?

When you are viewing are you in private browsing? If the answer is yes then I don't have a clue.

If you are in Squarespace preview then it may be the elements you are targeting with the code are not there. There are some differences in how the page is structured when it is being edited and when not.

In general what is apparent is for some reason the code is not running, is broken somehow, or is not targeting the right elements in some cases.

Quote

How would I remove the additional info padding?

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem-additional {
  
    padding-top : 0;
    
    }
    
  </style>

Let us know how it goes.

@jpeter Do you have any idea why moving the accordion up under the description has suddenly stopped work even when viewing in private browser?

https://www.rotaterecordings.com/electronic/atoms-for-peace-amok

I've worked out it does work when I re-load the page?

Thanks!

@Indi

Try the following code.

<script>

  Squarespace.onInitialize ( Y, ( ) => {
  
    var accordion = document.querySelector('.ProductItem-additional');
    var description = document.querySelector('.ProductItem-details-excerpt');                    
  
    if(accordion && description) {
      // Remove accordion from current position.
      accordion.parentNode.removeChild(accordion);
    
      // Add accordion after the description.
      description.after(accordion);
    }
  
    } );
    
  </script>

Let us know how it goes.

@creedon that worked! Thank you very much, true life saver.

I tried adding this to the shop page > advanced> page header code injection,  but I don't think it made much of a difference. Not a big deal.

https://www.rotaterecordings.com/hip-hop/6txbuqcc01qvoekw2fjw8s1t9pcz5g-dg7y3-adwys-46k56-xcl2k-f6cj4-g59zz-8n5l2-8jhzd

I only added it so far to the Hip Hop category.

<style>

  .ProductItem-additional {
  
    padding-top : 0;
    
    }
    
  </style>

10 hours ago, Indi said:

but I don't think it made much of a difference.

The code is making a difference.

Without the code.

With the code.

Hey Ive been looking through this thread and this is the code im looking for. When i put it into my css with the script thing at the top and bottom it just says syntax error line 5. Im a total noob with code and idk why its not working. Some help would be appreciated thanks!

On 5/19/2022 at 3:24 AM, izzisbeads said:

When i put it into my css with the script thing at the top and bottom it just says syntax error line 5.

The script code needs to go in a different location than the CSS. Design > Custom CSS doesn't understand HTML, which is the code starting with <script> and ending with </script>.

The script code needs to go in Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

Let us know how it goes.

I did that yeah and it worked thanks! very new to this. do you know how I could edit this code to made the accordian appear under the picture as opposed to under the description?

On 5/30/2022 at 5:46 AM, izzisbeads said:

I did that yeah and it worked thanks! very new to this. do you know how I could edit this code to made the accordian appear under the picture as opposed to under the description?

 

Can you share link to a product where you added accordion? We can help easier

Just wanted to share this as I was looking for a solution. Thank you @squarepaste

https://squarepaste.com/blog/squarespace-accordion-block-in-product-description

Quote

 

1. While editing your product, go to the Additional Info section and add an Accordion Block.

2. Underneath the Accordion Block, add an Embed Block or Code Block. Use an Embed Block if you are on a personal plan; if you are on a business plan or higher, then you can use a Code Block.

3. Copy the code below and paste it into the Embed or Code Block

<script src="https://storage.googleapis.com/squarepaste/base-jquery.js"></script> <script>$(".accordion-block").appendTo(".ProductItem-details-excerpt");</script>

All done! Now, the Accordion Block on that product should automatically be placed within the Product Description.

 

Hi everyone,

I've tried the accordion into the product description and it works fine (thank you @jpeter!) - but the all block disappear on the mobile size, can someone help me ?

I've tried to cancel scripts and this is the one that hide the product description on mobile.

Here is the code injection in Setting > Advanced > Code injection

<script>
(function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var cartButton = document.querySelector('.sqs-add-to-cart-button-wrapper');
  if(accordion && cartButton) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    // Add accordion before the cart button.
    cartButton.after(accordion);
  }
})()
  </script>

Do you have an idea ?

Can I restrain this script for non-mobile view ?

Here is a link for an example of product page : https://www.coralieprevert.com/fr/shop-deco/p/papier-peint-eco-responsable-alba

Thanks !

23 hours ago, Coralie said:

Hi everyone,

I've tried the accordion into the product description and it works fine (thank you @jpeter!) - but the all block disappear on the mobile size, can someone help me ?

I've tried to cancel scripts and this is the one that hide the product description on mobile.

Here is the code injection in Setting > Advanced > Code injection

<script>
(function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var cartButton = document.querySelector('.sqs-add-to-cart-button-wrapper');
  if(accordion && cartButton) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    // Add accordion before the cart button.
    cartButton.after(accordion);
  }
})()
  </script>

Do you have an idea ?

Can I restrain this script for non-mobile view ?

Here is a link for an example of product page : https://www.coralieprevert.com/fr/shop-deco/p/papier-peint-eco-responsable-alba

Thanks !

Try change this line

  var accordion = document.querySelector('.ProductItem-additional');

to this new line

  var accordion = document.querySelector('.ProductItem-additional .accordion-block');

Thanks @tuanphan,

var accordion = document.querySelector('.ProductItem-additional .accordion-block');

was only showing the text blocks placed into additional and not the accordion but I've add ".ProductItem-details" and now it's working !

var accordion = document.querySelector('.ProductItem-additional .accordion-block .ProductItem-details');

Thank you again for your help !

Edit @tuanphan: it works perfectly for mobile but the whole description block has moved under the pictures on desktop...

12 hours ago, Coralie said:

Thanks @tuanphan,

var accordion = document.querySelector('.ProductItem-additional .accordion-block');

was only showing the text blocks placed into additional and not the accordion but I've add ".ProductItem-details" and now it's working !

var accordion = document.querySelector('.ProductItem-additional .accordion-block .ProductItem-details');

Thank you again for your help !

 

Edit @tuanphan: it works perfectly for mobile but the whole description block has moved under the pictures on desktop...

Can you take a screenshot? It looks fine to me

hi im trying to figure out why the above code wont move my accordion into the product description on page 

https://enchantanddelight.com.au/shop-enchant-and-delight/p/purple-fluorite-specimen?rq=Purple Fluorite Cluster

any idea why it wont work when i add the above code to the footer code injection

On 1/15/2023 at 2:41 PM, Cyperpunk-girl-333 said:

hi im trying to figure out why the above code wont move my accordion into the product description on page 

https://enchantanddelight.com.au/shop-enchant-and-delight/p/purple-fluorite-specimen?rq=Purple Fluorite Cluster

 

any idea why it wont work when i add the above code to the footer code injection

It shows fine to me

@tuanphan I would like the accordion to appear in mobile view and desktop view about the price ? 

https://enchantanddelight.com.au/store-/p/style-01-ej5na-e8kd9-xrsl8-lfsk8-d8pcn-sbt4z-pz2fm-fg7me-74ehr-5tc8e-8ysk2-ftzrp 

it all looks a little messy and off center

On 1/18/2023 at 10:59 PM, tuanphan said:

It shows fine to me

can you please help me @tuanphan

On 1/28/2023 at 1:43 PM, Cyperpunk-girl-333 said:

can you please help me @tuanphan

Hi,

What is password?

https://enchantanddelight.com.au/store-/p/style-01-ej5na-e8kd9-xrsl8-lfsk8-d8pcn-sbt4z-pz2fm-fg7me-74ehr-5tc8e-8ysk2-ftzrp

On 2/1/2023 at 9:30 PM, tuanphan said:

Hi,

What is password?

https://enchantanddelight.com.au/store-/p/style-01-ej5na-e8kd9-xrsl8-lfsk8-d8pcn-sbt4z-pz2fm-fg7me-74ehr-5tc8e-8ysk2-ftzrp

The password is: shop

On 1/28/2023 at 4:43 PM, Cyperpunk-girl-333 said:

can you please help me @tuanphan

the password is: shop

did you get the password @tuanphan

On 2/3/2023 at 4:25 PM, Cyperpunk-girl-333 said:

The password is: shop

Hi,

Move this?