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

الماجنتو للمصممين: الجزء 5 

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Magento for Designers.
Magento for Designers: Part 4
Magento for Designers: Part 6

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

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

في هذا الجزء الخامس، ونحن سوف يكون بناء إحدى طرق العرض الرئيسية من متجرنا-صفحة معلومات المنتج. متحمس؟ هيا بنا نبدأ! 


السلسلة الكاملة 


خلاصة سريعة

في الجزء الأخير، وضعنا أسفل الإطار للموضوع بناء أجزاء الموضوع مكرر وأساساً تحديد التخطيط العام للموضوع.

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


ما هي "أننا بناء اليوم"؟

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


الأهداف للصفحة

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

  • عنوان المنتج: واضح نوعًا ما 
  • القدرة على إظهار صورة للمنتج 
  • نظرة عامة سريعة وكاملة 
  • توافر وسعر المنتج وأخيراً 
  • زر إضافة إلى سلة التسوق لوضعه في سلة التسوق 

هذا هو  أريد أن أبقيها بسيطة قدر الإمكان ، وبالتالي اخترت عدم القيام بذلك.  بمجرد أن تتعلم المبادئ العامة ، لا تتردد في إضافة أكبر عدد ممكن من ميزات whizbang. 


النظرة الأساسية 

يجب أن تبدو الصفحة بشكل أساسي كما يلي: 


 1 - HTML 

سننظر أولاً في HTML لجزء المحتوى وحده.  أفترض أنك تتحدث بطلاقة إلى HTML و CSS لذا سأنتقل إلى الأجزاء المهمة إلى حد كبير. 

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

 لدينا عنصر div آخر يحتفظ بمعلومات التوافر والتسعير جنبًا إلى جنب مع الزر إضافة إلى سلة التسوق. ونحن سوف تكون تجميل أنه مع CSS3 قليلاً قليلاً.

بقية HTML بسيط جداً. العنوان تكمن في مقطع h1 في حين تناول عناوين الأقسام الفردية h2. نظرة عامة سريعة متداخلاً في فقرة بينما يأخذ نظرة عامة كاملة حتى شعبة.

يمكن أن ننتقل إلى الجزء التصميم الآن.


الخطوة 2--المغلق

يتوهم شيئا هنا. CSS الأساسية جداً وضع العناصر في المكان.

لقد استعملت أيضا قليلاً من CSS3 لجعل الأزرار تبحث أفضل قليلاً.


الخطوة 3-إنشاء لدينا الملف catalog.xml

وكما ذكرت في الجزء السابق، يحصل كل وحدة نمطية الخاصة به ملف XML لإملاء ما هي العناصر التي سيتم تضمينها، والتخطيط العام للصفحة. الصفحة نحن بناء اليوم يعتمد على ملف يسمى catalog.xml لتحديد محتويات وهيكل.

ينبغي أن يكون هذا الملف موجوداً في المجلد تخطيط ذلك دعونا إنشاء ملف XML واسم من كتالوج.

الملف الكامل لتبدو اليوم مثل ذلك. سوف يشرح كل جزء بت الجزء أدناه.

تجاهل الإعلانات إصدار XML والتخطيط الأولى. وأنهم الآن ليس له أهمية بالنسبة لنا.

أولاً، علينا السماح للنظام نعرف أننا كنت تنوي تعديل جزء طريقة عرض المنتج للنظام. وهذا لأن catalog.xml منازل في التخطيط لعدد من الآراء الأخرى ولذا يتحتم علينا تحديد طريقة العرض التي ننوي تعديل.

الآن، ونحن نقول الماجنتو لتحميل الملف 1column.phtml كالقالب الرئيسي الرئيسي لطريقة العرض هذه. وهذا لأنه يمكن استخدام كل طريقة عرض فردية أي هيكل المعرفة مسبقاً. على سبيل المثال، يمكن استخدام الصفحة الرئيسية الخاصة بك هيكل مخصص معقدة جداً، صفحة المنتج الخاص بك عمود مزدوج وصفحة البحث في تخطيط عمود مفرد.

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

ونأتي الآن عبر أحد أجزاء نيفتير من الماجنتو. نعم، نحن رمي جميع رأينا المغلق المحددة في CSS العملاقة واحد ليست ملف ولكن نحن رجال الكهوف، نحن؟ وترجو صرخات HTTP متعددة جانبا، هذا الأسلوب يتيح لنا تبسيط المغلق أفضل.

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

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

ونسأل الآن الماجنتو لاستخدام قالب معين للجزء المحتوى من الصفحة

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

وبهذا ، اكتمل ملف catalog.xml الأساسي الخاص بنا . 


الخطوة 4 - إنشاء قالبنا الرئيسي

حسنًا ، الآن بعد أن حددنا تخطيطنا ، يمكننا الانتقال إلى إنشاء ملف النشرة المصورة / المنتج / view.phtml الذي حددناه كنموذج رئيسي لقسم المحتوى في XML سابقًا.

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

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

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

نستخدم هنا إحدى طرق واجهة برمجة التطبيقات الخاصة بـ Magento لإنشاء عنوان URL الذي يحتاج النموذج إلى نشره ديناميكيًا.

نحن نستخدم طريقة أخرى من Magento لاكتساب عنوان المنتج مباشرة. 

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


الخطوة 5 - إنشاء قوالب كتل لدينا 

مع جميع الأجزاء الرئيسية ، يمكننا التركيز على الكتل الفردية الآن.   الآن وقد تعاملنا بالفعل مع بناء النموذج الرئيسي ، سيكون هذا أسهل كثيرًا الآن. 

سنقوم بمعالجة كل منها حسب مظهرها في الكود الخاص بنا: 

صورة المنتج 

يقوم getChildHtml ('media') بالتخطيط مباشرة للكتالوج / product / view / media.phtml .   يبدو ملفنا كما يلي: 

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

توفر / الأسعار 

يقوم getChildHtml ('product_type_data') بالتخطيط مباشرة للكتالوج / product / view / type / simple.phtml .   يبدو ملفنا كما يلي: 

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

أضف إلى السلة 

خرائط getChildHtml ('addtocart') مباشرة إلى الكتالوج / product / view / addtocart.phtml .   يبدو ملفنا كما يلي: 

كما هو منطقي ، نتحقق مما إذا كان هناك عنصر معروض للبيع قبل إصدار شفرة HTML المطلوبة.   إنه زر بسيط كما هو واضح. 

 وصف المنتج 

يقوم getChildHtml ('description') بالتخطيط مباشرة للكتالوج / product / view / description.phtml .   يبدو ملفنا كما يلي: 

على غرار الطريقة التي شملنا بها النظرة السريعة ، نستخدم أساليب Magento المدمجة للحصول على المعلومات الضرورية.   نحن نتحقق من وجود الوصف قبل تقديمه. 

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


ماذا سنكون البناء في الجزء التالي 

.. متروك بالكامل لك.    هناك عدد كبير من الآراء التي يمكن أن تصممها ، لكن من الغريب مني اختيار واحد.   وبالتالي ، أطلب منكم ، القارئ ، اقتراح عرض لتغطيته في الجزء التالي من خلال تعليق في قسم التعليقات أدناه.   لا تنس أن تخبرني ما هي الجهة التي ستغطيها بعد ذلك! 


الكلمة الأخيرة 

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

الأسئلة؟  أشياء جميلة ليقول؟ الانتقادات؟   اضغط على قسم التعليقات واترك لي تعليقًا.   الترميز سعيدة! 

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.