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

شرح بريستاشوب 

by
Length:LongLanguages:

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

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

يعمل Prestashop على PHP و mySQL ، ويعتمد على محرك Smarty لـ "Templates" (الصفحات). لا تقلق ، إذا لم تكن على دراية بـ Smarty. يمكنك استخدامه بشكل أساسي لإنشاء صفحات تحتوي على أقسام العناصر النائبة ، ويقوم Prestashop بتعبئة المعلومات عندما يتم تحميل الصفحة. من السهل الانتقال إليها ، إذا كنت قد استخدمت شيئًا مثل Handlebars أو Underscore templates.

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

Prestashop Website

تسجيل الموضوع الخاص بك

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

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

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

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


دورة مكثفة في Prestashop

Smarty هو محرك قالب لـ PHP ، مما يسهل فصل العرض التقديمي عن منطق التطبيق.

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

في نهاية المطاف ، تحدد وظائف النسق الخاص بك الصفحات التي ينبغي عليك تنفيذها. تعتمد هذه الصفحة على الملفات الموجودة في مجلد وحدات التحكم ، ويمكنك تجاوز وحدات التحكم الافتراضية أو إضافة وحدات التحكم المخصصة الخاصة بك لتناسب النسق الخاص بك.  ولكن هذا خارج نطاق هذه المقالة. من بين وحدات التحكم في دليل controllers \ front ملفات القالب اثنين التي يتم تحميلها تلقائيًا: header.tpl و footer.tpl.

سيتم تحميل المحتوى الرئيسي لموقع الويب الخاص بك بوحدات مع المساعدة من "هوكس".

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

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

شخصيا، أجد أنه من الأفضل أن تبدأ مع موضوع HTML القياسي. هذا ليس شرطا، ولكن أوصى به لعدد من الأسباب:

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

الصورة التالية صورة لقالب HTML المثال الخاص بي :

وهنا يمكنك أن ترى كيف سأقوم بتقسيمه إلى خطافات بريستاشوب: 


خلق جزئيات القالب

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

 هناك بعض الأشياء للإشارة إليها في هذا الرمز. أنا preprended اسم ملف CSS مع {$ css_dir}. هذا هو متغير Smarty الذي يشير إلى مجلد ، يسمى css داخل دليل المظهر الخاص بك ، حيث يجب أن تذهب الى كل ملفات CSS الخاصة بك.

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

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

ما لم تكن مخضرمًا في Prestashop ، ربما تتساءل من أين سأخرج بهذه المتغيرات. كما قلت من قبل ، للأسف وثائق Prestashop غير موجودة ، لكنها توفر أداة تصحيح يمكنك تشغيلها عن طريق إضافة {debug} إلى أي من ملفات القالب. عندما تفتح الصفحة المقابلة في متصفحك ، ستحصل على نافذة منبثقة تحتوي على قائمة بجميع المتغيرات الخاصة بهذا القالب المحدد. هذا يسمح لك بسرعة (باستخدام ctrl / cmd-F يساعد بشكل كبير) تحديد المتغيرات التي تم تعريفها ، بالإضافة إلى قيمها. 

الآن لنقم بإنشاء قالب footer.tpl. أنا ذاهب للحفاظ على هذا بسيط ومجرد وثيقة<body></body>و<html></html>العناصر، ولكن لا تتردد في إضافة أي شيء تريد عرضه في الجزء السفلي من كل صفحة. يمكن أن يتضمن هذا أي شيء من خطاطيف لجافا سكريبت مخصص؛ لا توجد حدود لما يمكن أن تضعه هنا.

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

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

التعريب

آخر ميزة خاصة Prestashop يجب أن تفكر في أدوات التعريب Prestashop. Prestashop يسمح لك بسهولة ترجمة موقعك إلى عدة لغات باستخدام وظيفة Smarty ، المسمى l. يمكنك استخدامه عن طريق استبدال سلسلة قياسية باستخدام الدالة l، تمرير السلسلة كمعلمة. هنا مثال<h1></h1>العنصر، على حد سواء مع ودون ترجمة:

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

إضافة اللغات الافتراضية غير بسيط، وتغطية في القسم الثاني على الصفحة (مسمى "إضافة/تحديث اللغة").

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

الآن أدخل HTML الخاص بصفحتك الرئيسية إلى index.tpl ، وتأكد من توفير الخطافات التي تريد استخدامها. تذكر استخدام وظيفة {debug} Smarty ، إذا كنت بحاجة إلى رؤية المتغيرات متوفرة للقالب الخاص بك.

الآن يمكنك فتح متصفح والانتقال إلى مواقعك الجذر. المنجم يشبه هذا: 

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

عند إنشاء سمة Prestashop، ستلاحظ أن وحدات مسؤولة عن حوالي 90% من المحتوى. وهناك وحدات عرض المنتجات، ووحدات لعربة التسوق، إلخ. يتضمن الجزء الرئيسي من كونه مستخدم Prestashop ، على الأقل ، معرفة عملية حول كيفية تخصيص مظهر الوحدات. 


الوحدات النمطية

لا تعد الوحدات النمطية في Prestashop هي نفس أدوات Wordpress.la tuead alwaha 

الوحدات النمطية في Prestashop ليست هي نفسها الموجودة في أدوات Wordpress ؛ يمكن توصيل وحدات Prestashop فقط بالخطافات التي يحددها منشئ الوحدة النمطية. على سبيل المثال ، إذا قمت بإنشاء وحدة نمطية تعرض كتلة "الاشتراك في نشرة إخبارية" وقمت بإعدادها للانتقال إلى أي من الأشرطة الجانبية ، فلا يمكنك وضعها في منطقة تذييل الصفحة. 

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

وهذا يتيح لك الكثير من الغرفة لتخصيص وحدة نمطية.

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

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

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


إنشاء الوحدة النمطية الخاصة بك

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

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

افتح ملف PHP وحدد فئة الوحدات: 

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

في الجزء العلوي من الملف ، يمكنك رؤية بيان if. يضمن ذلك عدم تحميل الملف مباشرة عبر المتصفح. بعد ذلك ، يجب على الفصل الدراسي إما تصنيف فئة "الوحدة النمطية" أو الفئة الفرعية "decedent" لفئة "الوحدة النمطية" مباشرة.

داخل المنشئ، علينا إعداد خصائص الوحدة النمطية. Prestashop يستخدم هذه المعلومات للعرض في نهاية الخلفية:

  • الاسم هو "اسم رمز" فريد ، وهو ليس الاسم الفعلي الظاهر في النهاية الخلفية.
  • علامة التبويب يخبر Prestashop فئة الوحدة. يمكنك العثور على قائمة كاملة بالفئات عن طريق فتح ملف Controllers \ Admin \ AdminModuleController.php.
  • المؤلف والاسم والإصدار المتمتعة بالحكم الذاتي-اكسبلانيتوري.
  • need_instance يخبر Prestashop لإنشاء مثيل للمتغير الخاص بك عند الوصول إلى صفحة الوحدات. عادةً لا يكون ذلك مطلوبًا ، ولكن إذا احتاجت الوحدة إلى إظهار رسالة أو تسجيل شيء عندما تكون صفحة الوحدات نشطة ، فيجب عليك تغييرها إلى 1.

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

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

هذه الوحدة النمطية مخصصة للصفحة الرئيسية، لذلك عليك توصيلها لربط الصفحة الرئيسية. نريد أيضا لإضافة ملف CSS للرأس، مما يعني أننا سنحتاج إلى إضافة ربط رأس كذلك. إذا ذهبت إلى النهاية الخلفية تحت صفحة Modules> Positions ، فيمكنك العثور على الأسماء التقنية للخطافات (وهو ما سنحدده هنا). 

مباشرة بعد الدالة __construct () ، أضف ما يلي:

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

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

تنفيذ خطافات بسيطة للغاية. إنشاء وظيفة عامة بكلمة "الخطاف" متبوعًا باسم الخطاف. لنبدأ بخطاف الرأس. كل ما نريده هو إضافة ملف CSS إلى المظهر الخاص بنا. هنا هي الوظيفة الكاملة: 

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

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

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

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

نظرًا لأن Prestashop يستخدم قوالب Smarty ، فلديك عدد من وظائف المساعد التي يمكنك استخدامها عند عرض بياناتك.  نبدأ مع وظيفة if للتأكد من أن مجموعة المنتجات على ما يرام. إذا كان الأمر كذلك ، فإننا ندخل في حلقة for ، لتوليد HTML المحدد لكل منها. نحن نستخدم وظائف SmartY المضمنة في المساعدة في تجريد علامات HTML وتغطية اسم المؤلفين إلى أحرف كبيرة ، ونحن نستخدم طريقة أخرى لتنسيق السعر إلى العدد المطلوب من pla العشري انظر هنا 

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

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

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

تقوم هذه الوظيفة ببساطة ببناء HTML اللازم لعرض نموذج مع مربع أرقام وحفظ الزر. مرة أخرى ، أستخدم طريقة $ this-> l () بحيث يمكنك ترجمة الوحدة إلى لغات أخرى في المستقبل ، إذا احتجت إلى ذلك. لقد استخدمت حقل رقم في نموذج HTML ، ولكن كن حذرًا ، إذا كنت تنشئ وحدة تجارية. ما زال غير مدعوم من جميع المتصفحات. ومع ذلك ، إذا كان للاستخدام الشخصي الخاص بك ، فلا تتردد! 

والشيء الآخر الوحيد الذي قد يبدو خفيًا هو وظيفة Tools :: safeOutput () التي نناديها على عنوان URL. أنا بصراحة لست متأكداً بنسبة 100٪ من مدى أهمية هذه المكالمة ، ولكن ما تفعله هو أنها تقوم بدمج كل علامات HTML وتحويل الأحرف الضرورية إلى كيانات html.

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

