شخصی فیلد تعداد محصول در گرویتی فرم

شخصی‌سازی فیلد تعداد محصول در گرویتی فرم

همانطور که می‌دانید گرویتی فرم یکی از بهترین و پیشرفته‌ترین فرم‌ساز وردپرس می‌باشد که به همراه ماژول‌های مختلف

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

۱- طبق تصویر زیر یک فیلد HTML از قسمت “فیلدهای استاندارد” به فرمتون اضافه کنید و کد زیر را درون آن بگذارید.

<script>
jQuery(document).ready(function(){
    jQuery(".qty input[type=text]").each(function(){
        jQuery(this).val(1);
        jQuery(this).before('<button class="sub">-</button>');
        jQuery(this).after('<button class="add">+</button>');
    });
    jQuery(".qty input[type=text]").each(function(){
        jQuery(this).on('input keyup keypress', function(){
            jQuery(this).trigger('change');
        });
    });
    jQuery(document).on('click','.add',function (e) {
        e.preventDefault();
        jQuery(this).prev().val(+jQuery(this).prev().val() + 1);
        jQuery(this).prev().trigger('change');
    });
    jQuery(document).on('click','.sub',function (e) {
        e.preventDefault();
        if(jQuery(this).next().val() > ۰) {
            jQuery(this).next().val(+jQuery(this).next().val() - 1);
            jQuery(this).next().trigger('change');
        }
    });
});
</script>
افزودن دکمه افزایش و کاهش به فیلد تعداد محصول در گرویتی فرم

۲- پس از ایجاد فیلد HTML، حال یک فیلد محصول از “فیلدهای قیمت‌گذاری” به فرمتون اضافه کنید و سپس مطابق تصویر زیر از تب “نمایش” این فیلد، مقدار “کلاس CSS سفارشی” را qty بگذارید.

افزودن دکمه افزایش و کاهش به فیلد تعداد محصول در گرویتی فرم

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

نکات تکمیلی برای فیلد تعداد محصول

اگر می‌خواهید تغییرات قیمت را به صورت لحظه‌ای به کاربر نمایش دهید، کافی است یک فیلد مجموع از “فیلدهای قیمت‌گذاری” به فرمتون اضافه کنید. کاربر با کلیک بر روی دکمه + یا – قیمت کل را به صورت لحظه‌ای مشاهده خواهد کرد.

افزودن دکمه افزایش و کاهش به فیلد تعداد محصول در گرویتی فرم
نوشته مرتبط
نمایش نوشته‌های مرتبط در وردپرس

ارسال دیدگاه