EU VAT number text box placement on checkout page. Can you change the placement?

[-M-]

Hi guys,

 

I have a question.

 

There is an option called EU VAT Addon in WHMCS (it's located under 'Addons'). In order to make this work, I created a new Text Box under 'Custom Customer Field' and then I went back to the EU VAT Addon. From there I target/select the Text Box I just created under 'Custom Customer Field'.

 

Tested the form and everything was working fine. It even checks if the entered VAT number is valid. So, so far so good.

 

However, I don't like the placement of this Text Box on the checkout page. Is there a way to place it somewhere else? For example after "Company name" instead?

 

I tried a few things myself, but for some reason, I cannot move it. I can change the .tpl to make the field appear on the desired location, however, it just acts like a normal created text field/box. Unlike the VAT box. I even checked the HTML source and the original VAT Text Box is shown as:

 

<div class="form-group">
   <label for="exampleInputEmail1">BTW nummer</label>
   <input name="customfield[49]" class="form-control" id="customfield49" type="text" size="30" value="dasdadada234234">
</div>

 

I copied everything over and placed it somewhere else, in my case after company name. However it's not working as it should?

 

What am I doing wrong, or am I overlooking something?

 

Thank you in advance.

 

Regards

[brian!]

I have a question.

this seems as good a place as any to ask them!

 

What am I doing wrong, or am I overlooking something?

what I would do would be to copy/move the whole $customfields block to where you want this VAT field to be... exactly how will depend on how many customfields you have, e.g if it's only the one (VAT Number), then you should just be able to copy the $customfields block... if it's more than 1 field, then your friend {if} comes into play...

 

let's say you have more than one customfield, and you want to show the VAT number field after company name - the following would work...

 

                    {foreach $customfields as $customfield}
                       {if $customfield.id eq 49}
                           <div class="col-sm-6">
                               <div class="form-group">
                                   <label for="exampleInputEmail1">{$customfield.name}</label>
                                   {$customfield.input}
                               </div>
                           </div>
                       {/if}
                   {/foreach}

it will still check VAT number validation correctly.

 

and then in the other (original) $customfield block, you can just add the inverse argument in the {if} (within the foreach loop) to show the other customfields..

 

{if $customfield.id neq 49}

[-M-]

this seems as good a place as any to ask them!

 

 

what I would do would be to copy/move the whole $customfields block to where you want this VAT field to be... exactly how will depend on how many customfields you have, e.g if it's only the one (VAT Number), then you should just be able to copy the $customfields block... if it's more than 1 field, then your friend {if} comes into play...

 

let's say you have more than one customfield, and you want to show the VAT number field after company name - the following would work...

 

                    {foreach $customfields as $customfield}
                       {if $customfield.id eq 49}
                           <div class="col-sm-6">
                               <div class="form-group">
                                   <label for="exampleInputEmail1">{$customfield.name}</label>
                                   {$customfield.input}
                               </div>
                           </div>
                       {/if}
                   {/foreach}

it will still check VAT number validation correctly.

 

and then in the other (original) $customfield block, you can just add the inverse argument in the {if} (within the foreach loop) to show the other customfields..

 

{if $customfield.id neq 49}

 

Thank you for responding Brian. I had it similar but without the {if}, so I will give it a go. By the way; is it normal that it's called: "exampleInputEmail1" Looks / sounds a bit weird to me though.

 

Anyways, will try this tomorrow and respond back.

 

Regards

[sentq]

is it normal that it's called: "exampleInputEmail1" Looks / sounds a bit weird to me though.

WHMCS copied it from getbootstrap.com without changing it's value, you can find the same in other template files, but nevermind it will not hurt anybody

[-M-]

Thank you sentq for clearing things up.

 

Well I finally had the change to test it out. Tried several times and at first it didn't work as it should. Then I applied also what brian! mentioned:

 

{if $customfield.id neq 49}

 

to the other custom field block and it works.

 

Almost everything works, except for one minor thing.

 

I am using:

 

<input type="text" name="customfield[49]" id="customfield49" class="field" placeholder="{$LANG.orderForm.btwnummer}" size="20" value="{$customfield.input}"{if $loggedin} readonly{/if}>

 

However that 'spits' out garbage in the field area. Probably because {$customfield.input} is incorrect here?

 

To clarify what I mean with garbage, I uploaded a screenshot:

 

I don't understand what could be wrong with it, because it's almost an exact copy of the company field:

<input type="text" name="companyname" id="inputCompanyName" class="field" placeholder="{$LANG.orderForm.companyName}" value="{$clientsdetails.companyname}"{if $loggedin} readonly{/if}>

 

While typing this, I just thought of using {debug}. And I noticed a several fields. First there are:

 

$customfield

$customfields

 

I guess I should use the first one ($customfield), right?

 

Secondly; there are various variables available for this one:

 

->value = Array (10)

id => "49"

textid => "btwnummer"

name => "BTW nummer"

description => ""

type => "text"

input => "<input type="text" name="customfield[..."

value => "fsdfsfs"

rawvalue => "fsdfsfs"

required => ""

adminonly => ""

 

I now also can see where the 'garbage' comes from.

...anyways, which variable should I use in this case?

 

I think it's either {$customfield.value} or {$customfield.raw}, right?

 

And would this also work for a user which is logged on in this scenario?

 

Sorry for the long story and silly questions; I am just trying to understand this and how it works...

 

Thank you in advance (again)...!

 

Regards

[-M-]

Okay, small update.

 

I have found the correct variable, I think: {$clientsdetails.customfields2}

 

However if I use that in the checkout.tpl like this:

 

{foreach $customfields as $customfield}

{if $customfield.id eq 49}

<div class="col-sm-4">

<div class="form-group prepend-icon">

<label for="exampleInputEmail1" class="field-icon">

<i class="fa fa-sticky-note-o"></i>

</label>

<input type="text" name="customfield[49]" id="customfield49" class="field" placeholder="{$LANG.orderForm.btwnummer}" size="20" value="{$clientsdetails.customfields2}"{if $loggedin} readonly{/if}>

</div>

</div>

{/if}

{/foreach}

 

It won't show anything, just a blank/empty space.

 

But I think it's caused by the {foreach} & {if} statements?

 

Let me clarify; it works great as a new (not registered) customer. However when they are registered (and logged in) it won't show anything anymore? Is there a way to fix this?

 

- - - Updated - - -

 

Okay, I think I am making progress here (sounds kinda lame, but I am proud of it, because of my limited skills).

 

I did the following:

 

                   {foreach $customfields as $customfield}
                       {if $customfield.id eq 49}
                           <div class="col-sm-4">
                               <div class="form-group prepend-icon">
                                   <label for="exampleInputEmail1" class="field-icon">
                                   	<i class="fa fa-sticky-note-o"></i>
                                   </label>
                                   <input type="text" name="customfield[49]" id="customfield49" class="field" placeholder="{$LANG.orderForm.btwnummer}" size="20" value="{$clientsdetails.customfields2}"{if $loggedin} readonly{/if}>
                               </div>
                           </div>
                       {/if}
                   {/foreach}

                   {if $loggedin}
                           <div class="col-sm-4">
                               <div class="form-group prepend-icon">
                                   <label for="exampleInputEmail1" class="field-icon">
                                   	<i class="fa fa-sticky-note-o"></i>
                                   </label>
                                   <input type="text" name="customfield[49]" id="customfield49" class="field" placeholder="{$LANG.orderForm.btwnummer}" size="20" value="{$clientsdetails.customfields2}"{if $loggedin} readonly{/if}>
                               </div>
                           </div>
                   {/if}

 

I think, if I understand this correctly; it will show the first part when an new (unregistered) customer uses the checkout page. And it will show the second part when a returning (logged in) customer uses the checkout page.

 

Did I do this correct? Please advice and/or confirm, so I know I didn't make any errors with this.

 

Thank you.

[brian!]

Probably because {$customfield.input} is incorrect here?

it isn't incorrect - but your use of it is!

 

as you can see from your {debug}, $customfield.input contains the html code for the entire <input> line - but you're trying to use it in the value - which is why you're seeing the html code on-screen.

 

But I think it's caused by the {foreach} & {if} statements?

the only reason for the foreach loop is to access the $customfields array - but if you're going to hard code this, and not use any customfields variables, then why keep the loop.

 

however, I think you're going to need access to the array - so keep the loop.

 

also, it's worth noting you've changed the class from "form-control" to "field" - it should still work, but something to look at if it doesn't.

 

I think, if I understand this correctly; it will show the first part when an new (unregistered) customer uses the checkout page. And it will show the second part when a returning (logged in) customer uses the checkout page.

 

Did I do this correct? Please advice and/or confirm, so I know I didn't make any errors with this.

it's wrong - in at least a couple of ways...

 

1. the first half references {$clientsdetails.customfields2}- but the client isn't logged in, therefore {$clientsdetails} will be empty.

2. the second half checks if the user is logged in twice... once should be enough!

 

and 3, the first half checks if the user is logged in (to determine whether to make the field readonly or not), but we know they're not loggedin, so no need to check!

 

the following is slightly better code... but can still be improved....

 

                    {if !$loggedin}
                   {foreach $customfields as $customfield}
                       {if $customfield.id eq 37}
                           <div class="col-sm-4">
                               <div class="form-group prepend-icon">
                                   <label for="exampleInputEmail1" class="field-icon">
                                       <i class="fa fa-sticky-note-o"></i>
                                   </label>
                                   <input type="text" name="customfield[37]" id="customfield37" class="field" placeholder="{$LANG.orderForm.btwnummer}" size="20" value="{$customfield.value}">
                               </div>
                           </div>
                       {/if}
                   {/foreach}
                   {else}
                           <div class="col-sm-4">
                               <div class="form-group prepend-icon">
                                   <label for="exampleInputEmail1" class="field-icon">
                                       <i class="fa fa-sticky-note-o"></i>
                                   </label>
                                   <input type="text" name="customfield[37]" id="customfield37" class="field" placeholder="{$LANG.orderForm.btwnummer}" size="20" value="{$clientsdetails.customfields1}" readonly>
                               </div> 
                           </div>
                   {/if}

change 37 to 49; customfields1 to customfields2 and it should work for you.

 

also, be very careful when referencing clientstats.customfields directly - if you add new custom fields and change the values of their display order, then their order within $clientstats will also change and you might start referencing a different (wrong!) custom field.

[-M-]

(sorry for the late reply, only noticed your reply today)

 

You sure know how to ruin my party Brian.

...I thought I nailed it, but apparently I didn't. Though it worked for some reason, therefor I was happy.

 

I read your remarks and applied the code you supplied. Thank you for explaining things.

 

also, be very careful when referencing clientstats.customfields directly - if you add new custom fields and change the values of their display order, then their order within $clientstats will also change and you might start referencing a different (wrong!) custom field.

 

Thank you for pointing that out. I didn't give that any thought to be honest, but will now, *if* I am gonna change and/or add things. Highly appreciated.

 

Thank you!