Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

التنمية الماجنتو الموضوع: فئة صفحة، الجزء 1

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page Styling
Magento Theme Development: Category Page, Part 2

Arabic (العربية/عربي) translation by Hamdan Veerlax (you can also view the original English article)

تهانينا على إكمال الصفحة الرئيسية لمظهرك الجديد ، وبدءًا من الصفحة التالية. في هذا البرنامج التعليمي ، سنبدأ في تعديل صفحة الفئات في مظهر Magento الخاص بنا.

تتكون صفحة الفئة أساسًا من أربعة أقسام: شريط الأدوات ووضع الشبكة ووضع القائمة والشريط الجانبي. سنتعامل مع الأقسام الثلاثة الأولى في هذه المقالة ، وبعد ذلك في البرنامج التعليمي التالي ، سنعمل على تعديل الشريط الجانبي ونقوم ببعض الإصلاحات المتعلقة بـ CSS.

إذا نظرت إلى أي صفحة من فئات موضوعنا ، فستظهر حاليًا كما يلي:

Category Page before editing

بينما نريد أن نجعلها تبدو كما يلي:

HTML design Category Page

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

اكتشفنا هنا أن هناك تخطيطًا ثلاثي الأعمدة يعرض هذه الصفحة ، وهذا هو سبب وجود مساحة فارغة فارغة على اليسار ، حيث لا يتم تعيين أي كتل على الشريط الجانبي الأيسر.

Template Hints for Category Page

لجعل هذه الصفحة تبدو مثل تصميم HTML الخاص بنا ، سنقوم بتغييره إلى عمودين. من لوحة المشرف ، انتقل إلى الفهرس> إدارة الفئات> تصميم مخصص> تخطيط الصفحة وقم بتغييره إلى عمودين مع الشريط الأيسر.

Changing Page Layout

الآن يجب أن تحتوي صفحتنا على تخطيط مكون من عمودين مع شريط جانبي على الجانب الأيسر ، كما كان مطلوبًا لتصميمنا.

كما هو الحال في هذه المقالة ، سنقوم بتغيير المنطقة الصحيحة فقط (وليس الشريط الجانبي) ، سنبدأ عملية التحرير من شريط الأدوات. عند تشغيل تلميحات القوالب ، سوف نتحقق من ملفات phtml المسؤولة عن تقديم ذلك من خلال تمكين تلميحات القالب مرة أخرى.

كما اكتشفنا ، هذا الملف: \template\catalog/product/list/toolbar.phtml.

سننسخ ذلك في المظهر الجديد ، ونقارنه برمز ملف HTML ، ثم نبدأ في إجراء التغييرات. يبدو أن الشفرة الحالية لملف toolbar.phtml تشبه هذا:

يجب أن نقارنها مع كود HTML المسؤول عن جزء شريط الأدوات ، وهو ما يلي:

سنبدأ في تعديل هذا الرمز عن طريق وضع علامات ديناميكية وعبارات مختلفة for و if. على سبيل المثال ، لعرض الروابط لأوضاع الشبكة والقائمة في وضع العرض ، سنقوم بإضافة هذا الرمز:

ما يفعله هذا الكود بشكل أساسي هو تكرار كل الأوضاع النشطة (القائمة والشبكة) ، ثم سرد علامة ارتساء لكل واحدة منها. هنا ، بذكاء شديد ، قمنا بتعيين فئات وعناوين مختلفة لهم ، باستخدام المتغير $_label ، والذي سيكون مختلفًا لكل وضع.

وبالمثل ، يمكنك تعديل الأجزاء التي يتم sort-by وlimiter بنفسك عن طريق مقارنتها مع ملف toolbar.phtml الفعلي. بعد التعديلات ، سيبدو الرمز النهائي لهذا الملف شيئًا كالتالي:

وإذا قمنا بتحديث الصفحة الآن ، فسوف تبدو شيئًا مثل هذا. كل شيء في مكانه ، ولكن CSS مغلق تمامًا ، وسنعمل على إصلاحه في المقالة التالية.

Toolbar after editing

الآن حان الوقت لتغيير المنتجات الفعلية المعروضة على هذه الصفحة. يمكن عرض المنتجات هنا بطريقتين مختلفتين ، أي وضع القائمة ووضع الشبكة. إذا تمكّنا من تلميحات القالب من معرفة الملف المسؤول عن هذا الجزء ، فسوف نرى أن الشفرة الخاصة بكل من وضع الشبكة والقائمة مكتوبة في نفس الملف ، وهو frontend\rwd\default\template\catalog/product/list.phtml.

رمز القائمة في هذا الملف موجود على الأسطر 44 إلى 116 ، وهو ما يلي:

علينا الآن مقارنته برمز قائمة HTML في productlist.html في قالب HTML الخاص بنا.

تعديل هذا الرمز بسيط إلى حد ما. سنستخدم خطوط التهيئة هذه:

ثم سنضع حلقة for حول العلامة li:

وأخيرًا ، سنحل محل اسم المنتج والسعر والوصف ورابط ملف الصورة وعنوان URL مع العلامات الديناميكية. سيبدو الرمز النهائي كما يلي:

الآن ، إذا قمنا بتحديث الصفحة ، سنرى صفحة الفئة في وضع القائمة ستبدو شيئًا مثل هذا. أعلم أنه ليس ما نريد أن يبدو عليه ، ولكن كل HTML الخاص بنا في مكانه ، لذلك نحن بحاجة الآن إلى تعديل CSS الخاص به ، والذي سنفعله في البرنامج التعليمي التالي.

List Mode after editing

الآن يأتي إلى وضع الشبكة ، رمز ذلك من 118 إلى 176 في نفس ملف list.phtml.

تشبه شفرة HTML هذا في ملف productgrid.html في قالب HTML الخاص بنا:

تعديل هذا الجزء سيكون مشابهًا تمامًا لما فعلناه في جزء القائمة. أولاً سنقوم ببعض التهيئة ، كما هو الحال في ملف list.phtml الافتراضي.

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

أخيرًا ، سنحل محل سمات المنتج مثل اسم المنتج والسعر والوصف وغير ذلك ، مع العلامات الديناميكية ذات الصلة. يمكنك العثور عليها بسهولة من ملف list.phtml الفعلي.

سيبدو الرمز النهائي كما يلي:

الآن إذا قمت بتحديث الصفحة ، سيبدو وضع الشبكة كما يلي:

Grid Mode after editing

في هذه المقالة ، قمنا بتعديل أشرطة الأدوات والقائمة وشريط الأدوات لهذه الصفحة. في المقالة التالية ، سنقوم بتعديل الشريط الجانبي ، ونقوم ببعض إصلاحات نمط CSS. في نهاية المقالة التالية ، ستبدو صفحة الفئة لدينا مشابهة تمامًا لتصميم HTML.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.