تعیین قیمت و اضافه کردن دکمه ی Order

Setting The Price And Adding The Order Button

0 54

محاسبه ی قیمت همبرگر

در این قسمت نوبت به بروزرسانی قیمت همبرگر و نمایش آن است. بهتر است که قیمت همبرگر را بالاتر از کنترل های کاربر قرار دهیم بنابراین به فایل BuildControls.js بروید و بالاتر از تابع map می گوییم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

اگر یادتان باشد قیمت همبرگر را در state تعریف کرده بودیم بنابراین می توانیم آن را با this.state دریافت کنیم. حالا اگر به مرورگر برویم و تعداد محتویات را کم و زیاد کنیم متوجه خواهیم شد که قیمت همبرگر ما اعشاری در می آید:

اعشار قیمت در همبرگر
اعشار قیمت در همبرگر

این مشکل به خاطر طبیعت جاوا اسکریپت است که باید آن را حل کنیم. ابتدا بهتر است قیمت را درون تگ های <strong> قرار دهیم تا بزرگتر و مشخص باشد:

حالا می توانیم از تابع toFixed استفاده کنیم و قیمت همبرگر را فقط تا 2 رقم اعشار تعیین کنیم:

بدین صورت قیمت در حد 2 رقم اعشار باقی می ماند و دیگر مشکل قبل را نخواهیم داشت.

ساخت دکمه ی ثبت سفارش

حالا باید یک Modal بسازیم تا خلاصه ای از سفارش را در اختیار ما قرار دهد. البته قبل از آن باید یک دکمه ی Checkout یا ثبت سفارش را ایجاد کنیم تا اگر کاربر روی آن دکمه کلیک کرد Modal برایش به نمایش در بیاید. برای شروع به فایل BuildControls.js بروید و دکمه ی Checkout را ایجاد کنید:

همانطور که می بینید تنها یک button ساده به کد اضافه کرده ام و درون آن مقدار ORDER NOW را قرار داده ایم. حالا به فایل BuildControls.module.css بروید تا استایل هایی به این دکمه اضافه کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

این استایل ها بر اساس سلیقه ی من آماده شده اند اما شما می توانید هر طور که خواستید آن ها را تغییر دهید. حالا به BuildControls.js برمی گردیم تا این کلاس ها را به دکمه ی خود اضافه کنیم:

حالا باید چک کنیم تا کاربر همبرگر خالی را سفارش ندهد! بنابراین باید مقدار حداقلی تعیین کنیم و فقط در آن حالت دکمه ی ORDER NOW را از حالت disabled خارج نماییم. برای شروع یک خصوصیت جدید به state اضافه می کنم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

در این متد ابتدا یک کپی از ingredients درون state ایجاد می کنیم. سپس می خواهیم مقادیر (تعداد محتویات) را با هم جمع کنیم و فقط در صورتی اجازه ی ثبت سفارش را بدهیم که تعداد کل محتویات همبرگر حداقل 1 باشد (یعنی همربرگر خالی نباشد). برای این کار ثابتی به نام sum (مجموع) ساخته ایم تا مقادیر را در خود بگیرد. سپس با استفاده از Object.keys که پیش فرض خود جاوا اسکریپت است مقدار key های ingredients را به صورت یک آرایه گرفته ایم (مثل salad و bacon و…) اما ما مقدار آن ها را می خواهیم نه key ها را… بنابراین از متد map استفاده می کنیم تا مقادیر را بگیریم. استفاده از تابع map را بار ها برایتان توضیح داده ایم.

حالا باید از تابع ()reduce استفاده کنیم تا تمام مقادیر را به یک مقدار تبدیل کنیم:

قبلا با تابع ()reduce کار کرده ایم و می دانیم چطور کار می کند. ما تمام مقادیر را گرفته ایم و با هم جمع زده ایم و initial value را هم صفر گذاشته ایم. بنابراین بدین شکل می توانیم مجموع تمام مقادیر را به دست بیاوریم. حالا باید setState را صدا بزنیم:

اگر sum از صفر بیشتر باشد خروجی برابر با true خواهد بود و مقدار purchasable را نیز برابر با true قرار می دهد، در غیر این صورت مقدار آن false خواهد شد. حالا باید این مقدار را به قسمت JSX پاس بدهیم:

حالا به BuildControls.js رفته و با استفاده از اطلاعات پاس داده شده دکمه را disable می کنیم:

علامت ! برای برعکس کردن مقدار است. اگر همبرگر purchasable (قابل خرید) باشد یعنی مقدار true دارد اما دکمه ی ما باید زمانی disabled شود که قابل خرید نباشد بنابراین مقدار را برعکس کرده ایم.

این کد هنوز تکمیل نشده است و این دکمه هیچ گاه فعال نخواهد شد چرا که اصلا تابع خودمان را صدا نزده ایم بنابراین به فایل BurgerBuilder.js برگردید و آن را درون متدهای addIngredientHandler و removeIngredientHandler اضافه کنید تا با هر بار تغییر محتویات همبرگر، قابل خرید بودن آن دوباره چک شود:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

اگر الان به مرورگر بروید با مشکل عجیبی روبرو می شویم! قرار بود محدودیت محتویات همبرگر 1 باشد یعنی حداقل یک پنیر خالی، یا یک گوشت خالی و … اما درون مرورگر تا 2 محتوا انتخاب نشود، دکمه ی ORDER NOW فعال نمی شود. به نظر شما دلیل آن چیست؟

همانطور که می دانید ثابت ingredients درون متد updatePurchaseState همان state قدیمی ما است:

و به دلیل طبیعت setState (که در جلسات فصل های قبل توضیح دادیم) هنگامی که updatePurchaseState را فراخوانی می کنیم، از state قدیمی استفاده می کنیم! برای حل این مشکل می توانیم مقدار updatedIngredients را به این تابع پاس بدهیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

بدین صورت از ingredinets پاس داده شده با تابع استفاده می کنیم و دیگر نیازی به ساختن کپی از state نداریم. حالا اگر به مرورگر بروید دیگر مشکلی نخواهیم داشت.

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle