ایجاد شورت‌کد ریسپانسیو برای نمایش قیمت‌های قبلی محصول

 شورت کد قیمت‌های قبلی محصول : در این مقاله، قصد داریم نحوه ایجاد یک شورت‌کد وردپرس برای نمایش قیمت‌های قبلی محصولات را به صورت ریسپانسیو توضیح دهیم. این لیست در قالب یک پاپ‌آپ قابل مشاهده است که با کلیک روی دکمه‌ای نمایش داده می‌شود.

مراحل ایجاد شورت‌کد برای نمایش لیست قیمت‌های قبلی

1. ایجاد شورت‌کد در فایل functions.php

ابتدا باید شورت‌کد مورد نظر خود را در فایل functions.php قالب وردپرس خود ایجاد کنید. این شورت‌کد اطلاعات قیمت‌های قبلی محصولات را از متادیتا (metadata) محصول دریافت کرده و آنها را در یک جدول نمایش می‌دهد. جدول به گونه‌ای طراحی شده است که ریسپانسیو باشد و در نمایشگرهای موبایل نیز به‌درستی نمایش داده شود.

در اینجا کدی که باید به فایل functions.php خود اضافه کنید را آورده‌ایم:


function display_previous_prices_shortcode($atts) {
global $post>
$previous_prices = get_post_meta($post->ID, '_previous_prices', true);
if (!is_array($previous_prices) || empty($previous_prices)) {
return '<p>قیمت قبلی موجود نیست.</p>';
}
$items_per_page = 20;
$total_pages = ceil(count($previous_prices) / $items_per_page);
$current_page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$output = '<button id="previous-prices-btn" style="padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer;">';
$output .= '<i class="fa-solid fa-shop" style="margin-right: 5px;"></i> لیست قیمت‌ها</button>';
$output .= '<div id="previous-prices-popup" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius: 10px; z-index: 1000; max-width: 90%; overflow-y: auto;">';
$output .= '<h2>لیست قیمت‌های قبلی</h2>';
$output .= '<div style="overflow-x: auto;">';
$output .= '<table style="width: 100%; border-collapse: collapse; text-align: right; direction: rtl;">';
$output .= '<thead><tr><th style="border-bottom: 1px solid #ddd; padding: 8px;">ردیف</th><th style="border-bottom: 1px solid #ddd; padding: 8px;">تاریخ</th><th style="border-bottom: 1px solid #ddd; padding: 8px;">قیمت</th></tr></thead>';
$output .= '<tbody>';
$start_index = ($current_page - 1) * $items_per_page;
$end_index = min($start_index + $items_per_page, count($previous_prices));
for ($i = $start_index; $i < $end_index; $i++) {
$price = $previous_prices[$i];
$output .= '<tr>';
$output .= '<td style="border-bottom: 1px solid #ddd; padding: 8px;">' . ($i + 1) . '</td>';
$output .= '<td style="border-bottom: 1px solid #ddd; padding: 8px;">' . date_i18n('Y-m-d', strtotime($price['date'])) . '</td>';
$output .= '<td style="border-bottom: 1px solid #ddd; padding: 8px;">' . wc_price($price['price']) . '</td>';
$output .= '</tr>';
}
$output .= '</tbody></table>';
$output .= '</div>'; // پایان بخش overflow-x:auto
if ($total_pages > 1) {
$output .= '<div style="text-align: center; margin-top: 20px;">';
for ($i = 1; $i <= $total_pages; $i++) {
if ($i == $current_page) {
$output .= '<span style="margin: 0 5px; font-weight: bold;">' . $i . '</span>';
} else {
$output .= '<a href="' . esc_url(add_query_arg('page', $i)) . '" style="margin: 0 5px;">' . $i . '</a>';
}
}
$output .= '</div>';
}
$output .= '<button id="close-popup-btn" style="padding: 10px 20px; background-color: #dc3545; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin-top: 20px;">بستن</button>';
$output .= '</div>';
$output .= '<script>
document.getElementById("previous-prices-btn").addEventListener("click", function() {
document.getElementById("previous-prices-popup").style.display = "block";
});
document.getElementById("close-popup-btn").addEventListener("click", function() {
document.getElementById("previous-prices-popup").style.display = "none";
});
window.addEventListener("click", function(event) {
var popup = document.getElementById("previous-prices-popup");
if (event.target == popup) {
popup.style.display = "none";
}
});
</script>';
return $output;
}
add_shortcode('previous_prices', 'display_previous_prices_shortcode');

2. ریسپانسیو کردن جدول

برای اطمینان از اینکه جدول در نمایشگرهای کوچک‌تر (مثل موبایل) به‌درستی نمایش داده شود، از استایل‌های CSS استفاده کرده‌ایم. این استایل‌ها شامل ویژگی overflow-x: auto هستند که اجازه می‌دهد جدول به صورت اسکرولی (افقی) نمایش داده شود و از بهم‌ریختگی جلوگیری شود.

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

3. افزودن آیکون به دکمه

برای جذاب‌تر کردن دکمه، از آیکون Font Awesome استفاده شده است. این آیکون به کمک کلاس CSS مناسب در داخل دکمه قرار گرفته و با استفاده از فضای داخلی دکمه (padding و margin) مرتب شده است.

4. نحوه استفاده از شورت‌کد

بعد از افزودن این کد به فایل functions.php قالب وردپرس خود، کافی است شورت‌کد “previous_prices” را در صفحه محصول مورد نظر خود قرار دهید. با کلیک بر روی دکمه “لیست قیمت‌ها”، یک پاپ‌آپ باز می‌شود که لیست قیمت‌های قبلی محصول را به‌صورت ریسپانسیو نمایش می‌دهد.

کد صحیح به این صورت می باشد

نتیجه‌گیری

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

اضافه کردن این شورت‌کد به قالب وردپرس شما، باعث بهبود تجربه کاربری (UX) و ارتقاء قابلیت‌های سایت شما خواهد شد.

منبع : خودم