قالب فروشگاهی کامرس با استفاده از TailwindCSS و Alpine.js توسعه داده شده است؛ یک قالب HTML فروشگاهی که صفحات و جزئیات مورد نیاز برای ساخت یک وبسایت فروشگاهی را در اختیار شما قرار می‌دهد.

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

ویژگی‌های قالب کامرس:

• طراحی کاملاً واکنش‌گرا برای نمایش مناسب در موبایل، تبلت و دسکتاپ
• پشتیبانی از تم روشن و تاریک
• پشتیبانی کامل از زبان‌های راست‌چین (RTL) و چپ‌چین (LTR) در تمامی صفحات؛ کافی است مقدار dir صفحه را مشخص کنید.
• طراحی مدرن و مینیمال با تمرکز روی جزئیات و تجربه کاربری
• پیاده‌سازی جزئیات صفحات فروشگاه، پنل کاربری و پرداخت مرحله‌ای
• تغییر ظاهر و بخش‌های مختلف قالب بدون درگیر شدن با کد پیچیده
• استفاده از TailwindCSS برای طراحی و استایل‌دهی صفحات
• استفاده از Alpine.js برای تعاملات و رفتارهای پویا
• ساختار HTML قابل استفاده و توسعه در پروژه‌های مختلف

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

پس از دانلود فایل قالب کامرس و خارج کردن از حالت فشرده دو پوشه در اختیار شما قرار می‌گیرد:

• html/ — نسخه نهایی و آماده استفاده. اگر قصد دارید قالب را مستقیماً در پروژه خود قرار دهید، از این پوشه استفاده کنید.
• commerce/ — سورس کامل قالب برای توسعه و شخصی‌سازی. اگر می‌خواهید رنگ‌ها، فونت‌ها، ساختار صفحات یا سایر بخش‌های قالب را تغییر دهید، کار را از این پوشه شروع کنید.

راه‌اندازی نسخه توسعه

برای توسعه و شخصی‌سازی قالب، ابتدا مطمئن شوید Node.js روی سیستم شما نصب است.

سپس وارد پوشه commerce شوید و وابستگی‌های پروژه را نصب کنید:

cd commerce
npm install

پس از نصب وابستگی‌ها، می‌توانید از دستورات زیر استفاده کنید:

دستور	توضیحات
npm run dev	اجرای سرور توسعه با قابلیت بارگذاری خودکار تغییرات
npm run build	ساخت خروجی نهایی و بهینه‌شده برای انتشار
npm run preview	نمایش پیش‌نمایش خروجی ساخته‌شده به صورت محلی

برای شروع توسعه، دستور زیر را اجرا کنید:

npm run dev

شخصی‌سازی قالب

🎨 مدیریت رنگ‌ها

تمامی رنگ‌های قالب در فایل زیر تعریف شده‌اند:

src/assets/css/theme/colors.css

رنگ‌ها بر پایه فضای رنگی OKLCH تعریف شده‌اند و دو مجموعه رنگ برای حالت روشن و تاریک در نظر گرفته شده است. رنگ‌های حالت تاریک با کلاس .dark فعال می‌شوند.

اتصال متغیرهای رنگی به TailwindCSS در فایل style.css انجام شده است. به همین دلیل کلاس‌هایی مانند bg-primary، text-success و border-border در سراسر پروژه قابل استفاده هستند.

برای تغییر پالت رنگی قالب، کافی است مقادیر متغیرهای مورد نظر را در فایل colors.css ویرایش کنید.

فونت

فونت پیش‌فرض قالب استعداد است.

فایل‌های فونت در مسیر زیر قرار دارند:

public/assets/fonts

تعریف فونت‌ها از طریق @font-face در فایل زیر انجام شده است:

src/assets/css/theme/fonts.css

برای تغییر فونت قالب، می‌توانید فایل‌های فونت مورد نظر را در پوشه public/assets/fonts قرار دهید و تعریف مربوط به آن را در fonts.css انجام دهید.

ساختار اجزای قالب

بخشهای تکرار شونده

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

src/partials

این فایل‌ها با فرمت .hbs نوشته شده‌اند و در صفحات مختلف قالب مورد استفاده قرار می‌گیرند. با تغییر دادن یکی از این فایلها، تغییرات آن در تمام صفحاتی که از آن استفاده می‌کنند اعمال می‌شود.

اسکریپت‌ها

اسکریپت اصلی پروژه main.js است:

src/assets/js/main.js

توابع کمکی پروژه نیز در پوشه utils تفکیک شده‌اند. برای مثال، منطق شمارنده‌ها در فایل timer.js قرار دارد.

