ابنِ متجرًا على مشروعي في Framer لأطقم شاي البوبا المصنوعة بكميات صغيرة. اسم العلامة Tapio. استخدم الدفع التجريبي حاليًا.يمر Claude بالخطوات التالية بالترتيب، ويتوقف حين يحتاج إليك. كل خطوة تغيّر مشروعك تعرض عليك أولًا ما ستفعله. اقرأه ووافق، أو أخبر Claude بما تريد تغييره.
الخطوات
1
قراءة القالب
يقرأ Claude كل صفحة ودورها في المتجر، وأنماط الألوان والنصوص، ومنتجات القالب نفسه. ويخبرك بأي شيء يمنع بناء المتجر، مثل غياب صفحة المنتج أو صفحة بلا تخطيط للهاتف. القوالب الكبيرة تستغرق حتى دقيقة.
2
كتابة الكتالوج
يكتب Claude نحو 12 منتجًا لمجالك: العناوين، والأوصاف، والخيارات مثل المقاس أو النكهة، والأسعار، والصور. وحين يعرض القالب منتجات مناسبة، يحتفظ بأسمائها وأسعارها وصورها. يفحص Framerfy الكتالوج وفق قواعد Shopify (معرّفات فريدة، و3 خيارات و100 نسخة على الأكثر لكل منتج، والأسعار، وروابط الصور)، ويصلح Claude ما يُشار إليه.اطلب التعديلات هنا. هذه أسهل مرحلة لتغيير الأسعار أو الأسماء.
3
استيراد المنتجات إلى Shopify (أنت)
يعطيك Claude رابط تنزيل لملف CSV للمنتجات بصيغة Shopify. يعمل الرابط 7 أيام.
- نزّل الملف.
- في لوحة تحكم Shopify، افتح Products ← Import وارفعه. اترك Overwrite products with matching handles غير مفعّل في الاستيراد الأول.
- تأكد أن المعاينة تعرض العدد المتوقع من المنتجات، ثم انقر Import products. يرسل لك Shopify بريدًا عند الانتهاء.
- أخبر Claude أن الاستيراد انتهى.
4
مزامنة المنتجات مع Framer
ينسخ Claude منتجات Shopify إلى مجموعة CMS اسمها Framerfy Products في مشروعك. يضيف المنتجات الجديدة، ويحدّث المتغيرة، ويزيل ما حذفته من Shopify. أعِد تشغيلها كلما تغيرت منتجاتك في Shopify.
5
بناء صفحات المنتجات
يبني Claude صفحة المنتج بالمعرض والسعر ومحدد لكل خيار وAdd to cart والوصف، وكلها مرتبطة بـ CMS. ويضيف شبكة منتجات إلى صفحة المتجر، وكل بطاقة تفتح منتجها. وكلاهما بألوان القالب وخطوطه. إعادة التشغيل تستبدل أقسام Framerfy فقط، ولا يتغير شيء آخر في الصفحة.
6
إضافة العربة
يضيف Claude درج عربة إلى التخطيط الرئيسي للموقع. يفتحه زر العربة في الرأس ويعرض عدد العناصر. يعرض الدرج محتوى العربة، وحالة العربة الفارغة، والمجموع، وCheckout وClear cart.
7
إعداد الدفع وصفحات المتجر
تختار طريقة الدفع:
- الدفع التجريبي: صفحة دفع على موقعك تقبل بطاقات الاختبار فقط، مع صفحتي تأكيد الطلب وMy orders. استخدمه لتعرض على عميل متجرًا يعمل قبل إعداد مدفوعات Shopify.
- دفع Shopify: يرسل زر Checkout المتسوقين إلى صفحة الدفع في Shopify. استخدمه حين يستقبل المتجر طلبات حقيقية.
8
الجهاز اللوحي والهاتف
يضيف Claude تخطيطات للجهاز اللوحي والهاتف إلى كل صفحة تنقصها، ويصلح ما يتعطل عادة في الشاشات الصغيرة: الهوامش، وأعمدة الشبكة، والصفوف التي لا تتسع، والعناوين الكبيرة جدًا. ولا يغيّر تصميم سطح المكتب أبدًا. الصفحات التي لها تخطيطات هاتف خاصة بها تبقى كما هي، إلا من إصلاح للعروض الشاذة.
9
النشر
يخبرك Claude بمكان النشر (بيئة staging إن كانت مفعّلة في مشروعك، وإلا العنوان المباشر) وعدد الصفحات المتغيرة. بعد موافقتك ينشر ويعطيك الرابط.
10
فحص الموقع المنشور
يفتح Claude الموقع المنشور ويخبرك بما أعادته كل صفحة:
- الصفحة الرئيسية تفتح
- كل صفحة منتج تفتح، وفي عنوانها اسم المنتج، وتعرض كل قيم الخيارات، وفيها زر Add to cart
- الصورة الرئيسية لكل منتج تفتح
- CMS يطابق Shopify (لا منتجات ناقصة أو زائدة أو قديمة) ولكل نسخة سعر
- صفحات الدفع تفتح، أو رابط الدفع في Shopify يعمل
- الرابط غير الموجود يعرض صفحة 404
اختبره بنفسك
يقرأ الفحص النهائي الصفحات المنشورة لكنه لا يشغّل متصفحًا، لذا جرّب ما يلي بنفسك قبل الإطلاق:- في صفحة منتج، بدّل بين الخيارات. يجب أن يتغير السعر والصورة.
- انقر Add to cart. يفتح الدرج وفيه المنتج، ويزيد عدد العربة.
- في الدرج، انقر Clear cart. يجب أن تظهر حالة العربة الفارغة.
- أضف منتجًا مرة أخرى وانقر Checkout.
-
مع الدفع التجريبي، جرّب بطاقات الاختبار:
ثم افتح My orders. ستجد طلباتك التجريبية. مع دفع Shopify، يجب أن تصل إلى صفحة الدفع في Shopify وفيها المنتج.
- افتح الموقع على هاتفك. يجب ألا يتحرك شيء أفقيًا، وألا يُقطع أي نص عند الحواف.
إذا حدثت مشكلة
لأي مشكلة أخرى، راسلنا على support@framerfy.ae مع
run_id من آخر رد لـ Claude. يتيح لنا رؤية كل خطوة في عملية البناء.