اگر تا اینجا مطالب ما را  در مورد طراحی قالب های اپن کارت دنبال کرده باشید ، اکنون باید بتوانید محل قالب طرح صفحه اصلی را پیدا کنید . هرچند با نگاهی سریع به اطراف الگوهای درون تم ” default” می توانید تخشیص دهید که در اینجا قرار گرفته است :

default/template/common/home.tpl

اما اگر متوجه مسیر صفحه اصلی شده اید ، محتوی مقدار common/home  است . بنابراین ، همان طور که پیشتر بحث کردیم ، همواره می توانید این مسیر را برای یافتن فایل قالب طرح مناسب ترسیم کنید .

Homepage Layout Elements

با نگاهی به فایل home.tpl تشخیص  می دهید که بیشترین بخش محتوا از طریق عناصر اصلی مانند $header, $footer وغیره ایجاد می شوند .در اینجا دیگر درباره عنصرهای $header و $footer بحث نمی کنیم ، زیرا تا اینجا دانسته اید که محتواهای این متغیرها به ترتیب از فایل های header.tpl و footer.tpl در زیر دایرکتوری template/common می آیند .

درخصوص صفحه اصلی پیش فرض اپن کارت  ، در موقعیت “Column Left” یا “Column Right” هیچ ماژولی اختصاص داده نشده است ، بنابراین ، می توان گفت که متغیرهای $column_left و $column_right کاری انجام نمی دهند . پس هرچیزی که در صفحه اصلی می بینید ، به جز هدر و فوتر از متغیرهای $content_top یا $content_bottom می آیند . ماژول های “Slideshow” و “Featured” به موقعیت “Content Top” اختصاص داده شده و ماژول  “Carousel” به موقعیت “Content Bottom” در لایه  “Home” .

حال بیایید کمی فراتر برویم و ببینیم که این ماژول ها دقیقا چگونه به لایه صفحه  “Home”  اختصاص داده می شوند .

تخصیص ماژول از Back-End در اپن کارت

وارد Back-End شوید و به مسیر “Extensions > Modules” بروید . با انجام این کار تمامی ماژول های موجود در سیستم در فهرستی نمایش داده می شوند . حال روی لینک “Edit”  مربوط به ماژول “Slideshow” کلیک کنید که رابط تخصیص ماژول را نمایش می دهد .

Slideshow Module Configuration

هر چند در اینجا تنظیمات پیکربندی بسیار کمی دارد ، ستون های مهم برای ما “Layout” و  “Position” هستند . بر طبق مقادیر اختصاص داده شده در اینجا ، ماژول “Slideshow”در قسمت  “Content Top” در لایه “Home” نمایش داده می شود .

از اینجا به بعد ، با استفاده از دکمه “Add Module” می توانید یک ماژول  “Slideshow”را به هر لایه و در هر موقعیتی اختصاص دهید . حال بیایید یک مثال دیگر را بررسی کنیم ، در صفحه فهرست بندی ماژول بر روی لینک   “Edit”مربوط به ماژول  “Featured”کلیک کنید .

Featured Module Configuration

این بار هم می توانید ببینید که مقدار های  “Layout” و  “Position”با مقدارهای مربوط به ماژول “Slideshow” یکسان هستند . بنابراین ، اکنون باید دقیقا با چگونگی نمایش این ماژول ها در صفحه اصلی آشنا شده باشید . همان طور که ممکن است متوجه شده باشید ، یک دکمه “Remove”دیگر نیزوجود دارد که برای لغو تخصیص یک ماژول از لایه خاص به کار می رود . حال جلوتر بروید و تنظیمات مربوط به ماژول  “Carousel”را خودتان کشف کنید .

Tweak کردن لایه صفحه اصلی

حال که با تخصیص دادن و لغو تخصیص ماژول به یک صفحه و موقعیت خاص آشنا شده اید ، ما همان ها را بررسی می کنیم تا لایه صفحه اصلی را tweak کنیم .به سراغ بخش مدیریت بروید ، به مسیر  “Extension > Modules” بروید تا صفحه فهرست بندی ماژول را به جدول بیاورید .

در این مرحله ، تمامی ماژول های اختصاص داده شده را از صفحه اصلی حذف می کنیم .

  • روی لینک “Edit”  مربوط به ماژول “Slideshow” کلیک کنید . حال برای لغو تخصیص یک ماژول از لایه  “Home” روی دکمه “Remove”  کلیک کنید . پس از آن روی دکمه   “Save”  کلیک کنید تا تغییرات اجرا شوند . همین رویه را برای ماژول های “Carousel”  و “Featured” تکرار کنید .

