SitePoint Sponsor

User Tag List

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

    Jquery Sliding Panel (shopping basket) problem

    Hey all,

    I have just spent quite a while implementing a sliding panel to house a shopping cart. The issue I am having is that everything seems to work very well when I have an item in the cart but as soon as the cart is empty my Basket button is shifting so that it's no longer below the panel that slides open.

    I have tried really hard to get this to work but just can't seem to fix it. I was wondering whether anyone might be able to solve this mystery?

    My site is: http://thisiscurated.myshopify.com

    The actual code for the relevant site part is as follows:

    Code:
    <div class="topbar">
        <div class="topbar-anchor">
            <div class="topbar-basket">
                <div id="mini-basket" style="display:none;">
                    <script type="text/javascript">
                        function remove_item(id) {
                        document.getElementById('updates_'+id).value = 0;
                        document.getElementById('cartform').submit();
                        }
                    </script>
                    <div id="cart" class="cart clearfix">
                        {% if cart.item_count == 0 %}
                        <div class="c" style="padding:100px 0;">
                            <h2 class="title" style="text-align:center;">Your Basket is Empty</h2>
                        </div>
                        {% else %}
                        <div class="more-info clearfix">
                            <div class="basket-inner">
                                <form action="/cart" method="post" id="cartform">
                                    <table>
                                        <tbody>
                                        {% for item in cart.items %}
                                            <tr class="top-row">
                                                <td class="c">Qty</td>
                                                <td class="c">Description</td>
                                                <td class="c">Price</td>
                                                <td class="c"></td>
                                            </tr>
                                            <tr>
                                                <td class="c">
                                                    <input type="text" size="4" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{ item.quantity }}" onfocus="this.select();" class="item-quantity" />
                                                </td>
                                                <td><a href="{{item.product.url }}">{{ item.title }}</a></td>
                                                <td class="c">{{ item.line_price | money }}</td>
                                                <td class="c"><a href="#" class="cart" onClick="remove_item({{item.variant.id}}); return false;">X</a></td>
                                            </tr>
                                            <tr class="summary-mini">
                                                <td class="c">Summary</td>
                                                <td class="c"></td>
                                                <td class="c"><strong>{{ cart.total_price | money }}</strong></td>
                                                <td class="c"></td>
                                            </tr>
                                            <tr>
                                                <td class="c"></td>
                                                <td class="minicart-proceed"><a href="/cart">Proceed to Checkout</a></td>
                                                <td class="c"></td>
                                                <td class="c"></td>
                                            </tr>
                                        {% endfor %} 
                                        </tbody>
                                    </table>
                                </form>
                            </div> <!-- /Basket Inner -->
                            {% endif %}
                        </div><!-- /Moreinfo Clearfix -->
                    </div> <!-- /#cart -->
                </div> <!-- Mini-Basket -->
                <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 -->
    And most of the relevant CSS is:

    Code:
    /* Mini Cart */
    .topbar {width:100%; height:5px; background-color:#333;}
    .topbar-anchor {z-index:1999999; width:1100px; margin:0 auto; height:5px; background-color:#333; position:relative; top:-5px}
    #mini-basket {background-color: #333; color:#fff width: 500px; text-align:center; border-radius:0 0 10px 10px;}
    .topbar-basket {float: right; height: 5px; margin-top: 5px; width: 500px;}
    .basket-summary{height:38px; float:right; width:40px; background-color:#333; padding: 0 10px 0 10px; border-radius:0 0 30px 30px;}
    .basket-top{text-align:center; font-weight:bold; font-size:11px;}
    .basket-bottom{text-align:center; position:relative; top:-12px; font-weight:bold; font-size:11px;}
    #basket-button {cursor:pointer; height:35px; position:relative; right:30px; width:70px; float:right; background-color:#333; border-radius:0 0 30px 30px;}
    .top-row {font-weight:bold;}
    .summary-mini {padding:20px;}
    .minicart-proceed{font-weight:bold;}
    .cart .more-info{padding:0px; margin:0px;}
    Any help people can offer really would be much appreciated!

    Many thanks in advance!

    Tom

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,164
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    How do you actually add an item to the cart? It would be handy to be able to test this. At the moment, all I see is a cart button top center. Is it not meant to be there?

    Did you have much of a hand in designing this theme, or is it supplied by Shopify?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks for your reply to the post and sorry the site isn't a little clearer. If you click on the main image on the homepage it will take you through to a product page where you can add a poster (the homepage image) to the cart. Once it is added to the cart, if you then reload any other page you will notice that the basket button moves to the right hand side of the page where it's supposed to sit. What I would like is for the basket button to permanently sit over to the right hand side of the page and slide down with the basket panel when it is clicked (as happens when a product is in the basket).

    Sorry for not making it clearer with the images, any help you can offer would be much great

    Many thanks,
    Tom

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry just forgot to reply to the second part of the thread.

    The theme was originally from shopify and I have been editing it over the past week to get it to where it is now.

    Thanks again!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,164
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hm, for me (on Firefox), when I click on Add to basked, the basket number increases, but if I click on the button, the basket is still empty, and the button doesn't move.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    That happens for me as well, I need to workout how to get the cart inside to update automatically without reloading the page in the same way the item count works. If you add a product though and then click on another link then when the page refreshes completely the basket will move to right where it's supposed to sit.

    Any help you can offer really would be much appreciated.

    Cheers,
    Tom

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

    I still can't seem to get this working despite my very best efforts this weekend. I am looking to the dorp down cart on http://www.cxxvi.net but at the moment just can't get my basket button to sit on the far right and push down beneath the sliding panel when it is clicked.

    My current CSS is this:

    Code:
    /* Mini Cart */
    .topbar {width:1000px; height:5px; background-color:#333; margin:0 auto;}
    .topbar-anchor {z-index:1999999; width:1000px; margin:0 auto; height:5px; background-color:#333; position:absolute;}
    #mini-basket {background-color: #333; color:#fff width: 500px; text-align:center; border-radius:0 0 10px 10px;}
    .topbar-basket {margin-left:500px; height: 5px; margin-top: 5px; width: 500px;}
    .basket-summary{height:38px; float:right; width:40px; background-color:#333; padding: 0 10px 0 10px; border-radius:0 0 30px 30px;}
    .basket-top{text-align:center; font-weight:bold; font-size:11px;}
    .basket-bottom{text-align:center; position:relative; top:-12px; font-weight:bold; font-size:11px;}
    #basket-button {cursor:pointer; height:35px; width:70px; Margin-left:500px; background-color:#333; border-radius:0 0 30px 30px;}
    .top-row {font-weight:bold;}
    .summary-mini {padding:20px;}
    .minicart-proceed{font-weight:bold;}
    .cart .more-info{padding:0px; margin:0px;}
    Any advice people can provide really would be much appreciated

    Many thanks,
    Tom

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,164
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Sorry I haven't been more help, but it's a bit hard to know how to help without knowing the history of what you are doing. Is the cxxvi site based on the same theme or whatever from Shopify? What did you start out with, and what have you done to change your site? I can't even tell if this is a CSS issue or a JS issue, but perhaps this should be moved to the JS forum, as your first concern is really functionality, it seems to me, which is more of a JS issue. What do you think?

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

    Thanks for all your help, I completely appreciate it's hard when you don't know the background.

    The CXXVI website is also built on Shopify and their theme certainly looks similar to the one I started out with (that's not to say it's exactly the same though). The javascript for the sliding panel was implemented by me and was not there beforehand. The CSS for the basket was there but only as a href link through to the cart page rather than as button to generate the drop down.

    I think the issue is CSS based as the javascript is doing everything is should be, it's just the button is moving around the page when there are items or no items in the basket.

    I would be happy for this to be moved to the javascript forum if you feel it is more relevant

    Cheers,
    Tom

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,164
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by t_pinchen View Post
    I think the issue is CSS based as the javascript is doing everything is should be, it's just the button is moving around the page when there are items or no items in the basket.
    O, right, I see; I didn't realize the JS was working. I'll have to look more closely at the CSS then. The first think I notice is that the HTML isn't too good, so that needs a bit of work. On first glance, I see a div inside an <a>, for example, which isn't good.

    EDIT: I'll move this to the CSS forum, too, where it will get more CSS attention!

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for moving it to the CSS forum Ralph.

    I took the idea of the div inside the <a> from the CXXVI website's layout but if there is a better way of working the CSS then I would definitely be keen to implement it?


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
  •