آموزش توسعه تم Shopify: فروشگاه آنلاین 2.0 + TailwindCSS

سرفصل ها و درس ها

معرفی Introduction

• قبل از اینکه شروع کنیم Before We Get Started

• Shopify Liquid چیست؟ What is Shopify Liquid?

معرفی Introduction

• معرفی Introduction

• معرفی Introduction

• قبل از اینکه شروع کنیم Before We Get Started

• فروشگاه آنلاین 2.0 چیست؟ What is Online Store 2.0?

• فروشگاه آنلاین 2.0 چیست؟ What is Online Store 2.0?

• Shopify Liquid چیست؟ What is Shopify Liquid?

راه اندازی حساب شرکای خود Setting up your partners account

• ایجاد حساب Shopify Partners Creating Shopify Partners Account

• ایجاد فروشگاه های توسعه Creating Development Stores

راه اندازی حساب شرکای خود Setting up your partners account

• ایجاد حساب Shopify Partners Creating Shopify Partners Account

• ایجاد فروشگاه های توسعه Creating Development Stores

نصب ابزارهای توسعه محلی برای Shopify CLI Installing Local Development Tools For Shopify CLI

• قبل از ادامه مطلب بخوانید! Read before you continue!

• نصب NodeJS Installing NodeJS

• نصب Shopify CLI در ویندوز Installing Shopify CLI on Windows

نصب ابزارهای توسعه محلی برای Shopify CLI Installing Local Development Tools For Shopify CLI

• قبل از ادامه مطلب بخوانید! Read before you continue!

• نصب VSCode در MacOS Installing VSCode in MacOS

• نصب VSCode در MacOS Installing VSCode in MacOS

• نصب NodeJS Installing NodeJS

• نصب Shopify CLI در ویندوز Installing Shopify CLI on Windows

• نصب Shopify CLI در MacOS Installing Shopify CLI on MacOS

• نصب Shopify CLI در MacOS Installing Shopify CLI on MacOS

شروع شدن Getting Started

• ایجاد پروژه تم Shopify با استفاده از Shopify CLI Creating The Shopify Theme Project using Shopify CLI

• با Shopify CLI وارد فروشگاه های توسعه خود شوید Logging in to your development stores with Shopify CLI

• نصب TailwindCSS برای پروژه های تم Shopify Installing TailwindCSS to Shopify theme projects

شروع شدن Getting Started

• ایجاد پروژه تم Shopify با استفاده از Shopify CLI Creating The Shopify Theme Project using Shopify CLI

• با Shopify CLI وارد فروشگاه های توسعه خود شوید Logging in to your development stores with Shopify CLI

• نصب TailwindCSS برای پروژه های تم Shopify Installing TailwindCSS to Shopify theme projects

• رفع خطاهای Shopify CLI با .shopifyignore Fixing Shopify CLI errors with .shopifyignore

• رفع خطاهای Shopify CLI با .shopifyignore Fixing Shopify CLI errors with .shopifyignore

ایجاد نوار ناوبری پاسخگو Creating The Responsive Navigational Bar

• منوهای کشویی (ایجاد پیوندهای فرعی) The Dropdown Menus (Creating sublinks)

ایجاد نوار ناوبری پاسخگو Creating The Responsive Navigational Bar

• نوار ناوبری (ایجاد پیوندهای منو) The Navigational Bar (Creating the menu links)

• نوار ناوبری (ایجاد پیوندهای منو) The Navigational Bar (Creating the menu links)

• منوهای کشویی (ایجاد پیوندهای فرعی) The Dropdown Menus (Creating sublinks)

• مشکل منوهای تودرتو The Problem With Nested Menus

• مشکل منوهای تودرتو The Problem With Nested Menus

• منوی موبایل (ایجاد پنجره منوی موبایل) The Mobile Menu (Creating mobile menu window)

• منوی موبایل (ایجاد پنجره منوی موبایل) The Mobile Menu (Creating mobile menu window)

• نحوه پنهان کردن/نمایش لینک های ورود و ثبت نام مشتری How to hide/show customer login & register links

• نحوه پنهان کردن/نمایش لینک های ورود و ثبت نام مشتری How to hide/show customer login & register links

مدیریت پروژه تم Shopify Shopify Theme Project Management

مدیریت پروژه تم Shopify Shopify Theme Project Management

• استفاده از ادغام GitHub با Shopify Using GitHub integration with Shopify

• استفاده از ادغام GitHub با Shopify Using GitHub integration with Shopify

قالب های JSON JSON Templates

• [404]: یادگیری در مورد الگوهای JSON [404]: Learning about JSON Templates

• [404]: طرح واره تنظیمات [404]: Settings Schema

• [مقاله]: ایجاد پست های وبلاگ [Article]: Creating Blog Posts

• [مقاله]: طراحی صفحه مقاله [Article]: Designing The Article Page

• [مقاله]: بخش نظرات [Article]: Comments Section

• [مقاله]: بهینه سازی موتور جستجو (SEO) شماره 2 [Article]: Search Engine Optimization (SEO) #2

• [وبلاگ]: قالب مایع به JSON [Blog]: Liquid To JSON Template

• [وبلاگ]: تنظیم طرحواره [Blog]: Setting Schema

• [سبد خرید]: بلوک های طرحواره [Cart]: Schema Blocks

• [مجموعه]: قالب مایع به JSON [Collection]: Liquid To JSON Template

• [مجموعه] - ایجاد فایل قطعه کارت محصول [Collection] - Creating The Product Card Snippet File

• [مجموعه] - ایجاد آن افکت زوم در Hover [Collection] - Creating That Zoom Effect on Hover

• [ایندکس] - قالب مایع به JSON [Index] - Liquid To JSON Template

• [فهرست مجموعه ها] - ایجاد یک صفحه مجموعه های فهرست کاری [List Collections] - Creating a Working List Collections Page

• [صفحه] - قالب مایع به JSON [Page] - Liquid To JSON Template

• [صفحه] - صفحه تماس [Page] - Contact Page

• [محصول] - ارائه رسانه های محصول [Product] - Rendering The Product Medias

• [محصول] - ایجاد چرخ فلک های رسانه ای محصول [Product] - Creating Product Media Carousels

• بیایید کد خود را اصلاح کنیم Let's Fix Our Code

• [محصول] - سمت جاوا اسکریپت الگوی محصول [Product] - The JavaScript Side of Product Template

قالب های JSON JSON Templates

• خواندن! این در مورد درس های زیر است! READ! THIS IS ABOUT THE FOLLOWING LESSONS!

• خواندن! این در مورد درس های زیر است! READ! THIS IS ABOUT THE FOLLOWING LESSONS!

• [404]: یادگیری در مورد الگوهای JSON [404]: Learning about JSON Templates

• [404]: طرح واره تنظیمات [404]: Settings Schema

• [404]: طراحی صفحه 404 [404]: Designing The 404 Page

• [404]: طراحی صفحه 404 [404]: Designing The 404 Page

• [مقاله]: ایجاد پست های وبلاگ [Article]: Creating Blog Posts

• [مقاله]: قالب مایع به JSON [Article]: Liquid To JSON Template

• [مقاله]: قالب مایع به JSON [Article]: Liquid To JSON Template

• [مقاله]: طرح واره تنظیمات [Article]: Settings Schema

• [مقاله]: طرح واره تنظیمات [Article]: Settings Schema

• [مقاله]: طراحی صفحه مقاله [Article]: Designing The Article Page

• [مقاله]: بخش نظرات [Article]: Comments Section

• [مقاله]: بهینه سازی موتور جستجو (SEO) شماره 1 [Article]: Search Engine Optimization (SEO) #1

• [مقاله]: بهینه سازی موتور جستجو (SEO) شماره 1 [Article]: Search Engine Optimization (SEO) #1

• [مقاله]: بهینه سازی موتور جستجو (SEO) شماره 2 [Article]: Search Engine Optimization (SEO) #2

• [وبلاگ]: قالب مایع به JSON [Blog]: Liquid To JSON Template

• [وبلاگ]: تنظیم طرحواره [Blog]: Setting Schema

• [وبلاگ]: طراحی صفحه وبلاگ [Blog]: Designing The Blog Page

• [وبلاگ]: طراحی صفحه وبلاگ [Blog]: Designing The Blog Page

• [وبلاگ]: صفحه بندی [Blog]: Paginations

• [وبلاگ]: صفحه بندی [Blog]: Paginations

• [سبد خرید]: قالب مایع به JSON [Cart]: Liquid To JSON Template

• [سبد خرید]: قالب مایع به JSON [Cart]: Liquid To JSON Template

• [سبد خرید]: ساخت صفحه سبد کار [Cart]: Making a Working Cart Page

• [سبد خرید]: ساخت صفحه سبد کار [Cart]: Making a Working Cart Page

• [سبد خرید]: انجام یک سفارش آزمایشی برای فروشگاه های توسعه [Cart]: Making a Test Order for Development Stores

• [سبد خرید]: انجام یک سفارش آزمایشی برای فروشگاه های توسعه [Cart]: Making a Test Order for Development Stores

• [سبد خرید]: بلوک های طرحواره [Cart]: Schema Blocks

