Only allow a multiple number of items

TaffTaff Member
in Bugs & Feature Requests edited November 2007
Hi,
I've been asked for a solution to the following problem:

my client wants to sell jars of Salsa, but only in a full case i.e. 12 Jars. They have 5 different types, ranging from hot, to mild to medium etc. etc.

So as long as the quantity of all the salsa products is dividable by 12 then they will be allowed, otherwise some type of warning message will be posted.

Anybody done something like this before?

Thanks in advance,
Taff
Comments
  • brettbrett FoxyCart Team
    Hey Taff.
    How handy are you with javascript? What I'd recommend would be to use the JSON cart object on the cart page and disable the checkout button if it's not divisible by 12.

    A nice touch would be to find the remainder and say something like "You need X more jars of salsa to complete your case". That'd encourage more quantity too, which is good.

    If you need help with that, let us know and we'll figure something out and add it to the wiki.
  • Brett,
    thanks for the reply & your advice. I haven't really done any Javascript since 1.2 so some help would be great :)
    A first step I've done is create a category that is only being used by items that have to be dividable by 12.

    If you could tell whereabouts I may find the JSON cart object, I would see if I could maybe adapt it to my needs. Your ideas seem like a good way to start, possibly either submitting the form to the checkout if all is well, otherwise do something else.

    Thanks again,
    Taff
  • brettbrett FoxyCart Team
    View source on the cart page and you should see it. Play around with it and let me know how it goes. I'd recommend using the included jQuery (since it's already there, no need to load another library) to handle things. Call it using $j() instead of $(). (Oh, and take a look here for some fun JSON stuff, might be a good starting point. Add something to your cart, close the thickbox, and watch the upper right.)

    If you want to stick a page on the wiki and document the process, go for it. Always good to take notes, and that'll make it easier to collaborate if you can't figure it out ;)
  • Hey Brett,
    thanks for your help this far.

    I'm still having a couple of issues. I would like to call the same function you are to turn off the checkout image (for example when the input values are changed). Where are you calling that?

    A first script to check the values and add them up looks like this, note I'm using code as opposed to category. I couldn't find category being stored anywhere in the cart page:
    function outputAlert(num,items){
    	alert ("Your quantity does not divide by "+num+". To continue to checkout all "+items+" need to be shipped as a full case");
    	}
    		var divideBy12 = 0;
    		for(var i=0;i<fc_json.cart.length;i++){
    			if(fc_json.cart[i].product.code==12){
    				divideBy12 += Number(fc_json.cart[i].product.quantity);
    			}
    		}	
    		if(divideBy12%12!=0){
    		outputAlert(12,"Salsa products");
    		}
    
    
    
  • lukeluke FoxyCart Team
    Hey Taff, I think you're looking for fc_HideCheckout(). That function gets called onChange for the quantity input fields.

    Let us know if that works for you.
  • Thanks Luke,

    once I get 5 minutes to try and update that script (or they stop making changes long enough) I will give it a try
  • TaffTaff Member
    edited December 2007
    Still can't get it to work Luke.
    I would like to replace the checkout image with what I'm outputting in the alert (from the outputAlert function).
    Calling fc_HideCheckout()...doesn't seem to have any effect.

    if you want to view it on the test server...http://www.greenmountaingringo.us/store.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
    
    <html xmlns="http://www.w3.org/1999/xhtml">;
    <head>
    	<title>^^store_name^^</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<link rel="stylesheet" href="http://www.greenmountaingringo.us/assets/templates/gmg/styles.css"; type="text/css" media="screen" charset="utf-8" />
    	<script language="Javascript">
    	function outputAlert(num,items,rest){
    	alert ("As a reminder, this product only ships in multiples of "+num+". Before you checkout, you need to add "+rest+" more "+items);
            I would like to replace the checkout image with what I'm outputting in the alert.
            I can't call fc_HideCheckout().
    	fc_HideCheckout();
    	}
    		var divideBy12 = 0;
    		var divideBy6 = 0;
    		for(var i=0;i<fc_json.cart.length;i++){
    			if(fc_json.cart[i].product.code==12){
    				divideBy12 += Number(fc_json.cart[i].product.quantity);
    			}else if(fc_json.cart[i].product.code==6){
    				divideBy6 += Number(fc_json.cart[i].product.quantity);
    			}
    		}	
    		if(divideBy12%12!=0){
    		var nom = 12;
    		var denom = divideBy12%12
    		var rest = nom-denom;
    		outputAlert(12,"Salsa products",rest);
    		}
    		if(divideBy6%6!=0){
    			var rest = 6-divideBy6;
    		outputAlert(6,"Stripes",rest);
    		}
    
    
    	</script>
    </head>
    <body>
    	^^cart^^
    </body>
    </html>
    

    Thanks for any help you can offer

    Taff
  • lukeluke FoxyCart Team
    I'm not clear why you can't call fc_HideCheckout() ?

    If you'd like to replace the "Please update your cart." with your own message, that should be pretty easy with some JQuery.

    Store your alert in a var:

    var myMessage = "As a reminder, this product only ships in multiples of "+num+". Before you checkout, you need to add "+rest+" more "+items;

    Then alert that: alert(myMessage);

    Call fc_HideCheckout();

    and replace the text there: $j("#fc_cart_notice_bottom").html(myMessage);

    cool? With that long of a message, it will probably look pretty nasty though.
  • I'm also not sure why I can't call fc_HidCheckout(); or at least have it do anything.

    I've tried embedding Jquery into the cart template too, and then for starters

    $j("#fc_cart_checkout_bottom").hide();

    which also doesn't appear to be doing anything.

    The link has now moved to http://66.216.91.236/~greenmou/shop-online1.html which will be it's final resting place once I get can this live and reroute it.

    Thanks,
    Taff
  • I'm not even sure I'm doing this right.

    Maybe you can help me find out where I'm going wrong. I have editted my cart template through FOx to make it look like:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
    
    <html xmlns="http://www.w3.org/1999/xhtml">;
    <head>
    	<title>^^store_name^^</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<link rel="stylesheet" href="http://www.greenmountaingringo.us/assets/templates/gmg/styles.css"; type="text/css" media="screen" charset="utf-8" />
    <script src="https://www.foxycart.com/v/0.3.0/raw/jquery.js"; type="text/javascript" charset="utf-8"></script>
    	<script language="Javascript">
    
    	function outputAlert(num,items,rest){
    	alert ("As a reminder, this product only ships in multiples of "+num+". Before you checkout, you need to add "+rest+" more "+items);
            document.getElementById("fc_cart_checkout_bottom").innerHTML="Huh?";
    	}
    		var divideBy12 = 0;
    		var divideBy6 = 0;
    		for(var i=0;i<fc_json.cart.length;i++){
    			if(fc_json.cart[i].product.code==12){
    				divideBy12 += Number(fc_json.cart[i].product.quantity);
    			}else if(fc_json.cart[i].product.code==6){
    				divideBy6 += Number(fc_json.cart[i].product.quantity);
    			}
    		}	
    		if(divideBy12%12!=0){
    		var nom = 12;
    		var denom = divideBy12%12
    		var rest = nom-denom;
    		outputAlert(12,"Salsa products",rest);
    		}
    		if(divideBy6%6!=0){
    			var rest = 6-divideBy6;
    		outputAlert(6,"Stripes",rest);
    		}
    
    
    	</script>
    </head>
    <body>
    	^^cart^^
    </body>
    </html>
    

    Question Number 1: Is that how I should be doing it?

    I have added a line to the script I am generating to simply change the contents of that field to anything currently with:
    document.getElementById("fc_cart_checkout_bottom").innerHTML="Huh?";
    

    After a couple of hours of messing around and getting nowhere, hopefully you can tell me how to target that div via my outputAlert function.

    Thanks again,
    Taff
  • OK, managed to find the solution. I can now change the checkout image to be text. I have also added a validation field in red so the user can see that something is wrong...and what.

    The only problem I am having now is that firefox (probably for the first time ever appears to not display it correctly...unless I open the frame in it's own window). It would appear to be a cache issue? If I refresh it's fine.

    The site is still over on http://66.216.91.236/~greenmou/shop-online1.html if anyone fancies taking a look.

    Once I find a solution to this, I'd be happy to post the code, just in case you want to add it to the Wiki for others with similar requirements.

    Taff
  • brettbrett FoxyCart Team
    Hey Taff.
    Try sticking the entire thing inside jQuery's document ready function:
    $j(document).ready(function(){
    /* YOUR CODE HERE */
    });
    

    See if that helps.
  • Hey Brett,
    thanks for the suggestion, unfortunately that didn't fix it. Normally these type of things only happen to IE...strange that this time it's a FF issue.

    Any other suggestions?
    Taff
Sign In or Register to comment.