نکات فنی برای ساخت یک ابزار “محاسبهگر هزینه سفارش عمده” در وبسایت.
- محمد یاسر گنجی دوست
- No Comments
راهنمای ساخت محاسبهگر هزینه سفارش عمده در وردپرس: ابزار دریافت قیمت آنی (خداحافظی با تماسهای تکراری)
در بازار عمدهفروشی خشکبار، مشتریان مدام میپرسند: “آقا اگر ۵۰۰ کیلو پسته بخوام با گونی، چقدر درمیاد؟ اگه ۱ تن بخوام با کارتن چقدر؟” پاسخ دادن دستی به این سوالات وقتگیر است و مشتری هم دوست ندارد منتظر بماند.
راه حل چیست؟ یک ابزار محاسبهگر آنلاین هوشمند. این ابزار به مشتری اجازه میدهد وزن، نوع بستهبندی و شهر مقصد را انتخاب کند و بلافاصله “قیمت نهایی تخمین زده شده” را ببیند. این کار نه تنها تجربه کاربری (UX) را ارتقا میدهد، بلکه سایت شما را به عنوان یک مرجع حرفهای معرفی میکند.
برای تو که طراح وب هستی، ساخت این ابزار دو راه دارد:
-
راه سریع (No-Code): استفاده از افزونههای فرمساز پیشرفته.
-
راه سفارشی (Custom Code): نوشتن اسکریپت اختصاصی برای انعطافپذیری کامل.
در این مقاله، ما منطقِ ریاضی (Algorithm) پشت این محاسبهگر را بررسی میکنیم و سپس روش پیادهسازی فنی آن را در وردپرس آموزش میدهیم.
فاز اول: طراحی الگوریتم (ریاضیات پشت پرده)
قبل از کدنویسی، باید فرمولها را روی کاغذ بنویسیم. در خشکبار عمده، قیمتگذاری معمولاً به این صورت است:
۱. قیمت محصول (Product Price)
از مدل پلکانی (Tiered) استفاده میشود:
-
۱ تا ۵۰ کیلو: کیلویی ۵۰۰,۰۰۰ تومان (قیمت خرده).
-
۵۱ تا ۵۰۰ کیلو: کیلویی ۴۵۰,۰۰۰ تومان (۱۰٪ تخفیف).
-
بالای ۵۰۰ کیلو: کیلویی ۴۰۰,۰۰۰ تومان (۲۰٪ تخفیف).
۲. هزینه بستهبندی (Packaging Cost)
-
گونی (Sack): رایگان یا ارزان (مثلاً کیلویی ۱۰۰۰ تومان سربار).
-
کارتن ۱۰ کیلویی: هزینه متوسط (مثلاً کیلویی ۳۰۰۰ تومان سربار).
-
بستهبندی وکیوم ۱ کیلویی: هزینه بالا (مثلاً کیلویی ۱۵۰۰۰ تومان سربار).
۳. هزینه حملونقل (Shipping)
این پیچیدهترین بخش است.
-
باربری معمولی: بر اساس “تعداد گونی” یا “وزن کل”.
-
وانت دربست: بر اساس “کیلومتر فاصله”.
فرمول نهایی: قیمت کل = (وزن × قیمت پلکانی محصول) + (وزن × هزینه بستهبندی) + (هزینه حمل تخمینی)
فاز دوم: روش پلاگینمحور (استفاده از Gravity Forms)
اگر میخواهید سریع و بدون کدنویسی سنگین کار کنید، Gravity Forms بهترین گزینه است.
گام ۱: ایجاد فیلدها
-
یک فیلد “دراپداون” برای انتخاب محصول (پسته، بادام، انجیر) بسازید و برای هر گزینه، قیمت پایه را در بخش Values وارد کنید.
-
یک فیلد “Number” برای وزن (کیلوگرم) بسازید.
-
یک فیلد “Radio Button” برای نوع بستهبندی (گونی، کارتن) بسازید.
گام ۲: منطق قیمتگذاری (Conditional Pricing)
گرویتی فرمز به تنهایی قیمت پلکانی را پشتیبانی نمیکند. شما باید از افزودنیهایی مثل Perks (GP Conditional Pricing) استفاده کنید یا از منطق شرطی فیلدها استفاده کنید:
-
۳ فیلد “Product” مخفی بسازید (یکی برای قیمت کم، یکی متوسط، یکی زیاد).
-
با Conditional Logic بگویید: “اگر وزن زیر ۵۰ بود، فیلد قیمت ۱ فعال شود. اگر بالای ۵۰ بود، فیلد قیمت ۲”.
گام ۳: فیلد محاسباتی (Calculation)
-
یک فیلد از نوع Calculation بسازید.
-
فرمول را بنویسید:
( {Product Price} * {Weight} ) + {Packaging Cost}.
فاز سوم: روش کدنویسی اختصاصی (HTML/JS) – سبک و حرفهای
برای کنترل کامل و سرعت بالا، بهتر است خودتان کد بزنید. ما یک ماشین حساب میسازیم که قیمت را آنی (Real-time) نشان دهد.
۱. ساختار HTML (رابط کاربری)
<div class="wholesale-calc-wrapper">
<h3>محاسبهگر قیمت عمده خشکبار</h3>
<div class="form-group">
<label>نوع محصول:</label>
<select id="product-select">
<option value="500000">پسته اکبری (پایه ۵۰۰ت)</option>
<option value="300000">انجیر استهبان (پایه ۳۰۰ت)</option>
</select>
</div>
<div class="form-group">
<label>وزن درخواستی (کیلوگرم):</label>
<input type="number" id="weight-input" placeholder="مثلاً ۱۰۰">
</div>
<div class="form-group">
<label>نوع بستهبندی:</label>
<select id="pack-select">
<option value="1000">فله در گونی (۱۰۰۰ت/کیلو)</option>
<option value="5000">کارتن ۱۰ کیلویی (۵۰۰۰ت/کیلو)</option>
<option value="15000">وکیوم ۱ کیلویی (۱۵۰۰۰ت/کیلو)</option>
</select>
</div>
<div class="result-box">
<p>قیمت واحد (با تخفیف): <span id="unit-price">0</span> تومان</p>
<p>هزینه بستهبندی: <span id="pack-cost">0</span> تومان</p>
<h4>قیمت نهایی: <span id="total-price">0</span> تومان</h4>
</div>
<button id="request-invoice" style="display:none;">درخواست پیشفاکتور رسمی</button>
</div>
۲. منطق جاوااسکریپت (مغز متفکر)
<script>
document.addEventListener('DOMContentLoaded', function() {
const productSelect = document.getElementById('product-select');
const weightInput = document.getElementById('weight-input');
const packSelect = document.getElementById('pack-select');
// تابع اصلی محاسبه
function calculateTotal() {
let basePrice = parseInt(productSelect.value);
let weight = parseFloat(weightInput.value);
let packCostPerKg = parseInt(packSelect.value);
if (!weight || weight <= 0) return;
// 1. اعمال منطق پلکانی (Tiered Pricing)
let finalUnitPrice = basePrice;
if (weight > 50 && weight <= 500) {
finalUnitPrice = basePrice * 0.9; // 10% تخفیف
} else if (weight > 500) {
finalUnitPrice = basePrice * 0.8; // 20% تخفیف
}
// 2. محاسبه هزینهها
let totalProductPrice = finalUnitPrice * weight;
let totalPackCost = packCostPerKg * weight;
let grandTotal = totalProductPrice + totalPackCost;
// 3. نمایش خروجی (با فرمت ۳ رقم ۳ رقم)
document.getElementById('unit-price').innerText = finalUnitPrice.toLocaleString();
document.getElementById('pack-cost').innerText = totalPackCost.toLocaleString();
document.getElementById('total-price').innerText = grandTotal.toLocaleString();
// نمایش دکمه درخواست
if(grandTotal > 0) {
document.getElementById('request-invoice').style.display = 'block';
}
}
// گوش دادن به تغییرات (Live Update)
productSelect.addEventListener('change', calculateTotal);
weightInput.addEventListener('input', calculateTotal);
packSelect.addEventListener('change', calculateTotal);
});
</script>
فاز چهارم: اتصال به دیتابیس ووکامرس (Dynamic Pricing)
کد بالا قیمتها را ثابت (Hard-coded) دارد. اما اگر قیمت پسته در سایت عوض شد، باید دستی کد را عوض کنید؟ خیر. به عنوان توسعهدهنده، باید قیمت را از دیتابیس بخوانید.
روش فراخوانی قیمت زنده:
شما باید این ماشین حساب را در یک شورتکد PHP قرار دهید و قیمتها را از ووکامرس بگیرید.
function wholesale_calculator_shortcode() {
// گرفتن قیمت محصول خاص (مثلاً با ID 123)
$product = wc_get_product( 123 );
$price = $product->get_regular_price();
// پاس دادن قیمت به جاوااسکریپت
wp_localize_script( 'my-calc-script', 'php_vars', array(
'pistachio_price' => $price
));
// ... (ادامه کد HTML و JS که از php_vars استفاده میکند) ...
}
فاز پنجم: تبدیل محاسبهگر به “ابزار جذب لید” (Lead Generation)
شما قیمت را نشان دادید، اما نباید مشتری را رها کنید.
-
تکنیک “قفل قیمت”: قیمت نهایی را مات (Blur) نشان دهید یا فقط تخمین را نشان دهید. برای دیدن قیمت دقیق یا دریافت “پیشفاکتور PDF”، از کاربر بخواهید شماره موبایلش را وارد کند.
-
اتصال به CRM: وقتی کاربر شماره را زد و دکمه “دریافت پیشفاکتور” را زد، اطلاعات او به CRM (مثل FluentCRM) ارسال شود تا تیم فروش با او تماس بگیرد.
بخش پرسش و پاسخ فنی (FAQ)
۱. آیا افزونهای آماده برای این کار هست؟ بله. افزونه “Cost Calculator Builder” یا “Stylish Cost Calculator” گزینههای خوبی هستند. اما اگر میخواهید دقیقاً به موجودی انبار ووکامرس وصل شود، کدنویسی اختصاصی بهتر است.
۲. چگونه هزینه حمل را دقیق محاسبه کنیم؟ محاسبه دقیق هزینه باربری (مثل باربری وطن) سخت است چون تعرفهها پیچیده است. بهتر است بنویسید: “هزینه حمل: پس کرایه (بر عهده مشتری)” یا یک عدد تخمینی بر اساس وزن (مثلاً هر کیلو ۳۰۰۰ تومان) در نظر بگیرید و ذکر کنید “تقریبی”.
۳. آیا این ابزار سرعت سایت را کند میکند؟ اگر با جاوااسکریپت خالص (Vanilla JS) بنویسید (مثل مثال بالا)، حجمش زیر ۵ کیلوبایت است و هیچ تأثیری روی سرعت ندارد. اما افزونههای فرمساز سنگین ممکن است کمی تأثیر داشته باشند.
جمعبندی: ابزاری که کارشناس فروش شماست
ساخت یک محاسبهگر هزینه سفارش عمده، یعنی استخدام یک کارشناس فروش ۲۴ ساعته که خسته نمیشود، اشتباه محاسباتی نمیکند و قیمتها را طبق فرمول شما به مشتری میدهد.
برای تو که طراح وب هستی، پیشنهاد دادن این ابزار به یک مشتریِ “عمدهفروش خشکبار”، میتواند پروژه طراحی سایت ساده را به یک “پروژه توسعه سیستم فروش” تبدیل کند و ارزش قرارداد تو را به شدت بالا ببرد.
🍑 طعم سلامتی با میوههای خشک AsanFruits
انواع میوههای خشک طبیعی و بدون افزودنی، تهیهشده از بهترین محصولات باغی ایران. میانوعدهای سالم، خوشطعم و مغذی برای هر ساعتی از روز.
مشاهده محصولات میوه خشک