ArtSpeaks Posted January 29, 2022 Share Posted January 29, 2022 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! Link to comment
creedon Posted January 29, 2022 Share Posted January 29, 2022 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. 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 February 6, 2022 Share Posted February 6, 2022 @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! Link to comment
creedon Posted February 6, 2022 Share Posted February 6, 2022 @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. 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 February 8, 2022 Share Posted February 8, 2022 @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> creedon 1 Link to comment
creedon Posted February 8, 2022 Share Posted February 8, 2022 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. 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
izzisbeads Posted May 19, 2022 Share Posted May 19, 2022 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! Link to comment
creedon Posted May 19, 2022 Share Posted May 19, 2022 (edited) 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. Edited May 30, 2022 by creedon 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
izzisbeads Posted May 29, 2022 Share Posted May 29, 2022 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? Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 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 creedon 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
sarahcreates Posted July 20, 2022 Share Posted July 20, 2022 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 While editing your product, go to the Additional Info section and add an Accordion Block. 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. 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. tuanphan 1 Link to comment
Coralie Posted September 19, 2022 Share Posted September 19, 2022 (edited) 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 ! Edited September 19, 2022 by Coralie acuracy Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 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'); Coralie 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
Coralie Posted September 20, 2022 Share Posted September 20, 2022 (edited) 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... Edited September 20, 2022 by Coralie Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 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 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
Cyperpunk-girl-333 Posted January 15, 2023 Share Posted January 15, 2023 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 Link to comment
tuanphan Posted January 18, 2023 Share Posted January 18, 2023 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 creedon 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
Cyperpunk-girl-333 Posted January 23, 2023 Share Posted January 23, 2023 @tuanphan I would like the accordion to appear in mobile view and desktop view about the price ? Link to comment
Cyperpunk-girl-333 Posted January 23, 2023 Share Posted January 23, 2023 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 Link to comment
Cyperpunk-girl-333 Posted January 28, 2023 Share Posted January 28, 2023 On 1/18/2023 at 10:59 PM, tuanphan said: It shows fine to me can you please help me @tuanphan Link to comment
tuanphan Posted February 1, 2023 Share Posted February 1, 2023 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 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
Cyperpunk-girl-333 Posted February 3, 2023 Share Posted February 3, 2023 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 Link to comment
Cyperpunk-girl-333 Posted February 3, 2023 Share Posted February 3, 2023 On 1/28/2023 at 4:43 PM, Cyperpunk-girl-333 said: can you please help me @tuanphan the password is: shop Link to comment
Cyperpunk-girl-333 Posted February 4, 2023 Share Posted February 4, 2023 did you get the password @tuanphan Link to comment
tuanphan Posted February 8, 2023 Share Posted February 8, 2023 On 2/3/2023 at 4:25 PM, Cyperpunk-girl-333 said: The password is: shop Hi, Move this? 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