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.
- 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
- 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ény | Részlet |
|---|---|
| OpenCart | 3.x |
| Journal3 | Bármely verzió, Dynamic Content modullal |
| PHP | 7.x – 8.x (teljesen kompatibilis) |
| OC admin jog | Layouts szerkesztési jog |
| FTP hozzáférés | Két fájl feltöltéséhez |
Fájlstruktúra
Két fájl kerül az OpenCart telepítési könyvtárba:
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.
<?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ó.
{% 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
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.
Dynamic Content blokk létrehozása
Journal3 Admin → Modules → Blocks → új Dynamic Content blokk.
Controller route beállítása
A Controller mezőbe:
journal3/breadcrumb_smart
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.
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.
private $excluded_category_ids = [ 99, // Akciós termékek 142, // Kiemelt termékek // további ID-k... ];
| Tulajdonság | Leí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.
.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
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.
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.
Legjobb útvonal kiválasztása
A legtöbb elemből álló, kizárási listán nem szereplő útvonal kerül megjelenítésre.
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.
Á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ünet | Ok | Megoldá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 |