Megtakarítás kijelzése a termékoldalon

Mi ez a funkció?

A funkció a termékoldal árblokk-jában – a nettó ár (és az adósor) alatt – megjeleníti a vásárló által elérhető forintban kifejezett megtakarítást, amennyiben az aktuális kedvezmény eléri a megadott küszöbértéket.

A funkció csak akkor jelenik meg, ha mindkét feltétel teljesül:

• Van special (akciós) ár a terméknél, és
• A kedvezmény összege eléri a 2 000 Ft-ot, VAGY a kedvezmény aránya eléri a 10%-ot.

Környezet

Működési logika

A szkript a Twig által renderelt ár-stringekből (pl. "24 990 Ft") kiszedi a számokat, kiszámítja a különbséget, majd – ha a feltételek teljesülnek – injektálja a szöveget a DOM-ba.

Megjelenítési feltételek

Pseudokód

eredeti  = parseInt(price_string)     // pl. 24990
akcio    = parseInt(special_string)   // pl. 17990
diff     = eredeti - akcio            // 7000
pct      = diff / eredeti * 100       // 28%

ha (eredeti > akcio) ÉS (pct >= 10 VAGY diff >= 2000):
    megjelenit("Megtakarítás: 7 000 Ft")

Megjelenés előnézet

A fenti előnézet statikus, az élő oldal az aktuális árakat jeleníti meg.

Twig sablon módosítás

Keresd meg az árblokk-ot a fájlban (a product-price-group osztályú div-et), és illeszd be az alábbi kódrészletet a {% if tax %} blokk utáni, a {% if points %} blokk előtti pozícióba.

Beillesztendő kód

    <div id="j3-savings" class="j3-savings"></div>
    <script>(function(){
      var o=parseInt("{{ price }}".replace(/[^0-9]/g,'')),
          n=parseInt("{{ special }}".replace(/[^0-9]/g,''));
      var s = (o-n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
      if(o>n && ((o-n)/o*100>=10 || (o-n)>=2000))
        document.getElementById('j3-savings').innerHTML=
        'Megtakarítás: <strong>'+s+' Ft</strong>';
    })();</script>

Teljes árblokk kontextusban

Az alábbi részlet mutatja, hova kerül a kód a meglévő struktúrában:

{# ... #}
{% if price and not j3.document.isPopup('options') %}
<div class="product-price-group">
  <div class="price-wrapper">
    <div class="price-group">
      {% if not special %}
        <div class="product-price">{{ price }}</div>
      {% else %}
        <div class="product-price-new">{{ special }}</div>
        <div class="product-price-old">{{ price }}</div>
      {% endif %}
    </div>
    {% if tax %}
      <div class="product-tax">{{ text_tax }} {{ tax }}</div>
    {% endif %}

    <!-- ▼▼▼ MEGTAKARÍTÁS – IDE KERÜL ▼▼▼ -->
    <div id="j3-savings" class="j3-savings"></div>
    <script>(function(){
      var o=parseInt("{{ price }}".replace(/[^0-9]/g,'')),
          n=parseInt("{{ special }}".replace(/[^0-9]/g,''));
      var s = (o-n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
      if(o>n && ((o-n)/o*100>=10 || (o-n)>=2000))
        document.getElementById('j3-savings').innerHTML=
        'Megtakarítás: <strong>'+s+' Ft</strong>';
    })();</script>
    <!-- ▲▲▲ MEGTAKARÍTÁS VÉGE ▲▲▲ -->

    {% if points %}
      <div class="product-points">{{ text_points }} {{ points }}</div>
    {% endif %}
  </div>
</div>
{% endif %}

CSS stílus hozzáadása

/* Megtakarítás – termékoldalon */
.j3-savings {
  color: #28a745;
  margin-top: 2px;
  font-weight: normal;
  white-space: nowrap;
  padding-right: 16px;
}

Küszöbértékek módosítása

A megjelenési feltételek a Twig fájlban lévő inline szkriptben változtathatók:

if(o>n && ((o-n)/o*100>=10 || (o-n)>=2000))

Stílusok testreszabása

Ikonos verzió (opcionális)

Ha ikont is szeretnél a szöveg elé (pl. ✂ vagy egy SVG), cseréld le az innerHTML-t:

document.getElementById('j3-savings').innerHTML=
  '✂ Megtakarítás: <strong>'+s+' Ft</strong>';

Megjegyzések & korlátok

• Csak termékoldalon jelenik meg – a {% if price and not j3.document.isPopup('options') %} feltétel kizárja a Quick View popup-ot.
• Árformátum-függő – a regex csak a számjegyeket tartja meg. Tizedes jegyeket (pl. fillér) tartalmazó összegnél az érték pontatlan lehet.
• Nincs szerver-oldali logika – a számítás kliens-oldalon, JavaScript-tel történik, kizárólag a renderelt ár-stringek alapján.
• Opcionális cache ürítés – a .twig módosítása után ürítsd a Journal3 és az OpenCart gyorsítótárát (Admin → Dashboard → fogaskerék ikon).
• Több pénznem – több pénznem esetén a ' Ft' szöveg módosítása szükséges (pl. Twig változóval: {{ currency.symbol_right }}).

Változásnapló