دليلك الشامل: إضافة نسبة الخصم (Discount Badge) تلقائياً في متجر يوكان YouCan لرفع المبيعات
في عالم التجارة الإلكترونية، المنافسة تشتد يوماً بعد يوم، ولا يكفي فقط أن تمتلك منتجاً جيداً أو تقدم تخفيضاً للزبون، بل الأهم هو الطريقة التي تعرض بها هذا التخفيض. هل تساءلت يوماً لماذا تحقق المتاجر الإلكترونية الكبرى والعلامات التجارية الشهيرة مبيعات ضخمة في مواسم التخفيضات؟ السر يكمن في التفاصيل الصغيرة التي تؤثر على العقل الباطن للمشتري، وعلى رأسها إظهار “النسبة المئوية للخصم” (مثلاً: خصم 30%).
الزبون ينجذب نفسياً للنسبة المئوية البارزة أكثر بكثير من مجرد رؤية السعر القديم مشطوباً بخط رفيع. في منصة يوكان (YouCan)، هذه الميزة غير مفعلة بشكل افتراضي. لكن في هذا المقال، سأشارك معك حلاً برمجياً ذكياً وسريعاً سيقوم بحساب وإظهار نسبة الخصم تلقائياً فوق صور منتجاتك، مما سيضاعف من نسبة التحويل (Conversion Rate) في متجرك بشكل ملحوظ.
سيكولوجية التسعير: لماذا تحتاج إلى ملصق الخصم في متجرك؟
قبل أن نمر إلى طريقة التركيب، يجب أن تدرك التأثير القوي لهذه الإضافة على نفسية المشتري. التسويق الناجح يعتمد على فهم سلوك المستهلك، وإليك كيف يؤثر ملصق التخفيض على قرارات الزوار:
- خلق الشعور بالفرصة والاستعجال (FOMO): عندما يرى الزائر عبارة “خصم 40%” بارزة بوضوح فوق صورة المنتج، يتولد لديه شعور فوري بأن هناك فرصة استثنائية يجب اقتناصها قبل فوات الأوان أو قبل انتهاء الكمية.
- زيادة نسبة النقر (CTR): أثبتت الدراسات في مجال التجارة الإلكترونية أن المنتجات التي تحتوي على إشارة واضحة للخصم المئوي تحصل على نقرات أعلى بكثير مقارنة بالمنتجات العادية التي تكتفي بشطب السعر فقط. العين البشرية تنجذب دائماً للعناصر البارزة.
- تسهيل عملية اتخاذ القرار: الزبون لا يحب القيام بعمليات حسابية معقدة ليعرف كم سيوفر. إعطاؤه النسبة المئوية الجاهزة يسهل عليه إدراك قيمة العرض فوراً.
- حساب رياضي دقيق وتلقائي: بفضل هذه الإضافة، لن تحتاج إلى حساب نسبة التخفيض لكل منتج بشكل يدوي وإضافتها كصورة. السكريبت الذي سنستخدمه يقرأ السعر القديم والسعر الجديد، ويستخرج النسبة المئوية الدقيقة تلقائياً ويعرضها بشكل احترافي.
الأخطاء الشائعة التي يقع فيها المبتدئون في التخفيضات
العديد من أصحاب المتاجر المبتدئين يقومون بتعديل صور المنتجات عبر برامج التصميم لإضافة ملصقات التخفيض يدوياً. هذا خطأ فادح لعدة أسباب: أولاً، يستهلك الكثير من الوقت والجهد، خاصة إذا كان المتجر يحتوي على عشرات المنتجات. ثانياً، إذا أردت تغيير السعر أو التخفيض مستقبلاً، ستضطر لإعادة تصميم الصورة من جديد. هنا تبرز قوة الحلول التلقائية، حيث يتكلف النظام بكل شيء بمجرد إدخالك للسعر في لوحة التحكم.
كيفية تركيب الإضافة في متجر YouCan خطوة بخطوة
<script>document.addEventListener("DOMContentLoaded",()=>{let e=(e,t,r)=>{if(e&&t&&r){let l=e=>e?parseFloat((e.textContent||e.innerText).replace(/[^0-9.]/g,"")):NaN,i=l(e),o=l(t);if(!isNaN(i)&&!isNaN(o)&&i>o&&i>0){let n=Math.round((i-o)/i*100);if(n>0){let c=r.querySelector(".discount-badge");if(!c){(c=document.createElement("div")).className="discount-badge",c.textContent=`خصم ${n}%`;let a=window.getComputedStyle(r).position;("static"===a||""===a)&&(r.style.position="relative"),r.appendChild(c)}}}}},t=()=>{let t=document.querySelector(".single-product");if(t){let r=t.querySelector(".single-price .before .value, .single-price .before.currency-value .value, .before"),l=t.querySelector(".single-price .after .value, .single-price .after.currency-value .value, .after"),i=null;if(!(i=t.querySelector(".preview")||t.querySelector(".product-preview, .product-image, .single-product-image, .product-gallery, .preview-wrapper"))){let o=t.querySelector(".slick-track");o&&(i=o.closest(".preview")||o.parentElement)}if(!i){let n=t.querySelectorAll("img");if(n.length>0){let c=n[0].parentElement;for(;c&&!["preview","product-preview","preview-wrapper"].some(e=>c.classList.contains(e))&&c!==t;)c=c.parentElement;i=c||n[0].parentElement}}if(i){let a=window.getComputedStyle(i).position;("static"===a||""===a)&&(i.style.position="relative")}r&&l&&i&&e(r,l,i)}};document.querySelectorAll(".product-wrapper").forEach(t=>{let r=t.querySelector(".single-price .before.currency-value .value, .before .value"),l=t.querySelector(".single-price .after.currency-value .value, .after .value"),i=t.querySelector(".product-preview .preview")||t.querySelector(".preview");if(!i){let o=t.querySelector(".slick-track");o&&(i=o.closest(".preview")||o.parentElement)}if(!i){let n=t.querySelectorAll("img");if(n.length>0){let c=n[0].parentElement;for(;c&&c!==t&&!["preview","product-preview"].some(e=>c.classList.contains(e));)c=c.parentElement;i=c||n[0].parentElement;let a=window.getComputedStyle(i).position;("static"===a||""===a)&&(i.style.position="relative")}}r&&l&&i&&e(r,l,i)});document.querySelectorAll(".product-item").forEach(t=>{let r=t.querySelector(".product-price .currency-value.before .value, .before .value"),l=t.querySelector(".product-price .currency-value.after .value, .after .value"),i=t.querySelector(".product-thumbnail")||t.querySelector(".preview");if(!i){let o=t.querySelector(".slick-track");o&&(i=o.closest(".preview")||o.parentElement)}if(!i){let n=t.querySelectorAll("img");if(n.length>0){let c=n[0].parentElement;for(;c&&c!==t&&!["preview","product-thumbnail"].some(e=>c.classList.contains(e));)c=c.parentElement;i=c||n[0].parentElement;let a=window.getComputedStyle(i).position;("static"===a||""===a)&&(i.style.position="relative")}}r&&l&&i&&e(r,l,i)}),t();document.querySelectorAll(".before:not(.discount-badge)").forEach(t=>{let r=t.parentElement,l=r.querySelector(".after");if(!l&&r.parentElement&&(l=r.parentElement.querySelector(".after")),l){let i=t,o=null;for(;i&&!o;)if(i=i.parentElement){let n=i.querySelector("img");if(n){let c=n.parentElement;for(;c&&!["preview","product-preview","product-thumbnail","product-gallery"].some(e=>c.classList.contains(e))&&c!==document.body;)c=c.parentElement;o=c||n.parentElement;let a=window.getComputedStyle(o).position;("static"===a||""===a)&&(o.style.position="relative")}if(!o){let p=i.querySelector(".preview");if(p){o=p;let u=window.getComputedStyle(o).position;("static"===u||""===u)&&(o.style.position="relative")}}}o&&e(t,l,o)}})});</script><style>.discount-badge{position:absolute;top:15px;left:-35px;width:120px;text-align:center;background-color:#FF3333 !important;color:#ffffff !important;padding:3px 0;font-size:12px;font-weight:700;text-transform:uppercase;transform:rotate(-45deg);z-index:1;box-shadow:0 2px 4px rgba(0,0,0,0.3);pointer-events:none}@media only screen and (max-width:768px){.discount-badge{top:25px;left:-40px;width:160px;font-size:15px;font-weight:900;padding:6px 0;z-index:1}}</style>الطريقة سهلة جداً، آمنة تماماً على متجرك، ولا تتطلب منك أي خبرة مسبقة في البرمجة. فقط اتبع الخطوات التالية بحذر لضمان عمل الإضافة بشكل صحيح:
- قم بتسجيل الدخول إلى لوحة تحكم متجرك في منصة يوكان.
- من القائمة الجانبية، توجه إلى قسم الإعدادات (Settings).
- انقر على أونلاين (Online) ثم اختر CSS & JavaScript.
- الآن، سنقوم بوضع الأكواد المرفقة (ستجدها أسفل هذا المقال) في أماكنها الصحيحة:
الخطوة الأولى: إضافة كود التصميم المخصص قم بنسخ الكود الأول المخصص للتصميم من الأسفل، والصقه مباشرة في الخانة المخصصة لـ Custom CSS. هذا الكود هو المسؤول عن إظهار الملصق الجذاب وتحديد موقعه فوق الصورة ليكون متجاوباً مع جميع الشاشات (الحواسيب والهواتف).
الخطوة الثانية: إضافة كود التشغيل (السكريبت) قم بنسخ الكود الثاني، وانزل إلى أسفل الصفحة في لوحة التحكم حتى تجد خانة إعدادات التذييل (Footer). قم بلصق الكود هناك. هذا الجزء هو “العقل المدبر” الذي يقرأ الأسعار ويحسب النسبة المئوية بدقة.
- بعد الانتهاء من لصق الأكواد، لا تنسَ الضغط على زر حفظ (Save) في أعلى أو أسفل الصفحة.
قم الآن بتحديث صفحة متجرك من هاتفك أو حاسوبك، وستلاحظ ظهور ملصق الخصم الاحترافي فوق صور جميع المنتجات التي قمت بعمل تخفيض على سعرها الأصلي!
(ملاحظة: ستجد الملفات النصية التي تحتوي على الأكواد جاهزة للتحميل والنسخ في الرابط أسفل هذا المقال/الفيديو).
أسئلة شائعة (FAQ) حول إضافة نسبة الخصم
هل هذه الإضافة تبطئ من سرعة المتجر؟ لا، إطلاقاً. الأكواد المستخدمة خفيفة جداً ومكتوبة بلغة نقية، ويتم تنفيذها في أجزاء من الثانية دون أي تأثير يذكر على سرعة تحميل صفحات متجرك.
هل ستظهر نسبة الخصم على المنتجات التي ليس عليها تخفيض؟ السكريبت ذكي جداً، فهو يقوم بمقارنة السعر الأصلي وسعر التخفيض. إذا لم يكن هناك فرق (أي لا يوجد تخفيض)، فلن يظهر الملصق أبداً.
هل هذه الطريقة آمنة ومتوافقة مع تحديثات يوكان؟ نعم، هذه الطريقة تعتمد على قراءة العناصر الأساسية في واجهة المتجر وهي متوافقة تماماً مع القوالب الافتراضية لمنصة يوكان.
خلاصة
النجاح في التجارة الإلكترونية يعتمد على التفاصيل الصغيرة التي تحسن من تجربة المستخدم وتزرع الثقة في نفس الزبون لتشجيعه على الشراء. إضافة لمسات احترافية وتسويقية لمتجرك سيجعلك تتفوق على منافسيك بكل سهولة وتزيد من أرباحك.
هل واجهتك أي صعوبة في التركيب؟ ندعوك لمشاهدة التطبيق العملي خطوة بخطوة على قناتنا Tech Fikra، كما يمكنك ترك تعليق أسفل هذا المقال وسنقوم بمساعدتك فوراً. لا تنسَ تصفح باقي أقسام المدونة للمزيد من الأدوات والحلول الحصرية لمتجرك!
