كيفية تعديل تفاصيل عربة التسوق على صفحة الخروج من WooCommerce

يعرف معظمكم أن WooCommerce لا يسمح للعملاء بتحديث سلة التسوق من صفحة الخروج. مما يعني أنه لا يمكنك تغيير الكمية أو حذف المنتج من صفحة الخروج. يحتاج العميل إلى العودة إلى صفحة عربة التسوق ، وتحديث العربة ، ثم الانتقال إلى صفحة الخروج مرة أخرى. يؤدي هذا إلى اضطرار العملاء إلى ملء جميع المعلومات المطلوبة مرة أخرى. هذا أمر محبط بعض الشيء للعملاء ، خاصة للمستخدمين الضيوف (وهي غالبية كبيرة).

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

أولاً ، دعنا نلقي نظرة على جدول تفاصيل سلة التسوق في صفحة WooCommerce Checkout:

هنا ، لا يمكن للعميل تعديل كمية المنتج أو حذفه. لذلك نريد توفير وظيفة تغيير الكمية وحذف المنتج دون أن يغادر عميلك صفحة الخروج.

هيا نبدأ

إذا كنت تريد تخطي هذا الشرح ، وبدلاً من ذلك تريد تنفيذ الوظيفة في متجرك ، فيمكنك تنزيل المكون الإضافي الذي قمت بإنشائه.

1. إجراء تغييرات واجهة المستخدم في قسم عربة التسوق بصفحة الخروج

نحتاج إلى تعديل عمود "المنتج" في جدول "طلبك". نحتاج إلى إضافة رمز "حذف" و "محدد الكمية" لكل عنصر في سلة التسوق.

لتحقيق ذلك ، أعطت WooCommerce مرشحًا يسمح لك بتعديل صف اسم المنتج لكل عنصر سلة التسوق: woocommerce_cart_item_name .

الكمية المحددة المعروضة في جدول طلبك قابلة للتعديل أيضًا باستخدام عامل تصفية WooCommerce آخر: woocommerce_checkout_cart_item_quantity .

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

أولاً ، لا نحتاج إلى الكمية الموضحة لكل عنصر في جدول طلبك. لذلك سنستخدم عامل التصفية ونعيد سلسلة فارغة بحيث تحل محل بيانات WooCommerce.

بعد ذلك ، سنقوم بتعديل صف اسم المنتج باستخدام عامل التصفية woocommerce_cart_item_name وإضافة حقل الكمية وأيقونة الحذف.

نحن هنا نستخدم وظيفة is_checkout () للتأكد من أننا نقوم بتطبيق التغييرات على صفحة الخروج فقط. لقد قسمته إلى 3 خطوات كما هو مذكور في مقتطف الشفرة أعلاه.

الخطوة 1: إضافة رمز الحذف
هنا في هذه الخطوة ، سنضيف أيقونة حذف لكل عنصر في سلة التسوق. هذا هو نفس الرمز المستخدم في عربة WooCommerce.

هنا ، استخدمنا وظيفة WooCommerce get_remove_url () . نحتاج إلى تمرير $ cart_key لكل عنصر من عناصر سلة التسوق. لذا ستعيد وظيفة get_remove_url () عنوان URL فريدًا لحذف كل عنصر من عناصر سلة التسوق.

الخطوة 2: أضف اسم المنتج
نظرًا لأننا نقوم بتعديل صف اسم المنتج ، نحتاج أيضًا إلى إضافة اسم المنتج في الصف إلى جانب الحقول الجديدة. سوف نحصل على اسم المنتج من المرشح نفسه ، والذي يتم تمريره باعتباره الوسيطة الأولى. إنه $ product_title في حالتنا.

الخطوة 3: أضف محدد الكمية
أخيرًا ، سنضيف محدد الكمية. هنا سوف نستخدم وظيفة WooCommerce woocommerce_quantity_input () .

نحتاج إلى إعطاء المعلمات الأربعة للوظيفة "input_name" ، "input_value" ، "max_value" ، "min_value".

• input_name: سيحتوي على المصفوفة التي تحمل اسم "عربة التسوق" ، وفي هذا تحتاج إلى تمرير مفتاح عنصر سلة التسوق والكمية.
• input_value: سيحتوي على الكمية المختارة من المنتج.
• max_value: سيكون الحد الأقصى لرقم المخزون للمنتج.
• min_value: ستكون القيمة الدنيا لمحدد الكمية.

بمجرد الانتهاء من جميع الخطوات المذكورة أعلاه ، سيعرض الآن زر الحذف ومحدد الكمية في جدول طلبك في صفحة الخروج.

هنا ، لدينا شرط واحد إذا (is_checkout ()) { condition. إنه ضروري للأسباب المذكورة أدناه.

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

2. تحديث العربة عن طريق استدعاء Ajax

لن تنجح إضافة هذا كثيرًا ، فنحن بحاجة إلى التأكد عندما يغير العميل الكمية التي ستنعكس على إجمالي سلة التسوق.

تغيير الكمية

نحتاج إلى استدعاء Ajax لتغيير إجمالي سلة التسوق. لذلك عندما يغير العميل الكمية ، نحتاج إلى اتخاذ إجراء وتغيير إجمالي سلة التسوق.

الآن ، سنضع ملف "add_quantity.js" في قائمة تذييل الموقع وسنتأكد من تضمينه عندما نكون في صفحة الخروج.

نحتاج الآن إلى إضافة الوظيفة في ملف Javascript ، والتي ستستدعي ajax لتغيير إجمالي سلة التسوق.

أعلاه ، javascript سوف تستدعي ajax حيث سنقوم بتمرير بيانات نموذج الخروج المعدل. لكنه سيتصل عندما نضغط على أيقونة الكمية. لذلك سوف تحتوي على القيمة المعدلة للكمية.

الآن ، نحتاج إلى إضافة وظيفة ajax ، والتي ستغير إجمالي سلة التسوق وفقًا للكمية المعدلة.

عندما نقوم بتعديل الكمية في صفحة الخروج ، سيتم استدعاء الوظيفة المذكورة أعلاه وستغير إجمالي سلة التسوق. لقد استخدمنا وظائف WooCommerce في وظائفنا.

لقد استخدمنا وظائف "set_quantity ()" و "calculate_totals ()" و "woocommerce_cart_totals ()" لتعديل إجمالي سلة التسوق وعرضها في جدول طلبك في صفحة الخروج.

set_quantity () : ستحدد هذه الوظيفة الكمية المعدلة في عربة التسوق.

لقد أرسلنا البيانات من وظيفة جافا سكريبت والتي سيكون لها قيمة الكمية المعدلة ، لذلك سنستخدم هذه القيمة المعدلة ونضعها في سلة التسوق.

calculate_totals () : باستخدام هذه الوظيفة ، نطلب منك حساب إجمالي سلة التسوق مرة أخرى.

woocommerce_cart_totals () : تُستخدم هذه الوظيفة لعرض عربة التسوق المعدلة.

بمجرد الانتهاء من العمليات الحسابية المذكورة أعلاه ، ستعود مرة أخرى إلى جافا سكريبت التي أطلقنا عليها اسم دالة أجاكس. استجابة لهذه الوظيفة ، سنقوم "بتشغيل" وظيفة "update_checkout" والتي بدورها ستقوم بتعديل سلة التسوق وعرضها للمستخدم.

نحتاج إلى CSS للزر "حذف" لجدول طلبك. لذلك يجب أن يبدو مثل زر حذف عربة WooCommerce. لذلك نحن بحاجة إلى إضافة CSS لها. يمكنك إضافة CSS في تذييل موقع الويب الخاص بك.

بمجرد إضافته ، نحتاج إلى إعطاء CSS لزر الحذف في ملف CSS. تم عرض CSS أدناه.

لذلك ، نحن جاهزون بالوظيفة حيث يمكننا تعديل الكمية على صفحة الخروج من WooCommerce.

بعد تنفيذ ما سبق ، هكذا سيبدو جدول طلبك في صفحة الخروج:

سيضيف محدد الكمية وأيقونة الحذف لكل عنصر في جدول طلبك في صفحة الخروج.

لقد قمت ببناء هذا كمكوِّن إضافي ، سُمي باسم Change Quantity on Checkout for WooCommerce والذي تم إصداره في سبتمبر 2016. يتم استخدامه في أكثر من 400 متجر WooCommerce. إذا كنت تستخدم هذا المكون الإضافي بالفعل في متجر WooCommerce ، فسأكون ممتنًا إذا كان بإمكانك تخصيص بعض الوقت لمراجعة المكون الإضافي.

إذا كان لديك أي ملاحظات ، فيمكنك إخباري في التعليقات أدناه أو يمكنك النشر على منتدى دعم المكون الإضافي.