Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    May 2010
    Location
    Arkansas
    Posts
    33
    Plugin Contributions
    0

    Default Question about writing AJAX Shopping Cart buttons

    I am wanting to write a module for an AJAX style shopping cart/add to cart similar to the one on Bass Pro Shops. Not a big fan of their entire checkout process, but the add to cart function is cool. Anyway, back on track...

    Where are the handlers for the add to cart buttons? I read in another thread that an AJAX approach would require rewriting handlers for each occurrence of the add to cart button, but where are they all located? And is there a way to override those functions without changing core components of the cart?

    Thanks in advance for the help!

  2. #2
    Join Date
    May 2010
    Location
    Arkansas
    Posts
    33
    Plugin Contributions
    0

    Default Re: Question about writing AJAX Shopping Cart buttons

    OK, I have made some modifications, added some JS to submit the form with ajax. I'm positive that I am going about this the wrong way, but here is the code.

    PHP Code:

    <script type='text/javascript'>

    $(
    "form#addProduct").submit(function(){
        var 
    product_id = $('input[name="products_id"]').val();
        var 
    cart_quantity = $('input[name="cart_quantity"]').val();
        var 
    securityToken = $('input[name="securityToken"]').val();
        var 
    url = $("#addProduct").attr('action'); 

        
        
    /*
        $("#ajaxCart").animate({
            top: "0",
            opacity: 1
            }, 1000)
    */
        //alert(securityToken+product_id);
        
        
    var data= new Array();
        
    data['product_id'] = product_id;
        
    data['cart_quantity'] = cart_quantity;
        
    data['securityToken'] = securityToken;
        
        $.
    ajax({
            
    type'POST',
            
    urlurl,
            
    datadata,
            
    success: function( data ) {
                
    //this is a result
                
    $("#ajaxCart").animate({
                    
    top"=+350",
                    
    opacity"1"
                    
    }, 1000, function(){
                        $(
    "#ajaxCart").html("added to cart");
                    })
                
            }
        });
        
        return 
    false;
    });
    $(
    "#hideCart").click(function(){
        $(
    "#ajaxCart").animate({
            
    top"-350",
            
    opacity1
            
    }, 1000)
        return 
    false;
    });
    </script> 
    I have modified the zen_draw_form function as well to accept another parameter (id) so that the call can be made on the form submission.

    Now, I keep getting a 302 moved temporarily when it is submitted. I am positive this is how it is supposed to work, but how can I send the add to cart info to a script to process it without getting these errors.

    Thanks!

    Here is a link to the current implementation.

    http://design.uniqueoutdoorproducts.com/

  3. #3
    Join Date
    May 2010
    Location
    Arkansas
    Posts
    33
    Plugin Contributions
    0

    Default Re: Question about writing AJAX Shopping Cart buttons

    Anybody?

  4. #4
    Join Date
    May 2010
    Location
    Arkansas
    Posts
    33
    Plugin Contributions
    0

    Default Re: Question about writing AJAX Shopping Cart buttons

    OK, changed several things with the above code to accomodate the cart section already being active, refreshing the cart quantity in the displayed area, and I was trying to make it possible to add more than 1 of the item to the shopping cart. FAIL!!

    What would the variable I need to pass in to make it add more than 1 product? Here is what I have tried, and it doesn't work.

    PHP Code:
    <script type='text/javascript'>
    var 
    shoppingCart false;

    $(
    "form#addProduct").submit(function(){
        var 
    product_id = $('input[name="products_id"]').val();
        var 
    cart_quantity = $('input[name="cart_quantity"]').val();
        var 
    securityToken = $('input[name="securityToken"]').val();
        var 
    url "http://design.uniqueoutdoorproducts.com/index.php?action=buy_now&cart_quantity="+cart_quantity+"&products_id="+product_id//$("#addProduct").attr('action'); 

        
        /*
        $("#ajaxCart").animate({
            top: "0",
            opacity: 1
            }, 1000)
    */
        //alert(securityToken+product_id);
        
        
    var data= new Array();
        
    data['product_id'] = product_id;
        
    data['cart_quantity'] = cart_quantity;
        
    data['securityToken'] = securityToken;
        
        $.
    ajax({
            
    type'POST',
            
    urlurl,
            
    datadata,
            
    success: function( data ) {
                var 
    shoppingCartUpdate = $(data).find('div#ajaxCartContainer');
                $(
    'div#ajaxCartContainer').html(shoppingCartUpdate);

                
    //this is a result
                
    if(!shoppingCart){
                $(
    "#ajaxCart").animate({
                    
    top"+=250",
                    
    opacity"1"
                    
    }, 1000, function(){
                        
    shoppingCart true;
                        
    //$("#ajaxCart").html("Successfully added to Cart");
                    
    })
                }
                
            }
        });
        
        return 
    false;
    });
    $(
    "#showHideCartButton").click(function(){
        if(
    shoppingCart){
            $(
    "#ajaxCart").animate({
                
    top"-250"
                
    }, 1000)
            
    shoppingCart false;
        } else {
            $(
    "#ajaxCart").animate({
                
    top"0"
                
    }, 1000)
            
    shoppingCart true;
        }
        return 
    false;
    });
    </script> 
    I have also tried changing the action to add_product, but that breaks even adding a single item to the cart. Really running into a wall here, any help would be appreciated.

    Thanks!

  5. #5
    Join Date
    May 2010
    Location
    Arkansas
    Posts
    33
    Plugin Contributions
    0

    Default Re: Question about writing AJAX Shopping Cart buttons

    184 views and no response?

  6. #6
    Join Date
    Jan 2007
    Location
    Australia
    Posts
    6,167
    Plugin Contributions
    7

    Default Re: Question about writing AJAX Shopping Cart buttons

    Quote Originally Posted by skrillnet View Post
    184 views and no response?
    I can't say that I'm surprised.

    What you are asking is way beyond the skills of the typical user to these forums, and as for the rest of us, you have shown more than enough knowledge to be able to figure out what you need to do for yourself. In fact you are probably already way ahead in finding a solution than any of us (if for no other reason than you have been actively working with this part of the code).

    I'm not suggesting that you'll find no one here willing and able to help, and I know for a fact that if any of us can spot an 'easy' solution we will happily provide it, but if I were you, I wouldn't be holding my breath. I for one am confident that you'll eventually find a solution without our help.

    Cheers
    Rod

  7. #7
    Join Date
    May 2010
    Location
    Arkansas
    Posts
    33
    Plugin Contributions
    0

    Default Re: Question about writing AJAX Shopping Cart buttons

    OK, I figured it was something like that. Thank you for your input!

  8. #8
    Join Date
    Jan 2007
    Posts
    1,484
    Plugin Contributions
    10

    Default Re: Question about writing AJAX Shopping Cart buttons

    I have dabbled with an ajax add to cart function using jquery. I think you are trying to reinvent the wheel here. You should look more at integrating a jquery plugin with the existing core code. It's much much easier. Check out the cjloader mod to take advantage of it's autoloader function. This is nice because you can specify on what pages certain scripts and files load to reduce overhead on all of the other pages. For instance, loading the jscript only on the product info page and category listing page (the main pages where the add to cart buttons are displayed). There are a bunch of cool little visual plugins like the ui bounce transfer that make the button move to visually show an action is taking place.

    Zen Cart and it's community are the best!!

  9. #9
    Join Date
    Jan 2007
    Posts
    1,484
    Plugin Contributions
    10

    Default Re: Question about writing AJAX Shopping Cart buttons

    Quote Originally Posted by skrillnet View Post

    Now, I keep getting a 302 moved temporarily when it is submitted. I am positive this is how it is supposed to work, but how can I send the add to cart info to a script to process it without getting these errors.
    This is probably happening because it's going to https. If you change the link to NONSSL that might solve the problem. I was getting this with an ajax form when it was submitted and it drove me crazy until I really paid attention to what firebug was telling me. Once I changed the redirect link to NONSSL the 302 went away and it worked properly.

    Zen Cart and it's community are the best!!

  10. #10
    Join Date
    May 2010
    Location
    Arkansas
    Posts
    33
    Plugin Contributions
    0

    Default Re: Question about writing AJAX Shopping Cart buttons

    got this guy working over the weekend. As always Occam's Razor is correct, I just needed to change the jQuery ajax to post and then send the serialized form data to the usual Zen Cart processing page.

    It was much easier than what I had tried to do initially, and I actually did install the cjloader to use with the Fast and Easy Checkout plugin.

    Thinking about turning this into a mod. Here is a link to a working example.

    design.uniqueoutdoorproducts.com

    Let me know what you think, or if you can get it to break. I have tried as many options as I can. I think the only thing I haven't tried is a product with attributes. I will add one to the cart later today and check it out. But so far, I'm pretty happy with the customer interaction and animations.

    Any suggestions?

    Thanks!

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v150 opinions about numinix's ajax shopping cart with coupons?
    By discoverytdi in forum All Other Contributions/Addons
    Replies: 1
    Last Post: 28 Apr 2012, 01:29 AM
  2. Re: Ajax Shopping Cart Sidebox
    By magicpants in forum Addon Sideboxes
    Replies: 32
    Last Post: 16 May 2011, 04:43 AM
  3. Question about adding products to my cart from the shopping cart page
    By audleman in forum All Other Contributions/Addons
    Replies: 1
    Last Post: 31 Aug 2010, 07:37 AM
  4. Question about shopping cart
    By Halo_Smyth in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 22 May 2009, 03:00 PM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR