دليل JavaScript المخصَّص

يتيح لك JavaScript المخصَّص إضافة سلوك لا يملك المخصِّص مفتاحًا له: إشعار توصيل في كل صفحة، عدّ تنازلي لنهاية عرض، رسالة WhatsApp مكتوبة مسبقًا، زر للعودة إلى أعلى الصفحة. تكتب الكود مرّة واحدة في لوحة التحكم فيعمل على واجهة متجرك لكل زائر. يشرح هذا الدليل أين تلصقه، وأين يعمل، وما الذي لا يستطيع فعله، ويقدّم مجموعة مقتطفات يمكنك نسخها.

ميزة Enterprise

JavaScript المخصَّص متاح في باقة Enterprise. في الباقات الأخرى يظهر القسم مقفلًا. انظر الباقات للترقية.

أين تلصقه

من القائمة الجانبية Personnaliser la boutique / تخصيص المتجر → Personnaliser / تخصيص → JavaScript personnalisé / JavaScript مخصّص. الصق الكود، ثم اضغط حفظ.

الصق كود JavaScript فقط. لا تُضِف وسم <script> ولا أي HTML حوله: الحقل ينبّهك عندما يجد واحدًا.

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

الكود لا يعمل في المعاينة المباشرة

المعاينة التي بجانب أدوات المخصِّص لا تشغّل كود JavaScript الخاص بك أبدًا. لاختباره، احفظ ثم افتح متجرك في تبويب جديد. صفحات المتجر مخزّنة مؤقتاً لبضع دقائق، فانتظر نحو خمس دقائق أو افتح المتجر في نافذة خاصّة.

يمكنك التراجع دائمًا

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

أين يعمل

في الصفحة الرئيسية، وصفحات المنتجات، وصفحات التصنيفات وكل المنتجات، والسلة، والـ checkout، وتتبّع الطلب، وصفحة تأكيد الطلب.

وهو لا يعمل على صفحات الهبوط في /landing/{slug}، ولا يعمل داخل معاينة المخصِّص.

كيف يُحمَّل

يُرسَل كودك في ملف خاص به، ويعمل بعد أن ينتهي المتصفّح من قراءة الصفحة. ويترتّب على ذلك أمران:

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

ينزّل الزوّار الملف مرّة واحدة، ويحتفظ به متصفّحهم إلى أن تغيّر الكود.

الحدود

الحدّ	ما يحدث
50,000 بايت من الكود	يُرفَض اللصق الأطول برسالة عند الحفظ، ولا يُحفَظ شيء. العدّاد تحت الحقل يعرض الحجم الحالي. كل حرف عربي يُحسَب ببايتَين.
JavaScript فقط	وسم `<script>` أو HTML في الحقل خطأ في الصياغة، فلا يعمل الكود.
كودك أنت فقط	تحميل ملف سكربت من موقع آخر (أداة دردشة، أداة خرائط حرارية) تحجبه سياسة الأمان في واجهة المتجر. واتصالات كودك بمعظم المواقع الأخرى محجوبة بالطريقة نفسها.
صفحات الهبوط	غير مشمولة.
الباقات الأخرى	إذا غادر المتجر باقة Enterprise، أو انتهت صلاحية الباقة، يتوقّف الكود عن العمل. يبقى محفوظًا ويعمل من جديد عندما تكون الباقة فعّالة.

لـ Meta أو TikTok أو Snapchat أو Google Analytics أو Google Tag Manager، استعمل صفحة Pixels في لوحة التحكم بدلًا من ذلك. هذه الأدوات مدعومة هناك دون أي كود.

العثور على العنصر الذي تريده

استعمل أداة الفحص في متصفّحك، بالطريقة نفسها المتّبعة مع الـ CSS المخصَّص:

افتح واجهة متجرك على متصفّح سطح مكتب.
انقر بالزر الأيمن على العنصر واختر Inspect.
دوِّن قيمة class="…" الخاصّة به، وابحث عنه في كودك بـ document.querySelector('.that-class').

هذه المحدِّدات موجودة في معظم القوالب:

