ساخت Modal خلاصه ی سفارش

?How To Build Order Summary Modal

0 85

ساخت Modal خلاصه ی سفارش

در قسمت قبل دکمه ی ORDER NOW را ایجاد کردیم و حالا نوبت آن است که modal خلاصه/گزارش آن را بنویسیم. ما این modal را به صورت یک کامپوننت جداگانه ایجاد خواهیم کرد؛ درون پوشه ی components یک پوشه ی دیگر به نام UI بسازید که مسئول نگهداری عناصر UI عمومی است. سپس درون آن یک پوشه به نام Modal ساخته و درون آن فایل Modal.js را ایجاد کنید. همچنین یک پوشه ی دیگر به نام Backdrop حاوی فایلی به نام Backdrop.js درون پوشه ی UI ایجاد کنید. دلیل اینکه Backdrop را جداگانه می سازیم این است که ممکن است بعدا در قسمت های دیگر برنامه (مانند منوی کشویی و…) نیز مورد استفاده قرار بگیرد.

ما با کدنویسی Modal.js شروع می کنیم:

این modal یک کامپوننت بسیار ساده است که children را برمی گرداند یعنی استفاده از آن کاملا به ما بستگی دارد که چه چیزی به آن پاس بدهیم. بهتر است div ریشه ای را استایل دهی کنیم بنابراین درون پوشه ی Modal یک فایل به نام Modal.module.css بسازید و استایل های زیر را در آن قرار دهید:

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

می خواهیم این modal را درون BurgerBuilder.js نمایش دهیم بنابراین به این فایل بروید و آن را وارد کنید:

حالا به قسمت JSX این فایل می رویم تا Modal را اضافه کنیم. همانطور که می دانیم Modal فقط باید در شرایط خاصی نمایش داده شود که آن را تنظیم خواهیم کرد اما فعلا آن را به صورت عادی اضافه کنید:

حالا اگر مرورگر را با کنید متوجه می شوید که Modal ما به صفحه اضافه شده است:

modal خالی اضافه شده به پروژه
modal خالی اضافه شده به پروژه

دلیل خالی بودن آن هم این است که هنوز هیچ چیزی برایش ننوشته ایم. از آنجایی که فایل BuildBuger.js به اندازه ی کافی شلوغ شده است من میخواهم یک کامپوننت جدا برای تولید خلاصه ی سفارش ایجاد کنم. برای این کار وارد پوشه ی Burger شده و در آنجا یک پوشه ی دیگر به نام OrderSummary بسازید که حاوی فایلی به نام OrderSummary.js باشد. درون فایل OrderSummary یک تابع ساده می نویسیم:

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

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

منطق این کد را بارها تمرین کرده ایم؛ قرار است با استفاده از props مقدار ingredients را دریافت کنیم سپس با روش همیشگی خودمان آن را تبدیل به یک آرایه کرده ایم. حالا متد map را روی این آرایه صدا می زنیم و به تعداد محتویات موجود تگ <li> اضافه می کنیم. تگ span بالا دارای استایل های inline است (textTransform: ‘capitalize’ نام خصوصیات ingredients را با حروف بزرگ مینویسد و یک استایل عادی css است). دلیل وجود تگ span اضافه کردن همین استایل به آن است و گرنه به آن نیازی نیست؛ در واقع حالت خلاصه شده ی آن بدون استایل بدین شکل است:

قسمت igKey نام خصوصیت را به ما می دهد (مثلا salad یا bacon یا …) و قسمت props.ingredients نیز مقدار آن را به ما می دهد. بنابراین خروجی شبیه salad: 1 می شود. یادتان باشد از آنجایی که محتوا را به صورت پویا اضافه می کنیم باید از key روی <li> غافل نشویم تا به خطا برنخوریم.

حالا می توانیم کدهایمان را در قسمت JSX تکمیل کنیم:

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

شما می توانید بر اساس سلیقه ی خودتان قسمت های مورد نظر را تغییر دهید. حالا باید به BurgerBuilder.js برویم تا از آن استفاده کنیم. ابتدا باید آن را import کنیم:

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

یادتان نرود که برای OrderSummary مقدار ingredients را پاس بدهید چرا که به آن نیاز دارد. حالا اگر به مرورگر برویم می توانیم Modal خود را ببینیم:

modal به صورت تکمیل شده
modal به صورت تکمیل شده

در قسمت بعد باید کاری کنیم که Modal فقط در هنگام کلیک شدن روی دکمه ی ORDER NOW نمایش داده شود و همیشه در وسط صفحه قرار نگیرد.

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

ارسال نظر

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

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