> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# بناء متجر

> اطلب من Claude بناء متجر على قالب Framer: ماذا تقول، وترتيب الخطوات، وأين يتوقف من أجلك، وكيف تختبر النتيجة.

بعد إعداد الموصّل ([إعداد الموصّل](https://docs.framerfy.ae/ar/ai-builder/install.md))، ابدأ محادثة جديدة وأخبر Claude بما تبيعه. مثلًا:

> ابنِ متجرًا على مشروعي في Framer لأطقم شاي البوبا المصنوعة بكميات صغيرة. اسم العلامة Tapio. استخدم الدفع التجريبي حاليًا.

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

## الخطوات

**1. قراءة القالب**

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

**2. كتابة الكتالوج**

يكتب Claude نحو 12 منتجًا لمجالك: العناوين، والأوصاف، والخيارات مثل المقاس أو النكهة، والأسعار، والصور. وحين يعرض القالب منتجات مناسبة، يحتفظ بأسمائها وأسعارها وصورها. يفحص Framerfy الكتالوج وفق قواعد Shopify (معرّفات فريدة، و3 خيارات و100 نسخة على الأكثر لكل منتج، والأسعار، وروابط الصور)، ويصلح Claude ما يُشار إليه.

اطلب التعديلات هنا. هذه أسهل مرحلة لتغيير الأسعار أو الأسماء.

**3. استيراد المنتجات إلى Shopify (أنت)**

يعطيك Claude رابط تنزيل لملف CSV للمنتجات بصيغة Shopify. يعمل الرابط 7 أيام.

1. نزّل الملف.
2. في لوحة تحكم Shopify، افتح **Products ← Import** وارفعه. اترك **Overwrite products with matching handles** غير مفعّل في الاستيراد الأول.
3. تأكد أن المعاينة تعرض العدد المتوقع من المنتجات، ثم انقر **Import products**. يرسل لك Shopify بريدًا عند الانتهاء.
4. أخبر 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. استخدمه حين يستقبل المتجر طلبات حقيقية.

ويوجّه Claude أيضًا كل أزرار Checkout إلى اختيارك، ويضيف سكربت متجر Framerfy إلى الموقع، ويضيف صفحة 404 إن لم تكن في القالب، ويمكنه كتابة صفحات مثل **الشحن** أو **الإرجاع** أو **الأسئلة الشائعة** مما تخبره به.

**8. الجهاز اللوحي والهاتف**

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

**9. النشر**

يخبرك Claude بمكان النشر (بيئة staging إن كانت مفعّلة في مشروعك، وإلا العنوان المباشر) وعدد الصفحات المتغيرة. بعد موافقتك ينشر ويعطيك الرابط.

**10. فحص الموقع المنشور**

يفتح Claude الموقع المنشور ويخبرك بما أعادته كل صفحة:

* الصفحة الرئيسية تفتح
* كل صفحة منتج تفتح، وفي عنوانها اسم المنتج، وتعرض كل قيم الخيارات، وفيها زر Add to cart
* الصورة الرئيسية لكل منتج تفتح
* CMS يطابق Shopify (لا منتجات ناقصة أو زائدة أو قديمة) ولكل نسخة سعر
* صفحات الدفع تفتح، أو رابط الدفع في Shopify يعمل
* الرابط غير الموجود يعرض صفحة 404

إذا فشل شيء، يخبرك Claude بما ظهر في الصفحة، ثم يصلحه، وينشر مجددًا، ويعيد الفحص.

يمكنك أيضًا طلب خطوة واحدة، مثل "أضف درج العربة" أو "زامن منتجاتي مجددًا".

## اختبره بنفسك

يقرأ الفحص النهائي الصفحات المنشورة لكنه لا يشغّل متصفحًا، لذا جرّب ما يلي بنفسك قبل الإطلاق:

1. في صفحة منتج، بدّل بين الخيارات. يجب أن يتغير السعر والصورة.
2. انقر **Add to cart**. يفتح الدرج وفيه المنتج، ويزيد عدد العربة.
3. في الدرج، انقر **Clear cart**. يجب أن تظهر حالة العربة الفارغة.
4. أضف منتجًا مرة أخرى وانقر **Checkout**.
5. مع الدفع التجريبي، جرّب بطاقات الاختبار:

   | البطاقة | ما يحدث |
   | - | - |
   | `4242 4242 4242 4242` | ينجح الدفع وتصل إلى صفحة تأكيد الطلب |
   | `4000 0027 6000 3184` | تظهر نافذة تجريبية لـ 3-D Secure. أكملها لإتمام الطلب |
   | `4000 0000 0000 0002` | تُرفض البطاقة |
   | `4000 0000 0000 9995` | رصيد غير كافٍ |

   ثم افتح **My orders**. ستجد طلباتك التجريبية.

   مع دفع Shopify، يجب أن تصل إلى صفحة الدفع في Shopify وفيها المنتج.
6. افتح الموقع على هاتفك. يجب ألا يتحرك شيء أفقيًا، وألا يُقطع أي نص عند الحواف.

## إذا حدثت مشكلة

| ما يقوله Claude | ما تفعله |
| - | - |
| لا يوجد مشروع Framer مرتبط | اربط مشروعًا في صفحة **MCP** في لوحة التحكم ([إعداد الموصّل](https://docs.framerfy.ae/ar/ai-builder/install.md)) |
| المتجر على الخطة المجانية | يبني الموصّل المتاجر على خطتي Pro وAgency. خلال المرحلة التجريبية، اطلب منا إضافة حسابك |
| لا توجد مجموعة CMS اسمها "Framerfy Products" | لم تُزامن المنتجات بعد. اطلب من Claude مزامنة منتجاتك |
| انتهت صلاحية الموافقة أو تغيّرت التفاصيل | الموافقة صالحة 10 دقائق ولتغيير واحد محدد. اطلب من Claude عرض التغيير مجددًا ووافق على النسخة الجديدة |
| لا يقبل Framer ربط بطاقات المنتجات بصفحة المنتج | أُنشئت صفحة المنتج قبل إعادة إنشاء المجموعة. احذف صفحة المنتج في Framer واطلب من Claude بناء صفحات المنتجات مجددًا |
| لا يوجد زر عربة في التخطيط | أضف أيقونة أو زر عربة إلى الرأس في Framer، أو أخبر Claude بالعنصر المقصود |
| مفتاح API هذا غير مسموح له بالنشر | أنشئ مفتاحًا جديدًا في Framer بصلاحية النشر وحدّثه في صفحة **MCP**، أو انشر من Framer |
| متجر Shopify محمي بكلمة مرور | لا يستطيع المتسوقون الوصول إلى الدفع. في Shopify افتح **Online Store ← Preferences** وأزل كلمة المرور عند الإطلاق |

لأي مشكلة أخرى، راسلنا على [support@framerfy.ae](mailto:support@framerfy.ae) مع `run_id` من آخر رد لـ Claude. يتيح لنا رؤية كل خطوة في عملية البناء.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.