نمایش تعداد خرید، بازدید و باقی مانده محصول در انبار (مشابه دیجی‌کالا)

ندا شهسواریآخرین بروزرسانی: 22 اردیبهشت, 1404

0 زمان تقریبی مطالعه 2 دقیقه

حتماً شما هم هنگام بازدید از صفحات محصول در سایت دیجی‌کالا متوجه شده‌اید که در بخش سبد خرید، اطلاعاتی مانند تعداد فروش در هفته گذشته، میزان بازدید از صفحه و تعداد کاربرانی که این محصول را به سبد خرید خود اضافه کرده‌اند نمایش داده می‌شود.

در این مقاله قصد داریم نحوه افزودن چنین قابلیتی را به صفحات محصول فروشگاه وردپرسی خود به شما آموزش دهیم.

نمایش تعداد خرید، بازدید و باقی مانده محصول در انبار (مشابه دیجی‌کالا)

موضوعاتی که در این مقاله به آنها پرداخته خواهد شد، به شرح ذیل است:

چرا باید اطلاعات اضافی را بالای دکمه خرید نمایش دهیم؟

قرار دادن اطلاعاتی مانند فیلد های ذکر شده مزایای زیر را به همراه دارد:

افزایش اعتماد مشتری
ایجاد حس اضطرار برای خرید
تقویت تجربه کاربری
تاثیر مثبت بر سئو فروشگاه

برای اضافه کردن این قابلیت فقط کافی است کد زیر را به فایل Functions.php سایت خود اضافه کنید تا به صورت اتوماتیک فیلد های مد نظر در سایت شما در باکس سبد خرید اضافه شوند.

توجه داشته باشید که کد زیر از تابع Rand برای نمایش تعداد استفاده می کند، پس اعداد نمایش داده شده واقعی نیستند و فقط به صورت تصادفی بین اعدادی که تنظیم شده نمایش داده می شوند، این نوع نمایش باعث می شود که فشار به دیتابیس برای هر بار نمایش دیتا وارد نشود، در ادامه روش نمایش اعداد واقعی را نمایش توضیح داده ایم.

نمایش باکس اطلاعات به صورت تصادفی (غیرواقعی)

کد زیر را درون فایل Functions.php قالب سایت تزریق کنید

function product_dynamic_notice_shortcode() {

ob_start();

$stock_quantity = rand(1, 5);

$views = rand(800, 2000);

$sales = rand(300, 1500);

<style>

#dynamic-product-message {

overflow: hidden;

height: 24px;

position: relative;

}

#product-message-content {

display: inline-block;

transition: transform 0.4s ease, opacity 0.4s ease;

will-change: transform, opacity;

}

.scroll-out {

transform: translateY(-100%);

opacity: 0;

}

.scroll-in {

transform: translateY(100%);

opacity: 0;

}

.scroll-reset {

transform: translateY(0%);

opacity: 1;

}

</style>

<span id="product-message-content">در حال بارگذاری...</span>

</div>

document.addEventListener("DOMContentLoaded", function () {

const messages = [

"🔥 تنها <?php echo $stock_quantity; ?> عدد در انبار باقی مانده",

"👀 +<?php echo $views; ?> بازدید در ۲۴ ساعت اخیر",

"🛒 در سبد خرید <?php echo $sales; ?> نفر"

];

let index = 0;

const msgEl = document.getElementById("product-message-content");

function changeMessage() {

msgEl.classList.remove('scroll-reset');

msgEl.classList.add('scroll-out');

setTimeout(() => {

msgEl.textContent = messages[index];

index = (index + 1) % messages.length;

msgEl.classList.remove('scroll-out');

msgEl.classList.add('scroll-in');

setTimeout(() => {

msgEl.classList.remove('scroll-in');

msgEl.classList.add('scroll-reset');

}, 50);

}, 400);

}

changeMessage();

setInterval(changeMessage, 4000);

});

</script>

<?php

return ob_get_clean();

}

add_shortcode('dynamic_product_notice', 'product_dynamic_notice_shortcode');

add_action( 'woocommerce_before_add_to_cart_button', 'custom_text_with_shortcode_above_cart_button' );

function custom_text_with_shortcode_above_cart_button() {

echo do_shortcode('[dynamic_product_notice]');

}

میزبانی امن و پایدار را با هاست وردپرس وب آیدین تجربه کنید!

هاست وردپرس وب آیدین، یکی از بهترین گزینه‌ها برای سرویس دهی به وب‌سایت‌های وردپرسی است. با استفاده از هاست وردپرس وب آیدین می‌توانید از امکانات پیشرفته، پشتیبانی ۲۴ ساعته، امنیت بالا و سرعت عالی سایت وردپرسی بهره‌مند شوید. همچنین، تمامی هاست های وب آیدین دارای ترافیک نامحدود بوده و با استفاده از این سرویس ها خیالتان از بابت ارتقا پنل نیز راحت خواهد بود. برای کسب اطلاعات بیشتر یا خرید هاست وردپرس به صفحه زیر مراجعه کنید.

خرید هاست وردپرس

نمایش باکس اطلاعات به صورت داینامیک (واقعی)

کد زیر که توسط مجموعه وب آیدین آماده شده نمایش کاملی از تعداد فروش، و فقط تعداد اضافه شده به سبد خرید است که به صورت تصادفی نمایش داده می شود.

اگر بازدید بالایی دارید یا سایت شما از نظر سرعت بهینه سازی نشده است ممکن است این روش چون در هر بار از دیتابیس دیتایی خوانده می شود باعث کندی سایت شما شود، حتما پس از فعال سازی این روش مصرف منابع سایت خود را بررسی کنید.

کد زیر را درون فایل Functions.php قالب سایت تزریق کنید

add_action( 'woocommerce_before_add_to_cart_button', 'dynamic_product_info_box_animated' );

function dynamic_product_info_box_animated() {

global $product;

$sales_count = get_post_meta( $product->get_id(), 'total_sales', true );

$best_price = get_post_meta( $product->get_id(), '_price_7days_min', true );

$in_carts = rand(7, 22); // نمایش نمایشی

// داده‌ها برای نمایش مرحله‌ای

$messages = [];

if ( $sales_count ) {

$messages[] = "📦 تا کنون <strong>{$sales_count}</strong> فروش موفق";

}

if ( $best_price ) {

$messages[] = "💰 بهترین قیمت در هفته گذشته: <strong>" . wc_price($best_price) . "</strong>";

}

$messages[] = "🛒 هم‌اکنون <strong>{$in_carts}</strong> نفر این کالا را در سبد خرید دارند";

// استایل و HTML

<style>

.custom-info-box-animated {

border: 1px solid #ccc;

padding: 15px;

margin-bottom: 15px;

border-radius: 10px;

background: #f9f9f9;

font-size: 15px;

min-height: 24px;

overflow: hidden;

position: relative;

}

.custom-info-text {

display: block;

transition: transform 0.4s ease, opacity 0.4s ease;

will-change: transform, opacity;

}

.scroll-out { transform: translateY(-100%); opacity: 0; }

.scroll-in { transform: translateY(100%); opacity: 0; }

.scroll-reset { transform: translateY(0); opacity: 1; }

</style>

<span id="animated-info-text" class="custom-info-text scroll-reset">در حال بارگذاری...</span>

</div>

document.addEventListener("DOMContentLoaded", function () {

const messages = <?php echo json_encode($messages); ?>;

const el = document.getElementById("animated-info-text");

let index = 0;

function changeMessage() {

el.classList.remove('scroll-reset');

el.classList.add('scroll-out');

setTimeout(() => {

el.innerHTML = messages[index];

index = (index + 1) % messages.length;

el.classList.remove('scroll-out');

el.classList.add('scroll-in');

setTimeout(() => {

el.classList.remove('scroll-in');

el.classList.add('scroll-reset');

}, 50);

}, 400);

}

changeMessage();

setInterval(changeMessage, 4000);

});

</script>

<?php

}

علت اینکه نمایش تعداد اضافه شده به سبد خرید را به صورت رندم تنظیم کرده ایم این است وکامرس تعداد “افزودن به سبد خرید” توسط کاربران را ذخیره نمی‌کند.

نتیجه‌گیری

در این آموزش یاد گرفتیم که چگونه با استفاده از ترکیب PHP، جاوااسکریپت و هوک‌های ووکامرس اطلاعات پویای مربوط به هر محصول مانند تعداد فروش، بازدیدها و تعداد افراد دارای محصول در سبد خرید را به‌صورت مرحله‌ای و همراه با انیمیشن درست بالای دکمه “افزودن به سبد خرید” نمایش دهیم. این ویژگی نه تنها ظاهر حرفه‌ای‌تری به صفحه محصول می‌بخشد بلکه با ایجاد حس اعتماد و فوریت می‌تواند به افزایش نرخ تبدیل (Conversion Rate) فروش کمک کند.

برچسب ها