سلام و عرض ادب خدمت شما همکاران و همراهان عزیز

 

در این مقاله آموزشی از سری آموزش های توسعه دهندگان می خواهیم قابلیت جدیدی را که به تازگی در ‌پرستاشاپ نسخه 1.7  ارائه شده، یعنی توسعه و شخصی سازی قالب پرستاشاپ تحت عنوان قالب والد و فرزند (parent/child) آموزش دهیم.

لازم به ذکر است این مقاله از سری آموزش های توسعه دهندگان قالب می باشد این ویژگی بسیار مفید بوده و به کمک این ویژگی می‌توانید بخش زیادی از مشکلات قالب را بدون دستکاری قالب و نگرانی پیرامون آن برطرف نمایید همچنین این امکان برای مدیران فروشگاهها و توسعه‌دهندگان از این جهت مهم و ارزشمند بوده تا بهتر و راحتتر قالبهای دلخواه خود را با توسعه قالب اصلی بتوانند طراحی نمایند و فروشگاه خاص و متفاوت تری را داشته باشند!

پس با ما همراه باشید…

قابلیت جدید توسعه و شخصی سازی قالب در پرستاشاپ 1.7

آشنایی با قابلیت والد و فرزند قالب ها در پرستاشاپ 1.7

پرستاشاپ در نسخه 1.7 روش کاملا جدیدی را برای توسعه و شخصی سازی قالبها ارایه کرده و قابلیتی را در این نسخه به پرستاشاپ افزوده که این اجازه را می دهد که بتوانید یک قالب خاص (والد/ فرزند)  داشته باشید که البته این قابلیت خود امتیازی ویژه در نسخه جدید برای پرستاشاپ محسوب می شود و ما می خواهیم کمی درباره ی این نوع قالبها برای شما توضیح دهیم.

کاربرد این قابلیت در چیست ؟

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

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

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

نکته

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

فایده استفاده از این قابلیت در چیست؟

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

ولی در نسخه جدید اگر بخواهید قالب را شخصی سازی کنید فقط کافی است یک قالب فرزند ایجاد کنید وتغییرات خود را در آنجا اعمال کنید در این صورت هنگام بروز‌رسانی تغییرات شما از بین نخواهند رفت و شما میتوانید به راحتی قالبتان را بروزرسانی کنید!

لطفا مد‌نظر داشته باشید که ممکن است در فرایند بروز‌رسانی ها ساختار قالب تغییر کند ولی تغییر آن از گزارش دادن تغییرات بسیار راحت تر است.

به علاوه استفاده از قالب فرزند سرعت شما را برای پیشرفت و توسعه افزایش می دهد و شما فقط لازم است که‌با فایل های مهم و مورد نیاز که‌برای اضافه کردن یا تغییر دادن قالب نیاز دارید کار کنید .

این قابلیت چگونه کار می کند ؟!

برای استفاده از این قابلیت ابتدا باید مطمئن شوید که قالب اصلی شما حتما در پوشه themes قرار دارد.

در اولین قدم یک پوشه جدید در شاخه themes با نام دلخواه و فایلهای زیر ایجاد مینماییم!

نکته

به عنوان مثال قالب جدید ما به نام childtheme است! حالا یک عکس با نام preview.png را به عنوان تصویر قالب و فایل theme.yml را در زیرشاخه config به عنوان فایل تنظیمات قالب قرار میدهیم!

پس از انجام مراحل بالا  نیاز است که این دو مقدار را به فایل theme.yml  اضافه کنید.

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

Use_parent_assets : اگر مقدار این پارامتر را برابر true قرار دهید از منابع و فایلهای قالب والد استفاده می شود!

با انجام مراحل بالا در واقع شما یک قالب جدید ساخته اید و میتوانید از بخش مدیریت پرستاشاپ در تنظمات قالب آن را انتخاب نمایید البته هنوز هیچ تغییری را نسبت به قالب مرجع (در اینجا classic) را شامل نمی‌شود!

استفاده از منابع دلخواه در قالب

برای این منظور از کد بالا که ایجاد کردید، عبارت  use_parent_assets  را پاک کنید و سپس کد زیر را وارد نمایید:

