Documentation You are here: start » v » 0.6.0 » faqs

Table of Contents

FAQs

This page is for an unsupported version of Foxy ― chances are you're on a different version and these instructions won't apply. You can go to the start page and select your version or if you're in doubt, get in touch with us.

Non-technical FAQs

This FAQ page is primarily technical in nature, with common (but specific) questions and answers about customizing FoxyCart. Frequently asked questions about FoxyCart in general may be found here.

How do I hide specific cart options from the cart display?

Some values can be hidden purely with CSS using display:none on the these class names: fc_cart_item_weight, fc_cart_category_code, fc_cart_item_code. Other custom supplied product options will have to be hidden via javascript by adding this code to your cart template. This example hides a product option called “Color”: 

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($){
$(".fc_cart_item_option_name").each(function() {
  if ($(this).html() == "Color") {
    $(this).parent().hide();
  }
})
});
</script>

Please note that depending on your FoxyCart version you may need to use $(), $j(), or jQuery() for all your jQuery calls above.

Add this code to your checkout template: 

<script type="text/javascript" charset="utf-8">
	jQuery(document).ready(function(){
		jQuery("#fc_cancel_continue_shopping a").attr("href","javascript:history.back(-1)");
	});
</script>

OR this code to your receipt template (change http://MYDOMAIN.com/MYURL to the link you want): 

<script type="text/javascript" charset="utf-8">
	jQuery(document).ready(function(){
		jQuery("#fc_receipt_continue_link").attr("href","http://MYDOMAIN.com/MYURL");
	});
</script>

NOTE: Depending on your FoxyCart version you may need to manually include jQuery (or foxycart_includes.js) in your receipt template.

If you'd like to make the “cancel and continue shopping” link empty the cart, try something like this: 

<script type="text/javascript" charset="utf-8">
	function strip_hostname_from_url(url) {
		return url.match(/https?:\/\/(.[^/]+)\/(.*)/i);
	}
 
	jQuery(document).ready(function(){
		var continue_href = strip_hostname_from_url(jQuery("#fc_cancel_continue_shopping a").attr('href'));
		jQuery("#fc_cancel_continue_shopping a").attr("href","https://theencouragingword.foxycart.com/cart?empty=true&redirect=" + continue_href + '&fcsid=' + fc_json.session_id);
	})
</script>

I'd like a donation select box and the option to enter a custom value... where do I start?

We've had various requests for this so here's a quick and dirty example using the FoxyCart included JQuery. It's not a “paste this in your site and run with it” bit of code, but it should point you in the right direction. The field names are prefixed with “x:” so they won't be sent to FoxyCart as product options and the “\\” is needed to help unconfuse the JQuery selector. Basic concept involves stuffing a hidden input named price with the value you want to send to FoxyCart. To make this a working example, you'd need to fully setup the form as you need it. Please post any questions in the forum.

Note: this example starts with a $10 initial price point, so the “price” hidden field was set to “10”. You'll want to adjust that accordingly as needed since that value only changes when the select box is changed.

FoxyCart V 0.5.1: For this script to correctly work with 051, please read this Forum note. 

<style>
	#custom_amount {
		display: none;
	}
</style>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		$j("#x\\:price_select").change(function(){
			if ($j("#x\\:price_select").val() == "0") {
				$j("#custom_amount").show();
			} else {
				$j("#custom_amount").hide();
			}
			$j("#price").val($j("#x\\:price_select").val());
 
			alert("price = " + $j("#price").val());
 
		});
		$j("#x\\:price_input").change(function(){
			$j("#price").val($j("#x\\:price_input").val());
 
			alert("price = " + $j("#price").val());
		});
	});
</script>
<form class="foxycart">
<input type="hidden" id="name" name="name" value="My Donation" />
<input type="hidden" id="price" name="price" value="10" />
<div class="row">
	<label for="x:price_select">Suggested donation amount: </label>
	<select id="x:price_select" name="x:price_select">
		<option value="10">$10</option>
		<option value="20">$20</option>
		<option value="50">$50</option>
		<option value="100">$100</option>
		<option value="300">$300</option>
		<option value="0">Other</option>
	</select>
</div>
<div class="row" id="custom_amount">
	<label for="x:price_input">Please enter an amount: $</label>
	<input type="text" id="x:price_input" name="x:price_select" value="" />
</div>
</form>

Can I hide the quantity field in the cart?

Add &quantity_max=1 to your cart add links or a hidden input named “quantity_max” with a value of 1 if you're using a form. Then add some css to color the text in the table header to match your header background and hide all the stuff you don't need anymore: 

