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: Category Page, Part 2
Magento Theme Development: Product Page, Part 2

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

الآن بعد أن أكملنا الصفحة الرئيسية وصفحة الفئة ، سنبدأ في هذا البرنامج التعليمي بتحرير ثالث أهم صفحة على موقع التجارة الإلكترونية: صفحة المنتج. دعونا أولا فتح صفحة المنتج ، ونرى كيف يبدو الآن وكيف نريد أن ننظر.

تبدو صفحة المنتج في تصميم HTML الخاص بنا كما يلي:

HTML design of product page

تبدو صفحة منتجاتنا الحالية على النحو التالي:

Product Page before editing

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

Enabling template hints

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

إذا نظرت عن قرب ، فسيأتي الهيكل العام لقسم المنتج من ملف template catalogio product view.phtml. لقد أشرت إلى ذلك من خلال سهم في الصورة أعلاه. يوفر هذا الملف البنية الخارجية لجميع المكونات ، ثم الأجزاء الداخلية تأتي من قوالب أخرى ، ولكننا سنقوم بتحرير هذا الجزء الخارجي أولاً.

سننسخ ملف view.phtml هذا إلى المظهر الجديد ، ونبدأ في تعديله. تبدو الشفرة الحالية لهذا الملف كما يلي:

الآن علينا التحقق من كود HTML الخاص بنا ، وسنضع كل شفرة HTML الخاصة بنا في ملف view.phtml هذا ثم نبدأ في تحريره. تشبه الشفرة الحالية لملف detail.html في ملف تصميم HTML الخاص بنا (أنا فقط أقوم بنسخ الشفرة الخاصة بجزء المنتج باستثناء مقطع الرأس والتذييل وغير ذلك):

أعلم أن هذا كثير من التعليمات البرمجية ، وقد يخيفك. ولكن لا تقلق ، لأنك كما سترى عندما نبدأ بوضع العلامات الديناميكية فيه ، فإن الشفرة سوف تبدأ في الذوبان بسرعة ، ولا داعي للقلق بشأن معظمها.

سنبدأ الآن في تعديل شفرة HTML هذه عن طريق إدراج علامات ديناميكية من ملف view.phtml الفعلي.

بادئ ذي بدء ، سنضيف هذه السطور في الأعلى ، لإجراء بعض التهيئة:

ثم أغلق div عرض المنتج في نهاية الملف (سطر 314):

بعد ذلك سنلحق تفاصيل تفاصيل div داخل عنصر نموذج ، كما هو الحال في ملف view.phtml الفعلي. لذلك سنضيف هذه السطور داخل div تفاصيل المنتج في السطر 10:

وبالمثل ، سنغلق هذا النموذج الآن ، وننسخ أيضًا جافا سكريبت من view.phtml في السطر 77:

في الخطوة التالية ، داخل div tab-box (بدءًا من السطر 129) ، أزل كل الشفرة الموجودة ، وانسخ شفرة علامة التبويب التالية من view.phtml (حوالي 100 سطر من الشفرة تم استبدالها بهذه الخطوط القليلة). للتأكد من أن علامة التبويب جافا سكريبت لا تزال تعمل بشكل جيد ، سنقوم بإضافة علامة التبويب التبويب علامة التبويب div السجلات الحالية ، بحيث تبدو الشفرة الجديدة كما يلي:

مع كل ذلك ، سنقوم الآن بإدراج getChildHtml('related_products')<?php echo $this-> علامة داخل div المنتجات الساخنة ، بعد إزالة الشفرة الحالية ، بحيث تبدو كالتالي في السطر 166:

انظر كيف يتم استبدال حوالي 150 سطر من الكود بهذه الخطوط الثلاثة فقط؟ لنحفظ كل شيء ونرى كيف تأتي الصفحة حتى الآن. إذا فعلت كل شيء بشكل صحيح ، فيجب أن تبدو كالتالي:

Product page after editing viewphtml

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

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

في المقالة التالية ، سنكمل باقي هذه الصفحة عن طريق تعديل ملفات phtml أخرى.

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.