بلوكات الكود المخصص

يضيف بلوك Custom code كود HTML أو React خاصًا بك إلى السلة. ضعه في أي قسم من الدرج، أو أدرجه داخل Cart items كبلوك فرعي ليتكرر لكل سطر. بخلاف البلوكات الأخرى، لا توجد له إعدادات Content ولا قسم Design: البلوك هو الكود، لذا تعمل بالكامل في علامة تبويب Code الخاصة به.

1. أضف بلوك Custom code إلى أي قسم، أو كبلوك فرعي تحت Cart items.
2. حدده وافتح علامة تبويب Code.
3. اختر HTML أو React component. تبدأ البلوكات الجديدة بـ HTML افتراضيًا.
4. اكتب الكود الخاص بك.
5. إذا اخترت React، انقر Compile.
6. فعّل “Use custom template”. بالنسبة لهذا البلوك، يعني هذا المفتاح “اعرض الكود المخصص الخاص بي”، وهو معطّل افتراضيًا، فلا يُعرض شيء حتى تفعّله.
7. أبقِ مفتاح العين في الشريط الجانبي مفعّلًا ليظل البلوك مرئيًا للمتسوقين.

• لا يعرض البلوك شيئًا حتى يكتمل تحميل السلة.
• كما لا يعرض شيئًا عندما تكون عين الشريط الجانبي معطلة، أو “Use custom template” معطلًا، أو الكود فارغًا، أو عندما يفشل React في التجميع أو العرض. ولأن الفشل صامت، افحص بلوكك في المعاينة قبل النشر.

• وسوم <script> المضمّنة لا تعمل، وليس لوضع HTML أي وصول إلى SDK أو window.
• للمنطق، استخدم وضع React أو السكربتات المخصصة مع Cart SDK.

<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>

• يقفل المحرر الغلاف على function CustomCode(props: CustomCodeProps) { … }، وتحرر أنت فقط الجسم بين هذين السطرين.
• يجب أن تنقر Compile ثم تفعّل “Use custom template”، قبل أن يظهر البلوك.
• يمكن لمكوّنك استخدام useState وuseEffect وuseMemo وuseRef وuseCallback.
• بخلاف وضع HTML، يعمل React في سياق الصفحة، لذا يمكنه استدعاء window وCart SDK عند توفرهما.
• إذا رمى مكوّنك أخطاء وقت التشغيل، لا يعرض البلوك شيئًا ويستمر باقي السلة في العمل.

• لا تُعيَّن line إلا في بلوك فرعي لـ Cart items، حيث يُعرض مكوّنك مرة لكل سطر. عند وضعه كقسم، تكون line قيمتها null وتقرأ cart.items بدلًا منها.
• العناصر التابعة للحزم ليست في cart.items. عندما تُجمَّع الأسطر في حزمة، يظهر السطر المرجعي فقط؛ وتوجد عناصره التابعة في line.bundle.children.
• الأسطر المخفية عبر تحويل الأسطر ليست موجودة أيضًا، رغم أنها لا تزال تُحتسب ضمن cart.totalPrice.

function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}

function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}

function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}

function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

• المنطقة: أي منطقة (الأعلى أو الوسط أو الأسفل). متاح أيضًا كبلوك فرعي لـ Cart items.
• الحد الأقصى: غير محدود.
• الحالة: السلة الممتلئة والفارغة (كبلوك قسم). كبلوك فرعي لـ Cart items، لا يُعرض إلا عندما تحتوي السلة على أسطر، بنسخة واحدة لكل سطر.
• غير مقفل، لذا يمكنك إزالته أو إخفاؤه.
• لا يوجد قسم Design خاص بالبلوك. نسّق من خلال ترميزك الخاص وCSS المخصص وإعدادات التصميم العامة.