Jump to content

Edit Mr. & Mrs. on identity page


monova

Recommended Posts

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 :)

post-184537-0-32466900-1394610496_thumb.png

Edited by monova (see edit history)
Link to comment
Share on other sites

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 by PascalVG
added explanation about class (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...