داروخانهٔ محله
برچسب نسخه، کشوی قفسه، برچسب آویز و رسید؛ صفحه از اشیای چاپی خود داروخانه ساخته شده. ارسال نسخه با کشیدن و رها کردن و بستهٔ فصلی با محاسبهٔ تخفیف.
داروچین قالب HTML فارسی و راستچین برای داروخانه و فروشگاه سلامت است: سه صفحهٔ اصلی با سه هویت کاملاً متفاوت و ۲۶ صفحهٔ داخلی، از فروشگاه تا حساب کاربری.
هر خانه رنگ، فونت، کارت محصول، هدر و فوتر خودش را دارد؛ فقط سبد خرید و منطق مشترک است.
برچسب نسخه، کشوی قفسه، برچسب آویز و رسید؛ صفحه از اشیای چاپی خود داروخانه ساخته شده. ارسال نسخه با کشیدن و رها کردن و بستهٔ فصلی با محاسبهٔ تخفیف.
عنوان بزرگی که با اسکرول ثابت میماند و قابها و رنگ زمینه زیرش عوض میشوند؛ حراج با شمارندهٔ زنده و سازندهٔ بستهٔ هدف.
کارت راهراه کنار عکس، روتین سهقدمی که با انتخاب نوع پوست عوض میشود و عکسی که هنگام خواندن ثابت میماند.
صفحههای داخلی با هدر و فوتر خانهٔ ۱ ساخته شدهاند و فقط توکنهای رنگ و فونت را میخوانند؛ پس برای هر خانه قابل تغییرند. هیچ صفحهٔ خالی و نیمهکارهای در بسته نیست.
از قفسه تا رسید؛ هر مرحله با داروساز و زنجیرهٔ سرد در ذهن طراحی شده.
پیشخوانی که برای خانوادهای که هر ماه دارو میخرد معنا دارد.
صفحههایی که اعتماد میسازند و به سؤالها جواب میدهند.
نه فقط یک فروشگاه با رنگ سبز؛ هر ویژگی از کار روزانهٔ یک داروخانه آمده است.
آپلود عکس نسخه با کشیدن و رها کردن در صفحهٔ اصلی، صفحهٔ «نسخههای من» با وضعیت هر نسخه، تأیید داروی جایگزین و دکمهٔ تمدید.
کشوی سبد در هر صفحه، تغییر تعداد، نوار «تا ارسال رایگان» و ذخیره در مرورگر.
سبد، ارسال، پرداخت؛ کد تخفیف، بازهٔ زمانی تحویل و ارسال یخچالی ۲ تا ۸ درجه.
پنج خانهٔ کد با پرش خودکار، چسباندن کد، شمارش معکوس ارسال دوباره و ورود با رمز.
دسته، قیمت، برند، تخفیفدار و مرتبسازی؛ در موبایل، کشوی فیلتر از پایین باز میشود.
همهٔ دستهها و زیردستهها در یک نگاه؛ در موبایل، منوی کشویی با زیرمنوی بازشونده.
قیمتها، شمارندهها و تاریخها با ارقام فارسی و جداکنندهٔ هزارگان.
هر خانه یک فونت نمایشی و یک فونت متن دارد. فونتها داخل بسته هستند و از هیچ سرویس بیرونی بارگذاری نمیشوند.
مراقبت، از انتخابهای کوچک شروع میشود. ۱۲۳۴۵۶۷۸۹۰
متن · خانهٔ ۱ و صفحههای داخلیمراقبت، از انتخابهای کوچک شروع میشود. ۱۲۳۴۵۶۷۸۹۰
متن · خانهٔ ۲مراقبت، از انتخابهای کوچک شروع میشود. ۱۲۳۴۵۶۷۸۹۰
متن · خانهٔ ۳#173a40#0b6e78#d8e8e2#e7dcc8#f3f0e8#0e1822#6bb4ee#ff5a1f#ffb58f#eaf3fb#1e1a19#9a7440#f2e6df#2b2321#faf5f1بیشتر خریدهای داروخانه با گوشی انجام میشود. هر بخش در عرض ۳۹۰ پیکسل ترکیب خودش را دارد؛ نه فقط جمعشدهٔ نسخهٔ دسکتاپ.
HTML خالص، CSS با متغیر، و دو کتابخانهٔ سبک. بدون jQuery، بدون Bootstrap و بدون مرحلهٔ build؛ فایل را باز کنید و کار کنید.
data-swiper.home-apothecary {
--bg: #f3f0e8; /* counter paper */
--ink: #1b2d32; /* slate ink */
--accent: #0b6e78; /* dispensary teal */
--radius: 12px;
--font-display: "Kalameh", "Dana";
--font-text: "Dana", system-ui;
}
<article data-product data-id="p01"
data-name="سرم ویتامین C" data-price="685000"
data-img="…">
…
<button @click="$store.shop.addFrom($el)">
افزودن به سبد
</button>
</article>
html/
├─ index.html vitality.html derma.html
├─ shop.html product.html cart.html …
├─ assets/
│ ├─ css/ daroochin.css + one file per home
│ ├─ js/ daroochin.js alpine.js swiper
│ └─ fonts/
└─ scripts/localize-images.mjs
همهچیز برای شروع، بهعلاوهٔ راهنمای فارسی.
نه. فایلها را مستقیم در مرورگر باز کنید. Node فقط برای اسکریپت اختیاری دانلود عکسها لازم است.
بله. صفحههای داخلی فقط توکنها را میخوانند. فایل CSS خانهٔ مورد نظر و هدر و فوترش را جایگزین کنید.
سبد در مرورگر کار میکند تا تجربه کامل دیده شود. برای فروشگاه واقعی، توابع Alpine.store('shop') را به API خود وصل کنید.
عکسها از Unsplash و با مجوز استفادهٔ تجاری رایگان هستند. برای کارت محصول، عکس واقعی بستهٔ محصولات خودتان را جایگزین کنید.
وزیر و شبنم متنباز هستند. دانا، کالمه، امکان و کارا تجاریاند؛ برای انتشار عمومی، مجوز استفادهٔ وب آنها را تهیه کنید.
نسخههای جدید کروم، فایرفاکس، سافاری و اج، روی دسکتاپ و موبایل.
سه خانه، ۲۶ صفحه، شش فونت؛ آمادهٔ اتصال به فروشگاه شما.