• [مجموعه]: قالب مایع به JSON [Collection]: Liquid To JSON Template

• [مجموعه] - طراحی صفحه مجموعه [Collection] - Designing The Collection Page

• [مجموعه] - طراحی صفحه مجموعه [Collection] - Designing The Collection Page

• [مجموعه] - ایجاد فایل قطعه کارت محصول [Collection] - Creating The Product Card Snippet File

• [مجموعه] - ایجاد تنظیمات طرحواره [Collection] - Creating Schema Settings

• [مجموعه] - ایجاد تنظیمات طرحواره [Collection] - Creating Schema Settings

• [مجموعه] - ایجاد آن افکت زوم در Hover [Collection] - Creating That Zoom Effect on Hover

• [ایندکس] - قالب مایع به JSON [Index] - Liquid To JSON Template

• [فهرست] - مجموعه ویژه [Index] - Featured Collection

• [فهرست] - مجموعه ویژه [Index] - Featured Collection

• [فهرست مجموعه ها] - ایجاد یک صفحه مجموعه های فهرست کاری [List Collections] - Creating a Working List Collections Page

• [صفحه] - قالب مایع به JSON [Page] - Liquid To JSON Template

• [صفحه] - ارائه محتوای صفحه [Page] - Rendering The Page Content

• [صفحه] - ارائه محتوای صفحه [Page] - Rendering The Page Content

• [صفحه] - طراحی صفحه [Page] - Designing The Page

• [صفحه] - طراحی صفحه [Page] - Designing The Page

• [بخش سفارشی] - فرم تماس [Custom Section] - Contact Form

• [بخش سفارشی] - فرم تماس [Custom Section] - Contact Form

• [صفحه] - صفحه تماس [Page] - Contact Page

• [محصول] - قالب مایع به JSON [Product] - Liquid To JSON Template

• [محصول] - قالب مایع به JSON [Product] - Liquid To JSON Template

• [محصول] - ایجاد محصولات لازم برای آزمایش [Product] - Creating The Necessary Products For Testing

• [محصول] - ایجاد محصولات لازم برای آزمایش [Product] - Creating The Necessary Products For Testing

• [محصول] - ارائه رسانه های محصول [Product] - Rendering The Product Medias

• [محصول] - ایجاد چرخ فلک های رسانه ای محصول [Product] - Creating Product Media Carousels

• [محصول] - ایجاد فرم محصول [Product] - Creating The Product Form

• [محصول] - ایجاد فرم محصول [Product] - Creating The Product Form

• بیایید کد خود را اصلاح کنیم Let's Fix Our Code

• [محصول] - ایجاد بلوک های طرحواره برای فرم محصول [Product] - Creating Schema Blocks for the Product Form

• [محصول] - ایجاد بلوک های طرحواره برای فرم محصول [Product] - Creating Schema Blocks for the Product Form

• [محصول] - سمت جاوا اسکریپت الگوی محصول [Product] - The JavaScript Side of Product Template

• [جستجو] - ایجاد نوار جستجو [Search] - Creating The Search Bar

• [جستجو] - ایجاد نوار جستجو [Search] - Creating The Search Bar

• [جستجو] - ارائه محصولات در نتایج جستجو [Search] - Rendering Products in Search Results

• [جستجو] - ارائه محصولات در نتایج جستجو [Search] - Rendering Products in Search Results

مشتریان Customers

• [مشتری] - صفحه ثبت نام [Customer] - Registration Page

• [مشتری] - آزمایش فرم رمز عبور خود را فراموش کرده اید [Customer] - Testing Forgot Your Password Form

• [مشتری] - بازنشانی فرم رمز عبور [Customer] - Reset Password Form

• [مشتری] - ورود مهمان [Customer] - Guest Login

• [مشتری] - صفحه حساب [Customer] - Account Page

• [مشتری] - سفارش صفحه شماره 2 [Customer] - Order Page #2

• [مشتری] - سفارش صفحه شماره 3 [Customer] - Order Page #3

• [مشتری] - صفحه آدرس ها (ایجاد رابط) [Customer] - Addresses Page (Creating the interface)

• [مشتری] - صفحه آدرس ها (ایجاد مدال آدرس جدید) [Customer] - Addresses Page (Creating The New Address Modal)

• [مشتری] - صفحه آدرس ها (جاوا اسکریپت سمت فرم آدرس مشتری) [Customer] - Addresses Page (JavaScript Side of Customer Address Form)

• [مشتری] - صفحه آدرس ها (در حال حذف آدرس ها) [Customer] - Addresses Page (Deleting addresses)

• [مشتری] - صفحه حساب را فعال کنید [Customer] - Activate Account Page

