حط المنيو بتاعك جوه موقعك الحالي بـ iframe

عندك موقع أصلاً؟ خليه يبقى فيه منيو حقيقي دلوقتي

مطاعم كتير بتشترك في menu-MENA وعندها موقع أصلاً. أحياناً موقع WordPress عمره ثلاث سنين، أحياناً صفحة Wix عملها ابن العم، وأحياناً حاجة custom شوية. مفيش من ده سبب إنك تسيبه. خاصية الـ embed بتحط منيو menu-MENA الحي مباشرة في صفحة من موقعك الحالي، جوه iframe، من غير ما تنقل حاجة أو تبني موقع من جديد.

الـ iframe يعني إيه بالظبط

الـ iframe هو شباك جوه صفحتك بيحمّل صفحة منفصلة. الهيدر بتاع موقعك، الـ navigation، قسم التواصل، كل ده فاضل في مكانه بالظبط. جوه مربع واحد في الصفحة، المتصفح بيحمّل رابط تاني ويعرضه هناك. ده كل الحكاية. مفيش plugin تسطبه ومفيش قاعدة بيانات توصلها، مجرد HTML tag واحد.

بالنسبة للمنيو، الرابط المنفصل ده نسخة مبسطة من صفحة المنيو العامة اتعملت مخصوص للاستخدام ده: menu.mena-x.com/embed/YOUR-SLUG. بتعرض التصنيفات والأصناف بس، مفيش هيدر اسم مطعم أو لوجو، مفيش promo bar، مفيش أزرار عائمة للغة أو الثيم. الحاجات دي موجودة في صفحة المنيو المستقلة علشان توجّه زائر واصل مباشرة للصفحة دي. جوه موقعك، موقعك أصلاً بيعمل الشغلانة دي، فالـ embed بيسيبها ويعرض المنيو بس.

أبسط كود embed

ده كل اللي محتاجه:

<iframe
  src="https://menu.mena-x.com/embed/your-restaurant-slug"
  width="100%"
  height="900"
  style="border: none;"
  title="المنيو"
></iframe>

استبدل your-restaurant-slug بالـ slug الحقيقي بتاعك، نفسه اللي بيظهر بعد menus.mena-x.com/ في رابط المنيو العام المستقل بتاعك. الزق الكود ده في أي صفحة في موقعك، في المكان اللي عايز المنيو يظهر فيه، وهيتعرض هناك.

تظبيط المقاس

خلي width: 100% علشان الـ iframe يملى أي حاوية هو فيها، وهيتصرف كويس على الديسك توب والموبايل. الـ height هو الرقم اللي هتظبطه بعينك، لأن منيو فيه ستة أصناف مش زي منيو فيه ستين صنف. قيمة بداية حوالي 800 إلى 1000 بكسل بتشتغل مع أغلب القوائم. الـ embed بيعمل scroll جواه لوحده لما المحتوى يبقى أطول من الـ iframe، فلو المقاس أقصر شوية مش عطل، معناها الزائر هيعمل scroll جوه مربع المنيو مش الصفحة كلها.

تثبيت اللغة والثيم من الـ URL

ضيف ?lang=ar أو ?lang=en على رابط الـ src علشان تجبر لغة معينة، و &theme=light أو &theme=dark أو &theme=auto علشان تجبر شكل معين، مهما كانت لغة أو ثيم متصفح الزائر مضبوط عليها:

<iframe
  src="https://menu.mena-x.com/embed/your-restaurant-slug?lang=ar&theme=light"
  width="100%"
  height="900"
  style="border: none;"
  title="المنيو"
></iframe>

ده مهم لو موقعك فيه صفحات عربي وإنجليزي منفصلة. حط الـ embed المثبّت على عربي في صفحتك العربية، والمثبّت على إنجليزي في صفحتك الإنجليزية، وكل واحدة تعرض اللغة الصح بغض النظر عن موبايل أو متصفح الزائر مضبوط على إيه.

ليه query parameter مش cookie

