Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Dizajnirajmo Shopify Temu

by
Read Time:8 minsLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Themeforest je nedavno otvorio novi odjeljak gdje možete kupiti ili prodati teme za Shopify! Shopify je domaćin e-commerce rješenja koja Vam olakšavaju da započnete s online poslovanjem. Možete imati trgovinu i započeti rad za nekoliko minuta.

Kako bi pokrenuli Theme Forest-ov Shopify katalog, autori svakog prihvaćenog predloška dobiti će bonus od 100 $ - sve dok u kategoriji neće biti deset predložaka.

Shopify je poznat po fleksibilnosti dizajna. Pogledajte neke primjere. Shopify je kreirao (a kasnije i pustio kao otvoren izvor) Liquid Templating Engine. To dizajnerima omogućuje potpunu slobodu dizajna.

U ovom tutorialu ću pokazati kako dizajnirati Shopify temu koristeći Liquid. Kada imate osnovu, možete dizajnirati temu i poslati je u Themeforest.

Dizajnirajmo Shopify Temu

Što je Liquid?

Liquid je predložak  razvijen i korišten isključivo za Shopify. Procesuira datoteke Liquid predloška koji imaju “.liquid” ekstenziju. Liquid datoteke su samo HTML datoteke s ugrađenim kodom. Pošto Liquid omogućuje potpunu prilagođavanje vašeg HTML-a, možete doslovno dizajnirati trgovinu da izgleda kako želite.

Liquid je izvorno razvijen u Ruby za upotrebu s Shopify i izdan je kao projekt otvorenog koda. Od tada je korišten u drugim Ruby on Rails projektima, i prenesen je u PHP i javascript.

Kratki Pregled Liquida

Pogledajmo što nam je potrebno da započnemo rad s liquidom.

Kao što možete vidjeti, Liquid je samo HTML sa ugrađenim kodom. Zbog toga je Liquid tako moćan, daje vam potpunu kontrolu nad vašim kodom i olakšava rad s varijablama koje imate na raspolaganju.

Što se dešava iznad?

Shopify banner

U Liquidu postoje dva tipa oznaka: Output i Tags. Liquid Tags su okružene vitičastim zagradama i znakovima postotka; output je okružen s dvije vitičaste zagrade.

U gornjem isječku prva linija Liquida je: {% for products in products %} .... {% endfor %} Ovo je Liquid Tag oznake. for Tag obuhvaća zbirku stavki i omogućuje vam da radite sa svakom od njih. Ako ste ikada koristili petlje u PHP, Ruby, javascript, ili (unesite bilo koji programski jezik ovdje), radi potpuno jednako u Liquidu.

Sljedeća linija Liquida u gornjem isječku je {{ product.title }}. Ovo je Liquid Output primjer. Ovo će tražiti naslov proizvoda i prikazati rezultat na zaslonu.

Sljedeća linija Liquida uvodi nešto novo: {{ product.price | money_with_currency }} Ovdje imamo Liquid Filter primjer. Oni vam omogućuju da obradite određeni niz ili varijablu. Filteri uzimaju vrijednost lijevo od sebe i čine nešto s njom. Ovaj se filtar naziva format_as_money; uzima broj, dodaje mu znak dolara i zaglavljuje ga s ispravnim simbolom valute.

Jednostavan primjer:

bi mogao generirati sljedeći HTML

Posljednja linija Liquida iznad: {{ product.description | prettyprint | truncate: 200 }} pokazuje kako možete povezati filtre zajedno. Filtri djeluju na vrijednosti koja je s njihove lijeve strane, čak i ako je ta vrijednost rezultat drugog filtra. Dakle, isječak koji se spominje će primijeniti prettyprint filtar na product.description, a zatim će primijeniti truncate filtar na rezultate prettyprint. Na ovaj način možete povezati koliko god Liquid filtera želite!

Što Još Nudi Liquid?

Što se tiče Liquid Tags oznaka, osim for oznake, postoji i nekoliko drugih. Najčešće su:

Comment:

If/Else:

Case:

Pogledajte cijelu listu Tagova:

Liquid također nudi dovoljno filtera koje možete upotrijebiti za poruke podacima. Neki od najčešćih su:

Capitalize:

Join:

Date:

Pogledajte cijeli popis dostupnih filtera.

Anatomija Shopify Teme

