> ## Documentation Index > Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt > Use this file to discover all available pages before exploring further. # كمية/عدّاد أيقونة السلة لا يتحدّث > يوضح هذا المقال كيفية إصلاح كمية أيقونة السلة عندما لا تتحدّث في Upcart.
# نظرة عامة
بعض القوالب لا تحدّث الأيقونة تلقائيًا، وسيرشدك هذا الدليل إلى كيفية إصلاح ذلك باستخدام القليل من الكود المخصص. اتبع الخطوات أدناه لجعل كل شيء يتزامن بشكل صحيح. **إليك مثالًا على شكل عدم التطابق هذا:** درج Upcart يعرض Cart 2 بينما لا تزال فقاعة أيقونة سلة القالب تعرض 1 ***
# خطوات مهمة قبل أن تبدأ!
لإصلاح مشكلة أيقونة السلة، ستحتاج إلى تحديد اسم الفئة (class) الخاص بأيقونة سلتك. كل قالب مختلف، وتضمن هذه الخطوة أن يعمل الكود خصيصًا لمتجرك.
### **1. استخدم أدوات مطوري Chrome**
كل قالب مختلف، لذا ستحتاج إلى استخدام أدوات مطوري Chrome ‏(Inspect) لتحديد اسم فئة أيقونة سلتك. * انقر بزر الفأرة الأيمن على أيقونة السلة في واجهة متجرك واختر **Inspect** في Google Chrome. * ابحث عن عنصر HTML الخاص بأيقونة سلتك (مثلًا، **``**). * **هل تحتاج إلى مساعدة في استخدام أدوات مطوري Chrome؟** اطّلع على [هذا الدليل](https://developer.chrome.com/docs/devtools/overview/) للحصول على تعليمات خطوة بخطوة.
### **2. اطلب المساعدة (اختياري)**
إذا لم تتمكن من العثور على فئة أيقونة سلتك أو شعرت بأنك عالق، فلا تقلق! لديك خيارات: * **تواصل مع مطور القالب الخاص بك:** فهو يعرف قالبك بشكل أفضل ويمكنه مساعدتك في العثور على الفئة الصحيحة. * **استعن بأحد خبراء Shopify:** إذا كنت بحاجة إلى دعم إضافي، فلدى Shopify دليل بخبراء موثوقين يمكنهم المساعدة. [اعثر على خبير Shopify هنا](https://experts.shopify.com/).
## 🚧 **إخلاء مسؤولية عن الكود المخصص**
الكود المثال المقدم أدناه هو مجرد قالب، **لن يعمل إذا نسخته ولصقته مباشرة**. يجب عليك استبدال اسم الفئة النائب (مثلًا **`.cart-count-bubble > span`**) باسم الفئة المحدد لأيقونة سلتك. ***
# الإصلاح خطوة بخطوة
قسّمنا هذه العملية إلى ثلاثة مستويات من الإصلاحات، بدءًا من الحل الأبسط (المستوى 1). يبني كل مستوى على المستوى السابق؛ جرّب المستوى 1 أولًا، ثم انتقل إلى المستوى 2 أو 3 فقط عند الحاجة.
## **الخطوة 1: أضف كودًا مخصصًا في Upcart**
أولًا، نظرًا لأننا سنحتاج إلى إضافة بعض كود HTML المخصص في محرر Upcart، فلنجهّز ذلك القسم: 1. انتقل إلى **Upcart Editor > Settings**، ثم افتح تبويب **Custom HTML** (خلف **More settings** إذا لم يتسع له صف التبويبات). 2. اضبط الموقع على **Scripts (Before Load)**. 3. الصق الكود المعدّل هنا (سنقدم أمثلة لكل مستوى أدناه). إليك كيف يبدو ذلك: إعدادات Custom HTML في Upcart مع ضبط موقع HTML على Scripts Before Load ***
# **الخطوة 2: طبّق الإصلاح حسب المستوى**
## المستوى 1 (أساسي)
عند تحميل السلة، يجمع هذا السكربت الكميات في عناصر سطور السلة ويكتبها في عنصر العدّاد داخل فقاعة سلة قالبك. وهو يناسب القوالب التي يوجد فيها العدّاد في عنصر متداخل بسيط (على سبيل المثال، `.cart-count-bubble > span`). **لا تنسَ** * استبدل **`.cart-count-bubble > span`** بفئة أيقونة سلتك. * اختبره في واجهة متجرك بعد إضافة الكود. لصق سكربت العدّاد للمستوى 1 في Custom HTML في Upcart باستخدام محدد cart-count-bubble
## كود مثال للمستوى 1
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **ملاحظة قديمة:** لا تزال دوال رد النداء `window.upcartOnCartLoaded` تعمل ولكنها مهملة وتسجّل تحذيرات في وحدة التحكم. استخدم `upcartSubscribeCartLoaded` لجميع السكربتات الجديدة. لاحظ أن `event.cart` لا يحتوي على خاصية `item_count`؛ استخدم `event.cart.items.reduce((total, item) => total + item.quantity, 0)` لحساب إجمالي عدد العناصر. ***
## المستوى 2 (متوسط)
إذا لم يعمل المستوى 1، فقد يستبدل قالبك كامل HTML الخاص بأيقونة السلة عند تغيّر العدّاد. تعيد هذه النسخة بناء ترميز الأيقونة لحالتَي السلة الفارغة وغير الفارغة بحيث يبقى العدّاد والأيقونة متزامنين. **لا تنسَ** * استبدل **`#cart-icon-bubble-custom`** بمحدد غلاف أيقونة السلة الخاص بقالبك. * اختبره بعد الحفظ. لصق سكربت أيقونة السلة للمستوى 2 في Custom HTML في Upcart باستخدام محدد cart-icon-bubble-custom
### كود مثال للمستوى 2
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **ملاحظة قديمة:** لا تزال دوال رد النداء `window.upcartOnCartLoaded` تعمل ولكنها مهملة وتسجّل تحذيرات في وحدة التحكم. استخدم `upcartSubscribeCartLoaded` لجميع السكربتات الجديدة. لاحظ أن `event.cart` **لا** يحتوي على خاصية `item_count` — تشتق السكربتات أعلاه الإجمالي باستخدام `event.cart.items.reduce((total, item) => total + item.quantity, 0)` وتمرره كـ `itemCount`. النسخ الأقدم من هذه المقاطع التي تُدرج `cart.item_count` تُطلق خطأ `ReferenceError` ولا تحدّث الأيقونة أبدًا بصمت. ***
## المستوى 3 (متقدم)
إذا كان قالبك يستخدم ترميز أيقونة سلة **منفصلًا** لسطح المكتب والجوال، فشغّل منطق التحديث نفسه على محددين بحيث يحصل كل منفذ عرض على HTML والعدّاد الصحيحين. **لا تنسَ** * استبدل **`#cart-icon-bubble-custom-desktop`** و\*\*`#cart-icon-bubble-custom-mobile`\*\* بفئات قالبك. * اختبر بدقة على عرضَي سطح المكتب والجوال. لصق سكربت المستوى 3 في Custom HTML في Upcart مع محددات منفصلة لأيقونة السلة على سطح المكتب والجوال
### كود مثال للمستوى 3
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **ملاحظة قديمة:** لا تزال دوال رد النداء `window.upcartOnCartLoaded` تعمل ولكنها مهملة وتسجّل تحذيرات في وحدة التحكم. استخدم `upcartSubscribeCartLoaded` لجميع السكربتات الجديدة. لاحظ أن `event.cart` **لا** يحتوي على خاصية `item_count` — تشتق السكربتات أعلاه الإجمالي باستخدام `event.cart.items.reduce((total, item) => total + item.quantity, 0)` وتمرره كـ `itemCount`. النسخ الأقدم من هذه المقاطع التي تُدرج `cart.item_count` تُطلق خطأ `ReferenceError` ولا تحدّث الأيقونة أبدًا بصمت. ***
# لا يزال لا يعمل؟
إذا لم يحل أي من هذه المستويات المشكلة، فلا تقلق، فلم تنفد خياراتك بعد! من المرجح أن هذا يعني أن قالبك يتطلب تخصيصًا أكثر تقدمًا. **إليك ما يمكنك فعله بعد ذلك:** * تواصل مع مطور القالب الخاص بك للحصول على المساعدة. * استعن بأحد [خبراء Shopify](https://www.shopify.com/partners/directory) الذي يمكنه إنشاء حل مخصص يناسب متجرك.