Árak megjelenítése a rögzített kosár gomb felett mobilon

Miről szól a módosítás?

A Journal3 téma egyik kiemelkedő funkciója, hogy mobilon a termékoldal „Kosárba" gombját a képernyő aljára rögzíti (sticky/fixed pozíció), így az mindig elérhető marad görgetés közben is. A probléma: az ár ilyenkor eltűnik a képernyőről, és a felhasználónak görgetnie kell vissza, hogy megnézze.

Ez a módosítás megoldja ezt azáltal, hogy:

• A rögzített gomb fölé elhelyezi az aktuális árat mobilon.
• Ha akciós ár van, az eredeti ár áthúzva, az akciós ár pirossal jelenik meg.
• Ha van nettó ár (tax), az is megjelenik kisebb betűmérettel.
• Asztali nézeten a .fixed-bar-price elem el van rejtve – ott nincs változás.
• Az eredeti ár a termékoldal szokásos helyén változatlanul megmarad.

Rendszerkövetelmények és kompatibilitás

Előnézet

📱 Screenshot: Mobilnézet – módosítás után

Telepítés lépései

<div class="button-group-page">
<div class="buttons-wrapper">

<div class="fixed-bar-price">
  {% if special %}
    <span class="product-price-old">{{ price }}</span>
    <span class="product-price-new">{{ special }}</span>
  {% else %}
    <span class="product-price">{{ price }}</span>
  {% endif %}
  {% if tax %}
    <span class="product-tax">{{ text_tax }} {{ tax }}</span>
  {% endif %}
</div>

<div class="button-group-page">
<div class="buttons-wrapper">

<!-- ▼▼▼ HOZZÁADOTT BLOKK ▼▼▼ -->
<div class="fixed-bar-price">
  {% if special %}
    <span class="product-price-old">{{ price }}</span>
    <span class="product-price-new">{{ special }}</span>
  {% else %}
    <span class="product-price">{{ price }}</span>
  {% endif %}
  {% if tax %}
    <span class="product-tax">{{ text_tax }} {{ tax }}</span>
  {% endif %}
</div>
<!-- ▲▲▲ HOZZÁADOTT BLOKK VÉGE ▲▲▲ -->

<!-- ... (eredeti tartalom folytatódik) ... -->

CSS kód

/* Az árak a gomb felett mobilon */
.fixed-bar-price {
  display: none;
}

@media (max-width: 1024px) {
  .button-group-page .buttons-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .fixed-bar-price {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 8px;
    padding: 2px 8px;
    width: 100%;
  }

  .fixed-bar-price .product-price-old { order: 1; }
  .fixed-bar-price .product-price-new { order: 2; }
  .fixed-bar-price .product-price     { order: 2; }
  .fixed-bar-price .product-tax       { order: 3; }

  .fixed-bar-price .product-price-new {
    color: #e00;
    font-weight: bold;
    font-size: 16px;
  }

  .fixed-bar-price .product-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
  }

  .fixed-bar-price .product-tax {
    color: #999;
    font-size: 11px;
  }

  .button-group-page .stepper-group.cart-group {
    width: 100% !important;
  }

  .button-group-page #button-cart {
    flex: 1 !important;
  }
}

Mit csinál a CSS?

Testreszabás és módosítási lehetőségek

Töréspont (képernyőszélesség) módosítása

Alapértelmezetten 1024px-nél aktiválódik a mobilnézet. Ha csak kis képernyőkön szeretnéd megjeleníteni, módosítsd:

/* Csak 768px alatt (csak telefonon): */
@media (max-width: 768px) { … }

/* 480px alatt (csak kis telefonokon): */
@media (max-width: 480px) { … }

Betűméretek módosítása

/* Akciós ár betűmérete (alapért.: 16px) */
.fixed-bar-price .product-price-new {
  font-size: 18px;
}

/* Eredeti (áthúzott) ár betűmérete (alapért.: 13px) */
.fixed-bar-price .product-price-old {
  font-size: 14px;
}