يمكنك ضبط الرقم والضغط على "حفظ" ، ولكننا لم نكتب بعد في وظيفة الحفظ ، لذا ستتم إعادة الضبط إلى 6 (القيمة التي تم حفظها بالفعل). 

مرة أخرى في الدالة، أضف التعليمات البرمجية التالية إلى بداية الدالة:

يتحقق هذا لمعرفة ما إذا تم تقديم القيمة - أي ، إذا كانت القيمة numProds موجودة كمتغير $ _GET أو $ _POST $. ثم نقوم بتحديث الخاصية حيث قمنا بتخزين القيمة. يقبل الأسلوب Tools :: getValue اسم حقل النموذج واختياريا لسلسلة ثانية لما يجب إرجاعه إذا لم يتم العثور على حقل النموذج. ثم تقوم بإرجاع سلسلة منسقة بالقيمة التي تم إرسالها. من المهم وضع هذا قبل إنشاء نموذج HTML ؛ خلاف ذلك ، سوف يحتوي النموذج على القيم القديمة كما تم إلزامها بالقيم المحدّثة. 

باستخدام هذا الجزء الأخير من الشفرة ، أكملنا الوحدة. الشيء الآخر الوحيد الذي يجب عليك فعله هو إضافة رمز GIF 16 × 16 إلى مجلد الوحدات النمطية الخاص بك. 

نحن الآن مستعدون للانتقال إلى الخيار التالي لدمج الوحدات النمطية مع الموضوع الخاص بك.


تجاوز الوحدات النمطية الموجودة

الخيار الثاني هو استخدام وحدة موجودة وإعادة تصميمها وفقًا لرغباتك. يعتبر هذا الخيار أبسط بشكل كبير حيث تحتاج فقط إلى إعادة إنشاء الملف (الملفات) ".tpl" من الوحدة النمطية. 

لا يزال موضوع المثال الخاص بي مفقودًا في قائمة التنقل العلوية ، لذلك لنقم بتخصيص تلك الوحدة. للبدء ، قم بتمكين / تثبيت الوحدة في صفحة "الوحدات النمطية" ، المسماة "القائمة الأفقية العليا".  الخطوة التالية هي إنشاء مجلد في دليل السمات الخاص بك ، يسمى  modules. ضمنه ، قم بإنشاء مجلد آخر بالاسم الفعلي للوحدة - في حالتنا ، هذا هو blocktopmenu. عند تحميل ملفات tpl الخاصة بالوحدة ، يتحقق Prestashop أولاً لمعرفة ما إذا كان هناك ملف في دليل تجاوز الوحدة النمطية للوحدات المنشطة بنفس الاسم.  إذا كان الأمر كذلك ، فسيتم تحميل إصدار السمات بدلاً من السهم. يدعى ملف tpl الخاص بوحدة القائمة blocktopmenu.tpl ، لذا يجب عليك إنشاء ملف بنفس الاسم في المجلد الجديد الذي أنشأناه للتو.

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

  • العلامات. الآن ، في حد ذاته ، هذا لا يوفر لك مساحة كبيرة للمناورة ، عندما يتعلق الأمر بتخصيص المظهر. ولكن ، ماذا لو كنت ترغب في إضافة شيء آخر إلى جانب علامة li لكل عنصر؟ حسنا ، لحسن الحظ ، Smarty للانقاذ! هذه ليست مقالة عن Smarty ، لذا سأبقي هذا الجزء قصيراً ، ولكن ، في الأساس ، سنستخدم مزيجاً من وظيفة استبدال السلسلة ووظيفة تنفجر PHP لعزل العناصر الفردية.  بعد ذلك ، يمكننا بناء كود HTML مع حلقة foreach. هذا هو ملف القالب المكتمل الخاص بهذه الوحدة:

    .الآن هذا كثير من الكود الجديد ، لذا سأمر عبره بخطًا سطحيًا. ويبدأ بفتح علامات div و ul؛ هذه هي فقط لأسباب جمالية. بعد ذلك ، نستخدم أمر Smarty ، يسمى assign. هذا بالضبط ما يبدو: أنه يعيّن قيمة للمتغير. في بيان التعيين الأول ، نقوم بإزالة علامات li الافتتاحية ، وفي المقطع الثاني ، نفجر السلسلة بواسطة علامة li الختامية. والنتيجة هي صفيف يحتوي على قائمة روابط عناصر القائمة. ثم ننتقل إلى حلقة foreach ، حيث نعرض كل عنصر بالداخل

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

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


    الاستنتاج

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

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

    آمل أنك استمتعت بقراءة هذا المقال. إذا كان لديك أي أسئلة بخصوص المقال نفسه ، أو Prestashop بشكل عام ، فلا تتردد في ترك تعليق أدناه! 

    هل أنت في حاجة إلى موضوعات بريستا شوب الجاهزة؟ تحقق من ThemeForest!

  • روابط مفيدة: PrestaShop الإضافات من CodeCanyon. 

    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.