أداة البحث بلغة JavaScript
أضف اقتراحات البحث ونتائجه إلى أي صفحة بوسم سكربت واحد.
تضيف أداة البحث اقتراحات أثناء الكتابة ولوحة نتائج إلى أي صندوق بحث. هي مكتوبة بلغة TypeScript دون أي إطار عمل، وحجمها نحو 8 كيلوبايت بعد الضغط (والحد المسموح أقل من 20 كيلوبايت). تعمل من اليمين إلى اليسار في العربية، ومع لوحة المفاتيح وقارئات الشاشة (عنصر combobox وفق ARIA 1.2). وتستخدم مفتاحًا عامًا فقط.
أضفها إلى صفحة
<script src="https://cdn.seekgist.com/widget/1/seekgist-widget.js" async
data-key="sg_pub_..." data-input="input[name=q]" data-search-url="/search?q="
data-locale="ar"></script>أو شغّلها من كودك:
window.SeekGist.init({ key: "sg_pub_...", input: "input[name=q]", searchUrl: "/search?q=", locale: "ar" });الخيارات
الخيار (data-*) | القيمة الافتراضية | ماذا يفعل |
|---|---|---|
key | (مطلوب) | مفتاحك العام (sg_pub_...). |
api | https://api.seekgist.com | العنوان الأساسي للواجهة البرمجية. |
input | input[name=q], input[type=search] | محدِّد CSS لصندوق البحث (أو الصناديق). |
search-url | /search?q= | صفحة البحث في متجرك. تُستخدم عند الرجوع وفي «عرض الكل». |
mode | results | results: يعرض Enter نتائج SeekGist في لوحة. وredirect: ينتقل Enter إلى صفحة البحث في متجرك. |
locale | <html lang> | ar يجعل اللوحة من اليمين إلى اليسار. |
platform | custom | يُرسل مع أحداث الرجوع، لتراها لكل منصة. |
assistant | off | on يضيف زر المحادثة (انظر أدناه). |
currency-format | auto | تُعرض الأسعار عبر Intl.NumberFormat بعملة المنتج. |
الرجوع
لكل طلب إلى SeekGist مهلة 300 ملّي ثانية. عند انتهاء المهلة، أو خطأ في الشبكة، أو رمز HTTP 401 أو 403 أو 408 أو 429 أو من فئة 5xx، أو رد تالف، أو رد بحث بلا ids، تتنحى الأداة جانبًا: يُرسل صندوق البحث إلى صفحة البحث في متجرك (search-url) كأن الأداة غير موجودة. وبعد 5 إخفاقات خلال 60 ثانية تتجاوز الأداة SeekGist لمدة 30 ثانية (في كل التبويبات معًا). ويُرسل كل رجوع حدثًا واحدًا من نوع fallback، لتعدّه في لوحة التحكم. راجع الرجوع إلى بحث المتجر.
الألوان والخطوط
اضبط أيًّا من متغيرات CSS هذه على :root أو على .sg-root:
--sg-font، --sg-bg، --sg-fg، --sg-muted، --sg-border، --sg-accent، --sg-accent-fg، --sg-hover، --sg-radius، --sg-shadow، --sg-z، --sg-width.
تتبع القيم الافتراضية الوضع الفاتح أو الداكن لدى المتسوق. والمتاجر الداكنة تضبطها على ألوان داكنة.
.sg-root { --sg-accent: #0f766e; --sg-radius: 12px; --sg-font: "IBM Plex Sans Arabic", system-ui; }عمليات البحث الأخيرة
تُحفظ عمليات البحث الأخيرة في متصفح المتسوق فقط (مفتاح localStorage اسمه sg_recent، وبحد أقصى 10) مع زر «مسح». ولا تُرسل إلى SeekGist أبدًا.
زر المحادثة (مساعد التسوق)
مع data-assistant="on" تحمّل الأداة ملفًا صغيرًا ثانيًا (seekgist-assistant.js، نحو 4 كيلوبايت بعد الضغط) من المجلد نفسه وتعرض زر محادثة. ويجب أن يسمح المفتاح بالمساعد: أنشئ المفتاح العام في لوحة التحكم مع خيار السماح أيضًا بمساعد التسوق (نافذة المحادثة). فالمفتاح العام العادي يتيح البحث والأحداث فقط. وإذا كانت المحادثة متوقفة لمتجرك فلن يظهر شيء. راجع دليل مساعد التسوق.
في صفحة المنتج يمكنك أن تخبر المحادثة بالمنتج الذي ينظر إليه المتسوق:
<div data-sg-product-id="42"></div>Shopify وسلة وزد
تشغّل تطبيقات المتاجر الأداة نفسها نيابة عنك: فهي تقرأ مفتاحك العام وحالة التشغيل من SeekGist، فلا تلصق أي شيء. راجع أدلة البدء السريع لـ Shopify وسلة وزد.