Shopify teme sve imaju jednostavnu strukturu direktorija. Sastoji se od mape s imovinom, izgledom i predlošcima. Pogledajmo što gdje ide:

  1. assets folder: U ovoj mapi pohranjujete sve datoteke koje želite koristiti sa svojom temom. To uključuje sve stylesheetove, skripte, slike, audio datoteke itd. koje ćete koristiti. U svojim predlošcima možete pristupiti tim datotekama pomoću asset_url filtera.
  2. layout folder: Ova mapa bi trebala sadržavati samo jednu datoteku nazvanu theme.liquid. theme.liquid sadrži globalne elemente za vašu Shopify temu. Ovaj će kôd biti omotan oko svih ostalih predložaka u vašem dućanu. Evo primjera vrlo osnovne teme.liquid:

    Potrebni Elementi

    Postoje dva VRLO važna elementa koji moraju biti prisutni u topic.liquid datoteci. Prvi je {{content_for_header}}. Ova se varijabla mora staviti u zaglavlje theme.liquid. Omogućuje Shopifyu umetanje bilo kojeg potrebnog koda u zaglavlje dokumenta, kao što je skripta za praćenje statistike. Za one koji su upoznati s WordPressom, to je sasvim slično wp_head () funkciji.

    Drugi VRLO važan element je {{content_for_layout}}. Ova varijabla mora biti smještena u tijelo vaše teme.liquid; to je mjesto gdje će se renderirati ​​svi drugi Liquid predlošci.

  3. templates folder: Ova mapa sadrži ostale Shopify predloške. Sastoji se od:
    1. index.liquid: Prikazuje se kao glavna stranica indeksa vašeg dućana.
    2. product.liquid: svaki proizvod će koristiti ovaj predložak kako bi se prikazao.
    3. cart.liquid: Prikazuje trenutnu košaricu korisnika.
    4. collection.liquid: Prikazuje se za zbirke proizvoda.
    5. page.liquid: Prikazuje se za sve statičke stranice koje je trgovina možda stvorila.
    6. blog.liquid: Prikazuje se za sve Shopify blogove za trgovinu.
    7. article.liquid: Prikazuje se za sve članke na blogu i sadrži obrazac za slanje komentara.
    8. 404.liquid: Prikazuje se za svaki put kada trgovina vraća 404.
    9. search.liquid: Prikazuje se za rezultate pretraživanja trgovina.

Kao što ste mogli pogoditi, svaki od tih predložaka ima pristup različitim varijablama. Na primjer, product.liquid ima pristup product varijabli koja sadrži trenutni proizvod koji je prikazan, blog.liquid ima pristup blog varijabli, a index.liquid ima pristup svim njima. Ako ste zainteresirani saznati koje varijable možete koristiti u kojem predlošku, pregledajte Liquid dokumentaciju. Ako vas zanima koje varijable možete koristiti u kojem predlošku, pogledajte Liquid dokumentaciju.

Osnovna Građa za Početak Rada

Najbolja stvar kod dizajniranja za Shopify je to što možete koristiti svo znanje koje već imate: HTML, CSS, JS, itd. Jedino što vam je potrebno u tom procesu jest da se upoznate s kojim su Liquid varijablama dostupne u svakom predlošku.

Ovdje nastupa Vision.

Vision - Shopify u Okviru

Što je Vision?

Vision je zasebna aplikacija koja omogućuje  da izradite teme za Shopify trgovine na vašem računalu a da se pritom ne morate prijaviti za trgovinu ili postavljati bazu podataka i sve ostale "geeky" stvari.

Što mi je potrebno za Vision?

Vision dolazi zajedno sa svime što vam je potrebno da ga odmah pokrenete. Ako imate instaliran uređivač teksta i web preglednik, spremni ste za preuzimanje.

Kao da to nije dovoljno, Vision dolazi sa već gotovim Shopify temama. Shopify je dopustio ljudima da koriste te teme kao blokove za izgradnju, tako da možete početi s jednom od tih postojećih tema koju upotrijebite kao bazu i nadalje je proširite!

Sažetak

Shopify je brzo rastuća e-commerce platforma s tisućama prodavača koji žele pokazati svoje proizvode. Koristeći Vision, možete početi s razvojem ovog trena. Prvih deset predložaka objavljenih u Themeforest kategoriji Shopify dobiva dodatnih 100 USD. Stoga, započnite!

Ako trebate više informacija o Shopify dizajnu, na Wikipediji postoji opsežna dokumentacija. Pogledajte Vodič za Shopify Temu, Rad s Liquidom i Početak Rada s Visionom.

Najbolji Shopify Predlošci s ThemeForest Stranice .... Do sada!

  • Drifter

    Drifter

    "Ova elegantna Shopify tema ima čiste linije i akcente modernog dizajna koji pokazuju vaše proizvode. Prilagođeni jQuery lightboxovi omogućuju pregled vaših proizvoda u potpunosti."

    Pogledajte Temu

  • Drifter

    Fancy Pink

    "Shopify tema s modernim, elegantnim web 2.0 dizajnom."

    Pogledajte Temu

  • Pretplatite se na NETTUTS RSS Feed za dodatne dnevne tutoriale i članke o razvojnom programiranju za web.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.