Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Prikažite WooCommerce Kategorije, Podkategorije i Proizvode na Odvojenim Listama

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

WooCommerce vam daje nekoliko mogućnosti za ono što možete prikazati na svojim arhiviranim stranicama:

  • proizvodi
  • kategorije (na glavnoj stranici trgovine) ili podkategorije (na stranicama kategorija)
  • i proizvodi i kategorije.

Kada postavljam trgovinu, obično odabirem treću opciju: proizvode i kategorije/podkategorije. To znači da posjetitelji moje trgovine mogu odabrati proizvode izravno s početne stranice ili precizirati pretraživanje pretražujući arhivu kategorije proizvoda.

Međutim, postoji jedan neuspjeh u ovom pristupu: kategorije / podkategorije prikazuje zajedno, bez razdvajanja između to dvoje. To znači da ako slike vaših proizvoda imaju različite dimenzije od slika vaših proizvoda, raspored može izgledati pomalo neuredno. Čak i ako su vaše slike iste veličine, ako jedan od redaka na stranici arhive obuhvaća obje kategorije i proizvode, nedostatak  "Dodaj u košaricu" gumba za kategorije čini taj red neurednim, budući da svi njezini elementi nemaju iste dimenzije.

U ovom tutorialu ću vam pokazati kako prikazati kategorije na zasebnom popisu prije prikazivanja proizvoda.

Za to ćemo slijediti četiri koraka:

  1. Utvrdite kod koji WooCommerce koristi za izlazne kategorije i potkategorije na stranicama arhive.
  2. Napravite dodatak za naš kôd.
  3. Napišite funkciju za stavljanje kategorija ili potkategorija prije unosa proizvoda.
  4. Stilizirajte izlazni podatak.

No, prije nego što počnete, trebati će vam instalacija WooCommerce s nekim dodanim proizvodima i postavljenim kategorijama proizvoda i podkategorija.

Što će vam biti potrebno:

Kako biste mogli pratiti, biti će vam potrebno:

  • Razvojna instalacija programa WordPress.
  • Uređivač koda.
  • Instaliran i aktiviran WooCommerce.
  • Dodani proizvodi  - ja sam uvezla "dummy" podatke o proizvodu koji se isporučuju s WooCommerceom; za pojedinosti o tome kako to učiniti, pogledajte ovaj vodič.
  • Aktivirana tema kompatibilna s WooCommerce-om: ja koristim Storefront.

Prije nego što počnemo: Zadane Opcije

Pogledajmo što nam WooCommerce nudi prema zadanim postavkama.

Započela sam s dodavanjem nekih slika u moje kategorije proizvoda i potkategorije, jer ih WooCommerce "dummy" podaci ne uključuju. Jednostavno sam upotrijebila sliku jednog od proizvoda iz svake kategorije ili potkategorije, kao što možete vidjeti na screenshotu:

Product categories screen in WordPress admin with category images added

Pogledajmo sada kako WooCommerce prikazuje kategorije proizvoda i proizvode na arhivskim stranicama.

Ako to već niste učinili, idite na WooCommerce > Settings, odaberite karticu Products, a zatim odaberite opciju Display. Za svaku od Shop Page Display i Default Category Display opcija, odaberite Show both:

WooCommerce product display settings screen

kliknite gumb Save changes kako biste spremili postavke i posjetili svoju web prodajnu stranicu. Moja izgleda ovako:

The main shop page without any changes

Pošto imam tri kategorije proizvoda, a moje su slike kategorije iste veličine kao i moje slike proizvoda, izgleda sasvim uredno. Ali ovdje je jedan od arhiva kategorije proizvoda:

The Music category archive page without any changes

Budući da ova kategorija ima dvije potkategorije, prvi je proizvod prikazan uz njih, u mreži koja je širine tri stavki. Želim svoje kategorije i potkategorije više istaknuti, i jednostavno ih prikazati odvojeno od popisa proizvoda. Pa, učinimo to.

Prepoznavanje Koda WooCommerce Koristi se za Izlazne Kategorije i Proizvode u Arhivu

Prvi korak je utvrditi kako WooCommerce iznosi kategorije i potkategorije. Pogledajmo u WooCommerce izvorni kod kako bismo pronašli relevantnu funkciju.

Datoteka WooCommerce koja se koristi za prikazivanje arhivskih stranica je archive-product.php, koja se nalazi u templates mapi.

Unutar te datoteke nalazi se ovaj kôd, koji emitira kategorije i proizvode:

Dakle, postoji woocommerce_product_subcategories () funkcija koja iznosi kategorije ili podkategorije prije pokretanja loopa koja emitira proizvode.

Funkcija je "pluggable", što znači da možemo zamijeniti implementaciju u našoj temi. Nažalost, to baš i ne funkcionira jer WooCommerce ima ugrađeni styling za čišćenje stavki koje će se pojaviti na početku reda s zadanim zaslonom.

