مال و أعمال

كيفية إضافة JavaScript إلى وحدات Shopify (دون كسر متجرك)

#JavaScript, #Shopify, #إضافة, #إلى, #دون, #كسر, #كيفية, #متجرك, #وحدات


إذا كنت تتساءل كيف أضف JavaScript إلى وحدات Shopify، لقد كنت هناك أيضًا.

ها هي الإجابة المختصرة: يمكنك ضخ JavaScript المخصص في Shopify إما على مستوى العالم باستخدام theme.liquid الملف ، خاص بالقسمة عن طريق تحرير قوالب سائلة ، أو ديناميكيًا باستخدام علامات البرنامج النصي لـ Shopify.

كل طريقة لها مكانها ، اعتمادًا على ما تحتاجه.

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

دعونا نغوص في كيفية القيام بذلك بالضبط.

لماذا تضيف JavaScript to Shopify على الإطلاق؟

عندما بدأت لأول مرة في تغيير متاجر Shopify ، اعتقدت أن السائل كان كافياً.

تبين ، JavaScript الصلصة السرية خلف:

  • معارض المنتج التفاعلية
  • ميزات البحث الفورية
  • POPUPS UPSELL بعد “إضافة إلى العربة”
  • تحديثات المخزون في الوقت الحقيقي
  • توصيات شخصية

بدون JavaScript ، يشعر متجرك بستاتيك في المدرسة القديمة.
مع ذلك ، تقوم بإنشاء تجارب تشعر بالحديث والحياة – ويشتري العملاء أكثر بسببها.

في تجربتي ، أدت تعديلات النصوص الصغيرة إلى القفزات من 5 إلى 10 ٪ في معدلات التحويل عبر متاجر Shopify التي عملت عليها.

إليك ما يفتح JavaScript:

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

ولكن هناك طريقة صحيحة وطريقة خاطئة للقيام بذلك.

الطريقة 1: إضافة JavaScript على مستوى العالم باستخدام theme.liquid

متى تستخدمه:
عندما تحتاج إلى برنامج نصي يعمل على كل صفحة واحدة.

عادة ما أستخدم هذا لـ:

إليك بالضبط كيف أضيف JavaScript على مستوى العالم:

خطوة بخطوة

  1. انتقل إلى Shopify Admin> متجر على الإنترنت> الموضوعات.
  2. انقر الإجراءات> تحرير الرمز.
  3. يجد layout/theme.liquid.
  4. أدخل javaScript الخاص بك داخل إما <head> أو قبل الإغلاق مباشرة </body> علامة.

مثال على JS المستضافة الخارجي:

htmlCopyEdit<script src="https://cdn.example.com/your-script.js" defer></script>

مثال على Shopify Asset JS:

htmlCopyEdit<script src="https://ecommerce-platforms.com/articles/{{"your-script.js' | asset_url }}" defer></script>

نصائح محترفة من بنياتي

  • دائماً يستخدم defer لتجنب حظر تقديم الصفحة.
  • الحفاظ على البرامج النصية العالمية صغير الحجم. نصوص ثقيلة = متاجر أبطأ.
  • قم بتحميل ملفات JS المخصصة إلى مجلد الأصول الخاصة بك للحفاظ عليها أنيقًا.

عندما لا تستخدم هذه الطريقة

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

الطريقة 2: إضافة JavaScript إلى وحدات Shopify محددة (أقسام)

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

هذه هي الطريقة التي أستخدم بها 80 ٪ من الوقت عند تخصيص المتاجر للعملاء.

خطوة بخطوة

  1. في Shopify Admin ، انتقل إلى المتجر عبر الإنترنت> الموضوعات> تحرير الرمز.
  2. افتح sections/ مجلد.
  3. ابحث عن الملف السائل للوحدة التي تريدها (على سبيل المثال ، product-template.liquid).
  4. أضف رمز JavaScript الخاص بك داخل <script> العلامة بعد علامة HTML.

مثال على البرنامج النصي المضمون:

