Adding additional address fields

We want to add two more address fields, Address 3 and Address 4 -the standard 2 aren't enough for quite a lot of cases. It doesn't look as though we can do this via simple configuration (v2.0), so we've been looking at editing the checkout template, but this isn't going well either - I can get a custom template to load from a remote URL but it doesn't build from any local Twig includes, instead seems to search foxycart repositories for them, so the key include (address.checkout.inc.twig) isn't used.

The only part we would seem to need to change is the address bit. Can anyone help?
Comments
  • fc_adamfc_adam FoxyCart Team
    @pumkincreative,

    We don't currently support loading custom Twig includes into your templates unfortunately. We have some improvements coming to editing the default twig templates in the future, but for now you'll need to include the custom twig template within the checkout template itself. So instead of having a call to {% include address.checkout.inc.twig %} you'll paste that actual template code in it's place. You can then edit the template as required. It results in quite a large template but is the best way to achieve it right now.
  • Thanks Adam. I'm a bit uncomfortable with this solution, not least because we then aren't using the latest official templates and probably lining ourselves up for future headaches. Also the address include appears three times in the checkout template and so by pasting it directly in place we'd have a very un-DRY template.

    We are putting a system together on behalf of a client and they have pointed out that they frequently receive orders that span more than two lines + city and postal code. For example:

    Prolongacion Bosques de Reforma 1592 E PH2
    Bosques de las Lomas
    Cuajimalpa de Morelos
    Distrito Federal

    Even our own studio address:

    Four Corners
    121 Roman Road
    Bethnal Green

    And come to think of it, my home address covers three lines too (which I won't post here just now).

    What are the chances of getting you guys to include options to show a third and fourth address line as an official update?
  • Something that just came to mind - the other, perhaps simpler, option I can think of would be to allow line-breaks in the address field so that at least people can then type their own address on separate lines.
  • fc_adamfc_adam FoxyCart Team
    @pumkincreative,

    It's a possibility, but it probably wouldn't be a change we'd roll out into 2.0, but a future version. I definitely understand that having to paste in the address include is not an optimal solution at all (and something that we'll have a better approach for in our next version), but for now it is your best bet for making DOM changes.
  • Thanks Adam, when can we expect the next version?
  • fc_adamfc_adam FoxyCart Team
    @pumkincreative,

    We don't have any set release date yet, but we may have some updates for you relating to more easily updating just the address block. We'll get back to you soon.
  • That would be very welcome Adam.
  • SimonSimon Member
    Hi,

    Is this still the suggested solution for adding additional address fields to the checkout?

    If so I am a bit confused on how to implement it.

    I currently have the following in my checkout template:-

    <div id="fc">
    {% include 'svg.inc.twig' %}
    {% import "utils.inc.twig" as utils %}
    {% embed 'checkout.inc.twig' %}
    {% endembed %}
    </div>


    If I want to edit the address.checkout.inc.twig template do I have to then add the complete checkout.inc.twig to be able to then add the address.checkout.inc.twig code?

    Hopefully I'm missing another easier way to do this. Can someone guide me?
  • fc_adamfc_adam FoxyCart Team
    @Simon,

    Thanks for reaching out. It is still a little awkward if you're wanting to make changes to the address fields - but it's a little easier now than it was. So we can give you more precise steps, could you clarify what fields you're wanting to add - and just to shipping, or to billing, or to both?
  • SimonSimon Member
    Hi Adam,

    We would just like to add a further 2 optional address fields to the shipping section.

    Cheers


  • fc_adamfc_adam FoxyCart Team
    @Simon,

    Thanks for clarifying. So since this thread was started, we've added in Twig's embed functionality - which allows you to overwrite blocks within the page. For what you're wanting, you could overwrite the customer shipping address block. Within that you'll need to include the whole address include block and make your edits - so it's still awkward in that regard - but at least it's just one portion that needs to be included. I'm assuming your store is just using the normal single-ship set up, and as such, you should be able to paste this within the {% embed 'checkout.inc.twig' %} and {% endembed %} lines in your checkout template: http://pastie.org/private/h7di7wga9q2ubzc5xs60q

    Two things are happening in that code. Firstly it's a copy of the normal customer_shipping block from checkout.inc.twig. Next, it replaces the normal line of {% include "address.checkout.inc.twig" with {'address': shipping_address} %} with the actual address.checkout.inc.twig code, which you can then edit. In the example above, I've included an extra shipping address line - making it "shipping_address3".
  • SimonSimon Member
    HI Adam,

    Thanks for that code, it successfully adds the 3rd address line.

    One thing I have noticed is that when using that code the checkbox "Use a different billing address" disappears. If I revert back to the original code it is visible.

    I was actually about to ask how to disable the Billing Address section from the checkout as we don't really need it. Is there a simple way to disable it or is that through the templates too?

    Thanks
  • fc_adamfc_adam FoxyCart Team
    @Simon,

    Ah I can see that too - looks like a small issue with our javascript rerendering that we'll need to look into.

    You can disable the billing address completely by essentially forcing that "use separate billing address" checkbox to be a hidden false input. To do that, look for this code:
    {% if show_billing_address and multiship_show_use_different_addresses %}
    {{ utils.use_different_addresses(use_different_addresses, config.lang) }}
    {% else %}
    <input type="hidden" id="use_different_addresses" name="use_different_addresses" value="0" />
    {% endif %}
    And replace it with just this:
    <input type="hidden" id="use_different_addresses" name="use_different_addresses" value="0" />
    Worth noting - by taking this approach, you could cause issues for anyone that wants to ship their order to an address that is different than their billing address attached to their payment method. Some gateways block transactions where the billing address doesn't match that which is linked to their card.
  • SimonSimon Member
    Hi Adam,

    What we prefer to do is to only have a single address field for the customer and ask them to provide an alternate shipping address in the additional order details field. This is how we currently work and it avoids the possible issue with the gateway that you rightly mentioned.

    I've changed the code as you described but I still see the billing address section. below is the html output where you can see the input type set to hidden but it is followed by the billing address section.

    <input type="hidden" id="use_different_addresses" name="use_different_addresses" value="0" />
    </section><!-- data-fc-id="block-customer-shipping" -->

    <section data-fc-id="block-customer-billing" class="fc-checkout__section--customer-billing-address">
    <fieldset class="fc-address-entry">
    <legend><span class="fc-section-counter"></span>
    Your Billing Address
    </legend>

  • fc_adamfc_adam FoxyCart Team
    @Simon,

    Could you confirm for me you're store we're you're applying the code? By default, if the customer hits your checkout with a shippable product, the only address fields they should see should be the shipping address. The billing address should be hidden, and only shown if the customer selects the "use a different billing address" checkbox. It sounds like something is happening on your checkout so I'd like to take a look.

    What you've described as your desire is pretty much how our checkout works - but in reverse. We default to just showing the shipping address and they can specify a unique billing address if they want to. If they don't though - they only ever see the shipping address.
  • fc_adamfc_adam FoxyCart Team
    edited June 2016
    @Simon,

    Thanks for whispering that. When I load your checkout - it's correctly just showing the shipping address fields, and no billing address fields. Could you try resetting your cart session (a URL of YOURSTORE.foxycart.com/cart?empty=reset), and then add a product again and proceed to checkout and see if it still displays the billing address? I also tried using your current checkout template on my own store and wasn't able to replicate it then either.

    For an example of how our default checkout looks - with the shipping address fields only visible by default, with an optional different billing address - take a look at our example checkout:

    image
  • SimonSimon Member
    Adam,

    You are right, resetting the cart has cleared it here so it now appears correctly. Thank you.

    Going back to the 3rd address field, the data entered in that field is not treated as address data and appears on the receipt separately as "additional information". We would obviously like this to appear as part of the address as it also needs to appear in Orderdesk to be processed onto labels. Is that possible?

    Thanks.
  • fc_adamfc_adam FoxyCart Team
    @Simon,

    Ah yes it will too. As it's not a standard checkout field - it is assigned as a custom value for the transaction. You could force it to display within the address fields on the receipt and in the email - but you'd need to edit the templates there as well.

    For OrderDesk - again because it's a custom field and not a standard address value, it'll be treated as such there as well. For getting it to appear on the shipping labels, that may require some form of customisation to your OrderDesk set up. I'm not exactly sure what's possible there - you'd be best served reaching out to their support to ask David what your options might be there.
  • SimonSimon Member
    Thanks for clarifying that Adam.

    In that case I think I will drop the idea of the 3rd field as it will not really serve its purpose.

    I will instead move the 2nd address field onto it's own line in the checkout so that there is ample room if people need to add a longer address.





  • fc_adamfc_adam FoxyCart Team
    @Simon,

    Ah cool - that could work well.
  • SimonSimon Member
    Hi Adam

    It seems that after some testing we have agreed that we will after all use the separate billing address functionality.

    So the only modification I want to make to the checkout layout is to move the Address 2 field onto a new line in both the shipping and billing sections.

    The code I used from you above only covers the shipping address I believe? Can you assist with the required code to do this?

    Also, can we get around the js issue you mentioned above with the "Use a different billing address" disappearing when we add in the custom templates.

    Hope that makes sense!

    Cheers
    Simon


  • fc_adamfc_adam FoxyCart Team
    @Simon,

    Thanks for the update.

    For what you're describing, just altering the way the address 2 field displays - you can simply do that with CSS. That way you don't need to overwrite any templates, and won't run into the checkbox issue we discussed earlier (we are working on a fix for that though). Paste the following into your store's header configuration, as found on the "configuration" page of the administration, within the "add custom header and footer code to your templates" option:
    <style type="text/css">
    @media (min-width: 768px) {
    #fc .fc-address-entry .fc-form-group--multiple-inline .fc-container__grid--input--address1,
    #fc .fc-address-entry .fc-form-group--multiple-inline .fc-container__grid--label--address2 {
    width: 66.66667%;
    padding-left: 15px;
    padding-right: 15px;
    }
    #fc .fc-address-entry .fc-form-group--multiple-inline .fc-container__grid--label--address2 {
    margin-left: 25%;
    clear: both;
    margin-top: 15px;
    }
    }

    @media (max-width: 767px) {
    #fc .fc-address-entry .fc-form-group--multiple-inline .fc-container__grid--input--address1,
    #fc .fc-address-entry .fc-form-group--multiple-inline .fc-container__grid--label--address2 {
    width:100%;
    padding-left:15px;
    padding-right:15px;
    }
    #fc .fc-address-entry .fc-form-group--multiple-inline .fc-container__grid--label--address2 {
    clear: both;
    margin-top: 8px;
    }
    }
    </style>
  • SimonSimon Member
    Hi @fc_adam,

    Thanks for the css, I was messing with the templates and removing the inline classes! Obviously your way is a lot easier :)

    Thanks again,
    Simon
Sign In or Register to comment.