كل مايتعلق بالقوالب من تركيب وتصميم وتعديل اتجاه- اوبن كارت opencart

[Eng Amr Adel]

بسم الله الرحمن الرحيم


================================================== ===

في البداية أحب أوضح المتطلبات الأساسية للتعامل مع القوالب وهي:

يجب أن تكون لديك خلفية عن لغة
CSS
وهذا أهم ما في الموضوع

يجب أن تكون لديك خلفية عن برنامج تحرير الصور الفوتوشوب أو أي محرر صور مشابه للفوتوشوب

يجب أن تكون لديك خلفية عن لغات برمجة المواقع
php - html

بالنسبة للغة
html
هي الأهم لأن جميع ملفات القوالب عبارة عن ملفات بامتداد
.tpl

يعني تم عمل الملف باستخدام لغة
html

ومن ثم تم حفظ الملف بصيغة
.tpl

وهذا الامتداد هو اختصار لكلمة
template

ومعني هذه الكلمة باللغة العربية هو قالب
================================================== ===

الان ننتقل لصلب الموضوع وسوف يكون الموضوع مقسم لثلاثة أجزاء كالتالي:

الجزء الأول طريقة تركيب القالب على المتجر

الجزء الثاني طريقة تعديل وتوافق اتجاه القالب مع المتجر

الجزء الثالث طريقة تصميم قالب

================================================== ===

الجزء الأول

طريقة تركيب القالب على المتجر

يجب أولا معرفة مسار مجلد القوالب وهو على المسار التالي

catalog\view\theme

وبعد فتح هذا المسار سوف تجد مجلد واحد بإسم

default

tpl_1.png (46.69 KiB) Viewed 14357 times


وهذا المجلد هو القالب الافتراضي للمتجر والذي يظهر دائما باللون الأزرق كما هو موضح في الصورة التالية

tpl_2.png (183.37 KiB) Viewed 14357 times


وبعد أن عرفنا مسار مجلد القالب سوف نقوم بتركيب قالب مجاني من القوالب المجانية الموجودة في موقع اوبن كارت في قسم القوالب

والقالب المجاني الذي سنقوم بالعمل عليه موجود على الرابط التالي

http://www.opencart.com/index.php?route ... order=DESC

وبعد أن نقوم يتنزيل القالب على الجهاز سوف يكون على شكل ملف مضغوط ثم نقوم بفتح الضغط ونجد أنه يحتوي على مجلد واحد فقط بإسم

greenshop

نقوم بوضع هذا المجلد في مسار مجلد القوالب بجوار القالب الافتراضي

tpl_3.png (24.85 KiB) Viewed 14357 times


وبعدها ننتقل إلى لوحة التحكم ثم نذهب الى الضبط ثم الاعدادات ثم المتجر ثم من خانة القالب او الاستايل سوف نجد القالب الجديد

tpl_4.png (26.07 KiB) Viewed 14357 times


وبعد الحفظ نذهب إلى واجهة الموقع ونعمل تحديث للصفحة لكي يظهر القالب الجديد

tpl_5.png (488.27 KiB) Viewed 14357 times


وهكذا نكون قد انتهينا من شرح طريقة التركيب

================================================== ===

الجزء الثاني

طريقة تعديل وتوافق اتجاه القالب مع المتجر

لو نلاحظ أن القالب الذي قمنا بتركيبه يعمل فقط في اتجاه اليسار فقط وعند اختيار اللغة العربية أيضاً يعمل في اتجاه اليسار ويحتاج إلى تعديل الاتجاه لليمين

ولكي نقوم بذلك نقوم بفتح مجلد الهيدر الموجود على المسار

tpl_6.png (35.74 KiB) Viewed 14357 times


ثم نبحث عن السطر

Code: Select all<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />

ونستبدله بالسطر التالي

Code: Select all<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/<?php echo $mainstyle; ?>.css" />

ثم نحفظ

وللإصدار
1.5

ابحث عن السطر

Code: Select all<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

واستبدله بالسطر

Code: Select all<?php if ($direction == 'rtl') { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet-a.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
<?php } ?>

ثم نحفظ

الان لو تلاحظ الموقع يعمل بشكل طبيعي للغة الانجليزية ولكن للغة العربية سوف تكون النتيجة كالصورة التالية

tpl_7.png (227.33 KiB) Viewed 14357 times


وهذه نتيجة أننا قمنا بالتعديل على ملف الهيدر حيث أن ملف الهيدر الآن يبحث عن ملف الاستايل الذي يعمل على الاتجاه اليمين وهو غير موجود لذلك تظهر لنا هذه الصورة الأخيرة

ولكي نقوم بعمل ملف استايل يعمل باتجاه اليمين نذهب الى المجلد على المسار التالي

tpl_8.png (24.06 KiB) Viewed 14357 times


نلاحظ الآن أنه يوجد ملفين فقط والملف الأول

ie6.css

خاص لكي يتوافق السكربت مع متصفح انترنت اكسبلور 6 فقط وليس له علاقة باتجاه الموقع

والملف الثاني هو الذي يهمنا وهو خاص بواجهة الموقع لكي تعمل باتجاه اليسار