htmlCopyEdit<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log('Custom script loaded for product template');
  });
</script>

مثال على وحدة JS الخارجية الخاصة بالوحدة:

htmlCopyEdit<script src="https://ecommerce-platforms.com/articles/{{"product-custom.js' | asset_url }}" defer></script>

أفضل الممارسات (ثق بي)

  • قم دائمًا بلف وظائفك في الداخل DOMContentLoaded للتأكد من أن HTML جاهز.
  • مساحة الاسم وظائفك لتجنب الاشتباك مع البرامج النصية للتسوق أو التطبيقات.
  • اختبر الوحدة النمطية على الهاتف المحمول أيضًا – لقد رأيت تخطيطات JavaScript Break عندما تتغير أحجام الشاشة.
ممارسة جيدة لماذا يهم
استخدام مساحات الأسماء منع النزاعات مع البرامج النصية للموضوع/التطبيق
تأجيل التحميل يحسن سرعة الصفحة
البرامج النصية المعيارية تصحيح أخطاء أسهل

الأخطاء التي تعلمتها بالطريقة الصعبة

  • النسيان defer تسبب في حادث تصادم مرة واحدة خلال يوم الجمعة الأسود.
  • تحميل jQuery عن طريق الخطأ مرتين كسر البرامج النصية المخصصة تماما.
  • لا تستخدم asset_url مرة واحدة يعني أن البرامج النصية لم تعمل بعد النشر على الإنتاج.

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

هذه الطريقة تبدو سحرية – لكنها أكثر تقنية.

أستخدمه في الغالب عندما:

  • دمج تطبيقات الطرف الثالث (على سبيل المثال ، نقاط الولاء ، خصومات gamified)
  • تشغيل اختبارات A/B.
  • البرامج النصية المثبتة تلقائيًا دون لمس السمة يدويًا

خطوة بخطوة

  1. إنشاء تطبيق خاص أو الوصول إلى إعدادات التطبيق العام.
  2. استخدم apiify Admin API لنشر علامة نصية.
  3. تحديد event مثل onload وتوفير src من ملف JS المستضافة.

عينة طلب النشر:

javascriptCopyEditfetch('/admin/api/2023-10/script_tags.json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Access-Token': 'your-access-token',
  },
  body: JSON.stringify({
    script_tag: {
      event: 'onload',
      src: 'https://yourdomain.com/script.js',
    },
  }),
});

الأشياء الرئيسية التي أتحقق منها دائمًا

  • البرامج النصية المستضافة على مجالات HTTPS فقط.
  • يجب أن تكون البرامج النصية التي يتم تحميلها عبر API هزيلًا للغاية لتجنب إيذاء سرعات الخروج.
  • قم دائمًا بتنظيف علامات البرنامج النصي القديمة إذا لم تعد هناك حاجة (تجنب “نصوص الأشباح”).

عندما يضيء هذا

استخدام الحالة فائدة
APP تثبيت حقن النص بدون تحرير يدوي
الترقيات الديناميكية العروض المستهدفة بدون تحريرات قالب
ميزات المتجر تحميل البرنامج النصي فقط لبعض المستخدمين

نصائح لكتابة JavaScript النظيفة في Shopify

لقد تعلمت بالطريقة الصعبة أن JavaScript السيئة = الصداع لاحقًا.

إليك ما يبقي الكود نظيفًا ومستقرًا:

  • استخدام مساحات الأسماء: لف كل شيء في كائن واحد (MyStoreApp.functionName) لتجنب الاشتباك مع jQuery Shopify أو غيرها من التطبيقات.
  • تأجيل التحميل: دائما استخدام defer حتى يتم تحميل البرامج النصية بعد تحليل HTML. لا تمنع الخيط الرئيسي أبدًا.
  • Async عند الحاجة: لتحليلات الطرف الثالث أو البرامج النصية الإعلانية التي ليست حرجة ، قم بتحميلها بشكل غير متزامن.
  • اختبار الاستجابة: بعد كل حقن رمز ، أختبر على الأجهزة المحمولة والكمبيوتر اللوحي وسطح المكتب. تتصرف بعض البرامج النصية بشكل مختلف على شاشات اللمس.
  • تصحيح الأخطاء: دائما استخدام console.log() أثناء التطوير لتتبع مكان حرائق البرنامج النصي.

