Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
divar

How To Install + Dropdown Accordion in a Product Description

Question

Site URL: https://www.erheer.com/shop/ariel

Hi Squarespace Wizards,

I am trying to install a dropdown accordion in the description of a physical product. Unfortunately Squarespace doesn't have the option to add a markdown box in the description of a product(screenshot 1). 

I have add the code block and the markdown box in the additional Info (screenshot 2) but that shows at the end of the page after all the product photos at the moment. I'd like the dropdown to be a part of the product description itself (screenshot 4) and not at the end of the page. 

Any assistance would be greatly appreciated.

Thanks,

Divya

Screen Shot 2020-06-29 at 3.06.13 am.png

Screen Shot 2020-06-29 at 3.09.05 am.png

Screen Shot 2020-06-29 at 3.05.23 am.png

Screen Shot 2020-06-29 at 3.16.42 am.png

Share this post


Link to post

Recommended Posts

  • 0

Thanks for the reply. I will share the link once i've figured out how to make the code work outside the develop/edit mode of squarespace. The accordion is working fine on the page in edit mode but when I test it in on a fresh tab, its not. 

 

 

Share this post


Link to post
  • 0

Hi tuanphan, I've added the code to additional info. Please help with adding it to just under the description itself. 

Also if it's not too much trouble could you help me with closing the + automatically close when another "H" is opened.

https://aqua-megalodon-5m3t.squarespace.com/shop/ariel

Please let me know if you need any additional info.

On 6/30/2020 at 7:04 PM, tuanphan said:

You can add to additional info, then share url again. We can give the code to move it to description

 

Share this post


Link to post
  • 0

What's the password?


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Just after the text ends..Please see photo attached.

Also I want the same to happen for all my products, so will I have to post the code on each individual product or can I paste it somewhere else so that it is applied to all the products. 

Screen Shot 2020-06-29 at 3.16.42 am.png

Share this post


Link to post
  • 0

Can you post your code for the accordion? I can see about closing them when another is opened.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Here it is and thanks for working on this!

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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>

Share this post


Link to post
  • 0
Posted (edited)

Add to Code Injection Footer

<script>
  $(document).ready(function() { 
		$('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');
	});
</script>

and add this to Home > Design > Custom CSS

.ProductItem-details .markdown-block {
    order: 4;
}

 

Edited by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

I was just helping someone else today with a similar accordion, but he hasn't been back to test it yet. See if this works.

    $(document).ready(function() {
      $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer');
      $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp();
      $('.markdown-block .sqs-block-content h3').click(function() {
        if ($(this).nextUntil('h3').is(':hidden')) {
          $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp();
          $('.markdown-block .sqs-block-content h3').removeClass('ui-open');
          $('.markdown-block .sqs-block-content h3').addClass('ui-closed');

          $(this).nextUntil('h3').slideDown();
          $(this).toggleClass('ui-closed ui-open');
        } else {
          $(this).nextUntil('h3').slideUp();
          $(this).toggleClass('ui-closed ui-open');
        }
      });
    });
.markdown-block p {
  margin-left: 1em; 
}

.markdown-block .ui-closed:before {
  font-family: monospace;
  content: "+ ";
  color: #2DA9C6; 
}

.markdown-block .ui-open:before {
  font-family: monospace;
  content: "- ";
  color: #2DA9C6; 
}

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

It is working but only after I refresh the page. Somehow when the page loads for the first time, it still shows the text at the end of the page and all opened up like in screenshot 1 & 2. And then when I hit refresh, it works (screenshot 3)

Screen Shot 2020-07-02 at 12.28.36 pm.png

Screen Shot 2020-07-02 at 12.28.47 pm.png

Screen Shot 2020-07-02 at 12.29.05 pm.png

Share this post


Link to post
  • 0

Try replacing

$(document).ready(function() {

with

window.Squarespace.onInitialize(Y, function () {

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Tried the code but it doesn't seem to be working.

1st - the script isn't firing when the page first loads

2nd - after I refresh the page, it starts showing in the correct place but is all opened up. 

Screen Shot 2020-07-02 at 12.55.47 pm.png

Share this post


Link to post
  • 0

Sorry, try changing this code

<script>
  $(document).ready(function() { 
		$('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');
	});
</script>

to this

<script>
  window.Squarespace.onInitialize(Y, function () { 
		$('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');
	});
</script>

This is an issue with ajax loading.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Tried but it is doing the same thing. Not firing at first load and then when I refresh, it works but all the sections are opened up. 

Also this code is in the Code Injection Footer and not header. 

<script>
  window.Squarespace.onInitialize(Y, function () { 
		$('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');
	});
</script>

Share this post


Link to post
  • 0
Posted (edited)

OHHHH. I think I see the issue.

You might have put some of the CSS in the code injection block.

So delete both codes from above replace with this (code injection)

<script>
window.Squarespace.onInitialize(Y, function() {
  $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer');
  $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp();
  $('.markdown-block .sqs-block-content h3').click(function() {
    if ($(this).nextUntil('h3').is(':hidden')) {
      $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp();
      $('.markdown-block .sqs-block-content h3').removeClass('ui-open');
      $('.markdown-block .sqs-block-content h3').addClass('ui-closed');

      $(this).nextUntil('h3').slideDown();
      $(this).toggleClass('ui-closed ui-open');
    } else {
      $(this).nextUntil('h3').slideUp();
      $(this).toggleClass('ui-closed ui-open');
    }
  });
});
</script>

Then add this to Design -> Custom CSS

.markdown-block p {
  margin-left: 1em; 
}

.markdown-block .ui-closed:before {
  font-family: monospace;
  content: "+ ";
  color: #2DA9C6; 
}

.markdown-block .ui-open:before {
  font-family: monospace;
  content: "- ";
  color: #2DA9C6; 
}

 

Edited by rwp

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)

I think I am losing the plot here. Just to confirm once again, just the above two pieces of code right and delete everything else? 

CSS goes  in Design < Custom CSS 

Script goes in Home > Settings > Advanced >  Code Injection (Footer)

No other piece of code on the product, just the Markdown block in Additional Info?

Sorry for being a noob. 

Edited by divar

Share this post


Link to post
  • 0

Correct, but if you had other code, not related to the accordion, don't remove that.

The last code I posted above should move the accordion and make it work how you want.... Hopefully.....


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Hey sorry I tried but it is not working now at all. Just appearing at the end of the page even if i refresh it. 

Share this post


Link to post
  • 0

Put this in the header code injection

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

It seems to be working now but the accordion in now appearing at the top of the page and not under the description. Also I noticed that the website if taking longer to load, up to 10 seconds.

Screen Shot 2020-07-02 at 2.22.31 pm.png

Share this post


Link to post
  • 0

Add this to custom CSS

.markdown-block {
    order: 5;
}

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Great seems to be working well. I just have to test it with all other products now.  

I think I've identified a new issue now that we've fixed this one. Now that we've added the additional info just under description, it has pushed the size, quantity and add to cart button further down which is not good from e-commerce point of view. It is even more of a scroll on the mobile. Is it something that can be fixed via CSS or will it require a lot of work? So the size, quantity and add to cart to appear just under the price and before the whole description begins. 

Please let me know if it is too much work. 

IMG_7705.jpg

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...