ایجاد یک تم سفارشی با اپن کارت : قسمت سوم

تاریخ : ۵ بهمن ۱۳۹۴ | دسته بندی : اپن کارت | برچسب ها : ,,,,,,

در بخش های پیشین این قسمت ، چگونگی ایجاد یک تم سفارشی و فعال سازی آن از back-end در اپن کارت Opencart را آموختیم . علاوه براین ، چگونگی عملکرد سیستم باطل کردن قالب در این برنامه کاربردی را هم بررسی کردیم .

در این بخش کمی فراتر رفته و قالب های مهم را تشریح می کنیم تا عنصرهای اساسی به کار رفته در یک قالب اپن کارت اپن کارت عمومی را بشناسیم . مایک مورد که بسیار به کار رفته را بررسی خواهیم کرد تا فرآیند کامل تولید صفحه را تفسیر کنیم . این کار در زمانی که می خواهید هر صفحه ای را در اپن کارت سفارشی کنید ، می تواند مفید باشد .

مفصل تر بگوییم ، با نگاهی به قالب هایی که اپن کارت فراهم می کند ، می توانیم آن ها را در سه دسته بندی مختلف طبقه بندی کنیم . این نکته مهم را باید در نظر داشته باشید که این مورد به طور رسمی در راهنمای اپن کارت نیامده است ، اما می تواند در آشنایی با آنچه در زمان ایجاد یک صفحه کامل در front-end رخ می دهد ، به ما کمک کند .

قالب های لایه بندی اپن کارت

در اصطلاحات اپن کارت ، قالب ها را لایه بندی می نامند . می توانید تصور کنید که قالب لایه بندی یک قالب تزئین کننده است که محتوای مربوط به بخش های مختلف صفحه را جمع آوری می کند ، آن محتوا را به داخل لایه بندی هل می دهد و سپس یک صفحه کامل را ایجاد می کند .

اسلاتها (Slots) ممکن است به عناصری مانند هدر ، فوتر ، یک عنصر نوار جانبی ، و محتوای ماژول اشاره کنند . به طور تقریبی برای هر صفحه در front-end فروشگاه یک قالب لایه بندی مرتبط وجود دارد .

باید به این نکته توجه کنید که اپن کارت به شما این امکان را می دهد تا لایه بندی ها را از back-end هم ایجاد کنید که این روش دیگری است که طبق آن می توانید ساختار جزئی صفحه های front-end معین را تغییر دهید .

قالب های فرعی

این نوع قالب یک اسلات برای محتوای خاص ایجاد می کند . در یک سناریوی عمومی ، محتوا به وسیله یک قالب فرعی تولید می شود و در قالب لایه بندی وارد می شود . ساده ترین نمونه از این نوع ، template/common/header.tpl است که مسئول ایجاد بخش هدر برای هر صفحه در front-end است .

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

قالب ماژول

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

به طور پیش فرض ، در قالب لایه بندی چهار موقعیت مختلف وجود دارند :

  1. Content Top
  2. Content Bottom
  3. Column Left
  4. Column Right

می توانید به هر یک از این موقعیت ها ماژولی را اختصاص دهید . همان طور که از نامشان پیداست ، اگر ماژولی را به موقعیت ” بالای محتوا ” اختصاص دهید ، در بالای محتوای اصلی صفحه نمایش داده خواهد شد . قالب های ماژول را می توانید در دایرکتوری template/module بیابید ؛ بنابراین اگر می خواهید ماژول تازه ای ایجاد کنید ، باید یک قالب مرتبط را در این دایرکتوری قرار دهید .

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

یافتن قالب لایه بندی در Front-End

