Fontos figyelmeztetés: ha módosítjuk a szerkesztőben egy sablon fájlait, akkor az olyan rendszerfrissítések, amelyek érintik a korábban egyedileg módosított sablon fájlokat, nem kerülnek be majd automatikusan a boltjába. Ilyen esetekben a régi működés és megjelenés marad mindaddig, amíg el nem végzi a szükséges módosításokat a sablon fájlokban.
Az alábbi példában a termék oldalon szeretnénk elérni, hogy az ár és a kosárba rakom gomb egymás mellett legyen. Jelenleg így néz ki a termék oldalunk:
Két megoldási lehetőség van. Az első, hogy az ár rész alá tesszük a kosárba rakom gomb részt. A másik, hogy fordítva, az árat tesszük a kosárba rakom gomb mellé. Akármelyik módosítást is végezzük el, a termék oldalhoz tartozó sablon fájlban kell elvégeznünk. Ez a product/product.tpl.
Keressük meg a következő kódrészt, ami az ár kiírásáért felel:
{% if display_price %}
{{ pricehtml }}
{% endif %}
A programozásban jártasabbaknak könnyebb megismerni a kódot. Akik még nem foglalkoztak ilyennel, nekik segítség az alábbi rövid leírás.
Maga az ár megjelenítése a pricehtml sorban található. Az első és a harmadik sor pedig azért kell, hogy csak akkor jelenjen meg az ár, hogyha kell árat megjeleníteni. Például, ha bekapcsoljuk az ár elrejtése opciót az adminisztrációs felületen, akkor ez a kódrész vizsgálja a megjelenést.
Ezt azért volt fontos megjegyezni, mert ha át szeretnénk helyezni az árat, akkor mind a három sort át kell helyezni.
Visszatérve a feladathoz, következő lépésként keressük meg a kosárba rakom rész pontos helyét, azaz az alábbi kódot. Itt is javasolt a CTRL+F funkció használata a gyorsabb navigálás végett.
<div class="product_cart_box">
<div class="product_cart_box_inner">
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="product">
{% if productattributes1r %}
<!-- productattributes1r -->
{{ productattributes1r }}
<!-- /productattributes1r -->
{% endif %}
{% if display_price %}
{% if options %}
{% include "product/productoptions.tpl" %}
{% endif %}
{% endif %}
{% if productcollateral %}
{{ productcollateral }}
{% endif %}
{{ productaddtocart }}
</form>
</div>
</div>
Az előző kép alján is látszik már a kódrész eleje, de itt látható a teljes kódrész:
Ez egy hosszabb és bonyolultabb kód. Tartalmaz több HTML-t és több feltételt is, méghozzá azért, mert a kosárba rakáshoz több kapcsolódó funkció is tartozik.
Ilyen például a változatképző paraméterek, a kiegészítő termékek, amelyeket az adott termékkel együtt kosárba lehet rakni.
Keressük azt a div tag-et a HTML-ben, aminek a class értéke ez: product_cart_box és a form tag záró része után található második záró divnél végződik. Fontos, hogy a div-eket is áthelyezzük, hiszen azok a formázáshoz szükséges építő elemek a sablonban.
Ha megtaláltuk a két részt akkor kivágással (CTRL + X) és beillesztéssel (CTRL + V) másoljuk az árat a kosárba rakom rész elé vagy mögé, illetve fordítva, a kosárba rakom részt az ár elé vagy mögé.
A példa kedvéért mi most a kosár gombot helyezzük az ár mögé.
A kód átrendezése után mentsük el a módosítást és ellenőrizzük le, hogy tényleg megtörtént-e a változás a webáruházban.
A kijelölt rész a módosított kódrészlet.Jól látszik, hogy az ár kiírás helye változatlan maradt, míg a teljes kosárba rakom gomb részt feljebb helyeztük, közvetlenül az ár után.
Az áruházban pedig így néz ki a változtatásunk: