آموزش ساخت محاسبه‌گر قیمت بر اساس وزن سفارشی در ووکامرس: فروش آجیل به سبکِ مشتری

در بازار سنتی، مشتری به مغازه‌دار می‌گوید: “بی‌زحمت ۳۰۰ گرم از اون پسته بدید.” مغازه‌دار وزن می‌کند و قیمت را می‌گوید. اما در اکثر فروشگاه‌های اینترنتی، مشتری مجبور است بسته‌های از پیش تعیین شده (نیم کیلویی، یک کیلویی) را انتخاب کند. این محدودیت، حس “خرید تازه و فله” را از بین می‌برد.

برای سایت‌های خشکبار، داشتن ابزاری که به مشتری اجازه دهد وزن دقیق را انتخاب کند و قیمت را همان لحظه ببیند، یک مزیت رقابتی بزرگ است. این کار نرخ تبدیل را بالا می‌برد چون مشتری دقیقاً همان‌قدر که نیاز دارد (و پول دارد) خرید می‌کند.

در این راهنمای فنی، ما دو روش را بررسی می‌کنیم:

1. روش کدنویسی اختصاصی (برای نمایش در سایدبار یا وبلاگ).

2. روش ادغام با ووکامرس (برای فروش واقعی در صفحه محصول).

روش ۱: ساخت ابزار محاسبه‌گر مستقل (با HTML و JS)

مناسب برای: سایدبار سایت، پست‌های وبلاگ یا لندینگ پیج‌ها.

این ابزار فقط “قیمت را نشان می‌دهد” و برای برآورد هزینه است (به سبد خرید وصل نیست). ما از یک اسلایدر (Range Slider) زیبا استفاده می‌کنیم تا تجربه کاربری جذابی بسازیم.

گام ۱: کد HTML (ساختار)

<div class="weight-calc-box">
    <h3>محاسبه‌گر قیمت پسته اکبری</h3>
    
    <div class="slider-container">
        <label>وزن مورد نظر (گرم):</label>
        <input type="range" min="100" max="2000" step="50" value="500" id="weightRange" oninput="updateCalc()">
        <div class="weight-display">
            <span id="weightValue">500</span> گرم
        </div>
    </div>

    <div class="price-result">
        <p>قیمت نهایی:</p>
        <h4 id="totalPrice">0 تومان</h4>
    </div>
    
    <p class="note">* قیمت پایه: ۸۰۰,۰۰۰ تومان/کیلو</p>
</div>

گام ۲: استایل CSS (زیباسازی)

.weight-calc-box {
    background: #fff;
    border: 2px solid #4CAF50; /* سبز پسته‌ای */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Vazir', sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.slider-container input[type=range] {
    width: 100%;
    margin: 15px 0;
    cursor: pointer;
}

.weight-display {
    background: #f1f1f1;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
    color: #333;
}

.price-result h4 {
    color: #d32f2f; /* قرمز قیمت */
    font-size: 24px;
    margin: 10px 0;
}

