تجربتي مع استخدام الذكاء الاصطناعي لتحسين واجهة متجر شوبيفاي برمجيًا

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

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

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

تحسين واجهة المتجر باستخدام الذكاء الاصطناعي

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

خلال النقاط التالية سأعتمد على أداة ChatGPT، لكن يوجد العديد من البدائل الأخرى التي يمكن استخدامها لتحقيق نفس الغرض. مثل Google Gemini، وMicrosoft Copilot، وClaude AI، وغيرها من أدوات الذكاء الاصطناعي المتطورة.

تغيير اتجاه الكتابة

بداية، لم تكن النصوص في متجري متناسقة مع اتجاه الكتابة باللغة العربية من اليمين إلى اليسار (RTL). فظهرت بشكل غير واضح وغير منسق، كما هو موضح في الصورة التالية:

لذلك، طلبت من ChatGPT كتابة كود CSS مخصص لتعديل اتجاه الكتابة.

خلال ثوانٍ، كتب ChatGPT الكود المطلوب، وامتاز بإضافة وصف توضيحي باللغة العربية لكل جزء من الكود. ببساطة، راجع الكود ثم اضغط على زر "Copy" لنسخ الكود.

بعد ذلك، انتقلت إلى إعدادات المتجر Theme settings، ثم اخترت "Custom CSS" لإضافة كود CSS جديد إلى القالب، وأضفت الكود.

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

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

حدّثت الكود في المتجر، وكانت النتيجة النهائية ممتازة؛ فقد عالج مشكلة النصوص بشكل كامل على المتجر.

تعديل تنسيق وهوامش الصور

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

لذلك طلبت من ChatGPT كتابة كود يساعد على زيادة المسافة بين الصورة البارزة وبطاقة بيانات المنتج داخل صفحات منتجات المتجر. خلال ثوانٍ، كتب الكود بشكل تفصيلي كالآتي:

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

بنفس الطريقة، طلبت من ChatGPT تطبيق تحسينات أخرى على صفحة المنتج. مثل تقليل عرض صورة المنتج داخل الصفحة لتكون بنسبة 30% من إجمالي عرض الصفحة. وعرض صورة المنتج بالحجم الطبيعي دون قص أو تعبئة (Fill). ثم زدت المسافة أكثر بين صورة المنتج وبطاقة المنتجات، فكانت النتيجة النهائية ممتازة كما هو موضح في الصورة التالية:

تعديل تنسيقات النصوص

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

لذلك، طلبت من ChatGPT كتابة كود CSS يزيد حجم خط عناوين أقسام المنتجات، والتصنيفات، والعناوين الرئيسية في المتجر إلى 32 بكسل.

كما رغبت في أن تكون محاذاة العناوين الرئيسية في وسط الصفحة لتظهر بشكل أكثر وضوحًا للزائر.

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

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

مشاكل استخدام الذكاء الاصطناعي الشائعة

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

اختلاف معرفات الأقسام من قالب إلى أخر

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

لذلك، عندما لا يعمل الكود كما هو متوقع، يطلب الذكاء الاصطناعي عادةً الآتي:

• إرسال رابط الصفحة التي تحتوي على العنصر المطلوب تعديله.
• أو تحديد العنصر بدقة أو تصوير لقطة شاشة من أداة فحص العناصر (Inspect) ورفعها له.

الطريقة الثانية غالبًا تكون أكثر دقة، وتساعد الذكاء الاصطناعي على تحديد اسم الـ class أو الـ id الصحيح. يمكنك تطبيقها بسهولة باتباع الخطوات التالية:

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

عدم المعرفة الكافية للأكواد البرمجية

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

• فتح وسم <style> مرتين داخل بعضهما.
• عدم إغلاق وسم <style/> الأول قبل فتح الثاني.
• وجود خاصية !important في الكود الأول، ما يؤدي إلى تجاوز الكود الثاني.
• أخطاء برمجية أخرى تتعلق بتعارض الخصائص أو تكرارها.

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

نقص الكود البرمجي

بعض الأحيان، يُنتج الذكاء الاصطناعي كود برمجي غير متكامل. كما حدث في التطبيق العملي السابق عند تعديل اتجاه الكتابة؛ فقد عدَّل الاتجاه في جميع أجزاء الموقع باستثناء تسعير المنتجات.

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

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

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