Shopify mövzu inkişafı əsasları funksional, cavabdeh və unikal vitrin təcrübələri yaratmaq üçün Liquid və JSON-u mənimsəməkdən ibarətdir. Liquid, Shopify-ın verilənlər bazası ilə vizual vitrininiz arasında körpü rolunu oynayır, JSON isə konfiqurasiya parametrlərini idarə edir. Bu iki əsas texnologiyanı başa düşməklə, siz məhsulların, kolleksiyaların və səhifə tərtibatlarının müştərilərə necə göründüyünü manipulyasiya etmək qabiliyyəti qazanırsınız. Bu təməl bilik, platformada mağaza qurmaq və ya onu ciddi şəkildə fərdiləşdirmək istəyən hər kəs üçün əsas tələbdir.
Mövzu inkişafında Liquid-in rolu nədir?
Liquid, mağazanız üçün dinamik məzmun göstərilməsini təmin etmək üçün Shopify tərəfindən yaradılmış şablon dilidir. Müştəri bir səhifəyə daxil olduqda, Shopify backend-indən məlumat əldə etmək üçün mövzu fayllarınızdakı Liquid kodu icra olunur. Bu, məhsul adlarını, qiymətləri, təsvirləri və şəkilləri birbaşa HTML strukturunuza daxil etməyə imkan verir. Liquid-i brauzer pəncərəsinin hansı hissəsində hansı məlumatın görünməli olduğuna qərar verən məntiq qatı kimi düşünün. Liquid olmadan, mövzunuz mağaza inventarınıza yeni bir məhsul əlavə etdikdə özünü yeniləyə bilməyən statik bir sənəd olardı.
Liquid istifadə etməyin əsas üstünlüyü, əsas proqramlaşdırma anlayışlarına malik olan tərtibatçılar üçün oxunaqlı olması üçün nəzərdə tutulmuş sintaksisidir. Çıxışı idarə etmək üçün obyektlərdən, teqlərdən və filtrlərdən istifadə edirsiniz. {{ product.title }} kimi obyektlər mühərrikə tam olaraq hansı məzmunu çəkməli olduğunu deyir, {% if product.available %} kimi teqlər isə səhifədə şərti məntiqi idarə etməyə kömək edir. Bu sadə elementləri birləşdirərək, xüsusi naviqasiya menyuları və ya fərdiləşdirilmiş məhsul tövsiyələri kimi mürəkkəb mağaza funksiyaları qura bilərsiniz. Bu dili mənimsəmək peşəkar səviyyəli Shopify vitrini qurmaq üçün ilk addımdır.
JSON konfiqurasiyası mövzunuzu necə gücləndirir?
JSON, tacirlərə əsas şablon koduna toxunmadan mağaza dizaynını dəyişdirməyə imkan verən konfiqurasiya onurğası kimi xidmət edir. Müasir Shopify mövzu arxitekturasında hər bir bölmə JSON formatında müəyyən edilmiş sxem blokunu ehtiva edir. Bu sxem rəng seçiciləri, mətn sahələri və ya şəkil yükləyiciləri kimi hansı parametrlərin Shopify mövzu redaktorunda görünəcəyini müəyyən edir. Mağaza sahibi idarəetmə panelində bir parametri dəyişdikdə, JSON faylı yenilənir və Liquid şablonları bu dəyişiklikləri dərhal canlı saytda əks etdirir.
Bu strukturun əsas üstünlüyü məntiq və təqdimatın ayrılmasıdır. HTML və Liquid-inizi bir dəfə yazırsınız, sonra istifadəçinin idarə edə biləcəyi dəyişənləri müəyyən etmək üçün JSON sxemindən istifadə edirsiniz. Məsələn, bir tacirin qəhrəman bölməsinin fon rəngini dəyişməsinə icazə vermək istəyirsinizsə, həmin bölmənin JSON blokunda bir parametr təyin edirsiniz. Bu yanaşma kodunuzu mütəşəkkil saxlayır və texniki olmayan istifadəçilərin brend rənglərini və ya tanıtım mətnlərini yeniləməyə çalışarkən saytı təsadüfən sındırmasının qarşısını alır.
Shopify mövzu strukturunun əsas komponentləri
Standart Shopify mövzusu sistemin tapmağı gözlədiyi ciddi fayl kataloqu strukturuna əməl edir. Bu iyerarxiyanı başa düşmək effektiv mövzu inkişafı və nasazlıqların aradan qaldırılması üçün vacibdir. Fayllar tərtibatı, şablonları, bölmələri və aktivləri ayıran fərqli qovluqlarda təşkil edilmişdir. Hər bir qovluq render prosesində xüsusi bir məqsədə xidmət edir və faylı səhv yerə qoymaq çox vaxt platformanın onu tamamilə görməməzlikdən gəlməsinə səbəb olacaq.
- Layout: Bütün sayt üçün əsas fayl kimi çıxış edən theme.liquid faylını ehtiva edir.
- Templates: Məhsul, kolleksiya, səbət və indeks kimi xüsusi səhifələr üçün tərtibatı müəyyən edir.
- Sections: Mövzu redaktoru vasitəsilə əlavə edilə bilən və ya silinə bilən təkrar istifadə edilə bilən modullar.
- Snippets: Bölmələrdə və ya şablonlarda daxil edilə bilən kiçik, təkrar istifadə edilə bilən kod parçaları.
- Assets: Mövzu üçün tələb olunan şəkilləri, CSS fayllarını və JavaScript fayllarını saxlayır.
- Config: Mövzu konfiqurasiyası üçün settings_schema.json və settings_data.json fayllarını saxlayır.
Dərin kodlaşdırma biliyi olmadan mövzuları fərdiləşdirə bilərsinizmi?
Bir çox yeni başlayanlar sıfırdan qurmaq əvəzinə mövcud mövzuları dəyişdirərək başlayırlar. Bu, kiçik tərtibat düzəlişlərinə ehtiyacı olan, lakin dərhal xüsusi bir tərtibatçı işə götürmək istəməyən mağaza sahibləri üçün ümumi bir nümunədir. Shopify adminindəki ‘Edit code’ seçiminə daxil olaraq, mövzunun necə bir araya gətirildiyini görə bilərsiniz. Yeni bölmələr yaratmağa keçməzdən əvvəl brend şəxsiyyətinizə uyğunlaşmaq üçün sadə CSS üslublarını dəyişməklə başlaya bilərsiniz. Canlı mövzunuzun dublikatı üzərində işlədiyiniz müddətcə öyrənmək üçün təhlükəsiz bir yoldur.
Əgər yeni başlayırsınızsa, yenisini yaratmazdan əvvəl mövcud bölməni dəyişdirməyə çalışın. Sections qovluğunda bir fayl açın və Liquid teqlərini axtarın. Sadə bir mətn etiketini dəyişdirin və ya CSS faylında marja dəyərini tənzimləyin. Bu kiçik təcrübələr bütün mağazanızı sındırmaq riski olmadan faylların bir-biri ilə necə qarşılıqlı əlaqədə olduğunu başa düşməyə kömək edir. Bu kiçik düzəlişlərlə rahatlaşdıqdan sonra, unikal satış tədbirləri və ya marketinq kampaniyaları üçün xüsusi səhifə şablonları yaratmaq kimi daha qabaqcıl tapşırıqlara keçməyin daha asan olduğunu görəcəksiniz.
Təmiz kodu saxlamaq üçün ən yaxşı təcrübələr
Təmiz kod bazasını saxlamaq uzunmüddətli mağaza performansı və yeniləmələrin asanlığı üçün vacibdir. Yeni başlayanların etdiyi ümumi bir səhv, theme.liquid faylını çoxlu xüsusi kodla qarışdırmaqdır. Bunun əvəzinə, məntiqinizi modul və tapılması asan saxlamaq üçün snippet-lərdən istifadə edin. Həm məhsul səhifəsində, həm də kolleksiya səhifəsində istifadə etdiyiniz bir kod blokunuz varsa, onu snippet-ə köçürün. Bu, artıqlığı azaldır və həmin funksiyanı daha sonra bütün saytınızda qlobal miqyasda yeniləməyi çox asanlaşdırır.
Digər bir təcrübə aktivlərinizi optimallaşdırılmış saxlamağı əhatə edir. Böyük, sıxılmamış şəkillər və ya ağır JavaScript kitabxanaları mağazanızın yüklənmə vaxtlarını əhəmiyyətli dərəcədə ləngidə bilər. Assets qovluğuna yükləməzdən əvvəl həmişə şəkil fayllarınızı sıxın. Xüsusi JavaScript əlavə edərkən, onun zəruri olduğundan əmin olun və səhifənin göstərilməsini bloklamasının qarşısını almaq üçün onu səmərəli şəkildə yükləyin. Fayl ölçüsünü kiçik və kodu mütəşəkkil saxlamaqla, mağazanızın sürətli və cavabdeh qalmasını təmin edirsiniz ki, bu da müştəriləriniz üçün yaxşı istifadəçi təcrübəsini qorumaq üçün vacib amildir.
Mövzu dəyişikliklərinizi sınaqdan keçirmək və yerləşdirmək
- Hər hansı bir kod dəyişikliyi etməzdən əvvəl həmişə cari canlı mövzunuzun dublikatını yaradın.
- Render problemlərini sazlamaq üçün brauzerinizdə Shopify Theme Inspector-dan istifadə edin.
- CSS-in cavabdeh olduğundan əmin olmaq üçün mağazanızı bir neçə mobil cihazda yoxlayın.
- Funksionallığı bloklaya biləcək hər hansı JavaScript xətalarını müəyyən etmək üçün konsol qeydlərinizi nəzərdən keçirin.
- Səbət və ya şablon fayllarında hər hansı dəyişiklik etdikdən sonra ödəniş axınınızı hərtərəfli sınaqdan keçirin.
Sınaq, inkişaf prosesinin son, lakin mübahisəsiz ən vacib mərhələsidir. Dəyişiklikləri heç vaxt birbaşa canlı istehsal mövzunuza göndərməməlisiniz. Bunun əvəzinə, işinizi nəzərdən keçirmək üçün Shopify adminində təqdim olunan inkişaf mühitindən istifadə edin. Dəyişikliklərinizin mağazanızın canlı versiyasında necə göründüyünü görmək üçün ‘Preview’ düyməsini basın. Bu, hər şeyin müxtəlif ekran ölçülərində düzgün göründüyünü və düymələr və sürgülər kimi bütün interaktiv elementlərin gözlənildiyi kimi işlədiyini yoxlamağa imkan verir.
Nəzərdən keçirmədən razı qaldıqdan sonra mövzunuzu dərc edə bilərsiniz. Platforma bu keçidi hamar edir, bir kliklə mövzular arasında keçid etməyə imkan verir. Dərc etdikdən sonra bir problem tapsanız, köhnə mövzunuza qayıdaraq əvvəlki versiyaya tez bir zamanda qayıda bilərsiniz. Bu təhlükəsizlik şəbəkəsi satışlarınızı və mağazanızın iş vaxtını qorumaq üçün xüsusi olaraq sistemə daxil edilmişdir. Unutmayın ki, ardıcıl sınaq müştərilərinizin ardıcıl alış-veriş təcrübəsinə malik olmasını təmin etməyin yeganə yoludur.
Bu həftə haradan başlamaq lazımdır
Bu həftə səyahətinizə Shopify admininizə daxil olaraq və cari mövzunuzu dublikat edərək başlayın. Dublikatınız olduqdan sonra ‘Edit code’ ekranını açın və theme.liquid faylını tapın. Çağırılan bölmələri və snippet-ləri müəyyən etmək üçün kodu oxumağa vaxt sərf edin. {{ content_for_layout }} teqindən istifadə edərək əsas məzmunun harada göstərildiyini tapmağa çalışın. Faylların bir-biri ilə necə əlaqəli olduğunu müşahidə edərək, mövzunun necə işlədiyinə dair zehni bir model quracaqsınız.
Fayl strukturunu araşdırdıqdan sonra həyata keçirmək üçün bir kiçik, kritik olmayan dəyişiklik seçin. Məsələn, düymənin rəngini dəyişməyə və ya altbilgiyə statik bir mətn mesajı əlavə etməyə çalışın. Bu kiçik qələbə Liquid və JSON fayllarını redaktə etməkdə inamınızı artıracaq. İrəlilədikcə, bütün Liquid obyektləri və teqləri üçün ətraflı istinadlar təqdim edən rəsmi Shopify tərtibatçı sənədlərindəki resursları axtarın. Alien Road, mağazanızın inkişafı üçün daha davamlı bir öyrənmə tempinə gətirib çıxardığı üçün hər dəfə bir komponentə diqqət yetirməyi tövsiyə edir.
Əgər özünüzü ilişib qalmış hiss edirsinizsə, unutmayın ki, cəmiyyət bütün bacarıq səviyyələrində olan tərtibatçılar üçün böyük bir resursdur. Kolleksiya vasitəsilə necə dövrə vurmaq və ya xüsusi meta-sahələri necə göstərmək kimi bir çox ümumi problemlər digər tərtibatçılar tərəfindən həll edilmişdir. Yeni bir həll yolu tapmağa çalışmaqdansa, rəsmi forumlarda xüsusi xətaları və ya tələbləri axtarın. Zaman keçdikcə bu əsasların ikinci təbiətə çevrildiyini görəcəksiniz və mağazanızı daha böyük sürət və dəqiqliklə fərdiləşdirə biləcəksiniz.
Oxumağa davam edin: Elektron ticarət · Elektron ticarət