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.

Custom Order Form

knightknightknightknight Member
in Help edited March 2008
I'm a complete newbie to the world of ecarts, and because my product is not product more an service I can't visualise how this works yet.

I have a product that will essentially be a lengthy order form that will capture the job details and billing etc. The form would be broken up into steps that your able to review/edit before final submit.

From the FoxyAdmin I can set up my various service into categories but between adding the product to the cart and payment of the product, how do I do the middle bit!?!

My first thought is to use eForm as it will have the validation (must requirement), staggering the form into stages and or editing before submitting.

Except I have no idea where to start with regard to the foxy one!?

Please help. Thanks.
Comments
  • lukeluke FoxyCart Team
    Hey knight.

    What you're describing sounds similar to something like a conference registration. You need to gather a bunch of information up front, and then pass it along to the checkout process. There are two main ways to do this:

    1) You can use custom fields in your checkout template (see the wiki) to gather all of the information you need as part of the checkout process.

    2) You can use multiple product options first, get everything ready to go and then send it all to the cart as one product (potentially using the cart=checkout method to go directly to the checkout screen).

    What are the details of your billing form? Besides basic stuff that FoxyCart already handles (billing information, contact information, etc), what other data would you need to capture? Would it make sense to capture this information on the checkout screen or beforehand as a product option added to the cart?

    We're here to serve you and help you be successful so please let us know if that gets you going in the right direction.
  • @luke, thanks for you reply. :)

    Yes also similar to an event registration forms I guess.

    => Add the product to your cart => Capture the info needed, with review process before final submit => Process Payment => Copy purchase/details to customer | Copy to office.

    At the moment I'm testing out different carts to get a fill for what they do. And so far having a product which essentially is just a form capturing the requirements isn't standard, and modifying the global/generic order forms I've seen wouldn't work if the details vary from product to product.

    the first part of the product would have to be a custom form with custom fields, as each products details will be different. Having a review/edit process to double double check the details would be essential to try and minimise mistakes.

    Multiple product options would make sense, as all that would need to be captured is the job details and who the bill would go to. That way I could have 1 standard billing form but many product capture detail forms. I like the idea of capturing the product details first then let the customer review the order make corrections before final submit/payment. Rather the other way around.

    ..another option would be to have Royal Mail's (UK) postocde address finder integrated into the form, but this is a different issue.

    How would this work with the cart=>checkout idea. Can eForm be used to pass data or could this be security risk..

    Looking at the wiki on forms, I can't see any details on user inputting of data and validation of the form. Which is why I thought eForm would be the bast option to capture the details then somehow pass this to Foxy.

    => Add the product to your cart => Capture the info needed, with review process before final submit => Process Payment => Copy purchase/details to customer | Copy to office.


    At the moment I'm not totally sure how to put this together so I've many question and any input into get my cart foxed up I'm listening!
  • brettbrett FoxyCart Team
    edited March 2008
    I think you're getting the first two steps reversed. It'd be:
    Capture the info needed, w/review, then on submit =>
    Add to cart (or, conceivably, direct to checkout and skip the cart entirely).

    Unlike most of the systems you're probably looking at, FoxyCart doesn't care what you do so long as you POST or GET info to yourdomain.foxycart.com/cart.

    So the eForm option is probably the best that I see, though it might take a bit of love to make it work exactly how you want (particularly with regard to the confirmation step prior to submitting; not sure if that's built in).
  • lukeluke FoxyCart Team
    Hey Knight.

    We'd like to think we're one of the most flexible systems available.

    You should be able to build the form using basic html, set the action to your FoxyCart cart page with https and use JavaScript to validate your user data. We have a PreProcess() JavaScript function that will help with that.

    1) Setup your form: http://wiki.foxycart.com/docs:parameters
    The direct to checkout option and the empty the cart while adding an item option would probably be helpful to you:
    <input type="hidden" name="cart" value="checkout" />
    <input type="hidden" name="empty" value="true" />
    
    2) Use JavaScript to validate your data with a PreProcess() function: http://wiki.foxycart.com/docs:json
    Are you familiar with javascript? Using JQuery (which is included in the javascript_includes.js) would be really helpful. For example, you could write a PreProcess() function to validate all your input fields with the class "required":
    function PreProcess() {
      $j("input.required, textarea.required, select.required").each(function() {
        if ((this.type == "text" || this.type == "textarea" || this.type == "select-one") && this.value == "") {
            alert(this.name + " is a required field");
            return false;
        } else if (this.type == "checkbox" && !this.checked) {
            alert(this.name + " must be checked to continue");
            return false;
        } else {
            return true;
        }
    }
    
    That's just a quick and dirty example... hopefully that points you in the right direction. Please let us know if there's anything else we can do to serve you.
  • @brett, I think your right. I'm not totally clued up to the whole eCart flow yet. I'm getting stuck with the idea that its a product that has to sit in a cart when actually it could just go straight to checkout.

    I'll have to check into eForm a bit more, but form then to checkout and skip the cart altogether sounds like a good idea.

    @luke, thanks for the information. Now I got a start and a clearer idea of the flow could work I'll see what I can get put together and update this post when I can.
  • knightknightknightknight Member
    edited June 2008
    @brett, you suggestion seems the simplest to add. User fills in form which submits straight to cart.

    Custom Form: Name, Address, Postcode, Property Details => Checkout => Customer gets an invoice with details and copy of the Form gets emailed to booker.

    I'm in the process of putting this together and possibly thinking to far ahead, except I don't quite understand where the form data goes onceI hit the checkout. Does the checkout hold that POST form data until the checkout page details and card payment has been completed.

    If so, does does the checkout complete page have some configuration options to auto send the customer and backend office the required emails of whats been completed in the form?


    I'm a bit lost on where I should be going next..
  • lukeluke FoxyCart Team
    The two questions you'll want to ask yourself are these:

    1) Do I want to collect data about an individual item being ordered
    OR
    2) About the order in general?

    #1 lets you have multiple items in the cart and collects all of the information as product options for the product being purchased. As an example, I know of a site that is doing business cards so the name, address, phone number information being collected is not part of the billing info but actually part of the individual product details. They just pass them into the cart as product options along with the item name and price.

    #2 is slightly different because you may be capturing info about the entire order. In this case you'll want to use the custom fields option in your checkout template.

    You can always do a combination of the two as well and even pre-fill your checkout page by sending the same field name values to the cart (customer_first_name, customer_last_name, etc...). That will load up the checkout page with pre-filled data but also sets up your customers as single user customers meaning they will not have to enter a password.

    Is that helpful? Some of that is on the wiki if you hunt around... please let us know if you can't find anything.

    Also, in regards to sending emails to backend office people, the receipt is sent to the customer based on the email template you set up. You can also send additional emails to the customer and/or your backend people by using category specific emails. An example might be if you had a category dedicated to conference registrations. If someone buys something from that category, maybe a special email needs to be sent to the customer detailing the itinerary for the conference. The category specific emails let you do just that. As a side note, for emails sent to your own team, we recommend using a mailing list so that you can control of who gets the emails by just adjusting the list membership.

    Hope that helps. Please feel free to ask any other questions you have.

    There's some
  • knightknightknightknight Member
    edited June 2008
    @luke, thanks for your reply. I just need to keep reading the wiki it's slowly sinking in. I tend to work backwards rather then read the manual then apply.

    I seem to have things work now :).

    The straight to checkout works, using the Custom Checkout Fields ^^custom_begin, _end^^ in the checkout template. But what if later on I want a different product that doesn't require or has different fields. I assume this method is only suitable for 1 product only?

    The other method I've tried is Form (data) => Checkout. But is there a way of hiding in the Cart view the fields previously field out for the product. Or now thinking about it that would be the best way using the verifying data stage that the details in the cart are entered correctly before purchase. Then I can use the Pre-Populating fields maybe.

    As this product is data captured each time it's added to the cart it has to be unique, but how do I, let the customer add multiple items of the same product whilst retaining the uniqueness of each?

    If I can do that the method two where the product is the data captured would work, plus it would enable multiple purchases in one transaction. :)

    Also how to I default the value on the billing address to UK or even better restrict the billing to UK only?

    Can the billing information also include email (*required) field and make the telephone a required field also?


    Forgot to also ask. For the email recipts do I simply echo the ^^custom_begin^^ placeholder to the template so that it include the product information?

    Thought of another question. This is for something else I'll be working on, how do I add '15 in left' where & how would you manage stock?
  • brettbrett FoxyCart Team
    If the fields you're collecting is truly "product" specific, then doing it pre-checkout is a better option. If there are fields you need for _all_ your products, then you could stick those as custom fields on the checkout. That's kind of what Luke was describing, but it comes down to what makes the most sense for your products/checkout.

    You can hide just about anything, anywhere, with CSS and/or javascript. So you can definitely hide stuff in the cart. I'm not 100% clear on what you're looking to hide though as far as unique fields?

    Verifying the data is best done on your end, prior to adding to the cart. You can use the fc_PreProcess() function to prevent the add-to-cart if you have a validation error. Just return false and it won't add to cart.

    As far as uniqueness goes, check out the quantity_max attribute. That might be what you're looking for.

    The country field on the checkout gets auto-populated based on the customer's IP address, and it should be 99% accurate.

    You can definitely add additional fields like billing email and phone:
    http://wiki.foxycart.com/faqs#can_i_make_customer_phone_a_required_field
    http://wiki.foxycart.com/faqs#can_i_move_the_custom_field_div
    (To add a billing email, you'd add it as a custom field, then use jQuery to relocate it.)

    For email receipts, click the little help icon on the receipt template page for an explanation of which placeholders are available.

    Inventory is up to you and whatever system you're using on your end. Here's a simple MODx inventory example:
    http://wiki.foxycart.com/integration?datasrt=&dataflt=tags:inventory
  • @brett, yes the data/details to be collected are the product. Finally got my head around the mental block I had on that! doh!

    Your right there's more then one way of doing what I want. Validation make sense to do it my side, then I can decide on what to use for the form. Plus I want to keep the checkout available for other future uses rather then use custom fields, as I understand you can't have multiple type of checkout template eg: cart?cart=checkout_frozen-fish or cart?cart=checkout_frozen-peas etc etc. However straight to checkout could have worked if that was my only product.

    The fields I wanted to hide, but thought against it was the product data/details. However, having the data/details of the product display in the cart adds as an extra validation step almost. Although thinking about it, if, I spotted an mistake in the carts data/details how could I have the option to go back and modify the products details!?

    I'll checkout quantity_max and see if that works. And try the jQuery on the checkout fields. :)

    The IP I was using foxycart from defaulting to US not UK. Not a major problem but the client I'm developing for will be a UK only product. Hence the request to restrict to UK on the country field.

    I was getting a head of myself on the email receipts and inventory question!!

    Thanks. :)



    Doing the pre-checkout with the details in the cart
  • knightknightknightknight Member
    edited July 2008
    The quantity value seems to work a treat as limiting the product to an single item.

    Pre-cart. I've keep it quite simple for the moment, but I'm having some problems using jQuery (jQuery pre-1.2.4) and jQuery.validate ( jQuery validation plug-in 1.3) for the validation. In my (MODx) template I've got the following:

    <!-- jQuery -->
    <script src="[(base_url)]assets/templates/v1/js-form/jquery.js" type="text/javascript"></script>
    <script src="[(base_url)]assets/templates/v1/js-form/jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $("#epcproduct").validate();
    });
    </script>

    Then I'm using class="required" on each of the fields that require some input. Now if I hit submit I get the default jQuery 'This field is required.'. However if I fill out the form it bypasses the foxybox! If I commenting out 'jquery.js and jquery.validate.js' I loose the validation but I get the foxybox. What's going on...?


    Also a couple of questions with the pre-checkout.

    1. When the user hits the 'continue shopping' button can I change or choose different re-directions. In this instance I want the form they arrive back to to reset to blank and not show the previous value entered. Or simply re-direct them to the store front?

    The work around to the above is to place a reset button on the page. But is would be cooler if it returned blank or re-directed.

    2. Is a 'modify' details possible from the checkout. For example user submit form details for product, but they notice an error in the checkout hit modify and foxybox box pops up with those products details for the user to modify and re-submit?
  • brettbrett FoxyCart Team
    Yeah, sorry about jQuery being so old (comparatively). Our next version has taken a lot longer than expected, but it'll include 1.2.6 (or whatever's the latest when we finally release it).

    Most of what you're asking about comes down to the fc_PreProcess() and fc_BuildFoxyCart() functions, which get called before and after the foxybox loads. http://wiki.foxycart.com/docs:json

    The issue with the validation plugin is that it's using the onsubmit event, which is also what the foxybox is using. I'm not super familiar with jquery.validate.js, but you'll either need to:
    1. have the validate() call necessary FoxyCart functions, or
    2. stick the validate() inside the fc_PreProcess(). Have it return false if there are errors, and the foxybox won't load. Else return true and it'll load just as expected.

    So, when they hit "continue shopping" (or otherwise close the thickbox) it'll run fc_BuildFoxyCart(). So create a function with that name and have it clear out the values of the form. Or have it reload the page. Or whatever.

    Modifying the cart on checkout isn't currently possible. We don't have a strong consensus on this. Some of our users (and some "experts") think it's absolutely mission-critical, but we're not convinced. We're open to discussion, but it's not a priority at this point. Doing it right would definitely involve AJAX, but it gets a bit more complicated when you consider a one-page checkout. What if the cart is modified after tax and shipping have been applied? What if it's multi-ship and you remove an entire shipto name? It's not impossible, but it's not the super easy functionality that it might first seem.

    (Also, you can't really "modify" an item. You can remove or change quantity, but you can't say "Oh, this is a blue widget, I want a red one." I don't think I've seen any system that allows that, come to think of it.)

    If you need help modifying the validation plugin, let me know.

    Oh and final note:
    Loading more than one jQuery can get really odd and lead to unexpected behavior. If you need 1.2.6, I'd kind of recreate your own foxycart_includes.js for the time being. If you view source you can see how it's broken up. Just replace the jquery line with your new version of jQuery, save it to your server, and you should be fine. (I did this for another site last week.) That way you don't load jQ twice. (It'll still load it in no-conflict mode though, so it'd be $j() instead of just $().

    Hope that helps.
  • I'm still stuck!? :( ..and I've just lost my the post I typed out. :(

    I'm not a JS guru but all I want is some simple field validation on blank fields. The rest I can work out afterwards.. I'm so close to finishing and ready to go live but I can't get this pre validation working before passing to the cart!

    Using the original method, and using the $j with and with out the extra jQuery call this still by passes the validation.

    <!-- BEGIN FOXYCART FILES -->
    <script src="https://DOMAIN/files/foxycart_includes.js"; type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="https://DOMAIN/files/foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="https://DOMAIN/themes/standard/theme.foxybox.css"; type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->

    <!-- jQuery -->
    <script src="assets/templates/v1/js-form/jquery.js" type="text/javascript"></script>
    <script src="assets/templates/v1/js-form/jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript">
    $j(document).ready(function() {
    $j("#epcproduct").validate();
    });
    </script>

    I've also tried dropping and hoping the validate() will use what ever is in foxy_includes, but doesn't work and I assume it still needs jquery.validate.js.

    I think I tried repacking the jQuery to 1.2.6 but I can't recall it working..

    Also I'm slightly confused with the fc_PreProcess, is that called like a regular JS script? Do I need to use fc_PreProcess with the <!-- BEGIN FOXYCART FILES -->..<!-- END FOXYCART FILES --> files? Do I leave <!-- BEGIN FOXYCART FILES -->..<!-- END FOXYCART FILES --> out!?!

    Please Foxy give us designers some simple pre_validation... I'm so close the finish line but so far!
  • lukeluke FoxyCart Team
    Knight, you shouldn't need your own JQuery, as that's already included in the foxycart files. You have to have those files for foxycart to function, so I wouldn't remove them. :)

    fc_PreProcess() is not that complicated, it's just a method that is called before the foxycart box is displayed to the customer. If it returns false, the cart won't pop up, if it returns true, the cart will. I'm not familiar with the validation jquery plugin... and it sounds like you aren't either. Can you get it to return a true or a false? If so, it should be this simple:
    function fc_PreProcess() {
      var isValid = true;
      // isValid = <your validate function here>
      return isValid
    }
    
    If you're not going to use validate, you can do it yourself with some jquery like so:
    function fc_PreProcess() {
      var isValid = true;
     // loop through all the items with the "fc_required" css class
     $j(".fc_required").each(function(){
        if (this.type == "text" || this.type == "textarea") {
          if (this.value == "") {
             isValid = false;
          }
        } else if (this.type == "checkbox") {
          if (!this.checked) {
             isValid = false;
          }
       }
    });  
      return isValid;
    }
    
    That's just a quick example. It sounds like you're getting into the "developer" side of FoxyCart things and you may need to employ a developer.
  • brettbrett FoxyCart Team
    > Please Foxy give us designers some simple pre_validation... I'm so close the finish line but so far!

    Yeah, we really should, as this comes up relatively often, and basic validation is _really_ easy.

    Can you whisper me your URL and I'll show you how to get going?

    Do you need the validation plugin or can you get by with just simple validation of fields? The validation plugin does a LOT that you may not need, and jQuery is quite easy to roll your own validation.
Sign In or Register to comment.