الكوديكس · IX

اجعل زر الشراء خاصاً بك

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

لا شيء من هذه سمات جاهزة. كل مظهر مبني من كود CSS البسيط المعروض بجانبه. انسخ أياً منها كنقطة بداية وغيّر ما تشاء.

هذه أزرار حية بمزودين بديلين ورمز مرجعي وهمي. لا تُؤخَذ أي مدفوعات. انقر زراً لفتح نافذته المنبثقة، ثم اقرأ الكود الذي صمّمه.

الافتراضي

بلا CSS، بلا خصائص. يتشارك الزر ونافذته المنبثقة لوناً فحمياً محايداً جاهزاً. هذا هو theme="dark"، الافتراضي، فكتابته صراحةً لا تغيّر شيئاً.

Buy now

انقر لفتح النافذة المنبثقة

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="ebook"
  amount="29"
  currency="USD">
  Buy now
</coin-moebius-buy>

السمة الفاتحة

أضف theme="light" فيتحول كل من الزر والنافذة المنبثقة إلى لون أبيض مائل ناعم. خاصية واحدة، بلا CSS.

Get access

انقر لفتح النافذة المنبثقة

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="membership"
  amount="99"
  currency="USD"
  theme="light">
  Get access
</coin-moebius-buy>

أمثلة، لا قوالب جاهزة

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

لون العلامة

زر نيليّ بنافذة منبثقة نيلية مطابقة، مضبوطة بحفنة من متغيرات CSS. غيّر أي قيمة لإعادة تلوينه.

Buy the eBook

انقر لفتح النافذة المنبثقة

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #4f46e5;
  --cm-button-color: #fff;
  --cm-button-radius: 9999px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #1e1b4b;
  --cm-color: #e0e7ff;
  --cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 9999px;
}

الطرفية

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

> buy_license

انقر لفتح النافذة المنبثقة

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #001b00;
  --cm-button-color: #39ff14;
  --cm-button-radius: 0;
  --cm-font: 'Courier New', monospace;
  /* the popup, styled to match */
  --cm-modal-bg: #000;
  --cm-color: #39ff14;
  --cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
  border: 1px solid #39ff14;
  border-radius: 0;
}
coin-moebius-buy::part(provider) {
  border-radius: 0;
}

ناعم

زر وردي دافئ بنافذة منبثقة وردية ناعمة مطابقة. زِد تدوير الزوايا أو أنقصه بتعديل رقم واحد.

Add to cart

انقر لفتح النافذة المنبثقة

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #ec4899;
  --cm-button-color: #fff;
  --cm-button-radius: 14px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff1f7;
  --cm-color: #831843;
  --cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 12px;
}

تدرّج لوني

وجه زر بتدرّج لوني، مع نافذة منبثقة مظلَّلة لتطابقه. لوّن وجه الزر كيفما تشاء.

Reserve a spot

انقر لفتح النافذة المنبثقة

coin-moebius-buy::part(button) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 2rem;
  font-weight: 700;
}
coin-moebius-buy {
  /* the popup, picking up the gradient's colors */
  --cm-modal-bg: #f5f3ff;
  --cm-color: #4c1d95;
  --cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
  border-top: 4px solid #764ba2;
}

مبسّط

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

Purchase

انقر لفتح النافذة المنبثقة

coin-moebius-buy {
  /* the button */
  --cm-button-bg: transparent;
  --cm-button-color: #374151;
  --cm-button-radius: 6px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff;
  --cm-color: #374151;
  --cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
  border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

إضافة جرّة إكراميات

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

هل يعجبك العمل؟

اترك إكرامية. فهي تُبقي الأضواء مضاءة والمنشورات مستمرة.

Leave a tip

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #b45309;
  --cm-button-color: #fff;
  --cm-button-radius: 8px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #fffaf3;
  --cm-color: #7c4a02;
  --cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
}

السماح للمشترين بتحديد المبلغ