/* Nettó ár betűmérete (alapért.: 11px) */
.fixed-bar-price .product-tax {
  font-size: 12px;
}

Színek módosítása

/* Akciós ár színe (alapért.: #e00 – piros) */
.fixed-bar-price .product-price-new {
  color: #e00;      /* Módosítsd pl. #c0392b-re sötétebb piroshoz */
}

/* Áthúzott ár és nettó ár színe (alapért.: #999 – szürke) */
.fixed-bar-price .product-price-old,
.fixed-bar-price .product-tax {
  color: #999;      /* Módosítsd pl. #777-re sötétebb szürkéhez */
}

Elrendezés módosítása

Ha az árakat egymás alá szeretnéd rakni (függőleges elrendezés) a vízszintes helyett:

@media (max-width: 1024px) {
  .fixed-bar-price {
    flex-direction: column;   /* egymás alá */
    align-items: flex-start;
    gap: 2px;
  }
}

OCMod változat (haladóknak)

Ha a fájlt nem szeretnéd kézzel szerkeszteni, az alábbi OCMod XML fájllal automatikusan telepítheted a módosítást. Az OCMod az OpenCart beépített módosítórendszere, amely a fájlokat az eredeti fájlok érintése nélkül, egy köztes rétegen keresztül módosítja.

<?xml version="1.0" encoding="utf-8"?>
<modification>
  <name>Journal3 – Fixed Bar Price (árak a gomb felett mobilon)</name>
  <version>1.0</version>
  <author>Te neved</author>
  <link>https://example.com</link>

  <file path="catalog/view/theme/journal3/template/product/product.twig">
    <operation>
      <search><![CDATA[<div class="button-group-page">
<div class="buttons-wrapper">]]></search>
      <add position="after"><![CDATA[
<div class="fixed-bar-price">
  {% if special %}
    <span class="product-price-old">{{ price }}</span>
    <span class="product-price-new">{{ special }}</span>
  {% else %}
    <span class="product-price">{{ price }}</span>
  {% endif %}
  {% if tax %}
    <span class="product-tax">{{ text_tax }} {{ tax }}</span>
  {% endif %}
</div>
]]></add>
    </operation>
  </file>
</modification>

OCMod telepítési lépések

1. Mentsd a fenti kódot fixed-bar-price.ocmod.xml névvel.
2. Admin felületen: Extensions → Installer → Upload – töltsd fel a fájlt.
3. Extensions → Modifications → Refresh gomb.
4. Admin cache törlése: Dashboard → fogaskerék ikon → Refresh.
5. A CSS-t a Journal3 Custom CSS mezőjébe kézzel kell még bemásolni (ld. fentebb).

Hibaelhárítás

Az ár nem jelenik meg mobilon

• Ellenőrizd, hogy a Journal3-ban be van-e kapcsolva a sticky/rögzített kosár gomb mobilra.
• Töröld a böngésző cache-t és az OpenCart cache-t.
• Ellenőrizd, hogy a CSS-t valóban a Custom CSS mezőbe illesztetted-e.
• Ellenőrizd a Twig fájl szerkesztőjében, hogy nincs-e szintaxishiba a beszúrt blokk körül.

Asztali nézeten is megjelenik a plusz ár

• Ellenőrizd, hogy a CSS-ben megvan-e az alap .fixed-bar-price { display: none; } szabály.
• Ellenőrizd, hogy a media query helyesen van-e zárva (@media … { … }).

Twig szintaxishiba a frontend oldalon

• Nyisd meg a product.twig fájlt újra és ellenőrizd, hogy a {% if %} / {% endif %} blokkok lezártak-e.
• Győződj meg arról, hogy nem törölted véletlenül a meglévő kódot a szerkesztés során.

A gomb nem tölti ki a teljes szélességet

• Ellenőrizd, hogy a CSS tartalmazza-e a .button-group-page #button-cart { flex: 1 !important; } sort.
• Lehet, hogy a Journal téma egy frissebb verziója más CSS osztálynevet használ – ellenőrizd böngésző devtools segítségével.

Verziónapló