در پایان این مرحله اگر صفحه اصلی خود را چک کنید، به جز قسمت های  “header”  و “footer” تقریبا یک صفحه خالی می بینید. نگران نباشید ، در واقع این همان کاری است که می خواستیم انجام دهیم ! در مرحله بعد ، مجموعه ای با تفاوت اندک از ماژول ها را به موقعیت های “Column Left” و “Column Right” در صفحه اصلی اختصاص می دهیم . حال بیایید بار دیگر به صفحه فهرست بندی ماژول برویم .

  • روی لینک “Edit” مربوط به ماژول  “Category” کلیک کنید . در پائین سمت چپ صفحه شما  گزینه  “Add Module” را می بینیدکه با هر بار کلیک بر روی آن می توانید یک ردیف به جدول اضافه کنید . در ستون “layout “گزینه “Home” و همچنین در “Position” انتخاب کنید گزینه “Column Left” را و بعد از آن بر روی save کلیک نمائید .
  • روی لینک “Edit” مربوط به ماژول “Account” کلیک کنید . روی دکمه “Add Module” کلیک کنید تا یک ردیف جدید اضافه شود .  در ردیفی که تازه اضافه شده ، “Home” را از ستون “Layout”  ، و “Column Right” را از ستون  “Position” انتخاب کنید . سپس با کلیک بر روی دکمه “Save” تغییرات را اجرا و ذخیره کنید .

اکنون نگاهی بر front-page خود می اندازیم :

تغییرات فایل لایه بندی

تا اینجا تمام tweak کردن مربوط به لایه بندی را از خود  back-end انجام داده ایم . در این بخش ، مقداری محتوای متنی ایستا را به home.tpl اضافه می کنیم . هرگاه خواستید یک متن ایستا را به هر قالبی اضافه کنید ، به جای اینکه متن را به طور مستقیم درون قالب قرار دهید ، باید روش استاندارد اپن کارت را دنبال کنید . در اینجا همین را تمرین می کنیم .

البته شما فایل home.tpl را به طور مستقیم در تم “default” ویرایش نمی کنید ، بهتر است آن را در تم سفارشی خود باطل کنید .

حال کمی پیشتر بروید و catalog/language/english/english.php را باز کنید . خط زیر را به انتهای فایل و درست قبل از خط محتوی ?> اضافه کنید .

 

اکنون جلوتر رفته و catalog/controller/common/home.php را باز کنید . ما متغیر زبان اضافه شده در فایل english.php را در این کنترلر می گنجانیم، بنابراین در فایل home.tpl برای نمایش دادن در دسترس است .

در فایل “home.php” و قبل از خط زیر

این خط را اضافه کنید :

با این کار مطمئن می شویم که متغیر $welcome_text درست مانند هر متغیر دیگر درفایل قالب لایه بندی  در دسترس است . حال تنها کار باقیمانده گنجاندن $welcome_text در فایل home.tpl است . پس home.tpl شما باید چیزی مانند این باشد :

 

من در این فایل تغییرات بسیار کمی انجام داده ام . متغیر $welcome_text را که به وسیله تگ <div> احاطه شده است ، اضافه کرده ام . علاوه براین ، display:none را از تگ <h1> حذف کرده ام ، به همین دلیل ، عنوان نمایش داده می شود . در پایان ، برای خوانایی بیشتر آن کد را کمی فرمت بندی کرده ام . ضربه نهایی اینجاست !

Complete Homepage

در اینجا چند نکته مهم وجود دارند که باید به آن ها توجه کنید ، هرچند ما فایل های english.php و home.php را به طور مستقیم تغییر دادیم ، اما انجام این کار به شدت دلسرد کننده است . ما این کار را فقط برای نگه داشتن این مثال ساده انجام دادیم . در واقع ، شما باید در مواردی که می خواهید فایل های محوری را ویرایش کنید ،از پسوند”vQmod” اپن کارت استفاده کنید .

بنابراین ، این یک مثال نسبتا ساده برای نشان دادن تغییرات لایه بندی در لایه بندی صفحه اصلی بود . هرچند ما یک متن ایستای ساده را اضافه کردیم ، شما می توانید اطلاعات پویاتری را از پایگاه داده ها آورده و همان را در قالب نمایش دهید .

البته ، این کاری است که به مقداری آگاهی و دانش درباره نحوه کارکرد مدل اپن کارت نیاز دارد . تا اینجا شما ترغیب شده اید تا جلوتر رفته و چندین ماژول بیشتر به موقعیت های مختلف اضافه کنید تا نحوه عملکرد آن ها را ببینید .

حسن موحد

عاشق طراحی وب سایت هستم و 8 سال هست در این زمینه فعالیت می کنم و تمرکزم بر روی خرسند نگه داشتن مشتری است .

ارسال نظر