Custom Dropdown box in checkout sequence...

Hi There,

I am new so I hope this isn't too silly,

We are doing a Charity Website.. It's the usual steps of Login,choose products, choose shipping, proceed to checkout.. but at or even before checkout I want to give the user a chance to select from a custom drop down box the name of a charity organization.

I have figured out how to do the dropdown box in the registration section and have it populated with Charity Organization names.. but I would like it tied to each ORDER NOT to each registered user (in the unlikely case that someone wants to change their charitable donation recipient EACH time they order).

Thoughts on how to add this custom step?

THANKS so much!

Suzy

Ok Ok, I've figured it out. By adding a custom field to ORDER I was able to add it under additional comments. It all works fine but it looks a bit out of place.

Any ideas on where I go to change the appearance?

Hi,

You can do that with CSS. You can add your custom CSS in the front end CSS file of HikaShop in the Display tab of the configuration.

Ok, I've been trying to do this. I have found the frontend file and the edit button (drum roll please) but I can't find anything that looks like "additional information" or the name of the custom field "organizer" to change.

The dive looks like this:

<div id="hikashop_checkout_additional_info" class="hikashop_checkout_additional_info">
<fieldset class="input">
<legend>Additional information</legend>
<table class="hikashop_contentpane" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="hikashop_order_organizername" class="hikashop_checkout_organizername_line">
<td class="key">
<td>
</tr>
</tbody>
</table>
</fieldset>
</div>


but when I highlight it (in firebug) it shows it in the file template_css


What I really want to do is move it to the TOP of the page (above the Shipping Method radio buttons) and spruce it up a bit..

Thanks for your thoughts,
Susan

in order to move it at the top, you don't need any CSS. just drag n drop the "fields" view in the "checkout workflow" option of the configuration.

You can use such kind of CSS to customize it :
#hikashop_checkout_additional_info input{
padding : 20px;
}

Ok OK I'm getting there!!

I have moved it, I have edited the look (slightly), I have even made it mandatory now (drum roll drum roll) so my next challenge is how to edit the text that says "Additional Information" It's like a title that gets put in there automagically and if I HAVE to have it, I'd like it to say (and look) like the headings for Shipping Method and Billing Info:

Like any text in HikaShop, you can use a translation override to change it:
www.hikashop.com/en/download/languages.html#modify

AWESOME! I saw that language file, but only thought it was for conversion.. I never would have looked there, THANKS!

Ok, one last Q (don't hold me to this please):

Ok so what if I wanted to put that dropdown box (custom field) in front of the products themselves.. the products aren't really in the checkout workflow?! And how do I put portions of the flow up on a new page rather than one long one? Kind of break it up between products <newpage> register/login <new/page> shipping methods/payment.

Thanks!

In the checkout workflow option, there is a link "add step". Click on it to add a step and drag n drop the views from one step to another to move them around on separate pages.

You can't put the fields in front of the products themselves. If you want to attach the fields on the products and not on the order, you should not create custom fields of the table "order" but custom fields of the table "item". They would then display on the product page before the add to cart button.

Hi Nicolas,

I have created a charity dropdown for Order and then also tried it for item (but it shows up when I click EACH item for sale as opposed to the group) and I have also tried it on the table product.. it doesn't show up when I put it on product. How is product different to item?

Cheers,
Susan

It's explained here:
www.hikashop.com/en/support/documentatio...ing.html#description