Expanding and Collapsing Shopping Cart

JavaScript
1

Hey everyone,

Really sorry if this is a topic that has been written about before but I have done some searching and can’t seem to find anything relevant.

I am desperately trying to implement a shopping cart that drops down like on http://cxxvi.net/.

Now I have pretty much replicated their setup but am now certain the javascript I am using is wrong as I can’t get the button to load the page.

The javascript I have been using is

$(document).ready(function(){
$(“.basket-button”).click(function(){
$(“#mini-basket”).slideToggle(500);
$(this).toggleClass(“active”);
});
});

And the relevant website code is this:

<div class=“topbar”>
<div class=“topbar-anchor”>
<div class=“topbar-basket”>
<div id=“mini-basket” style=“display:none;”>Test text to see if it even expands and collapses</div>
<a id=“basket-button”>
<div class=“basket-top”>Basket</div>
<div class=“basket-bottom”>
-
<span class=“cart-total-items”>
<span class=“count”>{{ cart.item_count }}</span>
</span>
-
</div>
</a>
</div> <!-- /.topbar-basket –>
</div> <!–/.topbar anchor –>
</div> <!-- /.topbar –>

I am sure this looks like a pretty basic setup but I just can’t seem to get it to work.

My website is thisiscurated.myshopify.com

Any assistance or help you can offer really would be much appreciated!

Many thanks in advance,
Tom :slight_smile:

2

Still checking it out, but a quick thing I noticed: You need to prevent the default action when the user clicks on the link.

3

Ah, found it: Your JS is looking for “.basket-button” when it should be looking for “#basket-button”

Do things start working with the two changes I suggested?

4

Hey sdleihssirhc,

It’s worked!!! Thank you so much for your help I had literally spent about 8 hours trying to figure that out :slight_smile:

It’s always the simple things…

Thanks so much again!

Tom