Show custom fields when the quantity field is increased on the checkout

Hi there !

I'm making a conference booking page. Each time a ticket (the quantity) is increased on the checkout page, I need to show some custom fields (first name, surname and email address.)

For example, if the quantity field was set to 3, it would show 3 rows of custom fields (first name, surname and email), so I can capture info about each quantity (or ticket in my scenario).

If the quantity was changed back to 2, it would show just 2 rows of custom fields.

Whats the best way to go about this? Twig or jquery?

Any help would be much appreciated.


Comments
  • fc_adamfc_adam FoxyCart Team
    @saint_malo,

    Good question. It'll actually be a combination of Twig and JS to set this up.

    Within your store's configuration page, the "Custom checkout fields" setting would look like a little like this (obviously with labels and additional HTML for display):
    {% for i in 1..item_count %}
    <input name="ticket_first_name_{{ i }}" type="text" />
    <input name="ticket_last_name_{{ i }}" type="text" />
    <input name="ticket_email_{{ i }}" type="text" />
    {% endfor %}
    That code will output different inputs matching the total quantity of the cart. If there are a total of 3 products, then there will be three of each input. Then in the setting for the "Add custom header and footer code to your templates", set this as the custom footer:
    <script>
    FC.client.on('cart-item-quantity-update.done', FC.checkout.renderAdditionalFields );
    FC.client.on('cart-item-remove.done', FC.checkout.renderAdditionalFields );
    </script>
    That bit of javascript ensures whenever the cart quantity is updated, it re-renders the custom fields area of the page to match.
  • @fc_adam Thanks for the fast response - will give this a test and report back.

    You mentioned:
    It re-renders the custom fields area of the page to match
    Can custom fields only be used in a particular area of the template? Or can they be used anywhere on the page?
  • fc_adamfc_adam FoxyCart Team
    Our twig templates can be customised as much as you want - so you could put the custom fields somewhere else if you want. The configuration option I mentioned though for the "custom checkout fields" will insert them towards the bottom of the checkout, and the javascript I provided does assume that's where they are as well.
  • thanks @fc_admin :) that has answered my question!
  • So, i'm finally at the stage where i'm building my first FoxyCart store and getting round to implementing the code that @fc_adam posted.

    The code doesn't quite work as expected...I just want to double check a few points.

    I'm editing checkout.inc.twig so that i can position the custom fields where I need them on my checkout page. I placed the twig code in here and added the script to the footer of the page.

    The custom fields show up when I preview the checkout page. When I adjust the quantity in the cart, no new custom fields are added until I refresh the page. Then the correct amount of custom fields display?

    Is there anyway to add these extra fields in sync with the quantity field, like how the price adjusts when the quantity field is adjusted?
  • saint_malosaint_malo Member
    edited October 2016
    I managed to get it working! I changed:


    <script>
    FC.client.on('cart-item-quantity-update.done', FC.checkout.renderAdditionalFields );
    FC.client.on('cart-item-remove.done', FC.checkout.renderAdditionalFields );
    </script>


    To


    <script>
    FC.client.on('cart-item-quantity-update.done', FC.checkout.render );
    FC.client.on('cart-item-remove.done', FC.checkout.render );
    </script>
  • fc_romanfc_roman Member, FoxyCart Team
    Happy to see you've got it working — looks great.

    Thank you for sharing the code modification did it for you.
Sign In or Register to comment.