Showing flags next to country names in product features

Shop-Script » Design »

Problem

Show the country flag next to a country name in the list of product features, for a feature like “Country of origin”.

Desired appearance

Solution

To shown country flags, we can use the icon collection of Webasyst framework, which is stored in wa-content/img/country/ directory. Flag icon files are named by the 3-letter codes of their countries; e.g., usa — USA, ger — Germany, fra — France, etc. List of country codes in Wikipedia.

To show flag icons next to country names, add those codes in parentheses to the values of the country feature in Shop-Script backend:

Note code of the country feature. It is 'country' in this example.

In your design theme, find the code which is used to display the list of product features. Below is an example of such a code snippet from product-viewing page template product.html of the “Default 3.0” theme:

{foreach $product.features as $f_code => $f_value}
    <tr{if $features[$f_code].type == 'divider'} class="divider"{/if}>
        <td class="name">
            {$features[$f_code].name|escape}
        </td>
        <td class="value" itemprop="{$f_code|escape}">
            {if is_array($f_value)}
                {if $features[$f_code].type == 'color'}
                    {implode('
 ', $f_value)}
                {else}
                    {implode(', ', $f_value)}
                {/if}
            {else}
                {$f_value} {* edit this line *}
            {/if}
        </td>
    </tr>
{/foreach}

Find the line which is responsible for displaying a simply string value (rather than array of multiple values):

    ...
{else}
    {$f_value} {* edit this line *}
{/if}

Replace this line with custom code displaying a country flag next to a country name, or a simple text value for other product features:

{* country feature code *}
{if $f_code == 'country'}
    {* regular expression extracting country name
    and ISO code from a country feature value *}
    {if preg_match('/^\s*([^\(]+)\s*\((.+)\)\s*$/', $f_value, $m)}
        <img src="{$wa_url}wa-content/img/country/{$m[2]}.gif" title="{$m[1]}" style="display: inline-block;"> {$m[1]}
    {else}
        {$f_value}
    {/if}
{else}
    {$f_value}
{/if}

Here is how the entire modified product featues code snippet will look:

{foreach $product.features as $f_code => $f_value}
    <tr{if $features[$f_code].type == 'divider'} class="divider"{/if}>
        <td class="name">
            {$features[$f_code].name|escape}
        </td>
        <td class="value" itemprop="{$f_code|escape}">
            {if is_array($f_value)}
                {if $features[$f_code].type == 'color'}
                    {implode('
 ', $f_value)}
                {else}
                    {implode(', ', $f_value)}
                {/if}
            {else}
                {* modified code *}
                {if $f_code == 'country'}
                    {* regular expression extracting country name
                    and ISO code from a country feature value *}
                    {if preg_match('/^\s*([^\(]+)\s*\((.+)\)\s*$/', $f_value, $m)}
                        <img src="{$wa_url}wa-content/img/country/{$m[2]}.gif" title="{$m[1]}" style="display: inline-block;"> {$m[1]}
                    {else}
                        {$f_value}
                    {/if}
                {else}
                    {$f_value}
                {/if}
                {* end of modified code *}
            {/if}
        </td>
    </tr>
{/foreach}