ارمغان فائزی

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

designing_magneto اولین باری که در مجتنو شروع به کار کردم، با دیدن تعداد زیادی فایل 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، اسم بلاک مربوطه مشخص می شود.

sublimesample3

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

sublimesample4

 

راه دوم

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

sublimesample1

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

sublimesample2

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

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

ارمغان فائزی

طراح رابط کاربری و گرافیست شرکت سارینا و همچنین عضو تیم فنی فروشگاه اینترنتی ورچین است. درحال حاضر در سارینا با Magento کار می‌کند. او لیسانس نرم افزار است و به نقاشی علاقه دارد.

  1. دوشنبه، ۲ تیر ۱۳۹۳ هادی کلانتری
    عالی!
  2. دوشنبه، ۲ تیر ۱۳۹۳ رضا پیشکاری
    لذت بردم :)
  3. شنبه، ۷ تیر ۱۳۹۳ مصطفی قنبری
    خیلی مقاله خوبی بود ممنونم. نمیشه قسمت بعدی این باشه؟ چطوری بلاک بسازیم، و از اونها چطوری استفاده کنیم؟ مرسی
    • ارمغان فائزی
      شنبه، ۷ تیر ۱۳۹۳ ارمغان فائزی
      ساختن بلاک مربوط به زمانی می شه که لازمِ یک ماژول جدید اضافه بشه و برنامه نویسی احتیاج داره. مصطفی جان به بچه های برنامه نویسمون می گم که در اینباره مطلب بذارن.
      • شنبه، ۷ تیر ۱۳۹۳ مصطفی قنبری
        ممنونم
  4. دوشنبه، ۱۳ مرداد ۱۳۹۳ ناصر
    درگیر شدن با امثال مجنتو، پرستا، اوپن کارت و غیره و ذالک چند تای بهای سنگین دار برای فروشگاه و توسعه دهنده‌ی اون. اول این که جون و رمق هر دوشون می‌گیره و دوم هم اینکه تازه بعد از کلی مرارت نتیجه خیلی وقت ها اونی نمیشه که تو می خواستی. چرا؟ چون مثلاً مجنتو فلان محدودیت داره، فلان امکان نداره یا برای این کار باید کلی کد بزنیم و قص الهذا.
    به عنوان نمونه در اولین بارگذاری سایت ورچین توسط آخرین نسخه مرورگر کروم و با آی پی ایران شاهدیم که تا 30 ثانیه اول بارگزاری ما فقط صفحه سفید می بینیم! تازه بعد از اون هم باید 50 ثانیه دیگه انتظار بکشیم تا کل محتوای 1.5 مگابایت و خرده ای صفحه‌ی اصلی لود بشه.
    درسته که 1.3 مگابایت از 1.5 مگابایت صفحه ی اصلی تصاویر تشکیل می‌دهند و الباقی رو js و css و html، ولی این باعث نمیشه از 1385 selector سی اس اس بگذریم که اصلاً بهشون احتیاجی توی صفحه اصلی نیست و الکی بود شدن! یا اون محدودیت ماژول ها و وابستگی های کلاساشون که نمی گذارن فایل js اونجای که می خواهیم فراخونی کنیم و جوری نشه که مثل ورچین یه js بیفته جلوتر از فایل css اصلیمونو نزاره سایت سر و شکل بگیره.
    به هر حال این ها بها هایی که باید بپردازیم. ولی امیدوار تیم های خلاق و با انگیزه ای مثل سارینا به فکر یه جنس خوب باشه و خودش آستین بالا بزنه.
    • فرزان بالکانی
      سه شنبه، ۲۱ مرداد ۱۳۹۳ فرزان بالکانی
      راستش من توی همون خط اول شما رو متوقف می کنم چون مقایسه بین اپن کارت و (به خصوص) مجنتو کاملا اشتباه هست و از هر جنبه ای با هم چندین فرسنگ فاصله دارند. مورد بعدی نتیجه کار پیش بینی نشده یا نادرست هست که خود من تا بحال در کار با مجنتو تجربه نکردم و تاحالا نشده که به چیزی برسم که نخوام.
      نکته بعدی آمار شما برای بارگذاری سایت ورچین هست که من رو حسابی متعجب کرد! من ورچین رو با کروم و حتی پشت وی پی ان با اینترنت ۵‍۱۲ کمتر از ۷ ثانیه کامل لود می کنم و نمی دونم این ۹۰ ثانیه شما چطور بدست اومده. همونجور که مطلع هستید، مجنتو به شدت صفحات رو کش می کنه که به کمترین بارگذاری نیاز باشه. در ضمن اگر JS جلوتر از CSS بیفته (با فرض شما) صفحات سفید لود نمیشه، بلکه اول HTML بدون استایل لود میشه.
      ممنون از نظری که دادین و حسن توجهتون.
  5. سه شنبه، ۱۲ اسفند ۱۳۹۳ الیا کیانی
    سلام.من برای اولین بار مجنتو رو نصب کردم و شروع به کار کردم و تجربه ای در برنامه نویسی ندارم.چجوری میشه محصو ل و تصاوری رو وارد سایت کنم.منون میشم اطلاعات کافی برای افراد مبتدی قرار بدین.با سپاس
    • ارمغان فائزی
      شنبه، ۲۲ فروردین ۱۳۹۴ ارمغان فائزی
      سلام
      دوست عزیز برای وارد کردن محتوای یک محصول باید در قسمت پنل ادمین، مسیر کاتالوگ > مدیریت محصولات را دنبال کنید. سپس در قسمت 'افزودن محصول' اطلاعات مربوط به محصول را وارد کنید. در آینده مطلبی در این مورد می نویسم و توضیحات لازم را می دهم.
      موفق باشید