Conditional check-box in v2.0 checkout - "almost works"

JBurnsJBurns Member
Hello,

I'm working on upgrading my site to v2.0. I would like to do a custom form field on the checkout page. The form makes some disclosures regarding shipping to Canada and requires the purchaser to accept before the order will process. The is as follows (based on the wiki on custom forms for v2.0):

<div id="showIfCanada" class="fc-form-group">
<div class="col-sm-8 col-sm-offset-3" data-fc-error-for="okCanada" data-fc-error-class="fc-alert-container--error">
<div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
<label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
Shipments to Canada
</label>
<div class="fc-form-group" style="margin-left:10px">
<input type="checkbox" id="okCanada" name="h:okCanada" value="1" data-fc-required/>
<p>Please confirm your understanding of the following shipping policy for Canada.</p>
<p>Shipping charges for Canada do not include Canadian duties, fees and taxes. The buyer is responsible
for, and will be required to pay upon delivery, any duties, fees and taxes imposed by the Canadian
government. Designmod is not responsible for these costs. For fully-costed shipping options for Canada,
please contact DesignMod to place your order over the telephone.</p>
</div>
</div>
</div>
</div>

I have managed to make the form appear only if the shipping_address.country is Canada (the site is set to only allow US and Canada shipping) using the following header insert:

<script type="text/javascript">
function shipCanada() {
string_to_check = FC.json.shipping_address.country;
if (string_to_check !== "CA"){
okCanada="1";
document.getElementById("showIfCanada").style.display = 'none';
document.getElementById("okCanada").checked = true;
}
else {
okCanada="0";
document.getElementById("showIfCanada").style.display = 'inherit';
document.getElementById("okCanada").checked = false;
}
}

if (FC.json.context == "checkout") {
FC.client.on("customer-address-change", shipCanada);
FC.client.on("ready", shipCanada);
}
</script>

This almost works, but has some strange actions:

1) If there is no zipcode inserted in the cart then I go to checkout: The conditional form is not there when I go to checkout; however, as soon as I type in the email address in the checkout and hit tab to move to First Name the conditional box reappears. Then, when I insert a U.S. zip (so it looks up the city / state) the conditional form goes away.

2) If a zipcode is inserted in the cart and I then go to checkout: If I do not reinsert the zip code in the checkout form (no need to because it's pre-filled) the conditional box stays and shows as an error if the box is not checked.

3) If as in (2) above, but you go and reinsert the zip, the conditional box goes away but the "1 piece of information is missing" warning stays. However, if you hit "Confirm Your Order" the order will process.

I'm sure there are probably some other strange actions if I try hard enough but those are the ones I can hit easily enough that I suspect a customer will also.

The test sit is "designmod.com/test". The user & pw are "testing", "foxycart20" -- this is just to keep the general public from ending up there accidentally.

Any ideas of why this might be happening and code changes that might fix it? I feel like I'm SO close to getting it to do what I want.

Thanks,

James
Comments
  • fc_adamfc_adam FoxyCart Team
    edited March 2015
    @JBurns,

    Good question. While JS can be a solid way to approach it - with how our checkout works in 2.0, I'd actually suggest switching to using Twig to power the template display logic. That will remove the need for most of the javascript there and should hopefully get it working properly.

    You can try something like this:

    1) Wrap your custom HTML in a twig statement like this:
    {% if shipping_address.country == "CA"%}
    {# your code here #}
    {% endif %}
    What that code will do is only output that HTML if the shipping_address.country value is "CA".

    That's great on preload - but you also need it to happen whenever the address changes, or if the customer logins. You can do that with a new JS approach like this:
    <script type="text/javascript">
    function shipCanada() {
    FC.checkout.renderAdditionalFields();
    }

    if (FC.json.context == "checkout") {
    FC.client.on("customer-address-change", shipCanada);
    FC.client.on("customer-login", shipCanada);
    FC.client.on("ready", shipCanada);
    }
    </script>
    That will trigger the additional fields on the checkout area to be rerendered from the template. That will mean that the Twig conditional statement we added above will be rerun and so will hide or show the HTML dependant on that country value.
  • YEAH! You rock! Works perfectly -- at least I can't make it break. Guess I have to learn some Twig.

    Thanks again to Foxycart for an outstanding platform.
Sign In or Register to comment.