===== Webshop felületének összerakása ===== A webshop kinézete két, egymástól független dologból áll össze: * **mi kerül a felületre** — ezt a **Webshop -> [[evir:webshop:beallitas_menu|Beállítás]] -> [[evir:webshop:felulet_beallitasok|Webshop felület]]** menüpontban lehet összerakni (melyik elem melyik oldalrészen, milyen sorrendben); * **hogyan néz ki egy-egy elem** — ezt a **Webshop -> [[evir:webshop:beallitas_menu|Beállítás]] -> [[evir:webshop:webshop_sablon|Webshop sablon]]** menüpontban lehet HTML sablonokkal testre szabni. {{fa>lightbulb-o?lg}} **A sablonokat nem kötelező létrehozni.** A rendszer rendelkezik egy //Alapértelmezett sablon// készlettel, amely önmagában is teljes értékű, használható designt ad. Amíg egy oldalrészhez nincs //Webshop sablon// rögzítve, a program a gyári sablont használja — oldalrészenként külön. A //Webshop sablon// menüpontban rögzített sablon tehát **felülírás**: csak azoknak az oldalrészeknek kell felvenni, ahol a gyári megjelenéstől el akarunk térni. A kiindulópont ilyenkor is a gyári minta, a //Minta betöltése// gombbal. ---- ==== Milyen sorrendben érdemes összerakni ==== - **[[evir:webshop:altalanos_beallitasok|Általános beállítások]]** \\ A [[evir:public_web:rendszeroldalak|rendszeroldalak]] (kezdőoldal, sikeres rendelés utáni oldal, stb.), a [[evir:public_web:webshop_header_trailer|HTML header-trailer]] és a [[evir:public_web:webshop_email_tartalom|kiküldött email sablonok]] kiválasztása. - **[[evir:webshop:webshop_mukodes|Webshop működés]]** \\ Raktár, árkategória, partnercsoport, rendelés módja, a lista- és cikkoldali árképzés. E nélkül a termékek ára és készlet-információja nem az elvárt. - **Termékek láthatósága** \\ A [[evir:webshop:webshop_cikk_lathatosag|cikkek webshopos beállítása]] (egyesével, illetve tömegesen a [[evir:webshop:webshop_cikk_beallitasok|Webshop -> Cikk -> Webshop beállítás]] menüben), valamint a [[evir:torzsadatok:cikktorzs:cikk_kategoriak|cikk kategóriáknál]] a //Használva a webshopban// beállítás. \\ {{fa>exclamation-circle?lg}} Aminek a //Webshop beállítás//-a üres vagy //Nem jelenik meg//, az egyetlen webshopos listában sem jön elő — hiába van kitéve a kategóriafa vagy a keresőmező. - **[[evir:webshop:felulet_beallitasok|Webshop felület]]** \\ Az elemek (kosár, keresőmező, kategóriafa, bejelentkezés, nyelvválasztó, bannerek, linkek, tartalomelemek) kihelyezése a felső, alsó, bal és jobb oldalrészre, sorrendezésük, illetve az elem elé/mögé szúrt header-trailer HTML megadása. - **[[evir:webshop:webshop_atveteli_mod|Átvétel módja]]**, **[[evir:webshop:webshop_fizetesi_mod|Fizetés módja]]**, **Generálható szolgáltatások** \\ Ezek nélkül a vásárló a kosarát nem tudja rendelésre beküldeni. - **[[evir:webshop:webshop_sablon|Webshop sablon]]** //(opcionális)// \\ Csak azokhoz az oldalrészekhez, ahol a gyári minta nem elég. - **[[evir:webshop:kapcsolat_oldal|Kapcsolat oldal]]**, egyedi keresőmezők //(opcionális)// - **[[evir:webshop:felhasznalok|Felhasználók]], [[evir:webshop:webshop_regisztracio|regisztráció]]** \\ Ha a webshop csak bejelentkezés után, illetve partner-árakkal használható. {{fa>info-circle?lg}} A webshop **arculata (színek, betűk, CSS)** nem a felületről állítható: az a telepítéshez tartozó egyedi CSS fájlban van, módosítása rendszergazdai/fejlesztői feladat. ---- ==== A webshop oldalvázlata ==== Minden webshop oldal ugyanabból a vázból épül fel: +-----------------------------------------------------+ | HTML header (minden oldalon azonos tartalom) | +-----------------------------------------------------+ | Felső rész elemei | +------------+---------------------------+------------+ | Bal rész | az oldal tartalma | Jobb rész | | elemei | (terméklista, cikkoldal, | elemei | | | kosár, bizonylatok, ...)| | +------------+---------------------------+------------+ | Alsó rész elemei | +-----------------------------------------------------+ | HTML trailer (minden oldalon azonos tartalom) | +-----------------------------------------------------+ * A négy //rész// tartalmát a [[evir:webshop:felulet_beallitasok|Webshop felület]] menüpontban állítjuk össze, a HTML header-trailert az [[evir:webshop:altalanos_beallitasok|Általános beállítások]]ban. * A **közép** nem szerkeszthető listaként: oda az éppen megnyitott oldal (terméklista, termék adatlap, kosár, bizonylatlisták, egyedi oldalak) kerül. \\ {{fa>info-circle?lg}} A termék adatlapjának felépítéséről és arról, hogy az egyes adatai honnan jönnek, külön leírás szól: [[evir:webshop:cikk_adatok_oldal|Cikk adatok oldal alapértelmezett felépítése]]. * {{fa>info-circle?lg}} Ha a bal vagy a jobb oldalsávba **egyetlen elem sincs kitéve**, az a sáv nem foglal helyet: a közép automatikusan kitölti a helyét. Nem kell tehát „töltelék" elemet kitenni. ---- ==== Az oldalrészek egymásba ágyazódása ==== A //Webshop sablon// menüpontban felkínált sablonok nem egymástól független lapok, hanem egymásba ágyazódnak. Ezt érdemes ismerni ahhoz, hogy egy változtatás a **megfelelő** sablonba kerüljön: Cikklista fő |- Termék lista navbar (gyári, felületről nem szerkeszthető) |- a látogató által választott nézet szerint EGY: | Cikk kártya lista nézet / Cikk képes lista nézet / Cikk lista nézet | |- termékfotó a listába (gyári, felületről nem szerkeszthető) | |- Cikk adatok | |- raktár-információ a listába (gyári, felületről nem szerkeszthető) | |- Ár adatok | '- kosárba gomb (gyári, felületről nem szerkeszthető) '- Termék lista lapozás (gyári, felületről nem szerkeszthető) Cikkoldal (termék adatlap - lásd: Cikk adatok oldal alapértelmezett felépítése) |- fő kép, képgaléria (gyári, felületről nem szerkeszthető) |- kosárba gomb (gyári, felületről nem szerkeszthető) |- Paraméterek felsorolás (gyári, felületről nem szerkeszthető) '- a Kapcsolódó / Helyettesítő / Termékváltozatok fülön: Cikk kártya lista nézet (ugyanaz, mint a terméklistában) Kosár tartalom - fő |- kosár lépések (gyári, felületről nem szerkeszthető) |- Kosár cikklista sor (tételenként ismétlődik) '- a kosár állapota szerint EGY: Kosár lábléc / Kosár lábléc rendelésnél / Kosár lábléc rendelés folytatásánál {{fa>exclamation-circle?lg}} A fent //gyári//-ként jelölt részek (kosárba gomb, lapozó, navbar, termékfotó, raktár-információ, termék-tulajdonságok, mini kosár, kategória-menü, kosár lépések) **nem szerepelnek** a //Webshop sablon// menüpont //Template// legördülőjében: ezek csak programfájlból jönnek, módosításuk fejlesztői feladat. Ha tehát a terméklista kártyáján a //kosárba// gomb megjelenését kell változtatni, azt a kártya sablonjának szerkesztésével nem lehet elérni. ---- ==== Behelyettesítési szintaxis a sablonokban ==== A sablon HTML-jébe a program a megjelenítéskor beírja a tényleges adatokat. A használható formák (a szerkesztő űrlap //Segítség// mezője is felsorol ezekből): ^ Forma ^ Mit tesz ^ | ''{valtozo}'', ''{cikk.cikkszam}'' | egy adat beillesztése | | ''{if(valtozo):valtozo}'' | az adat beillesztése, ha van tartalma, illetve ha a feltétel igaz | | ''{if:azonosito(valtozo>1)}'' … ''{endif:azonosito}'' | a közbezárt rész csak akkor jelenik meg, ha a feltétel igaz | | ''{for:azonosito(tomb)}'' … ''{endfor:azonosito}'' | a közbezárt rész a lista minden elemére kiíródik | | ''{forx:azonosito(tomb)}'' … ''{endforx:azonosito}'' | mint a ''for'', de a cikluson belül a cikluson kívüli adatok is elérhetők (''dataroot'') | | ''{szoveg:Kilépés}'' \\ ''{szoveg:%s tétel\|adat.tetel}'' | **felirat a szótárból** — a felirat így fordul le a látogató nyelvére. Az elválasztó a ''\|'' (nem kettőspont), mert a magyar feliratok kettőspontra végződhetnek. | | ''{insert_template:sablonnev}'' \\ ''{insert_template:sablonnev:adat.ut}'' | másik szerkeszthető sablon beillesztése (a második formában a megadott lista minden elemére) | | ''{insert_module:modulnev}'' | gyári, felületről nem szerkeszthető részsablon beillesztése | Két gyakori hibalehetőség: * {{fa>exclamation-circle?lg}} **Az összehasonlítás szöveges.** A ''27'' és a ''27.00'' nem egyenlő, és a szöveges összehasonlítás számoknál is így működik. Értékhatárt ezért érdemes ugyanabban a formában megadni, ahogy az adat megjelenik. * {{fa>exclamation-circle?lg}} **A ''[%'' … ''%]'' forma csak a gyári fájl-sablonokban működik**, a //Webshop sablon// menüpontban rögzített sablonban nem. Ha egy betöltött minta ilyet tartalmaz, azt a mentés előtt át kell írni a fenti ''{…}'' formákra, különben az a rész nem oldódik fel. ---- ==== Feliratok és nyelvek ==== * A **termékek adatai** (megnevezés, kategórianév, tulajdonságok) a törzsadatok idegen nyelvi mezőiből fordulnak — lásd [[evir:torzsadatok:cikktorzs:idegen_nyelvi_megnevezesek|Idegen nyelvi megnevezések]]. * A **sablonok feliratai** a ''{szoveg:…}'' formával fordulnak. Ha egy saját sablonba beírt feliratot szó szerint (magyarul) írunk be, az minden nyelven magyar marad. * Ha egy oldalrésznek nyelvenként **eltérő HTML**-t kell adni, arra a //Webshop sablon// idegen nyelvi HTML mezői szolgálnak; ami üresen marad, az az elsődleges nyelvű sablonra esik vissza. Részletek: [[evir:webshop:webshop_sablon|Webshop sablon]]. * A látogató a kitehető **Nyelvválasztó** boxban vált nyelvet — lásd [[evir:webshop:felulet_beallitasok|Webshop felület]]. ---- ==== Ha valami nem jelenik meg — ellenőrzőlista ==== * **Kitettem egy elemet, de nem látszik a webshopban.** Az elemnek lehet, hogy nincs mit megjelenítenie: a //Nyelvválasztó// üres, ha nincs beállítva idegen nyelvi megnevezés; a //kategóriafa// csak azokat a kategóriákat mutatja, amelyeknél a //Webshop beállítás// = //Használva a webshopban//. * **Szerkesztettem egy sablont, de a webshop változatlan.** Ellenőrizni kell, hogy (a) a //Sablon// és a //Template// a megfelelő oldalrészre mutat-e, (b) a //Felvesz// gombbal el lett-e mentve (a //Minta betöltése// önmagában nem ment), (c) nem egy gyári, felületről nem szerkeszthető részt akarunk-e módosítani (lásd az ágyazódási ábrát), és (d) hogy a webshop egyáltalán a sablonos megjelenítést használja-e — a régi kinézetű webshopnál a sablonoknak nincs hatása, ez telepítési beállítás. * **Egy termék nem jön elő.** A //Webshop beállítás// értéke és a készlet dönt róla, nem a kategória — lásd [[evir:webshop:webshop_cikk_lathatosag|Cikkek láthatósága]] és [[evir:webshop:webshop_keszletkezeles|Készletkezelés]]. * **A rendelés nem küldhető be.** Nincs rögzítve [[evir:webshop:webshop_atveteli_mod|átvételi]] vagy [[evir:webshop:webshop_fizetesi_mod|fizetési mód]]. * **Üres sáv látszik az oldal szélén.** Ha egy oldalsávba csak olyan elem van kitéve, aminek nincs megjeleníthető tartalma, a sáv helyet foglal, de üresnek látszik — az elemet ilyenkor ki kell venni. ---- __**Példa műveletek**__ * [[evir:webshop:kep_kirakasa_webshopra_pelda|Cég logo kirakása webshop felső részébe]] * [[evir:webshop:egyedi_oldal_link_pelda|Egyedi oldal linkjének kirakása a HTML header-be]] * [[evir:webshop:cim_trailerbe_pelda|Cím és copyright szimbólum kirakása a HTML trailer-be]] * [[evir:webshop:regisztracios_link_webshop_bal_oldalra_pelda|Regisztrációs link kirakása a webshop bal szélére]] {{fa>info-circle?lg}} A fenti példalapok egy része még nem készült el. Addig a [[evir:webshop:webshop_sablon|Webshop sablon]] oldal //„Webshop oldalak és tartalomelemek belinkelése a sablonba"// szakasza mutat ilyen példákat (oldal-link, tartalomelem és feltöltött fájl beillesztése a fejléc/lábléc sablonba), a kép (logo, banner) kihelyezésére pedig a [[evir:webshop:banner_kirakasa|Banner kirakása a webshopra]] lap. ---- Kapcsolódó oldalak: * [[evir:webshop:00_osszefoglalo|Webshop - összefoglaló]] — a teljes folyamat, ez az oldal ennek az 5. fázisa * [[evir:webshop:altalanos|A webshop kezelésről]] * [[evir:webshop:beallitas_menu|Webshop beállítások]] * [[evir:webshop:felulet_beallitasok|Webshop felület szerkesztése]] * [[evir:webshop:webshop_sablon|Webshop sablon]] * [[evir:webshop:webshop_mukodes|Webshop működés]] * [[evir:webshop:altalanos_beallitasok|Általános beállítások]] * [[evir:webshop:webshop_cikk_lathatosag|Cikkek láthatósága a webshopban]] * [[evir:webshop:cikk_adatok_oldal|Cikk adatok oldal alapértelmezett felépítése]] * [[evir:webshop:leiras_megjelenites|Leírás megjelenítésének folyamata]] * [[evir:webshop:rovid_leiras_megjelenites|Rövid leírás megjelenítésének folyamata]] * [[evir:webshop:lista_leiras_megjelenites|Lista leírás megjelenítésének folyamata]] * [[evir:webshop_connector:kulso_webshop|Külső webshop üzemeltetése]] * [[evir:webshop:webshop_cikk_beallitasok|Webshop cikk beállítások]] * [[evir:webshop:webshop_atveteli_mod|Átvételi mód]] * [[evir:webshop:webshop_fizetesi_mod|Fizetési mód]] * [[evir:webshop:kapcsolat_oldal|Kapcsolat oldal]] * [[evir:webshop:felhasznalok|Webshop felhasználók]] * [[evir:webshop:banner_kirakasa|Banner kirakása a webshopra]]