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.
<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="0" /> <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>
Add &max_quantity=1 to your cart add links or a hidden input named “max_quantity” 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.
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.
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>
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.
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.3.0 and later:
<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>
Sure. Just add some love like this:
<script type="text/javascript" charset="utf-8"> /* <![CDATA[ */ $j(document).ready(function(){ // add a new purchase order field $j("#purchase_order").after('<input type="hidden" name="purchase_order" id="purchase_order_hidden" value="N/A">'); // remove the old one $j("#li_purchase_order").remove(); // add a note for the customers $j("#li_nopayment").after("<li>We will invoice you directly after your pickup is complete.</li>"); }); /* ]]> */ </script>
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>
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.
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
If you'd like to alert your customers that javascript is required, here's one method.
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.