كيفية إضافة بحث Ajax في الوقت الفعلي إلى موقع Divi الخاص بك

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

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

إلى البرنامج التعليمي.

نظرة خاطفة

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

إليك كيف يبدو نفس التصميم على الهاتف.

كيفية إضافة بحث Ajax في الوقت الفعلي إلى موقع Divi الخاص بك

اشترك في قناتنا على اليوتيوب

1. تثبيت Divi Ajax Search

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

لتثبيت المكون الإضافي ، انتقل إلى الإضافات > إضافة جديد وحدد تحميل البرنامج المساعد .

حدد اختيار ملف وانتقل إلى موقع الملف على جهاز الكمبيوتر الخاص بك وحدده. انقر فوق التثبيت الآن .

بمجرد تثبيت المكون الإضافي ، حدد تنشيط المكون الإضافي .

2. أضف Ajax Search إلى موقع Divi الخاص بك

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

أضف بحث Divi Ajax إلى التخطيط

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

قم بسحب الوحدة وإسقاطها فوق وحدة المتجر.

تكوين مربع البحث

انقر فوق الترس لفتح الخيارات. لقد قمت بالتبديل إلى عرض سطح المكتب حتى أتمكن من رؤية التغييرات مباشرة.

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

• نص العنصر النائب - ابحث في منتجاتنا
• نتيجة البحث - 10
• ترتيب حسب - التاريخ
• ترتيب - تنازلي
• لا توجد نتائج نصية - لا توجد نتائج

حدد ما تريد عرضه في نتائج البحث

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

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

بحث في:

• عنوان
• المحتوى
• مقتطفات

أنواع المنشورات:

• منتجات

حدد ما تريد عرضه

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

إظهار رمز البحث:

• نعم

عرض الحقول:

• عنوان
• مقتطفات
• صورة مميزة
• سعر المنتج

عدد الأعمدة:

• 4

استخدام الماسونية:

• نعم

إظهار شريط التمرير

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

شريط التمرير:

• تبين

نتيجة بحث Divi Ajax

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

3. نمط الوحدة لتناسب موقع الويب الخاص بك

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

• لون خلفية الرسالة الإخبارية - # 757d79
• لون خلفية الحث على الشراء للتسوق - # dcae83
• المساحة المتروكة لكليهما - 50 بكسل (أعلى ، أسفل) ، 60 بكسل (يمين ، يسار)

تصميم حقل البحث

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

• لون الخلفية - # 757d79

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

• المساحة المتروكة 50 بكسل (أعلى ، أسفل) ، 60 بكسل (يمين ، يسار)

في إعدادات حقل البحث ، أضف لون خلفية الحقل ولون نص الحقل. لقد جعلت الحقل يطابق خلفية الوحدة واخترت اللون الأبيض للنص.

• لون خلفية الحقل - # 757d79
• لون نص الحقل - #ffffff

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

• لون حدود الحقل - #ffffff

افتح إعدادات رمز البحث وحدد الأبيض.

• لون ايقونة البحث - #ffffff

افتح إعدادات اللودر وحدد اللون الأبيض لـ Loader Color . سيتم رؤية اللودر للحظات فقط ، لكنه سيبدو أفضل إذا كان يطابق بقية العناصر.

• لون اللودر - #ffffff

تصميم حقل النتائج

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

• لون الخلفية - # dcae83

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

• نمط خط العنوان - TT
• لون نص العنوان - #ffffff

افتح علامة التبويب Excerpt وحدد اللون الأبيض لـ Excerpt Text Color .

• لون نص مقتطف - #ffffff

افتح علامة التبويب السعر. حدد Semi Bold لوزن السعر والأبيض للون النص.

• وزن خط السعر - شبه غامق
• لون نص مقتطف - #ffffff

نتائج

إليك كيف يبدو Ajax Search على سطح المكتب بنمطي. يتم عرض نتائج البحث على الفور تقريبًا. تبدو أنيقة وسلسة.

إليك كيف يبدو على الهاتف. يتم تكديس النتائج وضبطها لتلائم الشاشة.

خواطر ختامية

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

الآن يمكن أن يكون لدى موقع Divi الخاص بك ميزة بحث Ajax مصممة بشكل احترافي والتي سيقدرها زوار موقعك!

نريد أن نسمع منك. هل أضفت بحث Ajax في الوقت الفعلي إلى موقع Divi الخاص بك؟ أخبرنا عن تجربتك في التعليقات.

صورة مميزة عبر Kroster / shutterstock.com