<style>
#fc_cart_head th#fc_cart_head_quantity {
color: #666666;
}
#fc_cart_container input.fc_cart_item_quantity, #fc_cart_container span.fc_cart_remove_center, #fc_cart_container #fc_cart_update_top, #fc_cart_container #fc_cart_update_bottom {
display: none;
}
</style>

Note, you may also just want to use the cart=checkout option to go directly to the checkout page if you're only selling a single product.

My checkout page is narrow. Can I make the "standard" checkout theme thinner?

Yes, you can start by overriding one declaration: 

<link rel="stylesheet" href="https://auxano.foxycart.com/themes/standard/styles.css" type="text/css" media="screen" charset="utf-8" />
<style type="text/css" media="screen">
#fc_checkout_container fieldset, #fc_receipt_container fieldset {
 margin-left:0;
}
</style>

You can stick that override in your own CSS file if you want, rather than inline. Just make sure it comes after the /themes/standard/styles.css call.

Can I remove the CVV field entirely?

Yes. Using the built-in jQuery, it'd look like this: 

<script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		$j('#li_cc_cvv2').remove();
	});
</script>

Put that down by your closing </body>

Can I move the custom field div?

Yes, with just a bit of jQuery: 

<script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		$j('#fc_custom_fields_container').insertAfter('#fc_shipping_container');
	});
</script>

Put that down by your closing </body>. If you want to move it to a different place in the code, just change the target of the insertAfter() function.

Can I make customer_phone a required field?

Sure. Just get a little creative with your checkout template. By adding this code (after you call the checkout placeholders), your customer_phone will now be required:

v0.6.0+ 

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
jQuery(document).ready(function(){
  // add the required class
  jQuery("#customer_phone").addClass("fc_required");
  // add an asterisk to the label
  jQuery("li.fc_customer_phone label.fc_pre").append("<span class=\"fc_ast\">*<\/span>");
  // Now add the onblur error checking events
  jQuery("#customer_phone").blur(function() {
    if (this.value == "") {
      FC.checkout.updateErrorDisplay(this.name,true);
    } else {
      FC.checkout.updateErrorDisplay(this.name,false);
    }
  });
});
/* ]]> */
</script>

v0.5.1 

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
jQuery(document).ready(function(){
  // add the required class
  jQuery("#customer_phone").addClass("fc_required");
  // add an asterisk to the label
  jQuery("li.fc_customer_phone label.fc_label_left").append("<span class=\"fc_ast\">*<\/span>");
  // Now add the onblur error checking events
  jQuery("#customer_phone").blur(function() {
    if (this.value == "") {
      FC.checkout.updateErrorDisplay(this.name,true);
    } else {
      FC.checkout.updateErrorDisplay(this.name,false);
    }
  });
});
/* ]]> */
</script>

v0.4.x 

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
$j(document).ready(function(){
  // add the required class
  $j("#customer_phone").addClass("fc_required");
  // add an asterisk to the label
  $j("li.fc_customer_phone label.fc_label_left").append("<span class=\"fc_ast\">*<\/span>");
  // Now add the onblur error checking events
  $j("#customer_phone").blur(function() {
    if (this.value == "") {
      FC.checkout.updateErrorDisplay(this.name,true);
    } else {
      FC.checkout.updateErrorDisplay(this.name,false);
    }
  });
});
/* ]]> */
</script>

v0.3.x 

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
	$j(document).ready(function(){
		// add the required class
		$j("#customer_phone").addClass("fc_required");
		// add an asterisk to the label
		$j("#li_customer_phone label.fc_label_left").append("<span class=\"fc_ast\">*<\/span>");
		// add an error label after the phone
		$j("#customer_phone").after('<label for="customer_phone" class="fc_error" style="display:none">Please enter your phone number.<\/label>');
 
		// Now add the onblur error checking events
		$j("#customer_phone").blur(function() {
			if (this.value == "") {
				fc_UpdateErrorDisplay(this.name,true);
			} else {
				fc_UpdateErrorDisplay(this.name,false);
			}
		});
	});
/* ]]> */
</script>

v0.2.9 and earlier: 

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
	$j(document).ready(function(){
		// add a new required field
		fc_requiredFields[fc_requiredFields.length] = "customer_phone";
		$j("#customer_phone").addClass("fc_required");
		// add an error label after the phone
		$j("#customer_phone").after('<label for="customer_phone" class="fc_error" style="display:none">Please enter your phone number.</label>');
		// update required fields error messags as the fields change.
		$j("input.fc_required").blur(function() {
			if (this.value == "") {
				fc_UpdateErrorDisplay(this.name,true);
			} else {
				fc_UpdateErrorDisplay(this.name,false);
			}
		});
	});