ممكن تتوقع إن اللغة والثيم يفضلوا فاكرين آخر اختيار للزائر، زي ما الـ cookie بيعمل عادةً. ده مش الطريقة اللي الـ embed شغال بيها، بالعمد. المتصفحات بقت بتمنع cookies اللي بتتظبط من محتوى محمّل جوه موقع حد تاني، وده بالظبط اللي بيحصل مع الـ iframe embed من وجهة نظر المتصفح: دومين مطعمك بيستضيف مربع محتوى من menu.mena-x.com. Safari بيمنع cookies الطرف الثالث افتراضياً من سنين، و Chrome ماشي في نفس الاتجاه. طريقة معتمدة على cookie هتشتغل بشكل غير ثابت على متصفحات، وهتقف تشتغل بهدوء على تانية.

الـ query parameter في رابط الـ src بيتخطى المشكلة دي كلها. مش معتمد على أي تخزين في المتصفح خالص، هو جزء من الرابط نفسه اللي أصلاً بتحمّله. اللي بيركب الـ embed بيحدد اللغة والثيم مرة واحدة، في الـ HTML، ويفضل شغال بثبات في كل متصفح ومع كل زائر.

ليه ده أحسن من لينك يودّي لصفحة المنيو الكاملة

البديل الواضح هو زرار مكتوب عليه "شوف المنيو بتاعنا" بيودّي الزائر لصفحة المنيو المستقلة بتاعتك على menu-MENA. ده بيشتغل، لكنه بيبعد الزائر عن موقعك علشان يشوف منيو، وبعدين يطلب منه يلاقي طريقه يرجع تاني لو عايز يشوف أي حاجة تانية، ساعات شغلك، مكانك، فورم الحجز. كل قفزة من دول فرصة إنه يقفل التاب ويمشي.

الـ embed بيخلي الزائر على دومينك طول الوقت. بيعمل scroll في الصفحة الرئيسية، وفي النص، فيه المنيو الحقيقي، مش سكرين شوت، مش PDF، الحاجة الحية بأسعارها الحية. هوية موقعك، محتواك التاني، والمنيو، كلهم عايشين في نفس الصفحة اللي هو أصلاً بيتفرج عليها.

إزاي تضيفه لموقعك

لسه مفيش زرار "get embed code" جاهز تلزقه من اللوحة، فده خطوة يدوية: خد الكود اللي فوق، بدّل الـ slug بتاعك، وضيف الـ query parameters اللي محتاجها، وابعتها لمين ما بيصون موقعك أو الزقها بنفسك لو أداة بناء موقعك فيها بلوك custom HTML. WordPress عنده واحد جاهز في block editor، Wix و Squarespace كل واحد فيهم عنده عنصر embed أو custom code، ولو موقعك custom بالكامل، أي مبرمج يقدر يحط iframe tag في صفحة في دقايق معدودة. مفيش تكلفة إضافية لاستخدام الـ embed، هو جزء من الباقة اللي أصلاً مشترك فيها.

أهم النقاط

• رابط الـ embed هو menu.mena-x.com/embed/YOUR-SLUG، اتعمل مخصوص علشان يقعد جوه iframe على موقعك
• بيعرض التصنيفات والأصناف بس، مفيش هيدر، مفيش promo bar، مفيش أزرار عائمة
• ?lang=ar / ?lang=en و &theme=light / dark / auto بتتظبط في الرابط، مش cookie بتفتكرها، لأن cookies الطرف الثالث جوه iframes بقت المتصفحات بتمنعها أكتر وأكتر
• لينك صغير "Powered by menu-MENA" بيفضل تحت، بيودّي لصفحة المنيو المستقلة الكاملة بتاعتك
• الـ embed بيحمّل حي، فتعديلات اللوحة بتظهر أول ما الصفحة تتحمّل تاني، بالظبط زي المنيو المستقل

لو عندك موقع مبسوط بيه، خليك فيه. خد الـ slug بتاعك من اللوحة، الزق الكود اللي في المقال ده في الصفحة اللي المنيو المفروض يكون فيها، وموقعك الحالي هيبقى عنده منيو بيحدّث نفسه كل مرة تعدّل فيها.