أضف editable-amount="true" فتعرض النافذة المنبثقة حقل مبلغ يملؤه المشتري، للإكراميات أو التبرعات أو ادفع ما تشاء. اتركه بلا تفعيل، وهو الافتراضي، فيبقى amount الذي تضبطه ثابتاً ولا يظهر أي حقل. وفي كلتا الحالتين تبقى أزرار الدفع معطَّلة حتى يكون المبلغ رقماً موجباً، فلا يمكن لمشترٍ أن يُتمّ شراءً مقابل لا شيء.

مرجع السمات

كل سطح يمكنك تصميمه. اضبط المتغيرات على الزر؛ وصِل إلى البقية عبر ::part().

خصائص CSS المخصصة

اضبط هذه على عنصر coin-moebius-buy (أو أي من أسلافه، لأن الخصائص المخصصة تُورَّث):

الخاصية	الافتراضي	ما تتحكم فيه
`--cm-font`	`system-ui, -apple-system, BlinkMacSystemFont, sans-serif`	عائلة الخط لنص الزر وكل عنصر نص داخل نافذة القائمة المنبثقة.
`--cm-color`	`#ededed` (`#1f1f1f` مع theme="light")	لون النص للنافذة المنبثقة وتعليماتها.
`--cm-button-bg`	`#2b2b2b` (`#f5f5f5` مع theme="light")	لون خلفية الزر. يطابق سطح النافذة المنبثقة افتراضياً.
`--cm-button-color`	`#ededed` (`#1f1f1f` مع theme="light")	لون نص الزر.
`--cm-button-radius`	`6px`	نصف قطر زوايا الزر. استخدم `999px` لشكل الكبسولة، و`0` للمربع.
`--cm-modal-bg`	`#2b2b2b` (`#f5f5f5` مع theme="light")	خلفية نافذة القائمة المنبثقة.
`--cm-modal-overlay`	`rgba(0, 0, 0, 0.45)`	تظليل الخلفية خلف نافذة القائمة المنبثقة.

محدِّدات ::part()

لأي شيء يتجاوز المتغيرات أعلاه، استهدف الأجزاء المسمّاة للمكوّن من CSS صفحتك. يكشف الزر ثمانية:

الجزء	العنصر
`button`	زر الشراء نفسه.
`modal`	حاوية الخلفية الممتدة على كامل العرض خلف القائمة.
`dialog`	صندوق نافذة القائمة المنبثقة المتمركز.
`provider`	كل خيار مزود دفع داخل القائمة.
`provider-icon`	الأيقونة الصغيرة بجانب اسم المزود.
`provider-name`	نص اسم المزود.
`close`	زر "إلغاء" في أسفل القائمة.
`instructions`	لوحة التعليمات المعروضة للدفع بالبريد (العنوان البريدي + الرمز المرجعي).

فاتح وداكن

النافذة المنبثقة داكنة افتراضياً. ولنافذة منبثقة فاتحة، أضف theme="light" إلى العنصر. هذا هو التبديل بأكمله، ولا يتبع إعداد جهاز الزائر، فما تختاره هو ما يراه كل مشترٍ. تريد شيئاً محدداً؟ اضبط أياً من المتغيرات أعلاه فوق أي من السمتين فتفوز قيمك.

ما ليس قابلاً للتنسيق بعد

بعض الأشياء مُرمَّزة عمداً في الإصدار الأول: انتقالات التمرير بمدة 120ms، وطبقة z-index للنافذة، ومعظم التباعد/الحشو داخل القائمة. إن وقعت حاجة علامة على أحد هذه، فالحل البديل هو محدِّد ::part() نفسه مع تجاوز !important؛ والإصلاح الأنظف هو أن تطلب منا إضافة متغير CSS له. ومتعقّب مشكلات الـ SDK هو المكان الصحيح لذلك.

طرق الدفع لكل منتج

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

← العودة إلى التوثيق

صمّمه، ثم انشره

انسخ أي مثال إلى ورقة أنماطك وابدأ تلقّي المدفوعات. مجاني للبدء، بلا بطاقة.

اطّلع على الأسعار اقرأ التوثيق