آموزش افزودن آیکون در بخش ویژگی های پرستاشاپ

شاید برای شما هم سوال باشد که چطور می شود در بخش ویژگی های پرستاشاپ به جای متن، آیکون گذاشت؟ مثلا به جای:

گارانتی: دارد   ---> گارانتی: 

همانطور که می دانید در بخش ویژگی های پرستاشاپ قابلیت درج آیکون وجود ندارد. ما در این آموزش ترفندی را به شما خواهیم آموخت تا بتوانید به جای عبارات دلخواه خود، آیکون های مد نظرتان را جایگزین کنید!

پیش نیازها

از آن جایی که هر تغییر اشتباهی می تواند باعث بهم ریختگی سایت شما شود لطفا قبل از تغییر هر فایلی از آن بکاپ بگیرید تا در صورت لزوم آن را بازگردانی کنید. در این آموزش ما از قابلیت های فریم ورک Bootstrap و فونت آیکون Font Awesome استفاده خواهیم کرد. بنابر این اطمینان حاصل کنید که قالب شما از این دو تکنولوژی پشتیبانی می کند.

روش افزودن آیکون به ویژگی های پرستاشاپ

همانطور که قبل تر اشاره کردیم، در پرستاشاپ نمی توانید بجای مقدار ویژگی ها آیکون بگذارید. ترفندی که ما در این آموزش از آن استفاده خواهیم کرد، جایگزین کردن عبارات دلخواه با آیکون مورد نظر است. مثلا فرض کنید می خواهیم هر زمان برای مقدار ویژگی عبارات "بله، دارد، آری" را تایپ کردیم به جای این مقدار آیکون سبز رنگ و هر زمان "خیر، ندارد، نه" را تایپ کردیم آیکون قرمز رنگ جایگزین شود.

انجام این کار بسیار ساده است. ابتدا لطفا به مسیر زیر بروید و فایل product.tpl را ویرایش کنید:

themes/your-theme

* در مسیر بالا your-theme نام پوشه قالب شماست

حال دنبال عبارت زیر بگردید:

{foreach from=$features item=feature}

زیر این عبارت باید بخشی مشابه این داشته باشید:

<tr class="{cycle values="odd,even"}">
 {if isset($feature.value)}
 <td>{$feature.name|escape:'html':'UTF-8'}</td>
 <td>{$feature.value|escape:'html':'UTF-8'}</td>
 {/if}
</tr>

همانطور که در کد بالا مشخص شده دستور اول یعنی

{$feature.name|escape:'html':'UTF-8'}

نام ویژگی مثل "گارانتی، جنس و ..." را بر میگرداند و دستور دوم یعنی

{$feature.value|escape:'html':'UTF-8'}

مقدار آن ویژگی مثل "دارد، بله، خیر و ..." را بر می گرداند.

کاری که ما می کنیم این است که برای دستور دوم در کد بالا شرط می گذاریم. بدان معنا که مثلا می گوییم اگر مقدار ویژگی = "بله" بود بجای بله آیکون سبز رنگ را قرار بده. پس کد بالا را به این شکل تغییر می دهیم:

<tr class="{cycle values="odd,even"}">
 {if isset($feature.value)}
  <td>{$feature.name|escape:'html':'UTF-8'}</td>
  <td>
   {if $feature.value == "yes" OR $feature.value == "دارد" OR $feature.value == "بلی" OR $feature.value == "بله"}
    <i class="fa fa-check icon icon-check text-success"></i>
   {else if $feature.value == "no" OR $feature.value == "ندارد" OR $feature.value == "خیر"}
    <i class="fa fa-close icon icon-close text-danger"></i>
   {else}
    {$feature.value|escape:'html':'UTF-8'}
   {/if}
  </td>
 {/if}
</tr>

با این کار ابتدا در شرط چک می کنیم که اگر مقدار ویژگی ما برابر بود با "yes، دارد، بلی و بله" به جای این عبارات مقدار <i class="fa fa-check icon icon-check text-success"></i> را جایگزین کند و اگر مقدار ویژگی ما برابر بود با "no، ندارد و یا خیر" به جای آن عبارت <i class="fa fa-close icon icon-close text-danger"></i> را جایگرین نماید و اگر هیچ یک از این مقدار ها نبود خود مقدار را درج کند.

این عبارات در حقیقت کدهایی برای درج "فونت آیکون" هستند. کلاس "icon" و "fa" مشخص کننده استفاده از "FontAwesome" و کلاس "text-success" و "text-danger" مشخص کننده رنگ ایکون که اولی رنگ سبز و دومی رنگ قرمز است می باشند.

حال فایل product.tpl را ذخیره نموده و برای اعمال تغییرات به بخش "پارامترهای پیشرفته - کارایی" مراجعه کنید و از بالا سمت چپ روی کلید "پاک کردن حافظه موقت کلیک کنید" تا کش پرستاشاپ شما پاکسازی شود.

کار تمام شد! اکنون می توانید تست کنید و در بخش ویژگی های محصولات خود مثلا مقدار "بله" را درج کنید تا به جای آن آیکون مورد نظر قرار گیرد.

آیا می توان از سایر آیکون ها هم استفاده کرد؟

بله. برای نمونه یک قطعه کد پیشرفته تر را در زیر مشاهده می کنید که علاوه بر آیکون های و به ویژگی "امتیاز، درجه، star و rate" محصول از 1 تا 5 ستاره امتیاز می دهد و تعداد ستاره ها را با آیکون مشخص می نماید:

<tr class="{cycle values="odd,even"}">
 {if isset($feature.value)}
  <td>{$feature.name|escape:'html':'UTF-8'}</td>
  <td>
   {if $feature.value == "yes" OR $feature.value == "دارد" OR $feature.value == "بلی" OR $feature.value == "بله"}
    <i class="fa fa-check icon icon-check text-success"></i>
   {else if $feature.value == "no" OR $feature.value == "ندارد" OR $feature.value == "خیر"}
    <i class="fa fa-close icon icon-close text-danger"></i>
   {else if $feature.name == "امتیاز" OR $feature.name == "star" OR $feature.name == "درجه" OR $feature.name == "rate"}
    {if $feature.value == "1"}
     <i class="fa fa-star icon icon-star text-warning"></i>
    {if $feature.value == "2"}
     <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i>
    {if $feature.value == "3"}
     <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i>
    {if $feature.value == "4"}
     <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i>
    {if $feature.value == "5"}
     <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i> <i class="fa fa-star icon icon-star text-warning"></i>
    {else}
     {$feature.value|escape:'html':'UTF-8'}
   {else}
    {$feature.value|escape:'html':'UTF-8'}
   {/if}
  </td>
 {/if}
</tr>

اگر کمی خلاقیت به خرج دهید، می توانید با ترکیب دستورات شرطی ساده، بخش ویژگی های خود را به بخش منحصر به فرد تبدیل کنید!

امیدواریم این آموزش برای شما مفید بوده باشد

با تشکر

تیم پرستاشاپ فارسی، آی پرستا