برای افزودن یا تغییر تعاملات صفحات، می‌توانید از ساختار اسکریپت‌های موجود استفاده کنید و کدهای مربوط به هر قابلیت را در فایل مناسب قرار دهید.

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

ساختار کلی پوشه commerce به شکل زیر است:

commerce/
├── public/
│   ├── assets/
│   │   ├── fonts/
│   │   └── images/
│   ├── favicon.svg
│   └── robots.txt
│
├── src/
│   ├── assets/
│   │   ├── css/
│   │   │   ├── style.css
│   │   │   └── theme/
│   │   │       ├── colors.css
│   │   │       └── fonts.css
│   │   │
│   │   └── js/
│   │       ├── main.js
│   │       └── utils/
│   │           └── timer.js
│   │
│   └── partials/
│       ├── header.hbs
│       ├── footer.hbs
│       └── ...
│
├── *.html
├── package.json
└── vite.config.js

public/

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

• assets/fonts/ — فایل‌های فونت قالب
• assets/images/ — تصاویر مورد استفاده در قالب
• favicon.svg — آیکون سایت
• robots.txt — تنظیمات مربوط به خزنده‌های موتورهای جستجو

src/

فایل‌های اصلی سورس قالب در این پوشه قرار دارند.

src/assets/css/

فایل‌های مربوط به استایل قالب در این بخش قرار گرفته‌اند.

• style.css — فایل اصلی CSS و نقطه ورود استایل‌های قالب
• theme/colors.css — متغیرهای رنگی قالب برای حالت روشن و تاریک
• theme/fonts.css — تعریف فونت‌ها و @font-face

src/assets/js/

اسکریپت‌های مورد استفاده در قالب در این پوشه قرار دارند.

• main.js — فایل اصلی JavaScript
• utils/ — توابع و اسکریپت‌های کمکی مانند timer.js

src/partials/

اجزای مشترک صفحات با فرمت .hbs در این پوشه نگهداری می‌شوند. برای مثال، header.hbs و footer.hbs در صفحات مختلف استفاده می‌شوند تا بخش‌های تکراری قالب از یک محل مدیریت شوند.

فایل‌های HTML

صفحات قالب به صورت فایل‌های HTML در ریشه پوشه commerce قرار دارند. این صفحات از فایلهای موجود در src/partials/ استفاده می‌کنند.

package.json

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

vite.config.js

تنظیمات Vite و نحوه پردازش و ساخت خروجی پروژه در این فایل قرار دارد.

در قالب کامرس از Alpine.js برای مدیریت تعاملات و رفتارهای پویا در بخش‌های مختلف استفاده شده است. در کنار TailwindCSS می‌توانید ظاهر و ساختار یک کامپوننت را با کلاس‌های TailwindCSS تعریف کنید و منطق و وضعیت آن را با Alpine.js مدیریت کنید.

برای مثال، Dropdown حساب کاربری در قالب با استفاده از Alpine.js پیاده‌سازی شده است. در این مثال، باز و بسته شدن منو، بستن آن با کلیک خارج از منو و چرخش آیکون با Alpine.js کنترل می‌شود.

Dropdown حساب کاربری

ابتدا با استفاده از x-data یک وضعیت برای Dropdown تعریف می‌کنیم. مقدار isOpen مشخص می‌کند که منو باز است یا بسته:

<div class="inline-flex relative" x-data="{ isOpen: false }">

سپس با استفاده از x-on:click وضعیت منو را هنگام کلیک روی دکمه تغییر می‌دهیم:

<button
    type="button"
    x-on:click="isOpen = !isOpen"
>
    ...
</button>

نمایش Dropdown نیز با x-show به وضعیت isOpen وابسته می‌شود. زمانی که مقدار آن true باشد، منو نمایش داده می‌شود و در حالت false مخفی خواهد بود.

<div
    x-cloak
    x-show="isOpen"
>
    ...
</div>

برای بستن منو هنگام کلیک خارج از آن، می‌توان از x-on:click.outside استفاده کرد:

x-on:click.outside="isOpen = false"

در اینجا x-cloak نیز از نمایش Dropdown قبل از آماده شدن Alpine.js جلوگیری می‌کند.

قطعه کد کامل Dropdown حساب کاربری در قالب کامرس به شکل زیر است:

