۰۳ سایت فروشگاهی
طراحی سایت فروشگاهی لوازم آشپزخانه پلاستیکی
یک فروشگاه با ۲۴ محصول و فیلتر دستهبندی که بدون جاوااسکریپت هم از کار نمیافتد — و به ربات تلگرام همین فروشگاه وصل است.
مشکل چه بود؟
یک کارخانهی کوچک تولیدی، محصولاتش را فقط در اینستاگرام میگذارد. مشتری عمده که میخواهد لیست کامل و قیمت را ببیند، باید صفحه به صفحه پایین برود و آخرش هم مطمئن نیست قیمتها بهروزند یا نه.
چی ساختم؟
یک فروشگاه پنج صفحهای با ۲۴ محصول: خانه، لیست کامل محصولات با فیلتر دستهبندی، یک صفحهی محصول بهصورت کامل، تماس، و پنل فروشنده.
این سایت عمداً هیچ شباهتی به سایت سندبلاست ندارد — و این تمام دلیل ساختن دو نمونهی جداست. دو سایت که شبیه هم باشند، فقط یک بار ثابت میکنند که کاری بلدم.
| سایت سندبلاست | این سایت | |
|---|---|---|
| زمینه | گرافیت تیره | کرم روشن |
| رنگ تأکید | نارنجی ایمنی | تراکوتا |
| گوشهها | کاملاً تیز | گرد |
| حرکت | صحنهی قفلشده با اسکرول | یک ورود نرم برای کارتها |
| ستارهی کار | انیمیشن SVG | شبکهی محصولات |
چطور کار میکند؟
فیلتر دستهبندی با جاوااسکریپت خام نوشته شده، بدون هیچ کتابخانهای. نکتهی مهمش این است که هر ۲۴ محصول از قبل داخل HTML هستند و فیلتر فقط پنهانشان میکند.
یعنی اگر جاوااسکریپت خاموش باشد یا نرسد، بازدیدکننده همچنان همهی محصولات را
میبیند و با Cmd+F خود مرورگر پیدایشان میکند. فیلتری که کار نکند
بدتر از نداشتن فیلتر نیست — ولی فروشگاهی که خالی باز شود، هست.
پنهان کردن هم با ویژگی hidden انجام میشود نه display:none،
چون hidden کارت را از دسترس صفحهخوان و از ترتیب کلید Tab هم خارج میکند.
همان ۲۴ محصول در فایل products.json نگه داشته میشوند و
هم سایت و هم ربات تلگرام از همان میخوانند. برای همین
سایت و ربات هیچوقت دربارهی یک قیمت با هم اختلاف پیدا نمیکنند —
که دقیقاً همان اشتباهی است که ربات قرار بود جلویش را بگیرد.
وصل به ربات تلگرام
در صفحهی خانه یک گفتوگوی خودپخش هست که نشان میدهد ربات همین فروشگاه چطور به یک سؤال با غلط املایی جواب میدهد. همهی پیامها از قبل در HTML هستند و اسکریپت فقط یکییکی نشانشان میدهد — پس بدون جاوااسکریپت هم کل گفتوگو بهصورت متن خوانده میشود.
پروژهی ربات را اینجا ببینید ←
با چه ابزارهایی
HTML، CSS و جاوااسکریپت خام. بدون فریمورک، بدون بکاند، بدون هیچ کتابخانهای.
نتیجه
فروشگاهی که روی موبایل، تبلت و دسکتاپ درست کار میکند، بدون جاوااسکریپت هم همهی محصولاتش دیده میشوند، و به یک اتوماسیون واقعی وصل است.