المحدِّد	العنصر
`.navbar-store`	رأس الصفحة العلوي
`.announcement-bar`	الشريط الترويجي فوق رأس الصفحة
`.product-card`	بطاقة منتج واحدة في شبكة
`.product-price`	السعر على بطاقة المنتج
`.btn-buy-now`	زر «اشترِ الآن» في صفحة المنتج
`a.whatsapp-float`	زر WhatsApp العائم
`.footer`	تذييل الصفحة (Brico يستعمل `.brico-footer`)

تختلف أسماء الفئات بين القوالب، وقد تتغيّر عند تحديث قالب. تحقّق دائمًا من وجود العنصر قبل استعماله، كما يفعل كل مقتطف أدناه بـ if (...).

المقتطفات

كل مقتطف أدناه شُغِّل في متصفّح حقيقي، على سطح المكتب وبعرض شاشة الهاتف، قبل نشره. الصق واحدًا، أو عدّة مقتطفات الواحد تلو الآخر.

إشعار في أعلى كل صفحة

var bar = document.createElement('div');
bar.textContent = 'Free delivery on orders above 5000 DA';
bar.style.cssText = 'background:#111827;color:#fff;text-align:center;padding:10px 16px;font-size:14px;';
document.body.insertBefore(bar, document.body.firstChild);

تحقّق أوّلًا هل يكفيك شريط الإعلان المدمج (التخصيص → شريط الإعلان). فهو لا يحتاج إلى كود.

ملاحظة في صفحات المنتجات فقط

if (location.pathname.indexOf('/product/') !== -1) {
  var note = document.createElement('p');
  note.textContent = 'Order before 2 pm and we ship the same day.';
  note.style.cssText = 'margin:12px 0;padding:10px 14px;border-radius:8px;background:#fef3c7;color:#92400e;font-size:14px;';
  var title = document.querySelector('h1');
  if (title) { title.parentNode.insertBefore(note, title.nextSibling); }
}

الاختبار نفسه يصلح لصفحات أخرى: /cart و/checkout و/category/.

عدّ تنازلي لنهاية عرض

var end = new Date('2026-12-31T23:59:59');
var box = document.createElement('div');
box.style.cssText = 'background:#b91c1c;color:#fff;text-align:center;padding:10px 16px;font-size:14px;';
document.body.insertBefore(box, document.body.firstChild);
function tick() {
  var left = Math.floor((end - new Date()) / 1000);
  if (left <= 0) { box.style.display = 'none'; return; }
  var d = Math.floor(left / 86400), h = Math.floor(left % 86400 / 3600), m = Math.floor(left % 3600 / 60);
  box.textContent = 'Offer ends in ' + d + ' d ' + h + ' h ' + m + ' min';
  setTimeout(tick, 30000);
}
tick();

غيِّر التاريخ في السطر الأول. يختفي الشريط من تلقاء نفسه عندما يمرّ التاريخ.

رسالة WhatsApp مكتوبة مسبقًا

var wa = document.querySelector('a.whatsapp-float');
if (wa && wa.href.indexOf('text=') === -1) {
  wa.href += (wa.href.indexOf('?') === -1 ? '?' : '&') + 'text=' + encodeURIComponent('Hello, I have a question about: ' + document.title);
}

تبدأ رسالة الزبون باسم الصفحة التي كان فيها.

فتح الروابط الخارجية في تبويب جديد

var links = document.querySelectorAll('a[href^="http"]');
for (var i = 0; i < links.length; i++) {
  if (links[i].hostname !== location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noopener';
  }
}

زر العودة إلى أعلى الصفحة

var up = document.createElement('button');
up.type = 'button';
up.textContent = '↑';
up.setAttribute('aria-label', 'Back to top');
up.style.cssText = 'position:fixed;bottom:90px;left:16px;width:44px;height:44px;border-radius:50%;border:0;background:#111827;color:#fff;font-size:18px;display:none;z-index:900;';
up.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });
document.body.appendChild(up);
window.addEventListener('scroll', function () {
  up.style.display = window.scrollY > 600 ? 'block' : 'none';
}, { passive: true });

تشغيل شيء على الهواتف فقط

if (window.matchMedia('(max-width: 768px)').matches) {
  document.documentElement.classList.add('on-phone');
}

يمكنك بعدها استهداف .on-phone من الـ CSS المخصَّص.

