Jump to content
Sign in to follow this  
MvdL1979

Ordering "Addtional fields" on checkout.tpl?

Recommended Posts

Hi everyone!

Okay, I am redoing our WHMCS template and it's going pretty well so far (though time consuming). I am now redoing the "last" page of the order forms called checkout.tpl.
I have about 7 additional fields I have created before, so far everything is perfect and they are displayed in the browsers...

...however they are all "dumped" in the same location/area. However I want "additional fields" 1, 2 and 5 on a different location (more at the top).
Additional fields 3 and 7 should be somewhere in the middle and fields 4 and 6 should be displayed all at the bottom after all the other (regular) fields.

I guess it's possible, but how do I do it? I did fool around with one field, however the result is kinda lacking and I have no idea if it's a solid solution.

My example (this one is displaying the birthday field I create in WHMCS):

                        {if $customfields}
                            {foreach $customfields as $customfield}
                        
                            {if $customfield.textid eq "birthdate"}                        
                                        <div class="col-sm-4">
                                            <div class="form-group prepend-icon">
                                                <label for="customfield{$customfield.id}" class="field-icon">
                                                    <i class="fas fa-calendar-alt"></i>
                                                    {$customfield.name}
                                                </label>
                                                {$customfield.input}
                                                {if $customfield.description}
                                                    <span class="field-help-text">
                                                        {$customfield.description}
                                                    </span>
                                                {/if}
                                            </div>
                                        </div>
                            {/if}
                            {/foreach}
                        {/if}

Now this actually does display the "birthdate"-field in the desired location, however:

  1. The entered information in the field is being displayed "underneath" the icon (fa-calendar-alt)
  2. Placeholder can not be used in the above case, as it's in pre-coded in the variable: "$customfield.input"
  3. I don't think it's correct to use that same piece of code over and over for all the fields to be displayed, right?

Extra information;  the "birthdate"-field has id "customfield95" and name "customfield[95]", maybe that helps?
I also took a screenshot and included it (ignore the styling please; I am testing it).

I hope someone can provide some help with this. I guess it should be possible, given what I did so far.

Thanks in advance!

example.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated