Cum sa construiesti un site de vanzari de bilete cu WordPress si TicketTailor, Ziua a doua Construirea

În prima parte a acestui tutorial ne-am uitat la fel de lucruri pe care trebuie să le luați în considerare înainte de a vă stabili să lucrați și să vă construiți șablonul site-ului de ticketing. Acum, vom adăuga toate funcționalitățile pe care le doriți de la un site de ticketing.

Ne vom arunca direct în șablonul creat din instalarea WordPress implicită de Twenty Eleven și vom construi o interogare de tip snazzy care utilizează date de câmp personalizate. Apoi ne vom înscrie la TicketTailor și vom afla cum putem crea apeluri la acțiune pentru a ne asigura că utilizatorii noștri pot cumpăra cu ușurință.


Pasul 1 Întrebări despre interogări

Unul dintre lucrurile pe care eu sunt surprins în mod constant atunci când scriu codul pentru utilizare cu WordPress este cantitatea de sarcini avansate care pot fi realizate cu un fragment simplu de cod și un pic de gândire laterală. Am pierdut numărătoarea de câte ori am folosit o soluție prea complicată la o problemă doar pentru a afla că modificarea unei linii de cod la o dată ulterioară elimină necesitatea pentru 100 de linii pe care am scris-o când am emis proiectul meu client.

Site-ul de vânzare de bilete este unul din exemplele respective. Clientul meu a vrut un site care a făcut o separare între evenimentele viitoare și cele trecute. Am rezolvat problema cu un plugin care a schimbat automat categoria unui eveniment de la "viitor" la "trecut" la un moment dat într-o anumită zi. Acest lucru nu a fost deloc necesar.

Articolele de interogare WordPress ne permit să interogăm după câmpul personalizat. Aceasta înseamnă că putem seta un câmp particularizat în postările noastre numite "Data", de exemplu, și apoi aranjăm postările noastre prin aceasta. Așa cum puteți vedea probabil, asta înseamnă că putem, de asemenea, face ca posturile să dispară sau să facă orice altceva dorim doar scriind o interogare bună și apoi folosind cu atenție câmpurile personalizate.

Să mergem mai departe și să scriem o interogare pentru pagina noastră de index. Vrem să facem următoarele lucruri:

  1. Arătați următoarele 4 concerte
  2. Ascunde orice care a trecut deja
  3. Aranjați-le până la data la care se vor întâmpla, mai degrabă decât la data la care am creat postarea

Iată interogarea pe care o vom folosi pentru a face acest lucru:

 interogare_post (array ('post_type' => 'post', 'posts_per_page' => 4, 'meta_key' => 'date', 'meta_value' '> =', 'orderby' => 'meta_value', 'comanda' => 'ASC', 'paged' => get_query_var ('paginat')));

Are o mulțime de simboluri și litere în ea, așa că haideți să o rupem:

  • post_type - Acest lucru doar spune WordPress că dorim să folosim posturile mai degrabă decât paginile sau alt tip de post
  • posts_per_page - Setați numărul de postări pe care doriți să le afișați. Am folosit 4 pentru exemplu, dar puteți seta orice număr care este 1 sau mai mare
  • meta_key - Amintiți-vă că putem căuta postări dintr-un câmp particularizat? Acest lucru îi spune WordPress care este domeniul pe care îl folosim
  • meta_value - Întrucât folosim o dată ca interogare, acest lucru îi spune lui WordPress ce format de dată să așteptăm
  • meta_compare - Aceasta face exact ceea ce spune: compară valorile meta ale tuturor postărilor din buclă. Aici, le compară cu data setată pe serverul dvs. web și vă asigură că acesta afișează numai postări care au o dată care este astăzi sau în viitor
  • order_by - Spune WordPress că dorim ca mesajele noastre să fie afișate în ordinea meta_value, mai degrabă decât data postului standard
  • comanda - Acest lucru permite WordPress să știe că vom afișa posturile în ordine crescătoare: cea mai apropiată arătă mai întâi, cea mai îndepărtată dată de mai jos
  • pagini - dacă paginarea este activată pe tema dvs., veți avea nevoie de aceasta. Dacă nu, nu va afecta șablonul dvs.

Wow! Respiratie adanca. Tocmai am scris codul care va conduce majoritatea muncii noastre de acum încolo - o muncă bună! Acum, să o lăsăm în fișierul index.php. Iată ce ar trebui să arate după fișierul index.php:

  
'meta_key' => 'Data', 'meta_value' => data ("Y / m / d"), 'meta_compare' > 'meta_value', 'comanda' => 'ASC', 'paged' => get_query_var ('paginat'))); ?>

Faceți clic pe Salvați și apoi încărcați site-ul. Ceva pare rău aici, nu? Toate postările dvs. au dispărut:

Unde mi-au venit mesajele?!

Nu-ți face griji! Asta înseamnă că interogarea noastră a funcționat. Amintiți-vă că ați spus WordPress să utilizeze câmpul "Date" personalizat pentru a afișa postările dvs.? Ei bine, la fel de inteligent ca WordPress este, dacă nu setați un câmp personalizat "Date" în postările dvs., acesta nu va afișa postările dvs.! Acum trebuie să ne remediem problema.


Pasul 2 Adăugarea câmpului particularizat "Data"

Încărcați panoul de bord WordPress și navigați la unul dintre postările dvs. Faceți clic pe "Editați". Dacă nu ați mai utilizat niciodată câmpuri personalizate pe site-ul dvs., este probabil ca câmpurile să fie ascunse în panoul dvs. de editare postare. Pentru a le activa, faceți clic pe "Opțiuni ecran" din colțul din dreapta sus al ferestrei dvs., apoi bifați caseta de lângă "Câmpuri personalizate". Acest lucru ar trebui să vă ofere opțiunea de a adăuga câmpuri personalizate prin derularea în partea de jos a ferestrei de acum încolo. Adăugați un nou câmp personalizat cu numele "Data"

Câmpul personalizat face diferența între litere mari și mici Nu contează ce introduceți atâta timp cât se potrivește cu numele câmpului personalizat din interogarea dvs..

Acum, de asemenea, trebuie să adăugați o dată în formatul corect. Mai devreme am specificat în interogarea noastră că vom folosi formatul de dată: AAAA / MM / DD - Trebuie să respectați acest format pentru acest tutorial. Dacă nu, codul dvs. nu va funcționa. Asta pentru ca WordPress este incredibil de eficient in compararea datelor si incepand cu primul an se asigura ca numai posturile din acest an si in viitor se vor arata. Apoi face același lucru de luni întregi. Apoi timp de câteva zile.

În timp ce acest format de dată, probabil, nu se simte natural pentru dvs., vă va salva o mulțime de hassle. Ar trebui să aveți ceva care arată astfel:

Adăugați datele la toate postările dvs. utilizând acum câmpul personalizat "Data". Apoi, reîncărcați fișierul index.php și veți vedea că aveți cele patru concerte (postări) cu cea mai apropiată "dată" afișată. Patru vor fi dispărut (presupunând că ați folosit fișierul XML pe care l-am dat în prima parte). Există un motiv pentru asta și ne vom uita la asta într-o clipă.


Pasul 3 Înscrieți-vă la TicketTailor

TicketTailor este un site minunat care oferă un serviciu de ticketing și checkout pentru promotorii de concerte. În afară de faptul că au un serviciu incredibil de clienți, ei au de asemenea o platformă extinsă pentru back-end, care oferă statistici de vânzare a biletelor, capabilități de link-uri de afiliere, abilități avansate de ticketing, cum ar fi niveluri diferite de stabilire a prețurilor și abilitatea de a tipări liste de prieteni prietenoase pentru concerte.

În timp ce ați putea să obțineți aceste capacități în altă parte, ceea ce nu puteți obține în altă parte este ajutorul de personalizare de la personalul TicketTailor. Cu primele trei planuri în planul de prețuri, echipa din spatele TicketTailor personalizează pagina dvs. de vânzări pe serverul lor pentru a arăta exact ca site-ul dvs. WordPress - indiferent de ceea ce ați făcut pentru el. E destul de inteligent.

