The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Items in cart even when nothing selected

kanjigirlkanjigirl Member
in Help edited August 2009
I'm not sure how to specify 'no items' when nothing is selected in my order form. When I open my form and click 'Add to Cart' and nothing has been changed, it adds one of each of the three products to the cart:

http://www.redkitecreative.com/projects/getborn/subscribe/

I don't want someone to try to buy a gift subscription and get charged for other products - what have I done wrong here?
Comments
  • Also, if a user goes back using 'continue shopping' they're going to have multiple products going into the cart again. Can I even have a form like this, or do I need a separate Add to Cart button for each product?
  • brettbrett FoxyCart Team
    Hi kanjigirl.

    So, the issue is that you're not specifying a quantity. You have a name and price, and a 2:name and 2:price, so the quantity of 1 is assumed. The "location" select box you have just sets an arbitrary product option called "location", but doesn't do anything else.

    That said, the easy options I see are:
    A) Add a select box or input for the quantity, which probably wouldn't really help usability.

    B) Make the delivery location dropdowns actually be the quantity field, but I'm not actually sure that'd work.

    C) Set a hidden input for quantity and default it to 0. Use a little bit of javascript to set it to one onchange of the appropriate select element.

    I'd go with option C. How are your javascript chops? We can try to assist if you get stuck.
  • I like option C rather than my alternative, which was creating three different 'Add to Cart' buttons. I'm not that great with Javascript and would appreciate a pointer or two.
  • Can you tell me how to add the js to change quantity to 1 for onchange of my dropdown select elements? Also for checkboxes, if it's different... Thank you so much.
  • brettbrett FoxyCart Team
    Can you make your second <select> a 2:location instead of just location? That's going to cause problems.

    Also, you may want to cache your favicon:
    http://foxycart.com/ecommerce-tips-andamp-tricks-favicons.html
    Check the bottom that page. It's showing as insecure in FF3.5.
  • I made these two changes - caching the favicon and changing the second select to 2:location.

    Can you please tell me now how to change the quantity to 1 onchange of the select element? Since I don't have that, nothing goes to the cart even when I select something - not even the checkboxes.
  • brettbrett FoxyCart Team
    $('select[name=2\:location]').change(function(){
    	if ($(this).val() != 'none') {
    		$('input[name=2\:quantity]').val(1);
    	} else {
    		$('input[name=2\:quantity]').val(0);
    	}
    })
    

    That'll work for the gift subscription functionality. The checkboxes are a bit different. There are a few ways to tackle it. You could either make each checkbox represent a new product in the cart, or you could make each checkbox just be a modifier to one single product, and have each one modify the price by $4.95.

    Let's see if you can get that javascript for the gift subs working, then we'll help you tackle the checkboxes.
  • Will do - where in the file do I place that code snippet?
  • brettbrett FoxyCart Team
    In a script tag, beneath your foxycart_includes.js.
    You actually need to wrap it in a document ready bit. You should probably take a look at some jQuery tutorials, as it'll help, but:
    jQuery(document).ready(function($){
    
    $('select[name=2\:location]').change(function(){
    if ($(this).val() != 'none') {
    $('input[name=2\:quantity]').val(1);
    } else {
    $('input[name=2\:quantity]').val(0);
    }
    });
    
    });
    
  • Okay - that's now working for Gift Subscriptions, but when I try adding a second script like this to take care of the first block,
    jQuery(document).ready(function($){
    		$('select[name=location]').change(function(){
    			if ($(this).val() != 'none') {
    				$('input[name=quantity]').val(1);
    			} else {
    				$('input[name=quantity]').val(0);
    			}
    		});	
    	});
    

    then if I change the dropdown select for the One Year Subscription only it shows 'Gift Subscription' in the cart rather than 'One year subscription.'

    Also, the checkboxes for 'is this a renewal' and 'do you want a gift notice' are not being shown in the cart if checked, and the Recipient Name (tied to multiship.js) is also not showing in the cart.

    So... I don't know if I can spend more time on this, should I just go back to having one 'add to cart' button for each block? That was working fine, I just wanted to try to streamline it into a single form, but I don't think I know enough js to make this happen quickly...
  • Alright - I'm sorry. I had something wrong in the code.

    This is very close, but it seems to be scrambling things a bit in the cart:

    Ship To: Ann Clarke
    One Year Subscription

    * Location: US1695
    * Renewal: yes
    * GiftNotices: yes
    * SingleCopies: Fall 2007
    * Learnabout: test

    Ship To: Me
    Gift Subscription

    * Location: Gift_US1695

    It's applying the recipient Ann Clarke to the one year sub but not the gift sub, and the other elements like the single issue and the text area are also showing up under Ann Clarke. Is there a way to change that so Ann Clarke and the GiftNotices are only visually connected to the Gift Subscription in the cart?
  • brettbrett FoxyCart Team
    Make sure your #: prefixes are correct.

    Actually, you're doing multiship (which is cool and makes sense here), but two things:
    1. Your multiship javascript is 404ing.
    2. It'll need to be modified ever so slightly. We'll do that once you have it up there correctly.

    Or... not sure you actually need the multiship js. You could just change the name="shipto" to name="2:shipto"
  • This is my actual code so you can see how the #: prefixes are set - is this wrong?
    <legend>One Year Subscription</legend>						
    					<div class="fc_row">
    						<input type="hidden" name="name" value="One Year Subscription" />
    						<input type="hidden" name="price" value="16.95" />
    						<input type="hidden" name="quantity" value="0" />
    						<p><label class="label_left">Choose your delivery location: </label>
    						<select name="location">		
    							<option value="none" selected="selected">Select One</option>
    							<option value="US1695">US $16.95</option>
    							<option value="CA1995{p+3.00}">Canada $19.95</option>
    							<option value="IN3390{p+16.95}">International $33.90</option>
    						</select></p>
    					</div>
    					<div>
    						<h4>Is this a subscription renewal?</h4>
    						<p><label for="Renewal">Check this box if you are renewing your subscription: </label><input type="checkbox" name="Renewal" id="Renewal" value="yes" /></p>						
    					</div>
    				</fieldset>		
    				
    				<fieldset>
    					<legend>Gift Subscriptions</legend>
    					<div class="fc_row">
    						<input type="hidden" name="2:name" value="Gift Subscription" />
    						<input type="hidden" name="2:price" value="16.95" />
    						<p><label class="label_left">Choose your gift subscription delivery location: </label>
    						<select name="2:location">		
    							<option value="none" selected="selected">Select One</option>
    							<option value="Gift_US1695">US $16.95</option>
    							<option value="Gift_CA1995{p+3.00}">Canada $19.95</option>
    							<option value="Gift_IN3390{p+16.95}">International $33.90</option>
    						</select></p>
    					</div>
    

    I fixed the link to multiship.jquery.js and now the 'Ship this item too' dropbox is showing, only small. What next?
  • brettbrett FoxyCart Team
    Hi kanjigirl.

    I think we discussed this on another thread, but you're including jQuery twice: once in the foxycart_includes, and once in an explicit call. That's messing up the multiship javascript, so you should remove that extra jquery call sitewide (or at least on every template that's also calling the foxycart_includes).

    - Remove the "Recipient Name" from the value attribute on the shipto input.
    - You need to add a 2:quantity hidden input, value="0".

    - Change all your checkbox names to stuff like 3:SingleCopies_Fall_2007. They all need to be unique, and they need to have the 3: in order to be related to that 3rd product. If the name of the checkbox isn't unique, it won't come through in the cart.

    This is your complete javascript. Replace all the other javascript from this thread with this one big chunk.:
    <script type="text/javascript">
    		jQuery(document).ready(function($){
    
    			// Main Subscription
    			$('select[name=location]').change(function(){
    				if ($(this).val() != 'none') {
    					$('input[name=quantity]').val(1);
    				} else {
    					$('input[name=quantity]').val(0);
    				}
    			});	
    			
    			// Gift Subscriptions
    			$('select[name=2\:location]').change(function(){
    				if ($(this).val() != 'none') {
    					$('input[name=2\:quantity]').val(1);
    				} else {
    					$('input[name=2\:quantity]').val(0);
    				}
    			});
    			
    			// Single Copies checkboxes
    			$('input[type=checkbox][name*=SingleCopies]').change(function(){
    				backorders = $('input[type=checkbox][name*=SingleCopies]:checked').length;
    				if (backorders > 0) {
    					$('input[name=3\:quantity]').val(backorders);
    				} else {
    					$('input[name=3\:quantity]').val(0);
    				}
    			})
    		});	
    	</script>
    


    A few other things:
    - Your screen.js file is causing a js error. Not sure what it's doing, but supersubs() isn't working at all.
    - Research and implement the <label> element on your checkboxes. They're pretty helpful.
  • Brett, I followed your instructions in the previous reply for this page:
    http://www.redkitecreative.com/projects/getborn/subscribe/

    --found the extra jquery call and removed it
    --added labels to the checkboxes
    --removed the "Recipient Name" from the value attribute on the shipto input
    --added a 2:quantity hidden input, value="0" to the Gift Subs section
    --replaced my js after the FoxyCart includes statement with what you provided

    The items and quantities in the cart seem to be just fine now.

    Still a few major problems though:

    --The cart no longer comes up in the template, it's on a page by itself.
    --Multiship isn't working - there's no way to use the dropdown box under Gift Subs to select another recipient
  • lukeluke FoxyCart Team
    Kanjigirl, are you using FireBug or the Web Developer toolbar? You have two JavaScript errors on your page which will have to be dealt with first and may be causing a conflict.
    jQuery.cookie is not a function
    http://www.redkitecreative.com/projects/getborn/wp-content/themes/skin/library/media/js/multiship.jquery.js
    Line 24
    $(".nav").supersubs is not a function
    http://www.redkitecreative.com/projects/getborn/wp-content/themes/skin/library/media/js/screen.js?ver=2.8.4
    Line 19
    
    Also, you're including jquery but we already have it as part of our foxycart_includes file so this line is not needed:
    <script type='text/javascript' src='http://www.redkitecreative.com/projects/getborn/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>;

    Would it help if we recommended a developer who might be able to help you?
  • Ack! I removed the exact jquery and supersubs calls you mention this afternoon, why is this still showing up? I'll look at it again.
  • Can you recommend a developer for me too? I might have to do that in the interest of getting this finished.
  • It's working! I found the errant js and so now multiship is fine, but items in the cart that should be going to a gift recipient are going to me and vice versa. I'll contact a developer.
  • brettbrett FoxyCart Team
    Ah, glad you got it closer! Fwiw, you may be able to break down the pieces to try to figure it out yourself. Not saying you shouldn't hire somebody to help you real quick (you should), but the best way to learn is to just hunker down and figure out why your stuff is broken. That's actually how I learned everything I know.

    If you just have some values switched, you could dig in and see which inputs in your form have (or don't have) the 1: 2: 3: prefixes. If it's a multiship value, it might be being generated in the ...

    Yeah:
    <input type="text" name="shipto" id="shipto" value="" /></p>
    
    That should be 2:shipto.

    And in your multiship js see if you can figure out what to change. I'll put the answer below in white, so you can copy/paste or highlight to see it.

    Change the 'input[name="shipto"]' to 'input[name=2\:shipto]'. The colon is a special character in jQuery so you need to escape it with the backslash.
  • I tried your suggestions - I must just have something very basic wrong in this page and not enough js understanding to get it. I'm hiring one of the recommended developers to help me finish up, it's so close to being done...
Sign In or Register to comment.