اولین قدم های یک طراح وب در کار با مجنتو

اولین باری که در مجتنو شروع به کار کردم، با دیدن تعداد زیادی فایل XML  و PHTML  و اینکه هرکدام از آنها چیست و به چه دردی می خورد حسابی گیج شده بودم. اکثر کسانی که با مجنتو کار می کنند، معتقند در روزهای اول کار با آن، گیج شده اند ولی کم کم قلق کار با مجنتو دستشان آمده است. تم مجنتو شامل سه قسمت می شود:

1. Layout  : XML Layout Configuration مشخص می کند که چه بلاکی از چه PHTML ای استفاده می کند. در کل Layout ساختار پیچیده ای دارد که در پست های بعدی  درباره آن صحبت می کنم.
2. PHP Template Files:  هر Template شامل HTML ، JavaScript و مقداری کد PHP است. که دسترسی به آن ها کار دشواری است. در این مقاله روش های دسترسی به Template را توضیح می دهم.  با پیدا کردن  Template مورد نظرتان،  بدون تغییر ساختار مجنتو می توانید تغییرات ظاهری لازم را ایجاد کنید.
3. Block  : PHP Block Classes ها شامل PHP Class هستند و در Template با متغیر this$  قابل دسترسی می باشند. معمولا طراحان با این قسمت کاری ندارند.

هر Theme یک Skin دارد که شامل عکس ها، فونت ها و فایل های  CSS و JavaScript است . اگر سایتتان چند تا StoreView دارد، برای اینکه Theme مربوط به هرکدام از StoreView ها را پیدا کنید، باید مراحل زیر را دنبال کنید: وارد پنل ادمین مجنتو شوید.

1. از منوی بالای صفحه System و در آن Configuration را انتخاب کنید.
2. از منوی سمت چپ در قسمت General  گزینه Design را انتخاب کنید.
3. در قسمت Themes > Templates نام Template موردنظرتان را بنویسید تا تغییرات فقط روی آن انجام شود.

اگر شما یک طراح رابط کاربری هستید، برای کار با مجنتو لازم است که این قسمت ها را بشناسید و کمی هم PHP  بدانید.
یکی از مشکلاتی که ابتدای کار به آن برخورد می کردم، پیدا کردن Template مورد نظرم میان آن همه فایل PHTML بود. در این پست، دو راه برای پیدا کردن Template مورد نظرتان را توضیح می دهم: فرض کنید می خواهید، رنگ زمینه یکی از باکس های sidebar را تغییر دهید، برای این منظور یا باید Class جدیدی به باکس بدهید یا اینکه Class ای که دارد را تغییر دهید، ابتدا باید Template آنرا پیدا کنید.

راه اول

وارد پنل ادمین مجنتو شوید. از منوی بالای صفحه System و در آن Configuration را انتخاب کنید. از منوی سمت چپ در قسمت Advanced  گزینه Developer را انتخاب کنید. حال وارد صفحه Developer می شوید، در قسمت سمت چپ – بالا، Current Configuration Scope را مشاهده می کنید که در آنجا می توانید Store View سایت را انتخاب کنید. یک Store View را از گزینه هایی که می بینید، انتخاب کنید. سپس در قسمت Debug، گزینه های Template Path Hints و Add Block Names to Hints را yes انتخاب کنید و روی دکمه Save Config کلیک کنید. با انتخاب Template Path Hints، مسیر PHTML  مورد نظرتان را می بینید و با انتخاب Add Block Names to Hints، اسم بلاک مربوطه مشخص می شود.

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

راه دوم

در Firebug یا Developer Tools  مرورگر، باکسی که قرار است رنگ زمینه اش را عوض کنید، انتخاب کنید. ویژگی Class یا ID آن را پیدا کنید و در همه فایل های PHTML ای که در مسیر app > design > frontend > base می باشند جستجو کنید. توجه داشته باشید که حتما جستجو را روی پکیج base انجام دهید.
از آنجایی که خودم با Sublime کار می کنم، روش جستجو در آن را برایتان توضیح می دهم، اما شما می‌توانید از هر نرم‌افزاری که در محتوای فایل‌ها جستجو می‌کند استفاده کنید: روی پکیج base راست کلیک کرده و Find in Folder را انتخاب کنید. ویژگی Class را در قسمت Find بنویسد و روی دکمه Find کلیک کنید.

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

فرض کنید، Class باکسی که قرار است رنگ آن را عوض کنید block-compare نام دارد و بعد از جستجو، دو نتیجه با این نام پیدا می شود، از آنجایی که این باکس در sidebar  قرار دارد، جستجوی اول که در مسیرش sidebar.phtml وجود دارد را انتخاب می کنیم. با کلیک روی block-compare به فایل PHTML آن دسترسی پیدا می کنید.

توجه داشته باشید که فایل‌های پکیج base را نباید دستکاری کنید زیرا موقعی که  نسخه مجنتو خود را به روز می‌کنید تمام تغییرات از بین می‌روند. برای اطلاعات بیشتر در مورد تم‌ها به Introduction to Magento Theme Develpoment مراجعه کنید.