نظرة عامة

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

خطوات مهمة قبل أن تبدأ!

لإصلاح مشكلة أيقونة السلة، ستحتاج إلى تحديد اسم الفئة (class) الخاص بأيقونة سلتك. كل قالب مختلف، وتضمن هذه الخطوة أن يعمل الكود خصيصًا لمتجرك.

1. استخدم أدوات مطوري Chrome

كل قالب مختلف، لذا ستحتاج إلى استخدام أدوات مطوري Chrome ‏(Inspect) لتحديد اسم فئة أيقونة سلتك.

انقر بزر الفأرة الأيمن على أيقونة السلة في واجهة متجرك واختر Inspect في Google Chrome.
ابحث عن عنصر HTML الخاص بأيقونة سلتك (مثلًا، <span class="cart-count-bubble">).
هل تحتاج إلى مساعدة في استخدام أدوات مطوري Chrome؟ اطّلع على هذا الدليل للحصول على تعليمات خطوة بخطوة.

2. اطلب المساعدة (اختياري)

إذا لم تتمكن من العثور على فئة أيقونة سلتك أو شعرت بأنك عالق، فلا تقلق! لديك خيارات:

تواصل مع مطور القالب الخاص بك: فهو يعرف قالبك بشكل أفضل ويمكنه مساعدتك في العثور على الفئة الصحيحة.
استعن بأحد خبراء Shopify: إذا كنت بحاجة إلى دعم إضافي، فلدى Shopify دليل بخبراء موثوقين يمكنهم المساعدة. اعثر على خبير Shopify هنا.

🚧 إخلاء مسؤولية عن الكود المخصص

الكود المثال المقدم أدناه هو مجرد قالب، لن يعمل إذا نسخته ولصقته مباشرة. يجب عليك استبدال اسم الفئة النائب (مثلًا .cart-count-bubble > span) باسم الفئة المحدد لأيقونة سلتك.

الإصلاح خطوة بخطوة

قسّمنا هذه العملية إلى ثلاثة مستويات من الإصلاحات، بدءًا من الحل الأبسط (المستوى 1). يبني كل مستوى على المستوى السابق؛ جرّب المستوى 1 أولًا، ثم انتقل إلى المستوى 2 أو 3 فقط عند الحاجة.

الخطوة 1: أضف كودًا مخصصًا في Upcart

أولًا، نظرًا لأننا سنحتاج إلى إضافة بعض كود HTML المخصص في محرر Upcart، فلنجهّز ذلك القسم:

انتقل إلى Upcart Editor > Settings، ثم افتح تبويب Custom HTML (خلف More settings إذا لم يتسع له صف التبويبات).
اضبط الموقع على Scripts (Before Load).
الصق الكود المعدّل هنا (سنقدم أمثلة لكل مستوى أدناه).

إليك كيف يبدو ذلك:

إعدادات 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

<script>  
window.upcartSubscribeCartLoaded((event) => {  
    const countEl = document.querySelector('.cart-count-bubble > span');  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    countEl.innerText = itemCount;  
});  
</script>

المستوى 2 (متوسط)

إذا لم يعمل المستوى 1، فقد يستبدل قالبك كامل HTML الخاص بأيقونة السلة عند تغيّر العدّاد. تعيد هذه النسخة بناء ترميز الأيقونة لحالتَي السلة الفارغة وغير الفارغة بحيث يبقى العدّاد والأيقونة متزامنين. لا تنسَ

استبدل #cart-icon-bubble-custom بمحدد غلاف أيقونة السلة الخاص بقالبك.
اختبره بعد الحفظ.

كود مثال للمستوى 2

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    const iconWrapperEl = document.querySelector('#cart-icon-bubble-custom');  
    if (itemCount === 0) {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

ملاحظة قديمة: لا تزال دوال رد النداء 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

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    // Desktop  
    const desktopIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-desktop');  
    if (itemCount === 0) {  
        desktopIconWrapperEl.innerHTML = `<span>Cart</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span>`;  
    } else {  
        desktopIconWrapperEl.innerHTML = `<span>Cart (${itemCount})</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span>`;  
    }  
  
    // Mobile  
    const mobileIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-mobile');  
    if (itemCount === 0) {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

لا يزال لا يعمل؟

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

تواصل مع مطور القالب الخاص بك للحصول على المساعدة.
استعن بأحد خبراء Shopify الذي يمكنه إنشاء حل مخصص يناسب متجرك.

البدء

وحدات السلة

إعدادات السلة

زر السلة الثابت

Multicart

التخصيصات

التحليلات

التكاملات والتوافق

الفوترة والحساب

استكشاف الأخطاء وإصلاحها

كمية/عدّاد أيقونة السلة لا يتحدّث

نظرة عامة

خطوات مهمة قبل أن تبدأ!

1. استخدم أدوات مطوري Chrome

2. اطلب المساعدة (اختياري)

🚧 إخلاء مسؤولية عن الكود المخصص

الإصلاح خطوة بخطوة

الخطوة 1: أضف كودًا مخصصًا في Upcart

الخطوة 2: طبّق الإصلاح حسب المستوى

المستوى 1 (أساسي)

كود مثال للمستوى 1

المستوى 2 (متوسط)

كود مثال للمستوى 2

المستوى 3 (متقدم)

كود مثال للمستوى 3

لا يزال لا يعمل؟

​نظرة عامة

​خطوات مهمة قبل أن تبدأ!

​1. استخدم أدوات مطوري Chrome

​2. اطلب المساعدة (اختياري)

​🚧 إخلاء مسؤولية عن الكود المخصص

​الإصلاح خطوة بخطوة

​الخطوة 1: أضف كودًا مخصصًا في Upcart

​الخطوة 2: طبّق الإصلاح حسب المستوى

​المستوى 1 (أساسي)

​كود مثال للمستوى 1

​المستوى 2 (متوسط)

​كود مثال للمستوى 2

​المستوى 3 (متقدم)

​كود مثال للمستوى 3

​لا يزال لا يعمل؟

نظرة عامة

خطوات مهمة قبل أن تبدأ!

1. استخدم أدوات مطوري Chrome

2. اطلب المساعدة (اختياري)

🚧 إخلاء مسؤولية عن الكود المخصص

الإصلاح خطوة بخطوة

الخطوة 1: أضف كودًا مخصصًا في Upcart

الخطوة 2: طبّق الإصلاح حسب المستوى

المستوى 1 (أساسي)

كود مثال للمستوى 1

المستوى 2 (متوسط)

كود مثال للمستوى 2

المستوى 3 (متقدم)

كود مثال للمستوى 3

لا يزال لا يعمل؟