Acest lucru nu este inclus în pachetele de bază sau promotor, dar dacă nu doriți să plătiți, puteți utiliza și aceste servicii.

Înscrieți-vă la TicketTailor și organizați un eveniment, astfel încât să aveți o adresă URL pentru trimiterea de bilete pentru a trimite persoane și a le utiliza în acest tutorial.


Pasul 4 Adăugarea unui link de bilet

Dacă ați sărit peste Pasul 3, nu v-ați înscris la TicketTailor și acum veți fi pierduți. Ar trebui să te întorci și să o faci acum.

Deci, ați organizat evenimentul de testare pe TicketTailor și puteți accesa "magazinul" dvs. folosind link-ul de pe panoul de administrare TicketTailor. Acum, să conectăm site-ul nostru WordPress și site-ul nostru TicketTailor. Vom face acest lucru folosind butoanele apel pentru acțiune care sunt alimentate dinamic.

Un câmp particularizat pentru legături de bilete

Amintiți-vă cum am adăugat un câmp personalizat pentru "Data" în Pasul 2? Acum o să facem același lucru și pentru link-ul nostru de bilete. Cu excepția faptului că de data aceasta nu trebuie să scriem o interogare.

Deschideți editorul de postare și adăugați câmpul personalizat "Bilet" și apoi introduceți adresa URL a evenimentului de testare pe care l-ați setat pe TicketTailor astfel încât panoul dvs. de postare să arate astfel:

Trebuie să folosim câmpul personalizat "Ticket" pentru a genera un buton aflat sub afișul pentru concert - dar dorim doar să afișăm butonul dacă există un câmp personalizat pentru "Bilet" pentru post. Deschideți fișierul content.php și plasați următorul cod chiar sub linia 14 (care apelează conținutul postului)

  ID, "Bilet", adevărat); dacă ($ Ticket):?> "> Obțineți bilete 

Acum reîmprospătați pagina dvs. de index și atâta timp cât evenimentul dvs. este:

  • Nu în trecut,
  • Unul dintre următoarele patru evenimente,

Ar trebui să vedeți ceva de genul:


Pasul 5 A transforma acest lucru într-o chemare la acțiune

Internetul este plin de cuvinte buzz - nici un domeniu nu este mai plin de cuvinte buzz decât lumea de design web. Una dintre marile tendințe în design este ideea folosirii unui buton pentru a face pe cineva să facă ceva. Acest lucru se numește "apel la acțiune" și ei într-adevăr funcționează - așa că vom transforma acel link simplu într-un apel la acțiune utilizând câteva linii de CSS și o etichetă de clasă pe HTML. Am folosit următorul CSS ca exemplu, dar ați putea folosi orice doriți. Doar adăugați următoarele în fișierul dvs. stil.css:

 a.btn lățime: 100px; umplutura: 10px 10px 10px 10px; margin-bottom: 10px; font-size: 16px; text-decoration: nici unul; culoare albă; text-shadow: -1px -1px 2px #fff; fundal: # ff00cc; frontieră: 1px solid #ccc; raza de graniță: 3 pixeli; -moz-border-radius: 3px; -webkit-border-radius: 3px;  a.btn: mutați text-shadow: -1px -1px 2px #fff; fundal: # 00bafb; frontieră: 1px solid #ccc; 

Și apoi actualizați fișierul content.php pentru a se potrivi cu acele stiluri noi prin schimbarea linkului dvs. la acesta:

 "> Obțineți bilete

Reîmprospătați acest lucru și aveți un fișier de șablon frumos arătând link-ul către o pagină a TicketTailor care utilizează un buton de apel de acțiune, o buclă inteligentă și un pic de gândire laterală pentru a vă oferi un site de ticketing foarte frumos, care arată astfel:


Pași suplimentari adăugând unele flori

În timp ce ne-am putut opri acolo și aveam un site web cu adevărat funcțional, există și alte lucruri pe care le putem face.