التفاعل مع النقر على «اشترِ الآن»

document.addEventListener('click', function (e) {
  if (e.target.closest('.btn-buy-now')) {
    console.log('Buy now clicked on ' + document.title);
  }
});

استمع إلى النقرة كما في هذا المثال. لا تستبدل الزر ولا توقف النقرة: الطلب لن يُرسَل.

أفضل الممارسات

لا تمسّ نموذج الطلب. لا تغيّر حقول نموذج الطلب أو الـ checkout، ولا تُخفِها ولا تُعِد إرسالها، ولا تُعِد تعريف دوالّ موجودة أصلًا في الصفحة. متجر لا يستطيع استقبال الطلبات هو الخطأ الوحيد الذي يمكن أن يسبّبه هذا الحقل.
تحقّق من وجود العنصر قبل استعماله (if (el) { ... }). العنصر المفقود هو أكثر أسباب الأخطاء شيوعًا.
اختبر على هاتف حقيقي. معظم زبائنك يشترون من الهواتف.
تحقّق من اللغتين إذا كان متجرك يبيع بالعربية والفرنسية. النص الذي تضيفه من الكود لا يُترجَم لك.
أبقِه قصيرًا. بضعة أسطر مركّزة يسهل إبقاؤها شغّالة أكثر من سكربت طويل، وتُحمَّل أسرع.
استعمل أداة مدمجة متى وُجدت. مفتاح المخصِّص يواصل العمل عند تغيير القالب، أما اسم فئة في كودك فقد لا يواصل.
انظر إلى لوحة Console في المتصفّح (انقر بالزر الأيمن → Inspect → Console) بعد الحفظ. خطأ كودك يظهر هناك مع سطره.

استكشاف الأخطاء وإصلاحها

العَرَض	السبب المُحتمَل	الحلّ
لا شيء يحدث في متجري	الصفحة التي تراها نسخة مخزّنة مؤقتاً	انتظر نحو خمس دقائق، أو افتح المتجر في نافذة خاصّة
لا شيء يحدث، والحقل يعرض خطأ	في الكود خطأ في الصياغة، فلا يعمل أي جزء منه	أصلِح السطر الذي تشير إليه الرسالة
الحقل يطلب حذف وسم script	لصقت وسم `<script>` أو HTML	الصق كود JavaScript الموجود بين الوسمَين فقط
الحفظ مرفوض	الكود أطول من 50,000 بايت	اختصره
يعمل على قالب ولا يعمل بعد أن غيّرت القالب	اسم الفئة غير موجود في القالب الجديد	افحص العنصر من جديد وحدِّث المحدِّد
أداة دردشة أو تحليلات لا تُحمَّل	تحمّل ملفًا من موقع آخر، وهذا محجوب	استعمل صفحة Pixels للأدوات المدعومة. السكربتات الخارجية الأخرى غير مدعومة
لا شيء يحدث في معاينة المخصِّص	المعاينة لا تشغّل JavaScript المخصَّص أبدًا	احفظ وافتح المتجر في تبويب جديد
لا شيء يتغيّر في صفحة الهبوط	JavaScript المخصَّص لا يعمل على صفحات `/landing/…`	غير مدعوم هناك
المتجر يتصرّف بغرابة منذ تعديلي	سطر من كودك يتعارض مع الصفحة	فرّغ الحقل واحفظ، ثم أعِد الكود بضعة أسطر في كل مرّة

إزالته

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

تريد تغيير المظهر بدل السلوك؟ انظر دليل الـ CSS المخصَّص و**تخصيص المتجر**.

أين تلصقه​

أين يعمل​

كيف يُحمَّل​

الحدود​

العثور على العنصر الذي تريده​

المقتطفات​

إشعار في أعلى كل صفحة​

ملاحظة في صفحات المنتجات فقط​

عدّ تنازلي لنهاية عرض​

رسالة WhatsApp مكتوبة مسبقًا​

فتح الروابط الخارجية في تبويب جديد​

زر العودة إلى أعلى الصفحة​

تشغيل شيء على الهواتف فقط​

التفاعل مع النقر على «اشترِ الآن»​

أفضل الممارسات​

استكشاف الأخطاء وإصلاحها​

إزالته​