Edit Mr. & Mrs. on identity page

[monova]

Hi,

 

I am using FontAwesome on my shop and i want to add man & woman icons aside Mr. & Mrs. radio buttons and to remove Mr. & Mrs. label, so it would be (man icon + radio button) and (woman icon + radio button).

 

In 1.4 it was easy to do that, but my shop is now on 1.5.6.2 and instead of two labels with mr and mrs, i got only one with {$gender->name}.

 

So, i need to break this into separate pieces to be able to do what i want?

 

<p class="radio">

{foreach from=$genders key=k item=gender}

<input type="radio" name="id_gender" id="id_gender{$gender->id}" value="{$gender->id|intval}" {if isset($smarty.post.id_gender) && $smarty.post.id_gender == $gender->id}checked="checked"{/if} />

<label for="id_gender{$gender->id}" class="top">{$gender->name}</label>

{/foreach}

</p>

 

Please help. It will look much cooler with icons instead of mr. & mrs. text

Edited March 12, 2014 by monova (see edit history)

[monova]

Nobody?

[PascalVG]

Hi monova,

 

Maybe something like this:

<p class="radio required">
    <span>{l s='Title'}</span>
    {foreach from=$genders key=k item=gender}
        {if $gender->id == 1}
            <img class="gender_img" title="{l s='Male'}" src="/img/male.png" alt="{l s='Male'}">
        {else}
            <img class="gender_img" src="/img/female.png" title="{l s='Female'}" alt="{l s='Female'}"> 
        {/if}
        <input type="radio" name="id_gender" id="id_gender{$gender->id}" value="{$gender->id}"{if isset($smarty.post.id_gender) && $smarty.post.id_gender == $gender->id} checked="checked"{/if} />
                        {*   <label for="id_gender{$gender->id}" class="top">{$gender->name}</label>    *}
    {/foreach}
</p>

Note: I checked {if $gender->id == 1} to see if it's a male. If your id for a 'male' is different, please change accordingly.

Note 2: the <img src="img/male.png" ...> and <img src="img/female.png" ...> change path to img accordingly.

Note3: there are a few places where yu need to change this, for guest checkout, logged in account, and also in one-page checkout file if you use this.

Note4: Notice that I added a class "gender_img" to the <img> tag, so that you can add CSS to it in the global.css file, like margings, size restraints etc.

 

Not sure what the FontAwesome does, and if you have 'picture'-letters or so which you can use instead of the <img> tag, so that's further up to you.

 

Hope this helps,

pascal.

Edited March 12, 2014 by PascalVG
added explanation about class (see edit history)