/* ]]> */
</script>

Can I hide the Purchase Order field (I want to invoice them later and don't need a PO#)?

Sure. Just add some love like this: v060+: 

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
	$(document).ready(function(){
		// Hide the existing PO fields
		$("#li_purchase_order").hide();
		// Stick the current time in the PO field, so it's not empty
		var currentTime = new Date();
		$("#purchase_order").val(currentTime.getTime());
		// add a note for the customers
		$("#li_nopayment").after("<li>We will invoice you directly after your pickup is complete.</li>");
	});
/* ]]> */
</script>

v051 and below: 

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
	$(document).ready(function(){
		// add a new purchase order field
		$("#purchase_order").after('<input type="hidden" name="purchase_order" id="purchase_order_hidden" value="N/A">');
		// remove the old one
		$("#li_purchase_order").remove();
		// add a note for the customers
		$("#li_nopayment").after("<li>We will invoice you directly after your pickup is complete.</li>");
	});
/* ]]> */
</script>

Can I make the "Save your credit card" checkbox checked by default?

Yes. Add this in the head section of your page. 

<script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		$j('#save_cc').attr('checked','checked');
	});
</script>

It says my cached images are "corrupt". What gives?

Try clearing your image cache. Log into your admin panel, click Templates → Image Cache → Clear all cached images. If that doesn't fix the problem, let us know.

XML: How do I get epoch time from yyyy-mm-dd hh:mm:ss ?

Example to convert from yyyy-mm-dd hh:mm:ss to mm/dd/yyyy: 

$format = '%m/%d/%Y'; // New desired format
$time = '2007-05-04 20:53:57'; // The timestring (which you'd get from the XML, but it's hardcoded here just as an examle)
$time =  strtotime($time); // Convert the original to epoch time
$time_new = strftime($format,$time); // Convert from epoch time to the new format

Reference: http://us2.php.net/strftime

Redirect to a Custom "JavaScript Required" Page

If you'd like to alert your customers that javascript is required, here's one method.

  1. Change all your “add-to-cart” links, forms, and image maps to point to your own custom “JavaScript Required” page.
  2. After you include your foxycart_includes.js file, add the following:
    <script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		// Rewrite hrefs and actions if Javascript is enabled
		$j('form.foxycart').attr('action','https://example.foxycart.com/cart');
		$j('a.foxycart').click(function(){
			setTimeout('fc_tb_remove()', 1500);
		}).each(function(){
			// Replace only the important part of the href, not the entire thing
			// Replace the "javascript-is-required.html" with the piece of the href that you want to replace
			var href = $j(this).attr('href');
			var href_cart = href.replace('javascript-is-required.html','https://example.foxycart.com/cart');
			$j(this).attr('href',href_cart);
		});
	});
</script>

    If you have image maps or other methods of adding products to your cart, like image maps or dynamically generated links or forms, you'll have to modify that code as necessary to make sure you get everything.

  3. Test to make sure it's working as expected. If JavaScript is enabled things should be fine. If js is disabled, the user should be sent to your custom page on an add-to-cart attempt.
  4. You might want to make your “JavaScript Required” page link to some instructions (like Google's), and provide a BIG PROMINENT PHONE NUMBER for the customer to call in their order if they want to.

Set a Maximum or Minimum Quantity on the Cart or Order

If you need to limit the quantity of your entire order (and not just per product, which you could use quantity_min and quantity_max for), you can use the JSON cart object. The basic idea is:

  • load up the cart,
  • check the JSON for the parameter you want, and
  • disable/enable the “checkout” link.

Here's an example of disallowing checkout if the order quantity is less than 12: 

<script type="text/javascript" charset="utf-8">
	/* <![CDATA[ */
	function cart_quantity_check() {
		// remove checkout if less than 12
		if (fc_json.product_count < 12) {
			fc_HideCheckout();
			// Display a notification message
			$j("span.fc_cart_notice").html("Please order 12 items or more.");
		}
	}
	$j(document).ready(function(){
		// The setTimeout gets around a Thickbox issue.
		setTimeout("cart_quantity_check()", 0);
	});
	/* ]]> */
</script>

Stick that code somewhere beneath your ^^cart^^

Page Tools

Site Tools