.note { font-size: 12px; color: #777; }

گام ۳: منطق جاوااسکریپت (محاسبه)

<script>
    // قیمت پایه هر کیلوگرم (به تومان)
    const pricePerKg = 800000; 

    function updateCalc() {
        // دریافت وزن از اسلایدر
        let grams = document.getElementById("weightRange").value;
        
        // نمایش وزن انتخاب شده
        document.getElementById("weightValue").innerText = grams;

        // محاسبه قیمت: (وزن / 1000) * قیمت کیلو
        let total = (grams / 1000) * pricePerKg;

        // فرمت کردن عدد (سه رقم سه رقم)
        let formattedPrice = total.toLocaleString('fa-IR');

        // نمایش قیمت
        document.getElementById("totalPrice").innerText = formattedPrice + " تومان";
    }

    // اجرای اولیه برای نمایش مقدار پیش‌فرض
    updateCalc();
</script>

نحوه استفاده: این کدها را می‌توانید در یک ویجت Custom HTML در المنتور یا ابزارک‌های وردپرس قرار دهید.

روش ۲: پیاده‌سازی فروش وزنی در ووکامرس (روش حرفه‌ای)

مناسب برای: صفحه محصول (مشتری بتواند ۳۵۰ گرم بخرد و پرداخت کند).

برای این کار، کدنویسی دستی بسیار پیچیده است (چون باید به سبد خرید و درگاه وصل شود). بهترین راه، استفاده از افزونه‌های استاندارد مهندسی شده است.

بهترین افزونه: WooCommerce Measurement Price Calculator

این افزونه رسمی ووکامرس است که اجازه می‌دهد محصولات را بر اساس واحد (وزن، طول، مساحت) بفروشید.

مراحل تنظیم برای خشکبار:

1. نصب افزونه: افزونه را نصب و فعال کنید.

2. تنظیم محصول:

   • به صفحه ویرایش محصول (مثلاً انجیر) بروید.

   • در بخش “اطلاعات محصول”، تب جدیدی به نام Measurement اضافه شده است.

   • Measurement Unit: واحد را روی “Weight” (وزن) و “Gram” (گرم) بگذارید.

   • Pricing: حالت “Pricing per unit” را انتخاب کنید. (یعنی قیمت را برای ۱ کیلو وارد می‌کنید، اما مشتری گرمی می‌خرد).

3. تنظیمات ورودی (Input):

   • می‌توانید مشخص کنید مشتری وزن را “تایپ” کند یا از یک لیست انتخاب کند.

   • Increment: گام‌های افزایش را روی ۵۰ گرم بگذارید (که مشتری نتواند ۱ گرم بخرد!).

4. نمایش در سایت:

   • حالا در صفحه محصول، به جای دکمه ساده، یک فیلد “وزن مورد نظر شما” ظاهر می‌شود.

   • مشتری می‌نویسد “۳۵۰”، سیستم قیمت را محاسبه می‌کند (۳۵۰ * قیمتِ گرم) و به سبد خرید اضافه می‌کند.

تکنیک پیشرفته: محاسبه‌گر “مخلوط آجیل” (Custom Mix Builder)

این سطحِ بالای برنامه‌نویسی برای یک سایت خشکبار است. مشتری می‌خواهد خودش آجیل مخلوط بسازد (۲۰۰ گرم پسته + ۱۰۰ گرم بادام + ۵۰ گرم مویز).

راهکار فنی (بدون کدنویسی سنگین):

استفاده از افزونه “WPC Composite Products for WooCommerce” یا “YITH Composite Products”.

سناریوی پیاده‌سازی:

1. یک محصول به نام “آجیل مخلوط سفارشی” بسازید.

2. آن را به عنوان محصول Composite تعریف کنید.

3. اجزا (Components): پسته، بادام، فندق، تخمه.

4. برای هر جزء، به مشتری اجازه دهید “وزن” را انتخاب کند.

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

نکات UX (تجربه کاربری) برای ابزارهای محاسباتی

1. وضوح واحد پول و وزن: همیشه مشخص کنید قیمت به “تومان” است و وزن به “گرم” یا “کیلوگرم”. ابهام باعث فرار مشتری می‌شود.

2. قیمت واحد (Unit Price): همیشه قیمت هر کیلوگرم را در کنار قیمت محاسبه شده نشان دهید تا مشتری بتواند مقایسه کند (شفافیت).

3. محدودیت‌ها (Limits): برای جلوگیری از ضرر (بسته‌بندی ۱۰ گرم پسته صرفه ندارد)، حتماً حداقل سفارش (Minimum Quantity) را روی ۱۰۰ یا ۲۵۰ گرم تنظیم کنید.

بخش پرسش و پاسخ فنی (FAQ)

۱. آیا این افزونه‌ها با افزونه‌های انبارداری (مثل ATUM) هماهنگ هستند؟ بله. وقتی مشتری ۳۵۰ گرم پسته می‌خرد، افزونه Measurement Price Calculator دقیقاً ۰.۳۵ کیلوگرم از موجودی انبار شما کم می‌کند. این یکپارچگی عالی است.

۲. آیا اسلایدر (Range Slider) در موبایل خوب کار می‌کند؟ بله، اسلایدرهای HTML5 در موبایل کاملاً لمسی (Touch-friendly) هستند و تجربه کاربری بهتری نسبت به تایپ کردن عدد با کیبورد موبایل دارند.

۳. چگونه برای وزن‌های بالا تخفیف خودکار بدهیم؟ می‌توانید از افزونه “Dynamic Pricing” در کنار این ابزار استفاده کنید. قانون بگذارید: “اگر وزن انتخابی بالای ۱۰۰۰ گرم بود، ۱۰٪ تخفیف روی قیمت واحد اعمال شود.”

جمع‌بندی: فروش به سبکِ مدرن

اضافه کردن ابزار محاسبه قیمت بر اساس وزن، سایت شما را از یک “فروشگاه خشک” به یک “مغازه تعاملی” تبدیل می‌کند. این ابزار به مشتری قدرت انتخاب می‌دهد و حس خرید حضوری (کشیدن بار روی ترازو) را شبیه‌سازی می‌کند.

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