"Kosárba rakom" gomb áthelyezése

 

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:

Ke_pernyo_foto__2019-01-21_-_17.11.06.png

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 %}

Ke_pernyo_foto__2019-01-21_-_17.14.08.png

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:

Ke_pernyo_foto__2019-01-21_-_17.15.08.png

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.

Ke_pernyo_foto__2019-01-21_-_17.15.08.png

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:

Ke_pernyo_foto__2019-01-21_-_17.08.30.png

 

Van még kérdése? Kérelem beküldése

0 Megjegyzések

Kérjük, Belépés után hagyjon megjegyzést.