How to add accordion functionality into product description ?!

On 12/4/2021 at 12:39 AM, tuanphan said:

Can you share link to a product where you added an accordion? We can check  code easier

Hi Tuan! My page is https://www.nuligoods.com/shop/p/grey-blazer

I'm trying to move the accordion into the "product description" space. Is this possible?

Currently I used the built-in accordion function in the "additional info" section. If you have any suggestions on getting an accordion function (markdown? custom CSS code?) to this position I would be so grateful. I'd want to be able to replicate it for each product I'll add

Thank you!!

Site URL: https://www.nuligoods.com/shop/p/grey-blazer

Add the following JavaScript code below to the footer using code injection. This will move the accordion code after the description. You may need to add some custom styling to adjust the spacing.

JavaScript Code

(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);
  }
})()

Make sure the JS code above is in between <script> tags, for example:

<script>
  // Add JS Code Here
</script>

AMAZING thank you so much!!

Hi again @jpeter! Wondering if you can help with a fresh problem, I used the code you suggested and it worked great for the desktop version but on mobile it looks like this.

Do you possibly know of a way to adjust the positioning of the accordion or the content from the "product description" section (in the screenshot as "a brief description sentence..")? Ideally I'd like the price to still be directly under the item title, followed by the "product description", then the accordion, then the "add to cart button" (like the desktop version basically)

Thank you advance!

18 minutes ago, ellerxyz said:

... Ideally I'd like the price to still be directly under the item title, followed by the "product description", then the accordion, then the "add to cart button" (like the desktop version basically)...

 

@ellerxyz You can use the following CSS:

.ProductItem .ProductItem-additional {
  order: 3;
}

1 hour ago, jpeter said:

@ellerxyz You can use the following CSS:

.ProductItem .ProductItem-additional {
  order: 3;
}

@jpeteryou're the best thank you, this is a super useful bit of code. I ended up setting it to order: 5 to get looking like this

Except now I love the idea of doing away with the "description" field text entirely and placing my "a brief description sentence" directly into the first accordion slot (details) and leaving it expanded to start. However, when I take the text out of the "description" field the accordion completely disappears.

I figure this is because the original script references the "details-excerpt". I'm a total beginner really just guessing at things but nothing I rewrote would work. If you can help with this part too that would be so awesome thank you!!

7 hours ago, ellerxyz said:

Except now I love the idea of doing away with the "description" field text entirely and placing my "a brief description sentence" directly into the first accordion slot (details) and leaving it expanded to start. However, when I take the text out of the "description" field the accordion completely disappears.

I figure this is because the original script references the "details-excerpt". I'm a total beginner really just guessing at things but nothing I rewrote would work. If you can help with this part too that would be so awesome thank you!!

@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);
  }
})()

@jpeterThis works great, thank you so much you really are a life saver!! I'd love to learn more about this so I can figure out some future stuff myself (instead of needing piece by piece code from others) can you possibly recommend a place to get started? How did you know all this?

Thanks again!

@jpeter I'm having the same issue as well. When I use the code it moves the accordion to the very top with everything underneath. I am wanting it to be underneath all of the info for both desktop and mobile.

I'm not sure if I am using the code correctly, but I followed all of the steps.

https://www.rotaterecordings.com/hip-hop/public-enemy-it-takes-a-nation-of-millions-to-hold-us-back?rq= poets

Any help would be greatly appreciated!

28 minutes ago, Indi said:

@jpeter I'm having the same issue as well. When I use the code it moves the accordion to the very top with everything underneath. I am wanting it to be underneath all of the info for both desktop and mobile.

.....

https://www.rotaterecordings.com/hip-hop/public-enemy-it-takes-a-nation-of-millions-to-hold-us-back?rq= poets

 

@Indi Adjusting the order using CSS seemed to do the trick:

.ProductItem-additional {
  order: 7;
}

6 hours ago, ellerxyz said:

@jpeterThis works great, thank you so much you really are a life saver!! I'd love to learn more about this so I can figure out some future stuff myself (instead of needing piece by piece code from others) can you possibly recommend a place to get started? How did you know all this?

Thanks again!

 @ellerxyz You're welcome. There's a ton of resources out there.  I've been having my son learn from codecademy's front end engineer path and he's been liking it. My go to resources when learning are google and youtube honestly. Finding a mentor helped as well and of course working on actual projects to gain experience. Lot's of failures happen before things finally begin to stick, at least for me. 

@jpeter 

Sorry where would I insert this? (

.ProductItem-additional {
  order: 7;
}

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);
  }
  .ProductItem-additional {
  order: 7;
}
})()
</script>

It didn't seem to work? but I'm not sure where to actually add it?

44 minutes ago, jpeter said:

My go to resources when learning are google and youtube honestly. Finding a mentor helped as well...

@jpeter makes a good point.

The web/internet is a fantastic resource! I'm an old timer and back in the day the only resources were manuals (if there were any) and mentors (those that knew more than you did and were kind enough to answer questions). Part of the trick with using the web is learning how to use search engines. If you use a search phrase and it doesn't return results that are useful then learn to rephrase. Sometimes the info isn't out there but sometimes the rephrasing will help! You just have to get a feel for it. Keep digging!

These days mentors are often found online. Find a community for the particular area you are interested in. Of course this community is pretty good and broad because we have to cover a multitude of disciplines (HTML, CSS, Javascript, and etc.) under one roof (an SS website). If you are able to hook up with a mentor don't hit 'em up to hard. They are volunteering their time so be sensitive to that. Stretch yourself, expand your mind, be curious, and don't be afraid to make mistakes!

"fear is the mind killer" 🙂

44 minutes ago, jpeter said:

...of course working on actual projects to gain experience. Lot's of failures happen before things finally begin to stick, at least for me.

Again expounding on @jpeter's sentiment.

The key is, for me anyway, have a goal and try to reach it! Personally I've always done better with, I want to do something and go out and learn how to do it as opposed to institutionalized learning. Nothing wrong with the later and if that works for you crank up your search engine and look for tutorials for whatever you are trying to learn. If you do better with formal classes then hit your community college or private schooling,

35 minutes ago, Indi said:

Sorry where would I insert this? (

.ProductItem-additional {
  order: 7;
}

It didn't seem to work? but I'm not sure where to actually add it?

@Indi You'll insert the CSS code by doing the following:

1. In the Home menu, click Design, then click Custom CSS.
2. To open the editor in an expandable window, click Open in Window. The window will close if you navigate away from the Custom CSS panel.
3. Add your code.
4. When you're finished, click Save to publish your changes.

Steps above were taken from https://support.squarespace.com/hc/en-us/articles/206545567#toc-add-css-code

@jpeter Thank you for all the help! 🙂

On 1/4/2022 at 7:08 PM, jpeter said:

 @ellerxyz You're welcome. There's a ton of resources out there.  I've been having my son learn from codecademy's front end engineer path and he's been liking it. My go to resources when learning are google and youtube honestly. Finding a mentor helped as well and of course working on actual projects to gain experience. Lot's of failures happen before things finally begin to stick, at least for me. 

Thank you @jpeter this is exactly the kind of resource I had in mind!

@creedon thanks for your input it's much appreciated! Looking forward to start learning more about this stuff

Thank you for this @jpeter I've just added it to my site, but want to change the letter spacing on the heading for each accordion title so it matches the title.

I've tried to add some CSS but I can't get it to work, I can change the colour with CSS and the size but not the letter spacing itself. Any ideas would be greatly appreciated - I am new to all this!

Thank you,

Lisa

17 hours ago, licsw said:

Thank you for this @jpeter I've just added it to my site, but want to change the letter spacing on the heading for each accordion title so it matches the title.

I've tried to add some CSS but I can't get it to work, I can change the colour with CSS and the size but not the letter spacing itself. Any ideas would be greatly appreciated - I am new to all this!

Thank you,

Lisa

 

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

Can somebody help? I had the accordion moved up to the product description and was working fine, but suddenly it's back down the bottom?

https://www.rotaterecordings.com

I'm not sure what has happened?

Thanks 🙂

10 hours ago, Indi said:

I had the accordion moved up to the product description and was working fine, but suddenly it's back down the bottom?

Please point us to a specific page with an accordion on it.

@creedon I have an accordion on all my products, but here is a page for example 🙂

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

19 minutes ago, Indi said:

I have an accordion on all my products, but here is a page for example 🙂

I asked because the product I went to didn't have one.

The code appears to be working to me.

<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);
  }
})()
</script>

There is some padding above the additional info area that could be removed with CSS.

@creedon 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?

How would I remove the additional info padding?

Thanks! :)