آموزش دوره جامع توسعه قالب شاپیفای (Shopify) - آخرین آپدیت

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

مقدمه Introduction

• خوش‌آمدگویی Welcome

• راه‌اندازی محیط توسعه Setting up development environment

• ساخت حساب Shopify Partners Create Shopify partners account

ابزار Shopify CLI Shopify CLI

• نصب Installation

• دستورات CLI CLI Commands

• اجرای سرور توسعه محلی Start local development server

• معرفی Shopify Theme Kit Shopify theme kit

مبانی Alpine JS Basics of Alpine JS

• Alpine چیست؟ What is alpine?

• درک مفهوم کامپوننت Understanding component

• دایرکتیوها و x-data چیستند؟ What are directives and x-data

• بررسی x-text و x-html x-text and x-html

• بررسی x-if و x-show x-if && x-show

• رویدادها و اصلاح‌کننده‌های رویداد Events and event modifiers

• بررسی x-bind x-bind

• ساخت تب‌ها با استفاده از x-bind creating tabs using x-bind

• بررسی x-model و x-modelable x-model and x-modelable

• بررسی x-for x-for

• بررسی x-init و x-ref x-init && x-ref

• ویژگی‌های جادویی (Magic Properties) Magic properties

• استفاده از $dispatch $dispatch

شروع مسیر توسعه قالب شاپیفای Starting Your Shopify Theme Development Journey

• ساخت فروشگاه توسعه Creating development store

• ساخت فایل‌های قالب و بررسی ساختار تم Creating theme files and exploring structure of theme

• همگام‌سازی فروشگاه محلی با فروشگاه زنده Sync local development store with live store

• اتصال قالب شاپیفای به گیت‌هاب Connect Shopify theme with Github

• درک فایل‌های پیکربندی (Configuration) Understanding configuration files

• بررسی فایل theme.liquid Exploring theme.liquid file

• درک قالب‌های JSON Understanding JSON Template

ساخت و سفارشی‌سازی هدر (Header) Creating and Customizing the Header

• بررسی منوها Exploring menus

• اشیاء ناوبری (Navigation Objects) Navigation objects

• ساخت CSS و کلاس‌های کاربردی Creating CSS and utility classes

• درک تنظیمات کلی و تنظیمات خاص هر بخش Understanding global settings, section specific settings

• ساختار ناوبری Navigation structure

• طراحی ناوبری Design navigation

• کار با لوگو Working with logo

• کار با آیکون‌ها Working with icons

• کار با رنگ‌ها و فونت‌های سایت Working with site colors and fonts

• ساخت کلاس‌های کاربردی با استفاده از رنگ‌های سایت Create utility classes using site color

• پیاده‌سازی سبد خرید کشویی Working with cart drawer

• پیاده‌سازی جستجوی کشویی Working with search drawer

• پیاده‌سازی منوی موبایل کشویی Working with mobile menu drawer

• ناوبری موبایل Mobile navigation

• طراحی ناوبری موبایل و استفاده از x-cloak Designing mobile navigation, using x-cloak

• کار با لینک حساب کاربری Working with account link

ساخت بخش فوتر (Footer) Creating the Footer Section

• مقدمه Introduction

• تنظیمات Schema Schema settings

• تولید کلاس گرید پویا برای بخش فوتر Generating dynamic grid class for footer section

• ساخت ساختار HTML Creating HTML structure

• کار با بخش شبکه‌های اجتماعی و کپی‌رایت Working with social media and copyright section

• طراحی فوتر Designing footer

• طراحی آیکون‌های شبکه‌های اجتماعی Designing social media icons

• طراحی ریسپانسیو فوتر Working with footer responsive design

بنر تصویری Image Banner

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML Working with HTML structure

• طراحی بخش بنر Working with the section design

نوار اعلان (Announcement Bar) Announcement Bar

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار و طراحی Working with structure and design

تنظیمات Laravel mix، Alpine JS و تنظیمات کلی هدینگ سایت Laravel mix, Alpine JS and global settings for site heading

• نصب Laravel Mix و Alpine JS Installing Laravel Mix and Alpine JS

• تنظیمات کلی برای هدینگ سایت Global settings for site heading

متن غنی (Rich Text) Rich Text

• تنظیمات Schema Schema settings

• ساخت ساختار HTML و طراحی Creating HTML structure and design

تصویر به همراه متن Image With Text

• ساخت تنظیمات Schema Creating schema settings