<div class="inline-flex relative" x-data="{ isOpen: false }">

    <button
        type="button"
        class="inline-flex items-center gap-x-2.5 cursor-pointer outline-hidden"
        x-on:click="isOpen = !isOpen"
    >
        <span class="line-clamp-1 font-semibold text-xs">
            ویدا فرهمند
        </span>

        <span class="inline-flex relative">
            <span class="inline-block sm:size-8 size-6 rounded-full overflow-hidden">
                <img
                    src="https://blocks.spacedev.ir/images/avatars/01.jpg"
                    class="size-full object-cover"
                    alt="..."
                />
            </span>

            <span class="absolute -end-0.5 -bottom-0.5 size-3 bg-emerald-500 border-2 border-surface rounded-full"></span>
        </span>
    </button>

    <div
        class="absolute end-1 top-full pt-1.5"
        x-cloak
        x-show="isOpen"
        x-on:click.outside="isOpen = false"
    >
        <div
            class="w-52 bg-surface dark:bg-surface-2 rounded-lg shadow-md inset-shadow-xs inset-shadow-surface-content/10 space-y-2 p-3.5"
        >
            <div class="flex flex-col gap-y-1">
                <span class="block truncate font-semibold text-xs">
                    شما وارد شده‌اید با
                </span>

                <div class="block truncate font-sans font-semibold text-2xs text-surface-2-content">
                    example@example.com
                </div>
            </div>

            <div class="flex flex-col gap-y-0.5">
                <a
                    href="#"
                    class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-surface-2-content transition-colors hover:text-surface-content py-1.5"
                >
                    <span class="font-medium text-xs">
                        مدیریت حساب
                    </span>
                </a>

                <a
                    href="#"
                    class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-surface-2-content transition-colors hover:text-surface-content py-1.5"
                >
                    <span class="font-medium text-xs">
                        تنظیمات
                    </span>
                </a>

                <a
                    href="#"
                    class="flex items-center gap-x-1.5 w-full rounded-full cursor-pointer text-surface-2-content transition-colors hover:text-surface-content py-1.5"
                >
                    <span class="font-medium text-xs">
                        اعلانات
                    </span>
                </a>

                <span class="block h-px bg-border my-1.5"></span>

                <button
                    type="button"
                    class="flex items-center gap-x-1.5 w-full rounded-md cursor-pointer text-destructive py-1.5"
                >
                    <span class="font-medium text-xs">
                        خروج از حساب
                    </span>
                </button>
            </div>
        </div>
    </div>

</div>

در این مثال، TailwindCSS مسئول ظاهر، فاصله‌ها، رنگ‌ها و موقعیت Dropdown است و Alpine.js فقط وضعیت و رفتار آن را مدیریت می‌کند. این الگو را می‌توانید برای سایر بخش‌های تعاملی قالب نیز به کار ببرید.

برای مطالعه قابلیت‌های بیشتر، می‌توانید مستندات رسمی Alpine.js و TailwindCSS را مطالعه کنید.

برای آشنایی بیشتر با تکنولوژی‌ها و کتابخانه‌های استفاده‌شده در قالب کامرس، می‌توانید مستندات رسمی آن‌ها را مطالعه کنید:

• مستندات TailwindCSS — راهنمای استفاده از کلاس‌ها، استایل‌ها و قابلیت‌های TailwindCSS.
• مستندات Alpine.js — راهنمای ایجاد تعاملات و رفتارهای پویا در صفحات.
• مستندات Swiper — راهنمای استفاده و پیکربندی اسلایدرها و Carouselها.
• مستندات noUiSlider — راهنمای استفاده از اسلایدرهای قابل تنظیم، از جمله محدوده قیمت.

قالب کامرس با اکوسیستم SpaceDev هماهنگ شده و می‌توانید در کنار بخش‌های آماده قالب، از کامپوننت‌ها، بلاک‌ها و سکشن‌های منتشرشده در SpaceDev نیز استفاده کنید.

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

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

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

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

هدف این است که محصول در طول زمان بهبود پیدا کند و استفاده صحیح از آن، امکان ادامه این مسیر را فراهم می‌کند.

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

این شرایط برای فریلنسرها و توسعه‌دهندگانی در نظر گرفته شده است که از قالب در پروژه‌های مختلف و برای مشتریان متفاوت استفاده می‌کنند؛ بنابراین برای هر پروژه، خرید جداگانه مورد نیاز است.

تبدیل به قالب وردپرس و انتشار در مارکت

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

سهم همکاری برای انتشار نسخه وردپرس، ۲۰٪ از هر فروش خواهد بود.

تبدیل به اسکریپت لاراول و انتشار برای فروش

برای توسعه‌دهندگانی که قصد دارند قالب را به یک اسکریپت لاراول تبدیل کرده و نسخه توسعه‌یافته آن را برای فروش منتشر کنند نیز امکان همکاری وجود دارد.

سهم همکاری برای نسخه لاراول، ۱۰٪ از هر فروش خواهد بود.

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