OpenCart 3.x Journal3 Dynamic Content

Breadcrumb Smart
Termékoldalon

Egy Journal3 Dynamic Content modul, amely a termék kategória-hierarchiáját mindig helyesen jeleníti meg — függetlenül attól, hogyan jutott a látogató az oldalra.

A probléma

Az OpenCart 3 beépített breadcrumb-ja munkamenet-alapú: csak akkor mutatja a teljes kategória-útvonalat, ha a látogató kategória-listán keresztül érkezett. Google-ből vagy közvetlen URL-ről érkezve a breadcrumb csonka marad.

✗ Eredeti viselkedés
  • Direkt URL-ről érkezve hiányos breadcrumb
  • Google-ből csak Főoldal + Terméknév látható
  • Kategória kontextus elvész
  • SEO és UX szempontból gyenge
✓ Modul után
  • Mindig teljes hierarchia jelenik meg
  • Belépési ponttól független
  • Legmélyebb kategória-útvonal kerül kiválasztásra
  • Kizárható speciális kategóriák (pl. Akciós)

A megoldás

A megoldás egy Journal3 Dynamic Content modul, amely az alap breadcrumb helyett kerül a layoutba. A modul adatbázisból olvassa ki a termék kategória-láncát, és mindig a legmélyebb, nem kizárt útvonalat jeleníti meg.

💡

A Journal3 .layout-2 CSS osztálya elrejti az alap .breadcrumb elemet (display:none !important). A modul saját .breadcrumb-smart osztályt használ, ezért ez a szabály nem érinti.

Előfeltételek

KövetelményRészlet
OpenCart3.x
Journal3Bármely verzió, Dynamic Content modullal
PHP7.x – 8.x (teljesen kompatibilis)
OC admin jogLayouts szerkesztési jog
FTP hozzáférésKét fájl feltöltéséhez

Fájlstruktúra

Két fájl kerül az OpenCart telepítési könyvtárba:

catalog/
controller/
journal3/
breadcrumb_smart.php← Logika, adatgyűjtés
view/theme/journal3/template/
journal3/
breadcrumb_smart.twig← HTML + CSS megjelenítés

Controller

A controller kizárólag adatgyűjtéssel foglalkozik — MVC best practice szerint semmilyen HTML-t nem tartalmaz. A twig sablonnak egy $breadcrumbs tömböt ad át.

A Journal3 Dynamic Content modulok index($settings) szignatúrát igényelnek. A $settings paraméter elhagyása üres kimenetet eredményez.

catalog/controller/journal3/breadcrumb_smart.php PHP
<?php
class ControllerJournal3BreadcrumbSmart extends Controller {

    // -------------------------------------------------------
    // Kizárt kategória ID-k – soha nem kerülnek az útvonalba.
    // -------------------------------------------------------
    private $excluded_category_ids = [
        // 99,   // Akciós termékek
        // 100,  // Újdonságok
    ];

    public function index($settings) {
        $this->load->model('catalog/product');
        $this->load->model('catalog/category');
        $this->load->model('tool/image');

        $product_id = isset($this->request->get['product_id'])
            ? (int)$this->request->get['product_id'] : 0;

        if (!$product_id) {
            return '';
        }

        $categories = $this->model_catalog_product->getCategories($product_id);

        if (!$categories) {
            return '';
        }

        $best_path = [];

        foreach ($categories as $category) {
            $cat_id = (int)$category['category_id'];

            if (in_array($cat_id, $this->excluded_category_ids)) {
                continue;
            }

            $path = [];
            $id   = $cat_id;

            while ($id) {
                $cat_info = $this->model_catalog_category->getCategory($id);
                if (!$cat_info) break;
                array_unshift($path, ['id' => $id, 'name' => $cat_info['name']]);
                $id = (int)$cat_info['parent_id'];
            }

            if (count($path) > count($best_path)) {
                $best_path = $path;
            }
        }

        if (!$best_path) {
            return '';
        }

        $product_info = $this->model_catalog_product->getProduct($product_id);
        $path_ids     = array_column($best_path, 'id');

        $breadcrumbs = [];

        $breadcrumbs[] = [
            'text' => $this->language->get('text_home'),
            'href' => $this->url->link('common/home'),
            'last' => false,
        ];

        foreach ($best_path as $i => $cat) {
            $breadcrumbs[] = [
                'text' => $cat['name'],
                'href' => $this->url->link('product/category',
                    'path=' . implode('_', array_slice($path_ids, 0, $i + 1))),
                'last' => false,
            ];
        }

        if ($product_info) {
            $breadcrumbs[] = [
                'text' => $product_info['name'],
                'href' => '',
                'last' => true,
            ];
        }

        return $this->load->view('journal3/breadcrumb_smart', ['breadcrumbs' => $breadcrumbs]);
    }
}

Twig sablon

A sablon tartalmazza a CSS-t és a HTML struktúrát. A CSS a twig-ben van elhelyezve, nem kell külön fájl — minden egy helyen módosítható.

catalog/view/theme/journal3/template/journal3/breadcrumb_smart.twig Twig
{% if breadcrumbs %}
<style>
.breadcrumb-smart { display:flex; list-style:none; padding:8px 0; margin:0; gap:4px; font-size:13px; flex-wrap:wrap; }
.breadcrumb-smart li + li::before { content:'/'; color:#999; margin-right:4px; }
.breadcrumb-smart a { color:#696973; text-decoration:none; }
.breadcrumb-smart li.active { color:#333; }
</style>
<ul class="breadcrumb-smart">
  {% for crumb in breadcrumbs %}
    <li class="{% if crumb.last %}active{% endif %}">
      {% if crumb.href %}
        <a href="{{ crumb.href }}">{{ crumb.text }}</a>
      {% else %}
        {{ crumb.text }}
      {% endif %}
    </li>
  {% endfor %}
</ul>
{% endif %}

Journal3 beállítás

1

Fájlok feltöltése FTP-n

Töltsd fel a két fájlt a fenti útvonalakra. Győződj meg, hogy a könyvtárak léteznek.

2

Dynamic Content blokk létrehozása

Journal3 Admin → Modules → Blocks → új Dynamic Content blokk.

3

Controller route beállítása

A Controller mezőbe:

journal3/breadcrumb_smart
4

Layout elhelyezés

Termékoldalon (product/product) add a blokkot a tartalom tetejére. Az alap Journal3 breadcrumb automatikusan rejtve van a .layout-2 CSS szabály miatt.

5

Cache törlés

Journal3 Admin → Clear Cache, majd OC Admin → Dashboard → kék fogaskerék → Refresh.

Kategória kizárás

Ha egy termék több kategóriában is szerepel (pl. Kesztyűk és Akciós termékek), a modul alapból a mélyebb útvonalat választja. A kizárási listával szabályozható, mely kategóriák ne kerüljenek soha az útvonalba.

breadcrumb_smart.php – fájl teteje PHP
private $excluded_category_ids = [
    99,   // Akciós termékek
    142,  // Kiemelt termékek
    // további ID-k...
];
TulajdonságLeírás
$excluded_category_ids PHP tömb OC kategória ID-kkal. Az ID az admin felületen (Catalog → Categories) olvasható le.
Kiválasztási logika Legmélyebb szintű, nem kizárt kategória nyer. Azonos mélységnél az adatbázis sorrendje dönt.
Nincs UI Szándékos — a kizárási lista ritkán változik, a kód tetején jól látható és könnyen módosítható.

Stílus testreszabás

A stílusok a breadcrumb_smart.twig fájl <style> blokkjában találhatók.

Leggyakrabban módosított értékek CSS
.breadcrumb-smart {
  font-size: 13px;      /* betűméret */
  gap: 4px;             /* elemek közötti rés */
  padding: 8px 0;       /* belső margó */
}

.breadcrumb-smart li + li::before {
  content: '/';         /* elválasztó: › / | stb. */
  color: #999;
}

.breadcrumb-smart a {
  color: #696973;       /* link szín */
}

.breadcrumb-smart li.active {
  color: #333;          /* aktuális oldal szín */
}
⚠️

Ne használj .breadcrumb osztálynevet. A Journal3 téma .layout-2 .breadcrumb { display:none !important } szabállyal elrejti az összes ilyen elemet termékoldalon.

Logika magyarázat

1

Kategóriák lekérése

getCategories($product_id) — visszaadja az összes hozzárendelt kategóriát az oc_product_to_category táblából.

2

Szülőlánc felépítése

Minden kategóriára while loop-pal felfelé haladva gyűjti a szülőket, amíg parent_id = 0. A getCategory() modell metódust használja.

3

Legjobb útvonal kiválasztása

A legtöbb elemből álló, kizárási listán nem szereplő útvonal kerül megjelenítésre.

4

Breadcrumb tömb összeállítása

Főoldal → kat1 → kat2 → … → terméknév. Minden elemnek van text, href és last mezője. Az URL-ek path=12_34_56 formátumban épülnek fel.

5

Átadás a twig-nek

return $this->load->view('journal3/breadcrumb_smart', ['breadcrumbs' => $breadcrumbs]) — a twig rendereli a végső HTML-t és CSS-t.

Hibaelhárítás

TünetOkMegoldás
Üres kimenet Hiányzó $settings paraméter index($settings) szignatúra kötelező
Nem látható .breadcrumb osztálynév .breadcrumb-smart osztályt kell használni
300px magas üres terület Journal3 blokk block-dynamic + height:300px CSS ütközés Blokk Content Type-ját állítsd HTML-re az adminban
Rossz útvonal jelenik meg Akciós kategória mélyebb hierarchiájú Add a kategória ID-ját az $excluded_category_ids tömbhöz
Régi verzió fut Journal3 / OC cache Journal3 Clear Cache + OC Dashboard Refresh