در این راهنما، نحوه شروع به کار توسعه تم Shopify را به شما آموزش خواهیم داد.
الزامات
قبل از شروع به موارد زیر نیاز دارید:
-
URL فروشگاهی که می خواهید روی آن کار کنید. توصیه می کنیم برای اولین بار برای یک حساب شریک Shopify ثبت نام کنید و یک فروشگاه توسعه جدید ایجاد کنید.
-
اجازه کار بر روی مضامین فروشگاهی که روی آن کار می کنید. اگر در فروشگاه تاجر کار می کنید، باید مطمئن شوید که یک همکار یا حساب کارمند دارید که به آن اعطا شده است. تم ها را مدیریت کنید یا تم ها اجازه. اگر روی یک حساب Partner و یک فروشگاه توسعه کار می کنید، در حال حاضر نیازی به نگرانی در مورد این مرحله ندارید.
هر زمان که یک خریدار در حال مرور محصولات یا خدمات ارائه شده توسط یک تاجر Shopify است، با موضوع فروشگاه در تعامل است. تم ها به ویترین فروشگاه Shopify کمک می کنند و تم های منحصر به فرد و جذاب به افزایش ترافیک و نرخ تبدیل کمک می کند.
اگر به دنبال شروع ساختن تم های خود هستید، دو گزینه دارید. می توانید تم های سفارشی برای بازرگانان بسازید یا تم هایی بسازید که برای فروش در فروشگاه تم Shopify فهرست شده اند. در هر صورت، شروع کار آسان است، زیرا راه اندازی یک محیط توسعه محلی برای ساخت تم های Shopify کمتر از 10 دقیقه طول می کشد و ما اینجا هستیم تا شما را از طریق این مراحل راهنمایی کنیم.
https://www.youtube.com/watch?v=MY-KzAebqqc
Shopify CLI یا کیت تم؟
Shopify دو ابزار CLI دارد که می توان از آنها برای توسعه تم ها استفاده کرد: Shopify CLI و Theme Kit. توصیه می کنیم از Shopify CLI استفاده کنید، زیرا این جدیدترین ابزار Shopify برای ساخت تم و برنامه است. آنها در ماه‌های اخیر تعدادی بهبود در آن منتشر کرده‌اند و Shopify استفاده از آن را برای توسعه تم فروشگاه آنلاین 2.0 توصیه می‌کند. برای تم های قدیمی، کیت تم را می توان نصب و به جای آن استفاده کرد.
Shopify یک راهنمای برای راه اندازی با CLI دارد. این راهنما این مراحل را پوشش می‌دهد و اطلاعات مفید اضافی در مورد ساختن تم‌ها با استفاده از CLI در اختیار شما قرار می‌دهد. اگر می خواهید از کیت تم برای کار بر روی یک تم قدیمی استفاده کنید، Shopify یک راهنمای شروع جداگانه دارد.
پسوندهای برنامه تم چطور؟
پسوندهای برنامه تم راهی برای تزریق قطعات کوچکی از عملکرد سفارشی به یک تم موجود است. به عنوان مثال، اگر می‌خواهید یک ربات چت ویترین یا یک مسابقه پیشنهادی محصول را به یک موضوع اضافه کنید، می‌توانید این کار را با استفاده از برنامه افزودنی برنامه تم انجام دهید.
افزونه‌های برنامه تم نیز با استفاده از Shopify CLI ساخته می‌شوند، اما به‌عنوان بخشی از یک برنامه عمومی یا سفارشی Shopify به‌جای بخشی از یک موضوع منتشر می‌شوند. سپس بازرگانان می توانند از ویرایشگر تم Shopify برای قرار دادن پسوند برنامه تم در جایی در ویترین فروشگاه استفاده کنند.
این راهنما پسوندهای برنامه تم را پوشش نمی دهد. اگر به دنبال شروع ساخت برنامه های فروشگاهی با استفاده از پسوندهای برنامه تم هستید، می توانید آموزش مسابقه محصول گجت را بررسی کنید.
مرحله 0: نصب وابستگی ها و Shopify CLI
قبل از شروع کار با Shopify CLI، برخی از وابستگی‌های مورد نیاز باید نصب شوند. Shopify تمام وابستگی های سایت خود را فهرست می کند: Ruby، Node و git برای همه سیستم عامل ها مورد نیاز است.
همه چیز در مک بسیار ساده است، دو دستور homebrew Shopify CLI و همچنین هر یک از وابستگی های مورد نیاز را نصب می کند.
brew tap shopify/shopify
brew install shopify-cli
توسعه دهندگان ویندوز و لینوکس قبل از اینکه Shopify CLI در سطح جهانی با استفاده از آن نصب شود، وابستگی های اضافی لازم دارند npm.
npm install -g @shopify/cli @shopify/theme
هنگامی که Shopify CLI نصب شد، می توانید با اجرا کردن، تأیید کنید که به درستی نصب شده است shopify در ترمینال، که نسخه فعلی و همچنین موضوعات و دستورات موجود را چاپ می کند. توجه کنید که یکی از موضوعات این است theme، این همان چیزی است که شما از آن برای توسعه تم استفاده خواهید کرد. اگر می خواهید تمام دستورات تم موجود را ببینید، می توانید این کار را با استفاده از آن انجام دهید shopify theme.
پس از نصب CLI، می توانید با شبیه سازی یک تم موجود شروع کنید.
مرحله 1: شبیه سازی یک موضوع
اکنون باید مقداری کد موضوع را در دستگاه محلی خود پایین بیاورید. به دایرکتوری که می خواهید تم خود را در آن کلون کنید و اجرا کنید بروید shopify theme init. از شما خواسته می شود که موضوع جدید خود را نامگذاری کنید و سپس تم Shopify’s Dawn در پوشه کلون می شود.
اگر می خواهید یک تم متفاوت را کلون کنید، می توانید از a استفاده کنید --clone-url پرچم گذاری کنید تا به مخزن دیگری اشاره کنید. مثلا، shopify theme init –-clone-url https://github.com/Shopify/dawn.git (این همچنین Dawn را شبیه سازی می کند، اما شما ایده را دریافت می کنید).
اکنون که یک تم پایه دارید، می توانید تغییر قالب را شروع کنید!
مرحله 2: شروع به ساختن کنید
با آماده بودن کد طرح زمینه، می‌توانید سرور توسعه خود را راه‌اندازی کنید و تغییراتی در تم سفارشی ایجاد کنید. برای انجام این کار، اجرا کنید shopify theme init –-store و کد طرح زمینه محلی شما با فروشگاه ارسال شده همگام سازی می شود. پس از تکمیل همگام‌سازی، می‌توانید پیش‌نمایش طرح زمینه خود را در http://127.0.0.1:9202.
اگر هنگام کلیک بر روی این پیوند با فرم ورود به سیستم مواجه شدید، باید رمز عبور را از مدیر فروشگاه بگیرید. در ادمین، روی آن کلیک کنید فروشگاه آنلاین، سپس اولویت ها. رمز عبور در صفحه تنظیمات برگزیده خواهد بود. آن را کپی و در فرم ورود قرار دهید، و باید پیش نمایشی از تم خود را در فروشگاه ببینید!
بارگذاری مجدد ماژول داغ خارج از جعبه کار می کند، بنابراین هرگونه تغییر CSS یا بخش بلافاصله قابل مشاهده خواهد بود. توجه داشته باشید که طبق اسناد Shopify این پیش نمایش فقط در کروم موجود است! من متوجه شدم که ایجاد تغییرات کوچک در sections/image-banner.liquid یک راه عالی برای شروع تغییرات آزمایشی هنگام کار بر روی تم پیش‌فرض Dawn است. این تغییراتی را ایجاد می کند که در صفحه اصلی موضوع منعکس می شود.
توجه داشته باشید: اگر سرور توسعه خود را متوقف کنید و بخواهید آن را در همان فروشگاه راه اندازی مجدد کنید، فقط می توانید اجرا کنید
shopify theme devبدون--storeپرچم.
برخی از دستورات منظم دیگر در CLI وجود دارد که به توسعه تم کمک می کند. یک مثال قابل توجه، دویدن shopify theme check بررسی تم را اجرا می‌کند، که برای فایل‌های Liquid و JSON در تم شما است. بررسی تم هر گونه خطا در طرح زمینه شما را شناسایی می کند، مانند خطاهای نحوی، متغیرهای استفاده نشده و قطعه ها، و حتی به مشکلات بالقوه عملکرد اشاره می کند. بررسی تم در حال اجرا برای تشخیص این خطاها قبل از فشار دادن یا انتشار طرح زمینه احتمالاً ایده خوبی است!
هنگام ساختن تم ها در ویرایشگر محلی خود، نصب برنامه های افزودنی برای کمک به نوشتن Liquid نیز مفید است. اگر در VSCode کار می کنید، Shopify یک پسوند Liquid دارد که به برجسته سازی نحو، قالب بندی و تکمیل خودکار کمک می کند. پاداش: این افزونه برای پسوندهای برنامه تم نیز کار می کند.
مرحله ۲.۵: Liquid را بیاموزید
این را نمی توان در چند پاراگراف در یک پست وبلاگ پوشش داد.
در واقع، نمی توان آن را با یک پست وبلاگ مستقل پوشش داد. حداقل، یک پست وبلاگ با طول معقول.
تم های Shopify با Liquid ساخته شده اند که زبان قالب آنها است. Shopify مستندات Liquid زیادی دارد و دوره های کاملی وجود دارد، از جمله دوره های ارائه شده توسط Shopify، که بر آموزش توسعه دهندگان نحوه ساخت تم تمرکز دارد. به همین دلیل، من قصد ندارم جزئیات مایع را در اینجا پوشش دهم. اما اگر وارد توسعه تم هستید، باید مطمئن شوید که درک مناسبی از Liquid و نحوه استفاده از آن برای ساخت تم دارید.
مرحله 3: فشار دادن و انتشار تم ها
هنگامی که تغییراتی در تم خود ایجاد کردید، می توانید فشار دادن آن را به فروشگاه شما. شما همچنین می توانید از CLI استفاده کنید انتشار تم به طوری که این نسخه زنده است که خریداران هنگام بازدید از فروشگاه می بینند.
برای انتقال تم خود به فروشگاه، می توانید دستور را اجرا کنید shopify theme push -–unpublished. با استفاده از --unpublished flag یک تم جدید برای فروشگاه ایجاد می کند. از شما خواسته می شود که به موضوع خود یک نام بدهید و این نام به عنوان نام تم جدید در ادمین ظاهر می شود. شما فقط باید شامل کنید --unpublished اولین باری که یک تم جدید را فشار می دهید. هر گونه تغییر اضافی را می توان بدون گنجاندن پرچم تحت فشار قرار داد.
هنگامی که طرح زمینه شما تحت فشار قرار گرفت، می توانید آن را در مدیریت فروشگاه در زیر مشاهده کنید فروشگاه آنلاین → تم. بازرگانان می‌توانند با استفاده از گزینه‌های تم موجود، طرح زمینه را با کلیک کردن روی آن سفارشی کنند شخصی سازی دکمه. با کلیک بر روی دکمه بیضی (…) و سپس انتخاب کد را ویرایش کنید، به شما امکان می دهد تمام فایل های کد تم خود را مشاهده کنید، جایی که در صورت تمایل می توانید سفارشی سازی های منحصر به فردی را برای یک فروشگاه انجام دهید.
هنگامی که یک موضوع منتشر می شود، تبدیل به تم زنده ای می شود که خریداران هنگام بازدید از فروشگاه می بینند. دو راه برای انتشار یک موضوع وجود دارد که روی آن کلیک کنید دکمه انتشار در ادمین یا در حال اجرا shopify theme publish در CLI اجرای دستور در CLI از شما می‌خواهد که موضوعی را که می‌خواهید منتشر کنید انتخاب کنید، که تغییر سریع تم موجود در فروشگاه را آسان می‌کند.
این یک مرور کلی سریع و کامل از راه اندازی یک محیط توسعه تم Shopify بود. اگر در مورد راه‌اندازی محیط خود (یا ساخت برنامه‌های سفارشی Shopify) سؤالی دارید، به Discord توسعه‌دهنده Gadget بپیوندید و بپرسید.
