آموزش ساخت ابزار محاسبه‌گر “میزان کالری در هر ۱۰۰ گرم” برای تمامی محصولات.

ساخت

آموزش ساخت ویجت محاسبه کالری محصول در ووکامرس: کدنویسی ابزار تغذیه (شفافیت هوشمند)

مشتری امروز، مشتری “کالری‌شمار” است. او می‌داند که ۱۰۰ گرم پسته ۵۶۰ کالری دارد، اما او فقط می‌خواهد ۳۰ گرم بخورد. چرا باید مجبورش کنیم با ماشین‌حساب گوشی‌اش حساب و کتاب کند؟

ما در این آموزش، یک “ویجت تعاملی” می‌سازیم که در صفحه محصول قرار می‌گیرد. کاربر وزن مورد نظرش را وارد می‌کند (مثلاً ۴۵ گرم) و ابزار بلافاصله به او می‌گوید که در این ۴۵ گرم، چقدر پروتئین، چربی و قند وجود دارد.

این کار تجربه کاربری (UX) را به شدت بالا می‌برد و سایت شما را از رقبا متمایز می‌کند.


فاز اول: منطق ریاضی (The Formula)

قبل از کدنویسی، فرمول ساده ریاضی را مرور کنیم. ما همیشه “ارزش غذایی در ۱۰۰ گرم” را به عنوان دیتای مرجع (Base Data) داریم.

فرمول محاسبه برای وزن دلخواه کاربر ($W$):

 

$$Value_{user} = \frac{Value_{100g} \times W_{user}}{100}$$

مثلاً اگر پسته در ۱۰۰ گرم، ۲۰ گرم پروتئین دارد و کاربر ۵۰ گرم می‌خواهد:

 

$$\frac{20 \times 50}{100} = 10 \text{ grams}$$

فاز دوم: دریافت داده‌ها در ووکامرس (Backend)

اول باید جایی برای وارد کردن اطلاعات “در هر ۱۰۰ گرم” داشته باشیم.

می‌توانیم از ویژگی‌های محصول (Attributes) ووکامرس استفاده کنیم، اما روش حرفه‌ای‌تر استفاده از زمینه سفارشی (Custom Fields) است.

افزودن فیلدها با کد PHP (در فایل functions.php)

این کد فیلدهای جدیدی به صفحه ویرایش محصول در پنل ادمین اضافه می‌کند:

PHP

// 1. افزودن تب "ارزش غذایی" به اطلاعات محصول
add_filter( 'woocommerce_product_data_tabs', 'amir_add_nutrition_tab' );
function amir_add_nutrition_tab( $tabs ) {
    $tabs['nutrition'] = array(
        'label'    => __( 'ارزش غذایی (در ۱۰۰ گرم)', 'woocommerce' ),
        'target'   => 'nutrition_options',
        'class'    => array( 'show_if_simple' ),
    );
    return $tabs;
}

// 2. نمایش فیلدها در تب جدید
add_action( 'woocommerce_product_data_panels', 'amir_add_nutrition_fields' );
function amir_add_nutrition_fields() {
    echo '<div id="nutrition_options" class="panel woocommerce_options_panel">';
    
    woocommerce_wp_text_input( array(
        'id' => '_cal_per_100',
        'label' => 'کالری (kcal)',
        'type' => 'number'
    ));
    woocommerce_wp_text_input( array(
        'id' => '_pro_per_100',
        'label' => 'پروتئین (g)',
        'type' => 'number'
    ));
    woocommerce_wp_text_input( array(
        'id' => '_fat_per_100',
        'label' => 'چربی (g)',
        'type' => 'number'
    ));
    
    echo '</div>';
}

// 3. ذخیره داده‌ها
add_action( 'woocommerce_process_product_meta', 'amir_save_nutrition_data' );
function amir_save_nutrition_data( $post_id ) {
    $fields = array('_cal_per_100', '_pro_per_100', '_fat_per_100');
    foreach ( $fields as $field ) {
        if ( isset( $_POST[ $field ] ) ) {
            update_post_meta( $post_id, $field, sanitize_text_field( $_POST[ $field ] ) );
        }
    }
}

فاز سوم: ساختن رابط کاربری (Frontend HTML)

حالا باید این ابزار را در صفحه محصول نمایش دهیم. ما مقادیر ذخیره شده را به عنوان data-attributes به المان HTML پاس می‌دهیم تا جاوااسکریپت بتواند آنها را بخواند.

PHP

// نمایش در صفحه محصول (مثلاً زیر دکمه افزودن به سبد)
add_action( 'woocommerce_single_product_summary', 'amir_show_calculator_widget', 25 );

function amir_show_calculator_widget() {
    global $post;
    // دریافت مقادیر از دیتابیس
    $cal = get_post_meta( $post->ID, '_cal_per_100', true );
    $pro = get_post_meta( $post->ID, '_pro_per_100', true );
    $fat = get_post_meta( $post->ID, '_fat_per_100', true );

    // اگر دیتایی وارد نشده بود، ویجت را نشان نده
    if ( empty($cal) ) return;

    ?>
    <div class="nutrition-calculator" 
         data-cal="<?php echo esc_attr($cal); ?>" 
         data-pro="<?php echo esc_attr($pro); ?>" 
         data-fat="<?php echo esc_attr($fat); ?>">
        
        <h4>🧮 محاسبه‌گر ارزش غذایی</h4>
        
        <div class="calc-input">
            <label>چند گرم می‌خورید؟</label>
            <input type="number" id="user-weight" value="100" min="1">
            <span class="unit">گرم</span>
        </div>

        <div class="calc-results">
            <div class="res-item">
                <span class="label">انرژی</span>
                <span class="value" id="res-cal"><?php echo $cal; ?></span>
                <span class="unit">کالری</span>
            </div>
            <div class="res-item">
                <span class="label">پروتئین</span>
                <span class="value" id="res-pro"><?php echo $pro; ?></span>
                <span class="unit">گرم</span>
            </div>
            <div class="res-item">
                <span class="label">چربی</span>
                <span class="value" id="res-fat"><?php echo $fat; ?></span>
                <span class="unit">گرم</span>
            </div>
        </div>
    </div>
    <?php
}

فاز چهارم: استایل‌دهی (CSS)

ظاهر ابزار باید جذاب و تمیز باشد.

CSS

