Ugrás a fő tartalomhoz
A kódszerkesztővel teljes mértékben Ön irányítja a sablont. A sablonok HTML- és CSS-kódból állnak Liquiddal kiegészítve. Ez ugyanaz a sablonnyelv, amelyet a Shopify is használ: a {{ order_name }} kiírja a rendelés nevét, a {% for line_item in line_items %} pedig minden tételnél megismétlődik. A Foliant rendelési változói a Shopify Order Printer változóit követik, így az ahhoz írt sablonok többnyire változtatás nélkül működnek. A kódszerkesztő minden csomagban elérhető.

A kódszerkesztő megnyitása

Nyissa meg a sablont a szerkesztőben, és kattintson a Kód fülre. A kódsablonok közvetlenül itt nyílnak meg. Vizuális sablonnál először a lefordított kódot látja. A módosításhoz kattintson a Kód szerkesztése gombra. Lásd: Váltás a Vizuális és a Kód nézet között. A bal oldali panelen három fül található: A jobb oldali panel az élő előnézet. Röviddel azután frissül, hogy Ön abbahagyta a gépelést.

Mező beszúrása

  1. Helyezze a kurzort oda, ahová a mezőt szeretné.
  2. Kattintson a Mező beszúrása gombra.
  3. Keresse meg a mezőt (például „tracking” vagy „SKU”) a Mezők keresése mezőben, majd kattintson rá.
A Foliant a kurzor helyére beszúrja a mező Liquid-kódját, például: {{ shipping_address.city }}. A tételmezők, például a {{ line_item.sku }}, csak a tételsorok ciklusán belül működnek. Magát a ciklust a Tételsorok beszúrásával hozhatja létre.

Keresés a kódban

Ha szöveget szeretne keresni a sablonban, kattintson a Mező beszúrása melletti keresés gombra (vagy nyomja meg a ⌘F / Ctrl+F billentyűket a kódban).

Kódhibák

A szerkesztő gépelés közben ellenőrzi a kódot, és a margón jelöli a problémákat:
  • A hibák megakadályozzák a mentést, és szüneteltetik az előnézetet. Hiba például egy lezáratlan {{ vagy {%. A hibák a szerkesztő feletti Kódhibák sávban jelennek meg, mindegyik mellett egy Ugrás a sorra hivatkozással.
  • A figyelmeztetések olyan dolgokra hívják fel a figyelmet, amelyek hibásak lehetnek, de nem akadályozzák a mentést. Ilyen például egy ismeretlen Liquid-szűrő, -címke vagy -objektum, egy ismeretlen HTML-címke vagy CSS-tulajdonság, vagy egy lezáratlan HTML-címke.
Mentéskor a Foliant is ellenőrzi a sablont: a Liquid-kódnak olvashatónak kell lennie, a HTML-címkéknek párban kell állniuk, a beágyazott SVG pedig csak rajzelemeket tartalmazhat. Ha valami nem stimmel, a mentés sikertelen lesz. Ilyenkor egy Frissítés sikertelen sáv legfeljebb öt problémát sorol fel, és ha ismert, a sorszámukat is megadja. Ha a sablon mentése sikerül, de az előnézet nem jeleníthető meg, egy sáv mutatja a Liquid hibaüzenetét és a sort, ha az ismert.

Jó sablonok írása

  • A pénzösszegek centben vannak megadva, ezért mindig pénzszűrővel írassa ki őket, például: {{ total_price | money }}. Lásd: Pénz és pénznem a sablonokban.
  • A vásárlók által beírt szövegeknél, például a megjegyzéseknél és címeknél, használja az | escape szűrőt: {{ note | escape }}.
  • A dokumentum nyelvét követő szövegekhez használja a {{ 'subtotal' | t }} formát. Lásd: Dátumok, nyelvek és fordítások.
  • Az áfához használja a Foliant beépített kódrészleteit: a {% include 'vat_breakdown' %} kiírja az áfabontási táblázatot, a {% include 'legal_notes' %} pedig a jogi megjegyzéseket (fordított adózás, export, IOSS…).

Jó tudni

  • Ha egy sorszámozott sablon (számla, jóváíró számla vagy árajánlat) sehol sem írja ki a document_number értéket, a Foliant egy kis sort ad a dokumentum végéhez a sorszámmal. Lásd: Dokumentumszámok a sablonokban.
  • A kódsablonok oldalszámait és ismétlődő táblázatfejléceit a sablon beállítási oldalán, az Oldalelrendezés részben találja.
  • Ha a Shopify Order Printer vagy az Order Printer Pro alkalmazásból szeretne sablont áthozni, használja a Sablonok oldalon a Sablon importálása funkciót. Lásd: Sablon importálása az Order Printerből.

Kapcsolódó cikkek