در دنیای پویای فروشگاههای اینترنتی، شخصیسازی ظاهر و چیدمان محصولات نقشی کلیدی در جذب مشتری و بهبود تجربه کاربری ایفا میکند. افزونه قدرتمند هیکاشاپ به عنوان یکی از راهحلهای جامع فروش آنلاین برای جوملا، امکانات گستردهای را در اختیار مدیران وبسایت قرار میدهد. با این حال، بسیاری از کاربران به دلایلی مانند هماهنگی با هویت بصری برند یا بهبود کاربردپذیری، نیاز به تغییر طرح پیشفرض صفحات محصول دارند.
ویرایش فایلهای layout در هیکاشاپ اگرچه در نگاه اول ممکن است پیچیده به نظر برسد، اما با درک ساختار منطقی و آشنایی با المانهای اصلی، به فرآیندی قابل مدیریت تبدیل میشود. این آموزش به زبانی ساده و گامبهگام، شما را با روشهای امن و مؤثر برای شخصیسازی ظاهر صفحات محصول در هیکاشاپ آشنا میسازد.
در ادامه این راهنما، یاد خواهید گرفت که چگونه بدون به خطر انداختن یکپارچگی سیستم، تغییرات مورد نظر خود را اعمال کرده و فروشگاه اینترنتی خود را به شکلی منحصربهفرد و جذاب طراحی نمایید.
برای ویرایش فایل layout محصولات هیکاشاپ ابتدا باید فایل مورد نظر را پیدا و در پوشه html قالب تان کپی کنید. برای اینکار 2 روش وجود دارد:
1- امکان ویرایش قالب در جوملا
در داشبورد جوملا به سیستم > قالب های سایت بروید و روی نام قالب تان کلیک کنید.
در زبانه ایجاد عنوان ها در کادر کامپوننت ها روی com_hikashop و سپس product کلیک کنید.
در این هنگام یک پیغام مبنی بر ساخت فایل override در مسیر templates\[templateName]\html\com_hikashop\product به شما نمایش داده می شود و چندین فایل در مسیر مذکور ساخته می شوند. مسلما پیدا کردن فایلی که باید ویرایش شود در بین اینهمه فایل کار سختی است. بنابراین ما از روش دوم، یعنی امکان ویرایش قالب در هیکاشاپ استفاده می کنیم.
2- امکان ویرایش قالب در هیکاشاپ
راه ساده تر این است که از امکان ویرایش قالب خود هیکاشاپ استفاده کنیم.
گام اول) پیدا کردن فایلی که باید ویرایش شود
در داشبورد هیکاشاپ وارد بخش تنظیمات configuration می شویم در زبانه advanced پیشرفته، در فیلد Display view files گزینه بخش کاربری را انتخاب و تنظیمات را ذخیره می کنیم.
حالا اگر در front end (بخش کاربری وبسایت) روی یکی از محصولات کلیک کنیم کادرهایی دورنواحی مختلف صفح می بینیم. وقتی موس را روی هر بخش ببرید نام فایلی که حاوی آن بخش هست را نمایش می دهد و دیگر لازم نیست بین آن همه فایل پوشه html قالب مان دنبال فایل مورد نظر بگردیم.
همانطور که در این شکل می بینید وقتی ماوس را روی بخش های مختلف می برم نام فایلی که حاوی آن بخش هست را نمایش می دهد. مثلا اگر بخواهیم بر اساس آموزش اضافه کردن توضیحات مقدماتی به محصول در هیکاشاپ متن مقدمه را بالای قیمت قرار دهیم، وقتی ماوس را در ناحیه خالی بالای قیمت می بریم نام فایل product/show_default.php را نمایش می دهد.
حالا که اسم فایل مان را میدانیم، در گام دوم باید فایل را در پوشه html قالب مان کپی کنیم.
گام دوم) کپی کردن فایل در پوشه html قالب
برای کپی فایل product/show_default.php در پوشه html قالب مان، روی نمایش > مشاهده ها کلیک می کنیم.
روی گزینه Filter Options می زنیم تا بخش فیلتر های باز شود و به ترتیب در هر فیلد، نام layout (که در اینجا product بخش کاربری)، نام قالب (که در این مثال j4shop است) و بخش کاربر را انتخاب میکنیم.
با اینکار لیستی از تمام view ها layout محصول بخش کاربری قالب تان نمایش می شود.
از آنجا که حالا می دانیم اسم فایل مان show_default.php است روی این فایل کلیک میکنیم تا وارد View Builder هیکاشاپ شویم. سپس روی دکمه ذخیره کلیک میکنیم تا بطور خودکار یک نسخه از این فایل در پوشه html قالب مان ساخته شود. همانطور که قبلا اشاره شد، فایل مذکور در مسیر html/com_hikashop/product قالب تان ساخته می شود.
در بخش بالا View Builder هیکاشاپ، قسمت مختلف view را می بینید که می توانید با موس بگیرید و بکشید تا جابجا شوند.
همچنین در بخش پائین View Builder هیکاشاپ کدهای این بخش را می بینید.
پیشنهاد من این هست که برای دقت بیشتر فایل را در یک ادیتور وب مثل Visual Studio Code ویرایش کنید.
و در پایان یک حقه بهتون یاد میدم که استفاده کنید. اگر قبل و بعد از تکه کدی که میخواهید اضافه کنید کامنت ها را به همین شکلی که من گذاشتم در بخش پائینی View Builder هیکاشاپ اضافه کنید
<!-- INTRO -->
<?//تکه کد php ............................ ?>
<!-- EO INTRO -->بعد از ذخیره، بلوک گرافیکی آن در بخش بالایی نمایش داده می شود:
بعد از اتمام ویرایش قاب یادتان نرود که در داشبورد هیکاشاپ وارد بخش تنظیمات configuration شوید و در زبانه advanced پیشرفته، در فیلد Display view files گزینه خیر را انتخاب و تنظیمات را ذخیره کنید تا کادر هایی که در بخش کاربری کشیده شده بودند حذف شوند.