ستاپ اولیه محیط توسعه
از مسیر زیر کش مجنتو را روی نسخهٔ موجود از سایت روی لوکالهاستتان غیرفعال کنید تا بعد از انجام هر تغییر مجبور نوشید کش مجنتو را پاک کنید:
System → Cache Management → Select All → Disable
سپس فایل index.php را باز کنید و علامت # را از ابتدای این خط پاک کنید تا ارورهای سایت را روی لوکالهاستتان نمایش دهد:
فهرست مندرجات
ini_set('display_errors', 1);
بعد شرط if زیر را کامنت کنید تا سیستم در مود development برود:
if (isset($_SERVER['MAGE_IS_DEVELOPER_MODE'])) {
بعد در ادمین مجنتو به مسیر System → Configuration → ADVANCED → Developer بروید و گوشه صفحه گزینهٔ Current Configuration Scope را روی Main Website قرار دهید. سپس از قسمت Debug گزینههای Template Path Hints و Add Block Names to Hints را فعال کنید. به سایت برگردید. اسامی فایلهای phtml مربوط به هر block در سایت و اطلاعات دیگر دربارهٔ بخشهای مرتبط با هر جزء سایت در بکاند نمایش داده میشود. اگر نمایش نداد به قسمت Debug ادمین برگردید و بررسی کنید که در جلوی Allowed IPs چیزی نوشته نشده باشد.
اکستنشننویسی برای مجنتو
تمپلیتنویسی برای مجنتو
مفهوم Storeها
در ادمین مجنتو از این مسیر میرسید به جایی که میشود Store ها را مدیریت کرد:
System → Manage Stores
در اینجا شما یک مفهوم Website را میبینید که میتواند تعدادی Store داشته باشد و یک مفهوم Store را میبینید که میتواند تعدادی Store View داشته باشد. هدف از اینکار این است که بشود در قالب یک مجنتو چند تا فروشگاه کاملا مستقل از هم داشت و تمام ارتباطات بین Orderها و کالاها و کاربرها و … برای هر Store متفاوت با Store دیگر باشد و خود فروشگاهها را به طور کامل از هم جدا کرد. یعنی وقتی وارد فروشگاه A میشویم تمام این اطلاعات و روابط بین آنها فقط در فروشگاه A وجود داشته باشد و فروشگاه B یک فروشگاه کاملا متفاوت باشد. در کنار این مفهوم از طریق تعریف Store Viewها این امکان وجود دارد که برای هر فروشگاه از یک قالب و ظاهر کاملا متفاوت استفاده کنیم.
مفهوم design package
از مسیر زیر در ادمین مجنتو وارد جایی میشویم که شما میتونید تمپلیت سایت را مشخص کنید.
System → Configuration → GENERAL → Design
در تب بالایی این صفحه design package را مشخص میکنید. هر design package یک گروه از Themeهای مرتبط با هم هست. هر design package یک theme به نام default دارد. یک مثال برای کاربرد تعریف design packageها این است که مثلا ما یک قالب برای سایتمان داریم که میخواهیم در مناسبتهای مختلف مثل محرم یا نوروز و … تغییراتی داشته باشد ولی شمایل همه این قالبها تقریبن یکی است. برای این منظور در دایرکتوری design package برای قالب اصلی یک دایرکتوری با نام default خواهیم داشت و برای هر کدام از variationهای آن قالب هم یک پوشه جداگانه خواهیم داشت که همه اینها درون یک design package قرار گرفتهاند.
مفهوم skin و template
در همین بخش Design از تنظیمات سایت میشود نام skin و template مورد استفاده در سایت را مشخص کرد. دو تا دایرکتوری اصلی داریم که یکی کدهای css و imageها و jsهای پیشفرض مربوط به themeها در آن قرار دارد:
/skin/frontend/
و دیگری فایلهای مربوط به layout کلی سایت که شامل یک سری فایلهای xml میشود:
/app/design/frontend/
در داخل هر دوی این پوشهها یک پوشه با نام base داریم. مجنتو یک fallback method دارد که کارش این است که اگر یک فایلی که برای نمایش قالب سایت لازم است را نتواند در پوشهی مربوط به آن قالب پیدا کند، میرود سراغ آن فایل یا کد درون پوشهٔ default داخل پوشهٔ design package مربوط به همان قالب و اگر آنجا هم پیدا نکند میرود از دایرکتوری base کد مربوطه را میآورد. این یک مزیت دارد و آن هم این است که لازم نیست بخشهای مشترک در قالب سایت را مجددا بنویسیم چون آنها در base قرار گرفتهاند. همچنین کلیت فایلهای مربوط به قالب و … مجنتو در این پوشهٔ base قرار گرفته است و ما فقط چیزهایی که میخواهیم به آن اضافه کنیم را در دایرکتوری قالب خودمان مینویسیم.
نکته دیگر اینکه دایرکتوریهایی که در این دو مسیر میبینید باید دقیقن یکسان باشند یعنی مثلن اگر دایرکتوری /skin/frontend/example را ایجاد کردیم باید دقیقن معادل آن یک دایرکتوری /app/design/frontend/example ایجاد کنیم که اولی css و js و img های مربوط به design package با نام example را مشخص میکند و دومی layout مربوط به همین design package را معلوم میکند و در هر design package گفتیم که یک default داریم و یک تعداد پوشه دیگر برای variationهای آن که تمام اینها هم باید در دایرکتوری موجود در app و skin دقیقن با نام یکسانی وجود داشته باشند.
مفاهیم layout و block و widget در ادمین مجنتو
در این مسیر از ادمین میتوانید layoutهای موجود در مجنتو را ببینید:
CMS → Pages
در اینجا نوع layoutهایی که داریم و اسامیشان مشخص شده. مثلن یکی 2 columns with right bar هست. یعنی دو ستون اصلی دارد. شما میتوانید layout های دیگری بسازید یا یک layout را از همینجا ویرایش کنید و چند نوع مثل سه ستونه و یک ستونه و … از قبل تعریف شدهاند که هر کدام از موارد داخل این صفحه باید یکی از این انواع را داشته باشند. layout ها یک نگاه کلی به ساختار سایت هستند. برای اینکه کد html مربوط به هر layout را ببینید کافیست که روی layout مورد نظر کلیک کنید و به مسیر زیر بروید:
Content → Show/Hide Editor
در کنار این مفهوم یک مفهوم دیگر داریم به اسم Structural Block که کلیتر از مفهوم قبلی هست. در قسمت قبل ستونهای بخش محتوای سایت که ممکن است در صفحات مختلف تعدادشان و نحوه نمایششان متفاوت باشد مشخص میشد. یعنی مثلن به هدر و فوتر سایت کاری نداشتیم. اما برای مثال کل هدر سایت یک structural block هست و ما یک Content Block داریم که خودش یک Structural Block است که کانتنت درون آن قرار میگیرد. برخی از کانتنت بلاکها widget هستند. widget یعنی اینکه محتوای آنها یک خاصیت داینامیک داشته باشد. مثلا اگر یک عکس ثابت قرار است در بخشی از سایت نمایش داده شود این میشود کانتنت بلاک ولی اگر یک بخشی است که محصولات محبوب را میخواهد نمایش بدهد این یک ویجت است.
ساخت قالب جدید from scratch
تعریف و ساخت file structure قالب
به مسیرهای زیر بروید و یک design package با نام مورد نظرتان بسازید:
/skin/frontend/
/app/design/frontend/
یک دایرکتوری default در هر دو مسیر بسازید و بعد file structure آن را درست کنید:
/skin/frontend/default/css
/skin/frontend/default/js
/skin/frontend/default/img
/app/design/frontend/default/layout
/app/design/frontend/default/templates
به System → Configuration → GENERAL → Design بروید و اطلاعات دیزاین پکیج ساخته شده را وارد کنید تا مجنتو از قالب شما استفاده کند. به دایرکتوری css که قبلا ساختید بروید و یک فایل با نام styles.css داخل آن بسازید. مجنتو به صورت خودکار دنبال فایل با این نام میگردد و css آن را داخل سایت لود میکند. برای اینکه مطمئن شوید که تعریف file structure قالب را به درستی انجام دادید یک کد تست css داخل آن بنویسید و سایت را رفرش کنید.