• ساخت ساختار HTML Creating HTML structure

• طراحی بخش تصویر به همراه متن Image with text designing

مجموعه Featured Featured Collection

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML Working with HTML structure

• کار با طراحی Working with design

ویدیوی ویژه Featured Video

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML Working with HTML structure

• کار با طراحی Working with design

دعوت به اقدام (CTA) Call To Action

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML و طراحی Working with HTML structure and Design

بخش تصویر با سایدبار Image Section With Sidebar

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML Working with HTML structure

• کار با طراحی Working with design

فرم تماس Contact Form

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML Working with HTML structure

• کار با طراحی Working with design

سوالات متداول (FAQ) Frequently Asked Question

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML و طراحی Working with HTML structure and design

وبلاگ Blog

• کار با تنظیمات Schema Working with schema settings

• کار با ساختار HTML Working with HTML structure

• کار با طراحی Working with design

صفحه محصول Product Page

• کار با تنظیمات Schema Working with schema settings

• اسلایدر تصاویر محصول Product image slider

• نمایش اطلاعات محصول Display product information

• کار با فیلد تعداد Working with quantity field

• پیاده‌سازی قابلیت افزودن به سبد خرید Creating add to cart functionality

• کار با انیمیشن لودر Working with loader animation

• به‌روزرسانی تعداد آیتم‌های سبد خرید Updating cart item count

• نمایش متغیرهای محصول (Variations) Display variations

• دریافت مقادیر انتخاب شده از دراپ‌داون Getting selected values from the dropdown

• دریافت متغیر فعلی Getting current variant

• به‌روزرسانی ID متغیر، URL و SKU Updating variation id, URL, and SKU

• به‌روزرسانی تصویر اسلایدر Updating slider image

• به‌روزرسانی قیمت متغیر محصول با استفاده از AJAX Updating product variation price using ajax

• کار با Swatches (نمونه رنگ و مدل) Working with swatches

• دریافت متغیر انتخاب شده از Swatches Get selected variant from swatches

• کار با Swatches رنگ و تصویر Working with color and image swatches

• کار با Metafields محصولات Working with product metafields

سبد خرید کشویی (Mini Cart) Cart Drawer (Mini Cart)

• نمایش پیام سبد خرید خالی در Cart Drawer Cart drawer display empty cart message

• نمایش آیتم‌های سبد خرید Display cart items

• طراحی مینی کارت Designing mini cart

• ساخت Endpoint سفارشی برای به‌روزرسانی سبد خرید Creating custom endpoint to update cart items

• ساخت شیء سراسری برای به‌روزرسانی تعداد سبد خرید Creating global object to update cart quantity

جستجوی پیش‌بین و صفحه جستجو Predictive Search & Search Page

• مقدمه Introduction

• نوشتن کدهای جاوا اسکریپت Creating Java Script code

• نمایش نتایج جستجو Display results

• صفحه جستجو Search page

صفحه مجموعه (Collection) Collection Page

• تنظیمات Schema Schema settings

• نمایش محصولات Display products

• افزودن صفحه‌بندی (Pagination) Add pagination

• ساختار فیلتر کردن و مرتب‌سازی Structure for filtering and sorting

• افزودن قابلیت مرتب‌سازی Adding sort functionality

• درک collection.filters Understanding collection.filters

• نمایش فیلترها Display filters

• طراحی فیلترها Design filters

• افزودن قابلیت فیلتر کردن Add filter functionality

• افزودن قابلیت بازنشانی (Reset) فیلترها Add reset filter functionality

• تکمیل نهایی فیلترها Finish up filters

صفحه وبلاگ Blog Page

• درک شیء Blog و افزودن تنظیمات Schema Understanding blog object and adding schema settings

• نمایش وبلاگ‌ها و افزودن صفحه‌بندی Show blogs and add pagination

• صفحه مقاله Article page

صفحات داخلی Pages

• کار با صفحات Working with pages

• کار با قالب صفحه (Page Template) Working with page template

• صفحه 404 404 page

صفحات حساب کاربری Account Pages

• تنظیمات Schema صفحه ثبت‌نام Register page schema settings

• ساختار HTML صفحه ثبت‌نام HTML structure for register page

• طراحی صفحه ثبت‌نام Design register page design

• صفحه ورود Login page

• صفحه بازیابی رمز عبور Reset password page

• تست صفحات حساب کاربری Testing account pages

پایان دوره Course completion

• تبریک و پایان دوره Congratulation