ابتدا روشی را بررسی می کنیم که اپن کارت آن را برای نمایش صفحه ها در front-end پیگیری می کند . هرگاه به صفحه ها در front-end دسترس پیدا کردید ، این برنامه روش های زیر را دنبال می کند :

  • اپن کارت براساس متغیر “route” که در URL تنظیم شده ، یک کنترلر مناسب را برای رسیدگی به درخواست پیدا می کند . در جلسه بعدی خواهیم دید که یک متغیر دقیقا چه هست و چه کاری انجام می دهد . فعلا ، فرض می کنیم که اپن کارت را به یک کنترلر مناسب برای اجرا هدایت می کند .
  • اکنون تمامی بار سنگین باقیمانده فرآیند بر دوش کنترلر است . کنترلر جایی است که سایر عناصر مانند فایل های زبان و فایل های مدل در آن گنجانده می شوند . علاوه بر این ، آن محتوای واقعی که قرار است برای نمایش به قالب لایه بندی هل داده شود را آورده و نصب می کند .
  • پس از نصب محتوا به وسیله کنترلر ، این اطلاعات را به یک عنصر نما ( view) منتقل می کند که مسئول نمایش خروجی نهایی به کاربر است . نکته مهمی که در اینجا باید به آن توجه شود این است که کنترلر نیز نام فایل قالب لایه بندی را تنظیم می کند که در مرحله بعدی نما از آن استفاده خواهد کرد .
  • در پایان ، یک عنصر نما فایل قالب مورد نیاز را کشیده و آن را با محتوایی که پیشتر در کنترلر آماده شده تزیین می کند . در اینجا ، این روند با ارسال خروجی به سوی کاربر به پایان می رسد .

حال سناریویی را در نظر بگیرید که در آن می خواهید ساختار لایه بندی هر صفحه داده شده ای را در front-end فروشگاه تغییر دهید . اولین سوالی که در اینجا مطرح می شود این است که چگونه دست به کار یافتن یک قالب مرتبط با آن صفحه خاص بشویم . با اینکه هیچ روش خاصی برای انجام این کار وجود ندارد ، بیایید چند گزینه موجود را بررسی کنیم .

۱- پیش بینی بر اساس ساختار

این ساده ترین روش برای پیش بینی قالب مرتبط با هر route است . در فرهنگ اصطلاحات اپن کارت ، “route” یک متغیر کوئری – رشته در لینک URL است .

برای مثال URL لینک زیردر front-end را در نظر بگیرید که صفحه ورود را به کاربر نمایش می دهد :

http://www.youropencartdomain.com/index.php?route=account/login

بنابران ، در URL بالا ، account/login مقدار پارامتر “route” است که برای ما مفید خواهد بود . به سادگی می توانید این مقدار را در دایرکتوری template نام پیش فرض ترسیم کنید . در این مورد ، مسیر قالب که سرانجام بدان دست می یابید چیزی مانند این خواهد بود :

{opencart_document_root}/catalog/view/theme/default/template/account/login.tpl

همان طور که ممکن است متوجه شده باشید ، بخش دوم مقدار “route” یعنی “login” به نام فایل قالب تبدیل می شود (login.tpl درمثال بالا ). حال بیایید مثال دیگری را در نظر بگیریم :

http://www.youropencartdomain.com/index.php?route=product/product&path=1&product_id=1

این مثال فرمت پارامتر “route” برای صفحه جزئیات محصول است . مقدار پارامتر “route” این است : product/product ، بنابراین ، قالب مربوط به این route را می توان در این مسیر یافت :

{opencart_document_root}/catalog/view/theme/default/template/product/product.tpl

  • ۲- روش یونانی

روشی که در بالا توضیح دادیم در اکثر موارد کار می کند ، اما  استثناهایی هم وجود دارند که در آن ها لازم می شود به فایل کنترلر نگاهی بیندازید . این بار هم پارامتر route به دادمان می رسد که کمک می کند یک فایل کنترلر مرتبط هم پیدا کنیم .

بیایید  URL لینکی را که صفحه ورود در front-end را برای کاربر نمایش می دهد ، بررسی کنیم :

http://www.youropencartdomain.com/index.php?route=account/login

