Cum se face o galerie de imagini în catalogul de produse

Bună ziua, în acest articol voi încerca să vă spun despre modul în care pe UMI.CMS puteți adăuga cu ușurință o galerie foto a mărfurilor.

Vreau doar să notez că folosesc versiunea 2.8.6 standard UMI.CMS și demo-ul șablonului cu șablonul TPL. La mine toate șabloanele sunt stocate în template-ul tatalui \ demoold, prin urmare, în moduri poate exista o discrepanță cu a ta.

În primul rând, trebuie să mergeți la "Șabloane de date", apoi la obiectul directorului. Eu folosesc standardul UMI.CMS, așa că voi edita obiectul "Hamster"

Amenajarea șablonului de date UMI.CMS

Cum se face o galerie de imagini în catalogul de produse

Acum trebuie să adăugați un nou grup - "Imagini suplimentare", cu identificatorul "extra_images":

Apoi, adăugați câmpuri noi, cum ar fi o imagine, și le face vizibile. Numele pot fi arbitrare:

TIP. ar trebui să aveți două grupuri. În primul grup trebuie să existe o imagine principală, iar în cel de-al doilea grup, să îl creați mai înalt, apoi numărul de imagini pe care doriți ca utilizatorul să le vadă.

După adăugarea grupurilor și câmpurilor, mergeți la modulul "Catalog" și mergeți la obiectul de care aveți nevoie și adăugați imagini la produs:

Acum ar trebui să afișați imagini suplimentare și să conectați scriptul galeriei.

Conectarea galeriei pentru UMI.CMS

Ca o galerie îmi place să folosesc fancyBox.

Accesați site-ul dezvoltatorului și descărcați-l. Dacă dintr-o dată ceva nu este disponibil, atunci puteți descărca fancyBox direct aici.

Acum ar trebui să conectați scriptul însuși la șablonul UMI.CMS.

Despachetați fișierele de script din dosarul șablonului, deschideți șablonul, care este responsabil pentru afișarea obiectului directorului, adică o carte de produs 😉 și conectați toate fișierele CSS și JS la fancyBox. Conectați toate fișierele js după macrocomenzi sau înainte de etichetă , astfel încât script-urile să fie încărcate cu cele mai recente:

După ce am conectat CSS, au fost în calea mea:

De asemenea, puteți conecta imediat apelul funcției fancyBox cu parametri pentru a conecta galeria de pe cardul de produs. Pe măsură ce galeria va fi folosită "Thumbnail helper", mai mult în demo:

Scripturile responsabile de galerie sunt conectate, acum putem extrage fișiere din baza de date a site-ului.

Rezultat de imagini suplimentare în catalogul UMI.CMS

Pentru a scoate imaginea principală, utilizați macrocomanda .ata getProperty ()%.

.ata getProperty ()% - Afișează proprietatea paginii pentru un anumit șablon.

Trebuie să accesați directorul \ templates \ demoold \ tpls \ catalog \. în șablonul care este responsabil pentru afișarea cărții de mărfuri, am aceste produse-details.view.tpl și în secțiune

Adăugați macrocomanda .ata getProperty ()% cu parametri, parametrii pot fi diferiți de a mea

Mai târziu, în șablonul catalog_view.tpl, care este responsabil pentru producția de bunuri în miniatură - template-uri \ \ demoold \ tpls \ de date, și înlocuiți conținutul fișierului:

Dacă nu aveți acest fișier, atunci trebuie să îl creați.

% system makeThumbnail ()% - Creează și afișează o miniatură (miniatură) a imaginii specificate.

Imaginea principală a produsului este afișată pe site, puteți merge și verifica. De asemenea, dacă faceți clic pe imagine, atunci aveți fancyBox.

Rămâne să afișați imagini suplimentare ale obiectului catalogului UMI.CMS. Pentru a ieși, trebuie să utilizați macro-ul .ata getPropertyGroup ()%

.ata getPropertyGroup ()% - Afișează un grup de proprietăți de pagină pentru un anumit șablon.

Deschideți fișierul care este responsabil pentru afișarea cardului element, și se adaugă un macro cu parametrii .ata getPropertyGroup (% id%, „extra_images“, „extra_images“)%.

Adăugați această macrocomandă în secțiunea:

Apoi, mergeți la directorul \ templates \ demoold \ tpls \ data și creați un fișier extra_images.tpl acolo. Următorul cod trebuie adăugat la acest fișier:

Acum mergeți la site și actualizați pagina:

Încercați să faceți clic pe imagine și veți obține o imagine pop-up cu copii mici.

Dacă aveți întrebări, întrebați-ne! Cu plăcere voi răspunde!

Articole similare

Pagina anterioară

Pagina următoare