Există câteva lucruri pe care toți cei care merg la concerte de muzică live precum și aceștia sunt:

  • Reluând amintirile concertelor lor preferate
  • Cumpărarea de mărfuri

Văzând cum deja ați primit cele mai multe unelte la sfaturile degetului pentru a vă face pe clienții dvs. și mai fericiți, de ce nu mergeți cu doi pași mai departe - este mai probabil ca aceștia să vină la spectacole dacă le faceți mai puțin fericiți decât alți promotori.

Ajută-i să-și revină amintirile

Amintiți-vă că am tăiat jumătate din posterele noastre de concerte din interogarea noastră, stabilind numărul de concerte pe care să le afișăm ca pe "4" în Pasul 1? Acum am ajuns la motivul pentru asta. Nu ar fi o atingere plăcută pentru a permite clienților dvs. să vadă toate emisiunile pe care le-ați pus vreodată pe lângă toate emisiunile pe care le-ați adus? Sigur că ar fi!

Pentru a face acest lucru, deschideți fișierul index.php și modificați-l la următoarele:

  
'meta_key' => 'Data', 'meta_value' => data ('Y / m / d'), 'meta_compare' => 'meta_value', 'order' => 'ASC',)); ?>

Evenimente trecute

'meta_value' => data ("Y / m / d"), "meta_compare" =><', 'orderby' => 'meta_value', 'comanda' => 'DESC', 'paged' => get_query_var ('paginat'))); ?>

Aceasta este o secțiune mare de cod, așa că haideți să-l distrugem în bucăți ușor de manevrat.

Prima parte pe care o veți recunoaște deja deoarece este interogarea pe care am folosit-o mai devreme. Singura diferență este că am setat argumentul posts_per_page la -1, ceea ce înseamnă că prima pagină nu va paginări niciodată.

A doua interogare, a doua jumătate a codului, ar trebui, de asemenea, să vă arate foarte familiar, deoarece este aproape exact aceeași cu cea pe care am scris-o mai devreme cu două excepții:

  • "meta_compare" este setat la "<' so that WordPress knows we want to display posts which are in the past.
  • "comanda" este setată în jos pentru a afișa mai întâi cele mai recente evenimente trecute. Dacă doriți să afișați mai întâi cele mai vechi evenimente, puteți seta acest lucru în ASC, nu în DESC.

Cealaltă diferență în cod este că am numit o nouă parte a șablonului pentru evenimentele trecute, deoarece biletele pentru evenimentele trecute nu mai sunt disponibile la vânzare. Am putea scrie câteva afirmații condiționale și pur și simplu utilizați content.php standard, dar asta este inutil de dificil, așa că duplicați fișierul content.php și eliminați liniile care afișează butonul "Obțineți bilete"

  ID, "Bilet", adevărat); dacă ($ Ticket):?> "> Obțineți bilete 

Și cum despre vânzarea unor mărfuri?

Știți deja cum să faceți acest lucru deoarece ați creat legături de bilete și câmpurile personalizate pentru acestea înainte. Vânzarea de postere sau tricouri prin BigCartel sau un serviciu echivalent este exact același lucru. Doar setați un câmp personalizat numit "Merch", de exemplu, introduceți adresa URL a produsului și apăsați pe actualizare. Apoi adăugați o linie de cod chiar sub codul "Obțineți bilete", care arată astfel:

  ID, "Merch", adevărat); dacă ($ Merch):?> "> Obțineți Merch 

De asemenea, puteți adăuga acest fragment în fișierul evenimentelor trecute (content-past.php), astfel încât clienții să poată cumpăra întotdeauna mărfuri de la dvs..


Concluzie

Asta e! Acum aveți un site de ticketing care integrează WordPress cu un furnizor fantastic de ticketing, afișează butoanele de apel și vă organizează conținutul fără să utilizați vreodată o categorie, un tip de post personalizat sau o taxonomie.

Există atât de multe lucruri pentru care ați putea folosi această idee. Lăsați un comentariu pentru a ne comunica ce faceți cu codul din acest tutorial. A se distra!

Cod