می توانید مقدار route مربوط به catalog/controller را ترسیم کنید تا یک فایل کنترلر مرتبط بیابید . بنابراین در این مورد ، فایل کنترلری که سرانجام بدان دست می یابید این است :

{opencart_document_root}/catalog/controller/account/login.php

همان طور که ممکن است متوجه شده باشید ، بخش دوم مقدار “route” یعنی “login” به نام فایل کنترلر تبدیل می شود (login.php در مثال بالا) . پس از یافتن یک فایل کنترلر مرتبط ، باید به دنبال کدی مانند این بگردید :

$this->template = ‘default/template/account/login.tpl’;

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

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

عناصر عادی قالب لایه بندی

تا اینجاباید درباره یافتن یک قالب لایه بندی خاص که می خواهید آن را سفارشی سازی کنید ، احساس راحتی بیشتری کنید . در بخش پایانی ایت مقاله ،  نظری بر برخی از عناصر رایج در قالب لایه بندی خواهیم انداخت . برای این تمرین ، از مثال خود استفاده می کنیم .

حال بیایید فایل قالب لایه بندی default/template/account/login.tpl را برای مرجع خود باز کنیم .

$header محتوای قسمت هدر را دریک صفحه اپن کارت نمایش می دهد . قالب مربوط به این را می توانید در این مسیر بیابید :

default/template/common/header.tpl

$footer محتوای مربوط به قسمت فوتر را در یک صفحه اپن کارت نمایش می دهد . قالب مربوط به این را می توانید در این مسیر بیابید :

default/template/common/footer.tpl

$column_left مسئول نمایش خروجی تمامی ماژول های اختصاص یافته به موقعیت “Column Left” از back-end است . قالب مربوط به این را می توانید در این مسیر بیابید :

default/template/common/column_left.tpl

$column_right مسئول نمایش خروجی تمامی ماژول های اختصاص یافته به موقعیت “Column Right” از back-end است . قالب مربوط به این را می توانید در این مسیر بیابید :

default/template/common/column_right.tpl

یک بلوک “Account” که در نوارجانبی سمت راست صفحه ورود نمایش داده می شود ، نمونه ای از این نوع محتواست . در مواردی که می خواهید خروجی یک ماژول خاص را سفارشی سازی کنید ، می توانید آن را در این مسیر بیابید :

default/template/module/{modulename.tpl}

در مورد ماژول “Account” ، فایل این است : default/template/module/account.tpl . همان طور که می بینید ، قرارداد نامگذاری قالب ماژول را به راحتی می توان حدس زد ، زیرا دقیقا مشابه نام ماژول است .

$content_top مسئول نمایش خروجی تمامی ماژول های اختصاص یافته به موقعیت ” Content Top”از back-end است . قالب مربوط به این را می توانید در این مسیر بیابید :

default/template/common/content_top.tpl

$content_bottom مسئول نمایش خروجی تمامی ماژول های اختصاص یافته به موقعیت ” Content Bottom”از back-end است . قالب مربوط به این را می توانید در این مسیر بیابید :

default/template/common/content_bottom.tpl

Login Page Layout Elements

در اینجا باید در تمرین سفارشی سازی قالب ها برای front-end مربوط به اپن کارت احساس آسایش و راحتی کامل کنید . همان طور که ممکن است متوجه شده باشید ، برای تغییر کامل ظاهر سایت کافی است چند قالب را تغییر دهید .

خلاصه

در این قسمت ، درخصوص ماهیت قالب ها و ماژول ها به طور کامل بحث کرده ایم تا قالب های front-end  را برای سفارشی سازی شناسایی کنیم . علاوه براین ، درباره برخی از متغیرهای رایج به کاررفته در قالب های لایه بندی در سراسر سایت هم بحث کردیم . در بخش پایانی این موضوع ، یک مورد استفاده مفصل برای تغییر ساختار لایه بندی یک صفحه اپن کارت را خواهیم دید .

حسن موحد

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

ارسال نظر