إليك قائمة المراجعة السريعة التي أتابعها قبل دفع أي نص على الهواء مباشرة:

نقطة التفتيش سبب
تأجيل/سمة Async تجنب حظر الصفحة
وحدة التحكم خالية من الأخطاء استقرار أفضل
يعمل على الأجهزة المحمولة/الجهاز اللوحي/سطح المكتب خبرة سريعة الاستجابة
وظائف مساحة الاسم تجنب النزاعات
نصوص خفيفة الوزن تحميل أسرع

فوائد إضافة JavaScript إلى وحدات تسوق

من العشرات من المشاريع ، يمكنني أن أخبرك: JavaScript الأيمن يجعل المتجر المال.

إليك ما يحدث عندما تفعل ذلك بشكل صحيح:

  • المزيد من المتاجر التفاعلية: فكر في تكبير المنتجات ، والركور المخصصة ، وعلامات التبويب لوصف المنتج.
  • معدلات تحويل أعلى: المنبثقة الشخصية والتوصيات الديناميكية تزيد من معدلات الخروج.
  • تحديثات في الوقت الفعلي أسرع: مزامنة المخزون ، تحديثات الأسعار الديناميكية – لا توجد إعادة تحميل للصفحة.
  • معدل متوسط ​​قيمة الطلب: upsells الذكية والبيع المتبادل مدعوم من JavaScript.
  • تكامل أكثر تشددا: يمكنك ربط CRMs ، ومنصات الولاء ، وأكثر من ذلك.

والمكافأة؟

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

الأسئلة الشائعة حول إضافة JavaScript إلى وحدات التسوق

هل يمكنني استخدام jQuery في Shopify؟

نعم ، لكن كن حذرًا. بعض موضوعات Shopify تعمل بالفعل على تحميل jQuery ، لذلك تحقق مزدوجًا قبل تضمينها مرة أخرى.

أين لا يجب أن أضيف جافا سكريبت؟

تجنب إضافة نصوص ثقيلة إلى <head> إذا كان ذلك ممكنا. تفضل دائما defer التحميل في أسفل theme.liquid أو داخل الملفات الخاصة بالقسمة.

ماذا لو توقفت JavaScript عن العمل بعد تحديث السمة؟

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

هل أحتاج إلى تطبيق لإضافة JavaScript إلى Shopify؟

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

إضافة JavaScript إلى وحدات التسوق لا يتعلق فقط بتجميع المزيد من الكود في متجرك.

إنه يتعلق:

  • معرفة أين و كيف لإضافتها
  • الحفاظ على الكود الخاص بك وحدات وضوء
  • جعل تجربة العملاء أكثر سلاسة وأكثر شخصية

من تجربتي ، يحول JavaScript المدارة بعناية متجر Shopify الأساسي إلى آلة بيع.
الأمر يستحق الجهد الإضافي.

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

مقالة ذات صلة

مال و أعمال

كيفية تغيير التسعير ديناميكيًا في Shopify: دليل خطوة بخطوة

مال و أعمال

كيفية التحقق من عدد المنتجات التي لديك على Shopify في 5 دقائق

مال و أعمال

كيفية تجنب رسوم الرقمنة على المطبوعة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

فاتك

مال و أعمال

كيفية تغيير التسعير ديناميكيًا في Shopify: دليل خطوة بخطوة

مال و أعمال

كيفية التحقق من عدد المنتجات التي لديك على Shopify في 5 دقائق

مال و أعمال

كيفية إضافة JavaScript إلى وحدات Shopify (دون كسر متجرك)

مال و أعمال

كيفية تجنب رسوم الرقمنة على المطبوعة