در این آموزش گامبهگام، نحوه اضافه کردن توضیحات مقدماتی (معروف به Short Description) به محصولات در افزونه HikaShop جوملا را به صورت تصویری و ساده یاد میگیرید. این ویژگی به شما کمک میکند تا خلاصهای جذاب از محصول را بلافاصله در لیست محصولات یا صفحه اصلی فروشگاه نمایش دهید و بازدیدکنندگان را به سمت جزئیات کامل هدایت کنید.
برای ایجاد قابلیت توضیحات مقدماتی برای محصولات در هیکاشاپ باید از custom field (فیلد سفارشی) نوع محصول در هیکاشاپ کمک بگیریم.
برای اینکار ابتدا در داشبورد هیکاشاپ وارد منوی نمایش > فیلد های سفارشی شوید:
روی دکمه سبز رنگ جدید کلیک کنید تا یک custom field (فیلد سفارشی) جدید درست کنیم:
برای اینکه این custom field (فیلد سفارشی) در صفحه محصول و همچنین در لیست محصولات نمایش داده شود باید از نوع محصول product باشد. در بخش اطلاعات اصلی، فیلد ها را به صورت زیر پر کنید:
برچسب متنی است که به مدیر در بخش مدیریت محصول نمایش داده می شود.
جدول تعیین میکند که این فیلد در کدام یک از جداول دیتابیس هیکاشاپ باید ساخته شود. از آنجا که می خواهیم توضیحات مقدماتی برای محصول درج شود پس ستونی با نام دلخواه intro-txt در جدول محصولات هیکاشاپ باید ایجاد شود.
نام ستون همانطور که در پاراگراف بالا اشاره کردیم نام جدول را به دلخواه intro_txt گذاشتم. شما می توانید هر مقدار دلخواهی را وارد کنید.
نوع فیلد همانطور که از اسمش پیداست مشخص می کند که نوع فیلد چه باشد. از آنجا که می خواهیم توضیحات مقدماتی برای محصولات بنویسیم پس گزینه WYSIWYG را انتخاب می کنیم که یک editor (ویرایشگر متن) درستو درمون در اختیارمون بگذارد.
WYSIWYG (ویزیوگ) مخفف عبارت What You See Is What You Get به معنی آنچه میبینید همان چیزی است که دریافت میکنید است و در ویرایشگرهای متنی به کار میرود که کاربران میتوانند محتوا را به شکلی ویرایش کنند که شبیه به نمایش نهایی آن باشد.
در مطلب آشنایی با custom field (فیلد سفارشی) های هیکاشاپ می توانید با انواع فیلد ها آشنا شوید.
در نهایت این بخش به شکل زیر در می آید:
دقت کنید وقتی custom field (فیلد سفارشی) مان را ذخیره کنیم دیگر امکان تغییر مقادیر فیلد های جدول و نام ستون را نخواهید داشت (تصویری که در ادامه آمده است).
پس از ذخیره شکل کلی صفحه کمی تغییر می کند تا بتوانیم تنظیمات بیشتری برای این فیلد انجام دهیم. در ادامه بخش های مورد نیاز را توضیح می دهیم:
در بخش محدودیت ها می توانید نمایش این فیلد را محدود به دسته بندی محصولات و زیر شاخه های آنها یا تعدادی محصول خاصی بکنید.
با کمک نمایش محدودیت ها به می توانید نمایش فیلد مذکور را وابسته به سایر custom field (فیلد سفارشی) که از قبل برای محصولات هیکاشاپ ایجاد کرده اید (یعنی فیلد هایی که قبلا برای جدول محصول ساخته اید) بکنید. همچنین با کمک فیلد های Equal to و Not equal to می توانید نمایش فیلد را محدود به مقادیر خاصی در این فیلد ها بکنید.
با کمک سطح دسترسی می توانید کار کنید که کاربرانی با سطح دسترسی خاص بتوانند این فیلد را ببینند.
کارکرد این بخش کمابیش برای تمام جداول یکسان است.
در بخش Main Attributes (صفات اصلی) می توانید تعیین کنید که پر کردن مقدار این فیلد برای مدیر محصول یا کابری که آنرا می بینیداجباری باشد یا خیر.
در بخش پیام خطای فیلد میتوانید یک پیام خطا برای کاربر بگذارید.
در Regular expression check می توانید ورودی های کاربران را با استفاده از RegEx اعتبارسنجی کنید. اگر قرار بود این فیلد در بخش front end (کاربری) توسط بازدید کنندگان مقدار دهی شود، برای جلوگیری از هک شدن سایت حتما باید RegEx استفاده کرد. ولی از آنجاکه این فیلد در بخش back end (مدیریت) توسط ادمین مقدار دهی می شود چندان نیاز به اعتبارسنجی با RegEx نیست. در مطلب آموزش استفاده از RegEx در custom field (فیلد سفارشی) Hikashop هیکاشاپ می توانید چند نمونه RexEx که خودم استفاده می کنم پیدا و استفاده کنید.
در مقدار پیشفرض هم می توانید متن پیشفرضی برای این فیلد تعریف کنید.
کارکرد این بخش کمابیش برای تمام جداول یکسان است.
در بخش Extra Attributes (صفات اضافه) می توانید سطر و ستون های فیلد و همچنین فرمت خروجی اش را تعیین کنید.
گزینه فیلتر کردن ورودی برای امنیت این فیلد و جلوگیری از حملات XXS می باشد پس حتما فعال بماند.
همچنین میتوانید مشخص کنید که این فیلد قابل ترجمه باشد یا نه.
در بخش Display (نمایش) می توانید تعیین کنید که این فیلد در چه بخش هایی نمایش داده شود:
بخش کاربری فیلد را در بخش front end (کاربری) نمایش می دهد.
نمایش در فرم ویرایش محصول این فیلد را صرفا در صفحه مدیریت محصول در بخش back end (مدیریت) نمایش می دهد و شما می توانید مقدار متن دلخواهی را به عنوان متن مقدمه که کلمات کلیدی محصول در آن قید شده باشد بنویسید.
از آنجاکه من نمیخواهم این فیلد به همراه سایر فیلد های مشخصات محصول در بخش مشخصات فنی نمایش داده شود بنابراین صرفا گزینه نمایش در فرم ویرایش محصول را فعال می کنم و برای درج متن مقدمه در قسمت دلخواهم از صفحه محصول در front end (کاربری)، Layout کامپوننت را ویرایش می کنم. برای اینکار باید عبارت
$this->element->intro_txtرا در جای دلخواه ازLayout کامپوننت Hikashop هیکاشاپ که مربوط به صفحه محصول است قرار دهیم. برای زیباتر شدن خروجی، کد PHP بالا را در یک div با شناسه دلخواه intro_txt و کلاس های bootstrap بوت استراپ intro-txt p-3 border rounded bg-light داخل یک عبارت شرطی php استفاده میکنم.
<?php if(!empty($this->element->intro_txt)){echo '<div id="intro_txt" class="p-3 border rounded bg-light">'.$this->element->intro_txt.'</div>'; }//By JoomlaBoy.ir ?>توضیحات این کد برای مبتدی ها
این کد یک قطعه کد PHP در یک فایل HTML یا PHP است که برای نمایش یک متن (در صورت وجود) استفاده میشود. در ادامه توضیح خط به خط این کد آورده شده است:
<?php: این تگ آغاز کد PHP است که نشان میدهد از اینجا به بعد کد PHP شروع میشود.
if(!empty($this->element->intro_txt)): این شرط بررسی میکند که آیا متغیر$this->element->intro_txtخالی نیست.
- تابع
empty()بررسی میکند که متغیر خالی باشد یا مقدار معتبری نداشته باشد (مانندnull،falseیا یک رشته خالی).$this->element->intro_txtنشان میدهد که متغیرintro_txtمتعلق به شیءelementاست که در کلاس جاری تعریف شده است.
{echo ...}: اگر شرط برقرار باشد (یعنی متغیر خالی نباشد)، کد داخل{}اجرا میشود. در اینجا ازechoبرای چاپ یا نمایش خروجی در صفحه استفاده شده است.
'<div id="intro_txt" class="p-3 border rounded bg-light">'.$this->element->intro_txt.'</div>': این بخش یک عنصر HTML با تگ<div>ایجاد میکند که دارای ویژگیهای زیر است:
id="intro_txt": مشخص میکند که شناسه (ID) این عنصرintro_txtاست.class="p-3 border rounded bg-light": کلاسهایی برای اعمال استایل به عنصر تعریف شدهاند. این کلاسها معمولاً مربوط به فریمورکی مانند Bootstrap هستند:
p-3: اعمال فضای داخلی (padding) به مقدار 3.border: اضافه کردن یک کادر (border) به دور عنصر.rounded: گرد کردن گوشههای کادر.bg-light: اعمال رنگ پسزمینه روشن.$this->element->intro_txt: محتوای متغیرintro_txtدرون<div>نمایش داده میشود.'</div>': پایان تگ<div>.
}//By JoomlaBoy.ir ?>:
}: پایان بلاک شرطیif.//By JoomlaBoy.ir: این یک کامنت است که توسط نویسنده کد (احتمالاً JoomlaBoy.ir) اضافه شده تا مشخص کند این کد توسط او نوشته شده است.?>: بسته شدن تگ PHP.خلاصه عملکرد:
این کد بررسی میکند که آیا محتوایی در متغیر
$this->element->intro_txtوجود دارد یا خیر. اگر محتوایی وجود داشته باشد، آن را داخل یک بلوک<div>با کلاسهای مشخص نمایش میدهد. اگر متغیر خالی باشد، هیچ چیزی نمایش داده نمیشود.
از آنجا که جوملا بطور پیشفرض از بوت استراپ bootstrap پشتیبانی میکند و با فرض اینکه قالب تان از این امکان استفاده می کند بدون تغییر در فایل CSS قالب ظاهر خوبی به توضیحات مقدماتی محصولتان بدهید. تصویر زیر نمونه ای از استفاده از کد مذکور می باشد:
برای ویرایش فایل layout محصولات هیکاشاپ، 2 روش وجود دارد که هر دو در مقاله آموزش ویرایش فایل layout محصولات Hikashop هیکاشاپ گفته شده است