<style>
.nutrition-calculator {
    background: #f9f9f9; padding: 20px; border-radius: 12px;
    border: 1px solid #eee; margin-top: 20px; font-family: inherit;
}
.nutrition-calculator h4 { margin-top: 0; color: #333; font-size: 16px; }
.calc-input { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.calc-input input { 
    width: 80px; padding: 8px; border: 2px solid #ddd; border-radius: 8px; text-align: center; font-weight: bold;
}
.calc-input input:focus { border-color: #4CAF50; outline: none; }
.calc-results { display: flex; justify-content: space-between; text-align: center; }
.res-item { flex: 1; display: flex; flex-direction: column; }
.res-item .value { font-size: 22px; font-weight: bold; color: #4CAF50; }
.res-item .label { font-size: 12px; color: #777; margin-bottom: 5px; }
.res-item .unit { font-size: 11px; color: #aaa; }
</style>

فاز پنجم: موتور محاسباتی (JavaScript)

این کد، مغز متفکر ابزار است که با هر تغییر عدد توسط کاربر، محاسبات را انجام می‌دهد.

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function() {
    const wrapper = document.querySelector('.nutrition-calculator');
    if (!wrapper) return;

    // خواندن دیتای پایه از اتریبیوت‌ها
    const baseCal = parseFloat(wrapper.dataset.cal) || 0;
    const basePro = parseFloat(wrapper.dataset.pro) || 0;
    const baseFat = parseFloat(wrapper.dataset.fat) || 0;

    const input = document.getElementById('user-weight');
    const outCal = document.getElementById('res-cal');
    const outPro = document.getElementById('res-pro');
    const outFat = document.getElementById('res-fat');

    // تابع محاسبه
    function updateValues() {
        let weight = parseFloat(input.value);
        if (isNaN(weight) || weight < 0) weight = 0;

        // فرمول: (پایه * وزن کاربر) / 100
        outCal.textContent = Math.round((baseCal * weight) / 100);
        outPro.textContent = ((basePro * weight) / 100).toFixed(1); // یک رقم اعشار
        outFat.textContent = ((baseFat * weight) / 100).toFixed(1);
    }

    // گوش دادن به رویداد تایپ کردن
    input.addEventListener('input', updateValues);
});
</script>

ارزش افزوده: تبدیل گرم به “تعداد” (برای خشکبار)

امیررضا جان، این بخش تو را از سایر طراحان متمایز می‌کند.

کاربر شاید نداند ۳۰ گرم چند عدد پسته می‌شود.

  • ایده: اضافه کردن یک فیلد دیگر در ادمین به نام “میانگین وزن هر دانه” (مثلاً برای پسته اکبری ۱.۵ گرم).

  • آپدیت کد JS: وقتی کاربر نوشت “۱۰ عدد”، اسکریپت تو محاسبه کند: 10 * 1.5 = 15 گرم و بعد کالری ۱۵ گرم را نشان دهد.


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

۱. آیا می‌توانم این ابزار را فقط برای دسته‌بندی خاص (مثلاً آجیل) فعال کنم؟

بله. در کد PHP بخش نمایش (amir_show_calculator_widget)، یک شرط بگذارید:

if ( has_term( ‘nuts’, ‘product_cat’, $post->ID ) ) { … }

این‌طوری در صفحه “زعفران” یا “بسته‌بندی” که نیازی به کالری‌شمار ندارند، نمایش داده نمی‌شود.

۲. این اطلاعات را از کجا پیدا کنم؟

سایت USDA (وزارت کشاورزی آمریکا) دقیق‌ترین دیتابیس رایگان جهان برای خشکبار و مواد غذایی است. برای محصولات بسته‌بندی شده، اطلاعات پشت بسته را وارد کنید.

۳. آیا این ابزار روی سرعت سایت تأثیر می‌گذارد؟

خیر، چون حجم کدهای HTML و JS آن بسیار ناچیز (زیر ۵ کیلوبایت) است و هیچ درخواست اضافه‌ای به دیتابیس بعد از لود صفحه نمی‌فرستد (محاسبات سمت کاربر Client-side است).


جمع‌بندی: سایتِ زنده

سایت‌های معمولی، “کاتالوگ ایستا” هستند. سایت‌های حرفه‌ای، “ابزار تعاملی” هستند.

وقتی کاربر می‌بیند که می‌تواند با تغییر عدد، کالری دریافتی‌اش را ببیند، زمان بیشتری در صفحه می‌ماند (Time on Site) و اعتمادش به تخصص شما بیشتر می‌شود.

به عنوان یک توسعه‌دهنده وب، ساختن چنین Micro-Interactionهایی (تعاملات کوچک)، رزومه تو را بسیار قوی می‌کند و نشان می‌دهد که بر DOM Manipulation در جاوااسکریپت مسلط هستی.

اقدام بعدی:

آیا می‌خواهی کد جاوااسکریپت برای “تغییر رنگ اعداد” (مثلاً اگر کالری بالای ۵۰۰ رفت، عدد قرمز شود) را به این ابزار اضافه کنم تا جنبه بصری و هشداری هم داشته باشد؟

🍑 طعم سلامتی با میوه‌های خشک AsanFruits

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

مشاهده محصولات میوه خشک

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *