ellerxyz Posted January 4, 2022 Share Posted January 4, 2022 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!! Link to comment
ellerxyz Posted January 4, 2022 Author Share Posted January 4, 2022 Site URL: https://www.nuligoods.com/shop/p/grey-blazer Anyone have any suggestions for getting an accordion functionality into the 'product description' instead of the 'additional info' section of a product? Currently I've used the new (as of Oct 2021) accordion option that's available under 'additional info' in the product settings BUT it positions it in a weird spot. I love the click and open functionality but I really would need it to appear before the 'add to cart' button with the rest of the product info. Totally open to using markdown or some custom code but I just can't figure out a way to add any of those things into the 'product description' spot. Thanks in advance! Link to comment
jpeter Posted January 4, 2022 Share Posted January 4, 2022 (edited) 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> Edited January 4, 2022 by jpeter Adding conditional to make sure elements exist on the page. Link to comment
ellerxyz Posted January 4, 2022 Author Share Posted January 4, 2022 AMAZING thank you so much!! Link to comment
ellerxyz Posted January 4, 2022 Author Share Posted January 4, 2022 (edited) 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! Edited January 4, 2022 by ellerxyz Tagging the user Link to comment
jpeter Posted January 4, 2022 Share Posted January 4, 2022 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; } Link to comment
ellerxyz Posted January 4, 2022 Author Share Posted January 4, 2022 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!! Link to comment
jpeter Posted January 4, 2022 Share Posted January 4, 2022 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); } })() Coralie 1 Link to comment
ellerxyz Posted January 4, 2022 Author Share Posted January 4, 2022 @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! Link to comment
Indi Posted January 5, 2022 Share Posted January 5, 2022 @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! Link to comment
jpeter Posted January 5, 2022 Share Posted January 5, 2022 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; } Link to comment
jpeter Posted January 5, 2022 Share Posted January 5, 2022 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. ArtSpeaks 1 Link to comment
Indi Posted January 5, 2022 Share Posted January 5, 2022 @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? Link to comment
creedon Posted January 5, 2022 Share Posted January 5, 2022 (edited) 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, Edited January 5, 2022 by creedon ellerxyz and jpeter 2 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
jpeter Posted January 5, 2022 Share Posted January 5, 2022 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: In the Home menu, click Design, then click Custom CSS. 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. Add your code. 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 ArtSpeaks 1 Link to comment
Indi Posted January 5, 2022 Share Posted January 5, 2022 @jpeter Thank you for all the help! 🙂 Link to comment
ellerxyz Posted January 6, 2022 Author Share Posted January 6, 2022 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! Link to comment
ellerxyz Posted January 6, 2022 Author Share Posted January 6, 2022 @creedon thanks for your input it's much appreciated! Looking forward to start learning more about this stuff Link to comment
licsw Posted January 19, 2022 Share Posted January 19, 2022 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 Link to comment
tuanphan Posted January 20, 2022 Share Posted January 20, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Indi Posted January 27, 2022 Share Posted January 27, 2022 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 🙂 Link to comment
creedon Posted January 27, 2022 Share Posted January 27, 2022 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. 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
Indi Posted January 29, 2022 Share Posted January 29, 2022 @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 Link to comment
creedon Posted January 29, 2022 Share Posted January 29, 2022 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. 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
Indi Posted January 29, 2022 Share Posted January 29, 2022 @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! :) 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