حسّن متجر WooCommerce باستخدام تأثيرات صوتية للسلة والطلب

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

في هذا المقال، سنرشدك خلال كيفية تنفيذ تأثيرات صوتية لمختلف إجراءات WooCommerce باستخدام JavaScript و WordPress hooks.

إضافة تأثيرات صوتية لتفاعلات السلة في WooCommerce

لنبدأ بإضافة تأثيرات صوتية للتفاعلات المتعلقة بإضافة العناصر إلى السلة. سواء كان عملاؤك يزيدون من كمية منتج أو ينقرون على زر “أضف إلى السلة”، يمكنك توفير رد فعل فوري من خلال الصوت.

// إضافة تأثيرات صوتية لإجراءات WooCommerce
function effect() {?>
    <script type="text/javascript">
        $(document).ready(function() {
 
          var audio  = new Audio('https://example.com/path/to/sound1.mp3');
          var audio2 = new Audio('https://example.com/path/to/sound2.mp3')
 
          $(".plus,.add_to_cart_button").mousedown(function() {
            audio2.load();
            audio2.play();
          });
 
          $(".minus").mouseup(function() {
            audio.load();
            audio.play();
          });
        });
    </script>
<?php
}
add_action('wp_head','effect');

في هذا المقطع، قمنا بتعريف كائني صوت، audio و audio2، يشير كل منهما إلى ملف صوت مختلف. يتم تشغيل الأصوات عندما يتفاعل المستخدمون مع أزرار الكمية (plus و minus) وزر “أضف إلى السلة”.

تأكيد بالصوت لوضع الطلب

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

// تأثير صوتي عند وضع الطلب
function ordersound() {
if ( is_checkout() && !empty( is_wc_endpoint_url('order-received') ) ) {?>
    <script type="text/javascript">
        $(window ).load(function() {
        var audio2 = new Audio('https://example.com/path/to/order-sound.mp3')
        audio2.load();
        audio2.play();});	
    </script>
<?php
}}
add_action('wp_head','ordersound');

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

الختام

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

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