الكوديكس · 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-fontsystem-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-radius6pxنصف قطر زوايا الزر. استخدم 999px لشكل الكبسولة، و0 للمربع.
--cm-modal-bg#2b2b2b (#f5f5f5 مع theme="light")خلفية نافذة القائمة المنبثقة.
--cm-modal-overlayrgba(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 هو المكان الصحيح لذلك.

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

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

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

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