مشتریان Customers

• [مشتری] - صفحه ورود [Customer] - Login Page

• [مشتری] - صفحه ورود [Customer] - Login Page

• [مشتری] - صفحه ثبت نام [Customer] - Registration Page

• [مشتری] - آزمایش فرم رمز عبور خود را فراموش کرده اید [Customer] - Testing Forgot Your Password Form

• [مشتری] - بازنشانی فرم رمز عبور [Customer] - Reset Password Form

• [مشتری] - ورود مهمان [Customer] - Guest Login

• [مشتری] - صفحه حساب [Customer] - Account Page

• [مشتری] - سفارش صفحه شماره 1 [Customer] - Order Page #1

• [مشتری] - سفارش صفحه شماره 1 [Customer] - Order Page #1

• [مشتری] - سفارش صفحه شماره 2 [Customer] - Order Page #2

• [مشتری] - سفارش صفحه شماره 3 [Customer] - Order Page #3

• [مشتری] - صفحه آدرس ها (ایجاد رابط) [Customer] - Addresses Page (Creating the interface)

• [مشتری] - صفحه آدرس ها (ایجاد مدال آدرس جدید) [Customer] - Addresses Page (Creating The New Address Modal)

• [مشتری] - صفحه آدرس ها (جاوا اسکریپت سمت فرم آدرس مشتری) [Customer] - Addresses Page (JavaScript Side of Customer Address Form)

• [مشتری] - صفحه آدرس ها (ایجاد مدال ویرایش آدرس) [Customer] - Addresses Page (Creating The Edit Address Modal)

• [مشتری] - صفحه آدرس ها (ایجاد مدال ویرایش آدرس) [Customer] - Addresses Page (Creating The Edit Address Modal)

• [مشتری] - صفحه آدرس ها (تنظیم به عنوان آدرس پیش فرض) [Customer] - Addresses Page (Set as default address)

• [مشتری] - صفحه آدرس ها (تنظیم به عنوان آدرس پیش فرض) [Customer] - Addresses Page (Set as default address)

• [مشتری] - صفحه آدرس ها (در حال حذف آدرس ها) [Customer] - Addresses Page (Deleting addresses)

• [مشتری] - صفحه حساب را فعال کنید [Customer] - Activate Account Page

Shopify CLI، بررسی تم، AlpineJS Shopify CLI, Theme Check, AlpineJS

• رفع مشکل Blipping AlpineJS Fixing AlpineJS Blipping Issue

Shopify CLI، بررسی تم، AlpineJS Shopify CLI, Theme Check, AlpineJS

• رفع مشکل Blipping AlpineJS Fixing AlpineJS Blipping Issue

• رفع خطاهای Shopify CLI Fixing Shopify CLI Errors

• رفع خطاهای Shopify CLI Fixing Shopify CLI Errors

• استفاده از بررسی تم Using Theme Check

• استفاده از بررسی تم Using Theme Check

• رفع خطای SwiperJS و اندازه رسانه Fixing SwiperJS error and the media size

• رفع خطای SwiperJS و اندازه رسانه Fixing SwiperJS error and the media size

آموزش مدل های سه بعدی در تم های Shopify Learning about 3D Models in Shopify themes

• استفاده از مدل های سه بعدی در Shopify Using 3D Models in Shopify

• ایجاد جاوا اسکریپت عنصر سفارشی <product-model> Creating JavaScript of <product-model> custom element

آموزش مدل های سه بعدی در تم های Shopify Learning about 3D Models in Shopify themes

• استفاده از مدل های سه بعدی در Shopify Using 3D Models in Shopify

• Model Viewer چیست؟ What is Model Viewer?

• Model Viewer چیست؟ What is Model Viewer?

• راه اندازی عنصر سفارشی مدل محصول Setting up the product model custom element

• راه اندازی عنصر سفارشی مدل محصول Setting up the product model custom element

• راه اندازی پنجره مودال مدل محصول Setting up the product model modal window

• راه اندازی پنجره مودال مدل محصول Setting up the product model modal window

• ایجاد جاوا اسکریپت عنصر سفارشی <product-model> Creating JavaScript of <product-model> custom element

• نوشتن سبک CSS مدل Viewer برای به حداکثر رساندن اندازه آن Writing the CSS style of the Model Viewer to maximize its size

• نوشتن سبک CSS مدل Viewer برای به حداکثر رساندن اندازه آن Writing the CSS style of the Model Viewer to maximize its size

• با استفاده از ویژگی Model Viewer UI Shopify Using the Model Viewer UI Feature of Shopify

• با استفاده از ویژگی Model Viewer UI Shopify Using the Model Viewer UI Feature of Shopify