SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding and Collapsing Shopping Cart

    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

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Still checking it out, but a quick thing I noticed: You need to prevent the default action when the user clicks on the link.
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    I'm the web overlord for Graphic Business Systems

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey sdleihssirhc,

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

    It's always the simple things...

    Thanks so much again!

    Tom


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •