Shopify liquid kodlaşdırma əsasları onlayn mağaza tərtibatlarını standart mövzu parametrlərindən kənarda dəyişmək istəyən hər kəs üçün əsas təməldir. Liquid, mağazalarda dinamik məzmunu yükləmək üçün Shopify tərəfindən yaradılmış açıq mənbəli şablon dilidir. Xüsusi obyektləri, teqləri və filtrləri birləşdirərək tərtibatçılar əsas sistem məntiqini dəyişmədən verilənlər bazası məlumatlarını birbaşa HTML strukturlarına çəkirlər. Xüsusi geyim mağazası quran tipik tacir inventar səviyyələrini, dinamik qiymətləri və müştəriyə xas endirim bannerlərini göstərmək üçün bu şablon sistemindən istifadə edir. Bu təməllərə yiyələnmək marketinq qruplarına istifadəçi səyahətlərini uyğunlaşdırmağa, tərtibat şablonlarını tənzimləməyə və səhifə performansını ləngidən əvvəlcədən hazırlanmış mövzu məhdudiyyətlərinə və ya ağır üçüncü tərəf tətbiqlərinə tamamilə güvənmədən xüsusi xüsusiyyətləri həyata keçirməyə imkan verir.
Shopify Liquid Nədir və O Necə İşləyir?
Liquid verilənlər bazanızla vizual mağaza arasında körpü rolunu oynayır. O, tamamilə server tərəfli renderinqdə işləyir, yəni son HTML brauzer səhifəni qəbul etməzdən əvvəl yaradılır. Bu ayrılma məhsul bazalarına və müştəri qeydlərinə təhlükəsiz girişi qoruyub saxlayarkən ön tərəf kodunu təmiz saxlayır. Dil hər bir şablon faylında birlikdə işləyən üç əsas komponentdən ibarətdir. Bu hissələri başa düşmək mövcud mövzu kodunu oxumağa və öz dəyişikliklərinizi təhlükəsiz şəkildə yazmağa kömək edir. Gəlin Shopify idarəetmə kataloqunuzdakı hər bir mövzu faylını təşkil edən struktur elementlərinə nəzər salaq.
Obyektlər səhifəyə məzmun çıxarır, teqlər məntiqi və idarəetmə axını yaradır, filtrlər isə rəqəmlərin, sətirlərin və ya massivlərin çıxışını dəyişdirir. Alıcı məhsul səhifəsini ziyarət etdikdə, server bu elementləri real vaxt rejimində qiymətləndirir. Məsələn, məhsulun variantları varsa, şablon şərti teqlərdən istifadə edərək hər bir seçimi dövr edir. O, daha sonra seçilmiş ölçü və ya rəngdən asılı olaraq düzgün qiyməti göstərir. Bu dinamik qiymətləndirmə səhnə arxasında dərhal baş verir və alıcıların bütün cihaz növlərində həmişə dəqiq ehtiyat məlumatlarını və cari qiymət strukturlarını görmələrini təmin edir.
Liquid Şablonlarında Obyektlərdən Necə İstifadə Edirsiniz?
Obyektlər şablon mühərrikinə Shopify mağazanızdan xüsusi məlumatların harada göstəriləcəyini bildirir. Onlar həmişə product.title və ya customer.first_name kimi qoşa qıvrım mötərizədə olur. Server faylı emal edərkən bu yer tutucuları faktiki verilənlər bazası dəyərləri ilə əvəz edir. Standart məhsul şablonu maddə adlarını, təsvirlərini, təchizatçı təfərrüatlarını və media qalereyalarını doldurmaq üçün obyektlərə çox güvənir. Əgər obyekt yoxdursa və ya boşdursa, şablon sadəcə boş yer göstərir ki, bu da düzgün şərti yoxlamanı peşəkar mağaza dizaynı üçün həyati əhəmiyyət kəsb edir.
Rəsmi sənədlərə istinad etməklə və ya yerli olaraq mövzu inkişafı alətlərindən istifadə etməklə mövcud obyektləri yoxlaya bilərsiniz. Məsələn, product.price-ı şablonunuza daxil etmək mağaza parametrlərinə uyğun olaraq formatlanmış rəqəmsal xərcləri çıxarır. Yüksək konversiya edən mağazalarda ümumi model endirimləri vurğulamaq üçün cari qiymətlərlə yanaşı müqayisə qiymətlərini göstərməkdir. Obyekt zənglərini əsas riyazi filtrlərə sarmaqla, siz əl ilə məlumat daxil etmədən qənaət faizlərini dinamik şəkildə hesablayırsınız. Bu avtomatlaşdırma yüzlərlə inventar elementi üzrə böyük promosyon kampaniyaları keçirərkən inzibati ümumi xərcləri azaldır.
Niyə Teqlər Mövzu Məntiqi üçün Vacibdir?
Teqlər şablon sənədlərinizin məntiqini və strukturunu idarə edir. Onlar əgər ifadələr, üçün dövrlər və dəyişən təyinatlar kimi qıvrım mötərizə faizləri ilə əhatə olunmuşdur. Obyektlərdən fərqli olaraq, teqlər mətni birbaşa render edilmiş veb-səhifəyə çıxarmır. Bunun əvəzinə, onlar serverə xüsusi şərtlərə əsasən hansı kodu icra edəcəyini, təkrar edəcəyini və ya gizlədəcəyini söyləyirlər. Teqlər olmadan hər bir səhifə kimin baxmasından və ya səbətində hansı əşyaların olmasından asılı olmayaraq eyni statik məzmunu göstərərdi.
- İfr, əgər, əgər və hal kimi idarəetmə axını teqləri səbət cəmlərinə və ya müştəri teqlərinə əsaslanan şərti renderinqi idarə edir.
- Üçün və tablerow kimi iterasiya teqləri kolleksiyalar və ya səbət xətti elementləri kimi elementlərin siyahıları üçün kod bloklarını təkrarlayır.
- Təyin edin və çəkin kimi dəyişən təyinat teqləri eyni şablon faylında daha sonra istifadə etmək üçün dəyərləri saxlayır.
İdarəetmə teqlərindən səmərəli istifadə etmək mağazanızı mütəşəkkil və sürətli saxlayır. Məsələn, siz daxil olmuş istifadəçi müəyyən müştəri qrupuna aid olduqda yalnız xüsusi topdansatış göndərmə bannerini göstərən şərt yaza bilərsiniz. Başqa bir tez-tez istifadə olunan hal, xüsusi ödəniş bildirişlərini təqdim etməzdən əvvəl səbətin məhdud göndərmə zonasından məhsullar ehtiva edib-etmədiyini yoxlamağı əhatə edir. Düzgün teq qalaqlanması icra xətalarının qarşısını alır və mövzu kodunuzu platforma performans standartlarına uyğun saxlayır.
Filtrlər Məlumat Çıxışını Necə Dəyişdirir?
Filtrlər obyektlərin və dəyişənlərin ekranda görünmə tərzini dəyişdirir. Onlar çıxış mötərizələrinin daxisinə yerləşdirilir və product.title | upcase və ya cart.total_price | money kimi boru simvolu ilə ayrıla bilər. Filtrlər mətn qutusunu dəyişdirə, uzun paraqrafı kəsə, valyuta dəyərlərini formatlaya və ya şəkil ölçülərini dinamik şəkildə idarə edə bilər. Onlar xam verilənlər bazası qeydlərini render etmə anında insan tərəfindən oxuna bilən formatlara formatlamaqla vaxta qənaət edirlər.
Şəkil filtrləri mobil cihazlarda sürətli yükləmə sürətini qorumaq üçün xüsusilə faydalıdır. Məhsul şəkillərini çıxararkən, ölçüləndirmə parametrlərini əlavə etmək brauzerin nəhəng xam aktivlər əvəzinə düzgün miqyaslı faylları yükləməsini təmin edir. Tipik bir tətbiq image_url filtrinə eni və hündürlüyü arqumentlərinin ötürülməsini əhatə edir. Bu sadə təcrübə Əsas Veb Vitals performans ölçülərini yaxşılaşdırır və Ən Böyük Məzmun Boyasının nömrələrini mobil alıcılar üçün tövsiyə olunan hədlərdən xeyli aşağı saxlayır.
Liquid Kodunu Harada Təhlükəsiz Redaktə Edə Bilərsiniz?
Mövzu fayllarının redaktəsi Shopify idarə panelinizdəki kod redaktoruna və ya yerli inkişaf mühitinə giriş tələb edir. Quraşdırılmış redaktoru tapmaq üçün Onlayn Mağaza bölməsinə keçin, Mövzular üzərinə klikləyin, aktiv mövzu üzrə əməliyyatlar menyusunu açın və Kodu Redaktə et seçin. Kataloq strukturu faylları layouts, templates, sections, snippets və assets daxil olmaqla məntiqi qovluqlara təşkil edir. Hər bir qovluq modul, saxlanıla bilən mağazanın qurulmasında müəyyən məqsədə xidmət edir.
- Layouts qovluğunda mağazanızdakı hər səhifənin ətrafına bükülən theme.liquid kimi qlobal sarğı faylları var.
- Templates qovluğunda məhsul, kolleksiya və ya səbət kimi müəyyən səhifə növlərinə uyğun gələn JSON və ya Liquid faylları saxlanılır.
- Sections qovluğu tacirlərin vizual mövzu redaktorunda yenidən təşkil edə biləcəyi modul kod bloklarını saxlayır.
- Snippets qovluğunda kodu DRY saxlamaq üçün birdən çox şablona daxil edilmiş daha kiçik təkrar istifadə oluna bilən kod fraqmentləri var.
İstehsal fayllarında birbaşa düzəlişlər etməzdən əvvəl həmişə cari mövzunuzu təkrarlayın. Bu, sintaksis xətalarının vizual tərtibatı pozacağı təqdirdə dərhal ehtiyat nüsxəsini yaradır. Müasir tərtibatçılar həmçinin mövzu fayllarını yerli olaraq çəkmək, peşəkar mətn redaktorlarında kod yazmaq və yeniləmələri yayımlamazdan əvvəl inkişaf serverlərində dəyişiklikləri nəzərdən keçirmək üçün Shopify CLI alətindən istifadə edirlər. Bu iş axını dayanma müddətini minimuma endirir və sintaksis səhvlərini tez aşkar edir.
Alien Road Shopify Liquid Kodlaşdırmasını Necə Tətbiq Edir
Alien Road-da komandamız böyüyən brendlər üçün xüsusi e-ticarət təcrübələri yaratmaq üçün qabaqcıl Liquid kodlaşdırma təcrübələrindən istifadə edir. Tipik müştəri nişanlanması zamanı biz mövcud mövzularda performans dar boğazlarını və struktur məhdudiyyətlərini müəyyən etmək üçün hərtərəfli kod auditi ilə başlayırıq. Daha sonra biz tacirin xüsusi konversiya məqsədlərinə uyğunlaşdırılmış xüsusi bölmələr və fraqmentlər hazırlayırıq. Bu yanaşma mağazaya lazımsız JavaScript daxil edən şişirdilmiş üçüncü tərəf tətbiqlərindən qaçır.
Xüsusi şablonlar yazıldıqdan və yerli olaraq sınaqdan keçirildikdən sonra biz mobil cavabdehliyi və ödəniş funksionallığını yoxlamaq üçün onları idarə olunan səhnələşdirmə mühitləri vasitəsilə yerləşdiririk. Biz həmçinin daxili marketinq qruplarına bu xüsusi bölmələri doğma vizual redaktor vasitəsilə necə idarə etməyi öyradırıq. Təmiz server tərəfli renderinq və istifadəçi dostu idarəetmənin bu kombinasiyası tacirlərə saytın sürətini və ya etibarlılığını qurban vermədən rəqəmsal xüsusiyyətlərinə tam nəzarət imkanı verir.
Qaçınılmalı olan Ümumi Liquid Sintaksis Xətaları Nələrdir?
Yeni başlayanlar tez-tez şablonların düzgün şəkildə işlənməsinə mane olan sintaksis xətaları ilə qarşılaşırlar. Ümumi səhvlərdən biri endfor və ya endif ifadəsini buraxmaq kimi teq bloklarını bağlamağı unutmaqdır. Bu separatçılar buraxıldıqda şablon təhlilçisi xəta mesajı çıxaracaq və ya səhifəni tamamilə render etməyi dayandıracaq. İdarəetmə redaktorunda şablon fayllarını yadda saxlamazdan əvvəl həmişə teq cütlərinizi yoxlayın.
Digər tez-tez rastlaşınan məsələ dəyişənlərin əhatə dairəsi və adlandırma münaqişələri ilə bağlıdır. Döngələr daxilində xüsusi dəyişənlər təyin edərkən adların məhsul və ya kolleksiya kimi qlobal obyektləri təsadüfən üstələmədiyinə əmin olun. Xüsusi dəyişənlər üçün unikallıq prefikslərindən istifadə render zamanı gözlənilməz davranışın qarşısını alır. Önizləmə rejimində müntəzəm sınaq bu məntiq qüsurlarının canlı alıcılara təsir etməzdən əvvəl tutulmasına kömək edir.
Bu həftə haradan başlamaq lazımdır
Shopify idarəetmə panelində canlı mövzunuzu təkrarlamaqla bu həftə praktiki öyrənmə səyahətinizə başlayın. Dublikat surətdə kod redaktorunu açın və product.liquid və ya main-product.json faylını tapın. Sadə mətn obyekti əlavə etməklə və ya məhsul təchizatçısının adına downcase kimi əsas filtr tətbiq etməklə təcrübə edin. Şablon mühərrikinin dəyişikliklərinizi dərhal necə emal etdiyini görmək üçün dəyişikliklərinizi test cihazında nəzərdən keçirin.
Əsas obyektlər və filtrlər ilə daha rahat olduqca, promosyon nişanı və ya göndərmə bildirişi üçün xüsusi fraqment yaratmağa çalışın. render teqindən istifadə edərək həmin fraqmenti məhsul şablonunuza daxil edin. Kodunuzu başlanğıcdan modul saxlamaq gələcək mağaza genişləndirmələrini idarə etməyi xeyli asanlaşdıran yaxşı vərdişlər yaradır. Tanış olmayan sintaksis parametrləri ilə qarşılaşdıqda hər zaman rəsmi sənədlərə baxın.