بلوك عناصر السلة

بلوك Cart items هو قائمة عناصر الطلب في السلة، ويعرض كل منتج أضافه المتسوق مع صورته وعنوانه ونسخته وسعره ومنتقي الكمية وزر الإزالة. وهو بلوك إلزامي، وهو الحاوية التي تستضيف البلوكات الفرعية للسلة (صف Product، وSubscription upgrade، وCustom code)، موفرًا البنية التي تلتصق بها البلوكات الفرعية لكل سطر.

• Product title — اسم المنتج في كل سطر. يدعم أيضًا عائلة خط مخصصة.
• Variant — تسمية النسخة (مثال: Size: Medium).
• Subscription plan — تسمية الخطة للقراءة فقط المعروضة على أسطر الاشتراكات.

• Price — السعر الحالي للسطر.
• Compare-at price — السعر الأصلي المشطوب.
• Savings — تسمية التوفير (مثال: Save $5.00). الحجم وارتفاع السطر فقط — أما الخط الغامق واللون فيُضبطان في محرر النص المنسق أعلاه.

• Bundle toggle — رأس القسم القابل للفتح الذي يوسّع قائمة مكوّنات الحزمة.
• Bundle item title — عنوان كل مكوّن داخل الحزمة.
• Bundle item variant — تسمية النسخة لكل مكوّن حزمة.

• البلوكات الفرعية المرتبة قبل صف Product تظهر فوق محتوى المنتج في كل سطر.
• البلوكات الفرعية المرتبة بعد صف Product تظهر تحت محتوى المنتج في كل سطر.

• عندما لا تحتوي السلة على عناصر، يتحول الدرج إلى الحالة الفارغة ولا يُعرض هذا البلوك.
• تغيير واحد للسلة يعمل في كل مرة. أثناء تنفيذ تحديث كمية أو إزالة، تُعطَّل عناصر تحكم الصف للحفاظ على اتساق السلة، ثم يُعاد تفعيلها بمجرد استقرار التغيير.
• خفض كمية سطر إلى أقل من 1 يزيله. الكمية التي يرفضها المتجر (مثلًا، تجاوز المخزون المتاح) تُعاد مزامنتها إلى آخر قيمة صالحة.
• الحزم تتغير كوحدة واحدة. تعديل الكمية على السطر المرجعي للحزمة يوسّع الحزمة بأكملها في عملية واحدة — إذا كان عنصر تابع مُضمّنًا بمعدل 3 لكل عنصر مرجعي، فإن رفع العنصر المرجعي من 1 إلى 2 يرفع ذلك التابع إلى 6. إزالة العنصر المرجعي تزيل جميع أعضاء الحزمة دفعة واحدة.
• بعض الحزم لا يمكن تغيير كميتها. إذا كان أي من عناصر الحزمة التابعة مُضمّنًا بمعدل كسري (1.5 لكل عنصر مرجعي مثلًا)، فإن منتقي الكمية على تلك الحزمة يُقفل: يُعطَّل زرا +/− وحقل الكمية معًا، ولا تُقبل الكميات المكتوبة. لا يزال بالإمكان إزالة الحزمة.
• أسطر الاشتراكات تعرض خطتها. عندما يحمل سطر خطة بيع ويكون البلوك الفرعي Subscription upgrade معطلًا أو غير مضاف، يعرض صف Product تسمية خطة للقراءة فقط أسفل النسخة — مثل Delivers every month (save 30%). وعند تفعيل ذلك البلوك الفرعي يعرض الخطة في منتقيه الخاص، فتُحجب التسمية للقراءة فقط بدلًا من تكرارها.

• المنطقة: الوسط (body).
• الحد الأقصى: 1 لكل حالة سلة.
• الحالة: السلة الممتلئة فقط.
• مقفل ومضاف افتراضيًا. لا يمكن إزالة Cart items أو إخفاؤه، بل فقط إعادة تموضعه.

function CustomTemplate(props) {
  return (
    <div className="cart-external-cart-items__row" style={{ display: 'flex', gap: '12px', opacity: props.busy ? 0.6 : 1 }}>
      {props.imageUrl && <img src={props.imageUrl} alt="" width={64} height={64} />}

      <div style={{ flex: 1 }}>
        {props.url ? <a href={props.url}>{props.title}</a> : <span>{props.title}</span>}
        {props.variantTitle && <div style={{ opacity: 0.6 }}>{props.variantTitle}</div>}
        {props.sellingPlanLabel && <div style={{ opacity: 0.6 }}>{props.sellingPlanLabel}</div>}

        {props.discountTags.map((tag) => (
          <span key={tag} style={{ fontSize: '11px', border: '1px solid', borderRadius: '4px', padding: '1px 5px' }}>
            {tag}
          </span>
        ))}

        {!props.stepperLocked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
            <button type="button" onClick={props.decrement} disabled={props.busy}>&minus;</button>
            <input
              value={props.quantityInput}
              onInput={props.onQuantityInput}
              onBlur={props.commitQuantity}
              onKeyDown={props.onQuantityKeyDown}
              size={2}
            />
            <button type="button" onClick={props.increment} disabled={props.busy}>+</button>
            <button type="button" onClick={props.remove} disabled={props.busy}>
              {props.pending === 'remove' ? 'Removing…' : 'Remove'}
            </button>
          </div>
        )}
      </div>

      <div style={{ textAlign: 'right' }}>
        <div>{props.price}</div>
        {props.compareAtPrice && <s style={{ opacity: 0.5 }}>{props.compareAtPrice}</s>}
        {props.savingsHtml && <div dangerouslySetInnerHTML={{ __html: props.savingsHtml }} />}
      </div>
    </div>
  );
}

function CustomTemplate(props) {
  return (
    <div>
      <div>{props.title} {props.price}</div>

      {props.bundle && (
        <ul style={{ margin: '4px 0 0 12px', fontSize: '12px', opacity: 0.7 }}>
          {props.bundle.children.map((child, i) => (
            <li key={child.key ?? i}>{child.quantity} × {child.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}