Umjesto toga, isključiti ćemo prikaz kategorija i potkategorija na našim arhiviranim stranicama, tako da se prikazuju samo proizvodi. Zatim ćemo stvoriti novu funkciju koja emitira kategorije ili potkategorije proizvoda i povezati ga s woocommerce_before_shop_loop akcijom, pazeći da koristimo visoki prioritet tako da se aktivira nakon funkcija koje su već povezane s tom radnjom.

Napomena: Budući da WooCommerce dodaje brisanje na svaki treći popis proizvoda, ne možemo koristiti funkciju woocommerce_product_subcategories () ili njezinu uređenu verziju za prikaz kategorija. To je zato što će treća, šesta (i tako dalje) kategorija ili proizvod biti izbrisani, čak i kada koristimo ovu funkciju za prikaz kategorija zasebno. Mogli bismo to pokušati nadvladati, ali jednostavnije je napisati vlastitu funkciju.

Stoga, idemo napraviti dodatak koji to čini.

Izrada Dodatka

U svojem wp-content/plugins direktoriju stvorite novu mapu i dajte mu jedinstveno ime. Ja ću svoj nazvati tutsplus-separate-products-categories-in-archives. Unutar toga stvorite novu datoteku, opet s jedinstvenim imenom. Upotrebljavam isti naziv: tutsplus-separate-products-categories-in-archives.php.

Otvorite datoteku i dodajte ovaj kôd:

Možda ćete željeti urediti autorske detalje pošto je kod koji pišete vaš. Pohranite svoju datoteku i aktivirajte plugin sa WordPress admin.

Pisanje naše funkcije

Napišimo sada funkciju. No, prije nego što počnete, isključite popise kategorija na zaslonima administratora. Idite na WooCommerce > Settings, odaberite karticu Products, a zatim odaberite opciju Display. Za svaku od opcija Shop Page Display i Default Category Display, odaberite Show products. Spremite promjene.

Vaša stranica trgovine sada će izgledati ovako:

The main shop page with just products displayed

U svoju plugin datoteku dodajte sljedeće:

Sada dodajte ovaj kod unutar funkcije:

Pogledajmo što ta funkcija čini:

  • Identificira trenutačni upitani objekt i definira njegov ID kao $ parentid.
  • Upotrebljava get_terms () da identificira pojmove s trenutačnom stavkom kao svojeg roditelja. Ako je ovo glavna stranica trgovine, vratiti će top-level kategorije; ako se radi o arhivi kategorije, vratiti će podkategorije.
  • Zatim provjerava postoje li kakvi uvjeti, prije otvaranja foreach loopa i ul elementa.
  • Za svaki pojam, stvara li element, a zatim iznosi sliku kategorije koristeći woocommerce_subcatgeory_thumbnail (), nakon čega slijedi naziv kategorije u poveznici na svoju arhivu.

Sada spremite datoteku i osvježite glavnu stranicu trgovine. Moja izgleda ovako:

Main shop page - categories are separate but too big and with list styling bullets etc

Kategorije su prikazane, ali trebaju neki stil. To će biti sljedeće što ćemo učiniti.

Stiliziranje Kategorija Oglasa

Kako bismo mogli dodati styling, potreban nam je stylesheet unutar našeg dodatka, koji ćemo morati dodati.

U plugin mapi izradite mapu pod nazivom css, a unutar toga stvorite datoteku naziva style.css.

Sada, u plugin datoteci dodajte ovo iznad funkcije koju ste već kreirali:

To ispravno ugrađuje stylesheet koji ste upravo izradili.

Sada otvorite svoj stylesheet i dodajte kôd u nastavku. WooCommerce koristi mobile-first stil, tako da ćemo to i upotrijebiti.

Kopirala sam točnu širinu i margine od stila koji koristi WooCommerce.

Sada ponovno provjerite svoju glavnu stranicu trgovine. Evo moje:

The main shop page Categories are above products and styled consistently in a grid

Evo arhive Music kategorije:

The Music archive Two subcategories are above the 3 wide grid of products

I ovako izgleda na manjim ekranima:

The categories on narrower screens full width not in a grid

Sažetak

Kategorije proizvoda su izvrsna značajka WooCommercea, ali način na koji se prikazuju nije uvijek idealan. U ovom tutorialu ste saznali kako izraditi dodatak koji prikazuju kategorije proizvoda ili podkategorije zasebno od popisa proizvoda, a zatim ste stilizirali svoj popis kategorija.

Možete upotrijebiti ovaj kôd za prikaz popisa kategorija ili podkategorija negdje drugdje na stranici (na primjer, ispod proizvoda), tako da spojite funkciju na drugu spajalicu za akciju unutar WooCommerce datoteke predloška.

Ako trenutno imate trgovinu koju želite proširiti ili tražite neke dodatne pluginove koji se odnose na WooCommerce, nemojte se ustručavati pogledati koji su sve dodaci dostupni na Envato Market-u.

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.