product: نام بلاکی است که میخواهید استایل مورد نظر را برروی آن اعمال کنید.

id: نام یکتایی است که میتوانید برای استایل خود تعریف کنید.

path:  آدرس نسبی فایل css شما می باشد.

media:میتواند هر یک از مقادیر زیر را داشته‌باشد

priority: درجه اهمیت اجرا را مشخص می کند.

و با افزودن این کد به‌فایل theme.yml قالب خود میتوانید به راحتی قالب خود شخصی سازی کرده و از منابع دلخواه استفاده کنید!

در این مورد در آینده بیشتر توضیح خواهیم داد!

به ارث بردن یک فایل قالب

با استفاده از فایل  theme.yml که در بالا تنظیم کردیده‌اید قالب فرزند از فایلهای قالب والد استفاده می کند، که برای توسعه و تغییر در آنها دو راه وجود دارد :

  1. راه اول زمانی کارایی دارد که شما فقط می‌خواهید یک یا چند قسمت خاصی از فروشگاه خود را شخصی سازی کنید.
  2. راه دوم زمانی کارایی دارد که میخواهید ساختار قالب را به طور کامل بروز رسانی کنید.

روش اول ویرایش یک بلاک با extend کردن فایل قالب مرجع

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

برای این منظور شما باید ابتدا این  فایل را در قالب را ایجاد کنید:

سپس فایل category.tpl را که ایجاد کرده اید را باز کنید و بخش (بلاک) مورد نظر را ویرایش کنید و اگر می خواهید از منابع موجود در قالب والد استفاده کنید، کلمه کلیدی parent را به ابتدای عبارت بعد از کوتیشن ( ‘ ) اضافه کنید.

همان طور که در مثال پایین مشاهده می کنید :

 

روش دوم ویرایش تمام یک فایل قالب

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

Extend کردن لیست محصولات آسان ترین راهی است که می تواند بلاک های کد خود را به راحتی بروزرسانی کنید.

برای مثال اگر می خواهید بلاک product_list_header را تغییر دهید فقط کافیست مانند کد زیر عمل کنید:

شده قالب به ارث برده

به پیش…

همچنین شما میتوانید قالب جدید خود را با فایل های خودتان ایجاد کنید برای این کار شما می توانید فایل مورد با پسوند مورد را در این دستور وارد کنید

ترجمه ها :

در قالب به ارث برده شده ترجمه ها به سه دسته تقسیم می شوند :

1.از عبارتهایی استفاده میکنید که در قالب پیشفرض (classic) وجود دارد!

تنها کافی است عبارتها را با همان نام و همانطور که هست استفاده نمایید این عبارات به صورت خودکار (اگر در پرستاشاپ ترجمه آن در دسترس باشد) ترجمه میگردد!

2. استفاده از ترجمه هایی که در قالب والد موجود است.

متاسفانه در حال حاضر ترجمه ها بین تم های والد و فرزند به اشتراک گذاشته نمی شود(اما ما  -تیم رسمی پرستاشاپ- در حال کار بر روی آن هستیم!). شما فعلا باید از روش 3 (زیر) استفاده کنید و عبارات را دوباره ترجمه کنید.

3.ایجاد ترجمه جدید

  • بدین منظور باید در ابتدا یک نام و دامنه ی دلخواه برای رشته های جدید تعریف کنید
  •  واردسازی زبان از صفحه ترجمه ها در مدیریت پرستاشاپ
  •  کپی کردن فایل های ترجمه در پوشه translations  پوشه قالب
  • و در نهایت ترجمه رشته‌ها با استفاه از صفحه ترجمه‌ها

 

مواردی که باید به خاطر داشته باشید :

با افزودن این قابلیت ما خواسته ایم که  بروزرسانی و ویرایش قالب را برای شما راحت تر کنیم

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

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

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

https://github.com/PrestaShop/childtheme-example

 

و در نهایت از شما می خواهیم که نظرات خود را با ما به اشتراک بگذارید!

منبع: وبلاگ رسمی پرستاشاپ

 

با احترام فراوان

تیم توسعه پرستافا