ويجب علينا الآن أن نقوم بنسخ نفس هذا المجلد الثاني ومن ثم نقوم بتسميته إلى

stylesheet-a.css

ضروري جداً اختيار هذا الإسم ولن يعمل في حالة اختيار اسم من عندك

كما في الصورة التالية

tpl_9.png (29.13 KiB) Viewed 14357 times


والان لو ذهبنا إلى الموقع واخترنا اللغة العربية سوف نلاحظ أن الموقع يعمل مع القالب ولكن مازال في اتجاه اليسار

وهنا يأتي دور العمل على لغة

CSS

وتعديل الاتجاه للملف

stylesheet-a.css


وهكذا نكون قد انتهينا من شرح طريقة تعديل وتوافق اتجاه القالب مع المتجر

ملاحظة هامة: بعض القوالب المجانية وأيضاً المدفوعة عند مشاهدة الملفات في الملف المضغوط تلاحظ وجود تعديلات على نفس ملفات سكربت المتجر

مثل هذا القالب

http://www.opencart.com/index.php?route ... order=DESC

وهذا بسبب أن الشخص الذي قام بعمل هذا القالب قد أخطأ ولم يستخدم الطريقة الصحيحة لعمل القوالب

لذلك أنصح وبشدة قبل تركيب أي قالب مشاهدة الملفات الموجودة في الملف المضغوط والتأكد فقط

أن الملف المضغوط يحتوي فقط على قالب وليس قالب مع تعديلات على نفس السكربت

وفي كل الأحوال القالب سوف يعمل باتباع خطوات التركيب المرفقة مع كل قالب ولكن سيسبب لك إزعاج عند الترقية

================================================== ===

الجزء الثالث

طريقة تصميم قالب

الخطوات الذهبية لعمل قالب خاص هي كالتالي

أولاً : لا تحذف مجلد القالب الافتراضي

default

لأنه سيكون كمرجع أساسي في حالة نقص أي ملف في القالب الخاص الذي ستقوم بعمله
وأيضاً لكي لايتم استبدال الملفات عند الترقية
والأفضل دائماً عمل قالب منفصل في مجلد منفصل على مسار مجلد القوالب الذي ذكرناه سابقاً

catalog/view/theme

ثانياً : لا تقم بنسخ جميع محتويات القالب الافتراضي

default

إلى مجلد القالب الخاص بك لأن ذلك يستوجب عليك ترقية جميع الملفات عند صدور نسخة جديدة.

ثالثاً : قم بإنشاء مجلد جديد على مسار مجلد القوالب

catalog/view/theme

مثلا سوف نقوم بتسمية هذا المجلد إلى

arab

tpl_10.png (21.12 KiB) Viewed 14357 times


الان المجلد فارغ

نرجع إلى المجلد الافتراضي ونجد فيه ثلاثة مجلدات

tpl_11.png (20.71 KiB) Viewed 14357 times


وننسخ المجلدين بجميع محتوياتهم إلى مجلد القالب الخاص بنا

image

وهذا المجلد خاص بصور القالب

و

stylesheet

وهذا المجلد خاص بملفات الاستايل

ثم ننسخ فقط ملف الهيدر على المسار التالي

catalog/view/theme/default/template/common/header.tpl

إلى مسار القالب الخاص بنا

catalog/view/theme/arab/template/common/header.tpl

ثم نقوم بفتح ملف الهيدر الخاص بنا ونستبدل جميع الكلمات

default

إلى

arab

tpl_12.png (108.54 KiB) Viewed 14357 times


ثم نحفظ الملف بعد عمل التعديلات

رابعا : نذهب إلى لوحة التحكم ونختار القالب الخاص بنا

خامساً : نقوم بالتعديل على ملفين الاستايل

catalog/view/theme/arab/stylesheet/stylesheet-a.css

وهذا الملف خاص باللغة العربية

catalog/view/theme/arab/stylesheet/stylesheet.css

وهذا الملف خاص باللغة الانجليزية

ومن هذين الملفين يمكنك تعديل الخلفية والألوان والخطوط .. إلخ على حسب احتياجك

ويجب أن تكون لديك معرفة عن لغة

CSS

سادساً : فقط انسخ الملفات التي تريد التعديل عليها من مجلد

template

ولاحظ بأننا فقط نسخنا منه ملف الهيدر

catalog/view/theme/default/template/common/header.tpl

ولا تحتاج لنسخ غيره إلا في حالة عمل تعديلات خاصّة

سابعاً : اذا كنت قد قمت بتطبيق الخطوات السابقة وفي حالة اصدار نسخة جديدة وتريد ترقية القالب إلى النسخة الجديدة

قم بنسخ القالب الخاص بك كاملاً إلى النسخة الجديدة

ثم فقط قم بالمقارنة بين ملف الهيدر الخاص بك

catalog/view/theme/arab/template/common/header.tpl

مع ملف الهيدر لقالب النسخة الجديدة


وهكذا نكون قد انتهينا من شرح طريقة تصميم قالب

================================================== ===

انتهى الموضوع وبالتوفيق للجميع

ويسعدني الرد على أي استفسار

ولا تنسونا من صالح دعائكم

http://forum.opencart.com/viewtopic.php?t=20132