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

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

 

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

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

نگاهی سریع بر ساختار اپن کارت

Basic OpenCart Structure

 

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

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

الگوی طراحی اپن کارت : MVC-L

Catalog Structure

کنترلر نمای مدل یا MVC ، یک الگوی طراحی بسیار رایج در زمینه توسعه نرم افزار است . اپن کارت فقط یک عنصر دیگر به آن اضافه می کند : Language ( زبان ) ؛ به همین دلیل آن را MVC-L می نامیم .

در مورد ما ، قسمت view جایی است که تمام کد مربوط به تم را در آن قرار خواهیم داد . در یک مرور سریع ساختار catalog خواهیم دید که اپن کارت چگونه اثر خود را می گذارد .

مرور عناصر

  • Controller : مسئول کنترل منطق برنامه کاربردی است .
  • Language : برای جدا کردن اطلاعات خاص مربوط به سایت های چند زبانه مفید است .
  • Model : مسئول آوردن داده ها از پایگاه داده های back-end است .
  • View : این جایی است که بیشتر وقت خود را در آن می گذرانیم ! و مسئول نمایش لایه بندی front-end است .

آشنایی با لایه نمایش

View Structure

یک تم اپن کارت پیش فرض دردایرکتوری view در دسترس است . در این قسمت درباره همین بخش بحث می کنیم . در سطوح عمیق تر ، دو دایرکتوری دیگر هم وجود دارند : javascript و theme .

فعلا تصور می کنیم که تمامی فایل های جاوااسکریپت مورد نیاز در دایرکتوری javascript قرار دارند . گاهی اوقات در این مورد استثناهایی هم وجود دارد ، یعنی در موردی که می توانیم شیوه نامه ها و فایل های تصویری مرتبط را نیز در زیر این دایرکتوری قرار دهیم . برای مثال اپن کارت کتابخانه colorbox را فراهم می کند که محتوی چیزی بیش از جاوااسکریپت به تنهایی است .

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

ساختار تم پیش فرض

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

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

دنیای قالب ها

Template Structure

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

  • Common . فایل های قالب مربوط به عناصر Common در سراسر صفحه های مختلف دراین دایرکتوری قرار می گیرند . نمونه هایی از این مورد عبارتند از : هدر ، فوتر ، و نوارجانبی مربوط به قالب ها . اگر قصد  دارید از فایل های قالب خود در سراسر صفحه های مختلف استفاده کنید ، بهتر است آن را در اینجا قرار دهید ، زیرا نگهداری آن در بلند مدت ساده تر است . البته ، انجام این کار اجباری نیست ، اما بهتر است کارها به شیوه مناسب تر انجام شوند .
  • Error . در این لحظه ، فقط قالب error در اینجا وجود دارد .
  • Information . در اینجا می توانید قالب های مربوط به اپن کارت ، Sitemap page ، و صفحه Static Informational را بیابید .
  • Module . این یک داریکتوری مهم بر حسب نوع قالب هایی است که نگه می دارد . همان طور که پیشتر در اپن کارت گفتم ، می توانیم ماژول سفارشی خود را ایجاد کنیم تا نیازهای سفارشی مان را برآورده کند ، بنابراین ، این همان جایی است که دوست دارید فایل های قالب مربوط به ماژول سفارشی تان را در آن بگذارید .

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

catalog/view/theme/default/template/account بیابید . در بخش های بعدی این مجموعه ، با نگاهی به مسیر url آن صفحه نحوه یافتن فایل قالب را خواهیم گفت .

خلاصه

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

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

حسن موحد

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

ارسال نظر