Product Categories – Journal3 OpenCart kiegészítő
Termékoldali kategória-megjelenítő widget Journal3 témához. A kiegészítő az aktuális termékhez rendelt kategóriákat jeleníti meg képpel és hivatkozással, ösztönözve a vásárlót a kategória böngészésére. Modulban dynamic content-ként használható.
Mit csinál?
A termékoldal egy kiválasztott pozíciójában megjelenik az adott termékhez tartozó kategóriák listája (legfeljebb 2). A megjelenítés a kategóriák számától függően kétféle lehet:
1 kategória esetén
Vízszintes elrendezés: a kategória képe és neve egymás mellett jelenik meg, egy kattintható hivatkozásként. A szöveg tájékoztató jellegű: „További hasonló termékek [Kategória neve] kategóriában találhatók."
2 kategória esetén
Kétoszlopos kártyás elrendezés: mindkét kategória saját kártyán jelenik meg, képpel és névvel, egyenlő szélességben egymás mellett.
Ha a terméknek nincs kategóriája, a widget nem jelenít meg semmit (üres stringet ad vissza). Ha 3 vagy több kategória van rendelve a termékhez, csak az első kettő jelenik meg.
Hogyan működik?
- A widget a Journal3 modul API-ján keresztül töltődik be, a
product_idGET paraméter alapján – ez automatikusan elérhető a termékoldal URL-jéből. - A controller (
ControllerJournal3ProductCategories) az OpenCart beépítettgetCategories()metódusával lekéri a termékhez rendelt kategóriákat, majd legfeljebb 2-t dolgoz fel belőlük. - Minden kategóriához lekéri a nevét, az oldalra mutató hivatkozást, és ha van, a kategória képét (300×200 px-re méretezve).
- A controller közvetlenül HTML stringet ad vissza – külön Twig sablon nem szükséges.
A widget kizárólag az OpenCart beépített modelljeit használja (catalog/product, catalog/category, tool/image). Egyedi model fájlra nincs szükség.
Követelmények
| Komponens | Verzió | Megjegyzés |
|---|---|---|
| OpenCart | 3.x | Beépített modellek szükségesek |
| Journal3 téma | bármely aktuális verzió | Dynamic content támogatás |
| PHP | 7.x / 8.x |
Admin oldali módosítás vagy egyedi model/sablon fájl nem szükséges.
Telepítés
Fájl másolása
Másold az upload/ mappában lévő fájlt az OpenCart gyökérkönyvtárába, megőrizve a mappastruktúrát:
| upload/ | ||
| └── | catalog/ | |
| └── | controller/journal3/ | |
| └── | product_categories.php | → catalog/controller/journal3/product_categories.php |
Más fájl feltöltése nem szükséges. Sem admin oldali módosítás, sem Twig sablon nem tartozik ehhez a widgethez.
A controller teljes kódja
<?php
class ControllerJournal3ProductCategories extends Controller {
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;
$categories = $this->model_catalog_product->getCategories($product_id);
if (!$categories) {
return '';
}
$categories = array_slice($categories, 0, 2);
$count = count($categories);
$output = '';
if ($count === 1) {
$category_info = $this->model_catalog_category->getCategory($categories[0]['category_id']);
if (!$category_info) return '';
$name = htmlspecialchars($category_info['name'], ENT_QUOTES, 'UTF-8');
$link = $this->url->link('product/category', 'path=' . $categories[0]['category_id']);
$image = '';
if (!empty($category_info['image'])) {
$image = $this->model_tool_image->resize($category_info['image'], 300, 200);
}
$output .= '<a href="' . $link . '" target="_blank" rel="noopener" style="display:flex; align-items:center; gap:20px; text-decoration:none; color:inherit;">';
if ($image) {
$output .= '<img src="' . $image . '" alt="' . $name . '" style="width:200px; height:auto; flex-shrink:0;">';
}
$output .= '<span style="font-size:1.1em;">További hasonló termékek <strong>' . $name . '</strong> kategóriában találhatók.</span>';
$output .= '</a>';
} else {
$output .= '<div style="display:flex; gap:4%; flex-wrap:wrap;">';
foreach ($categories as $category) {
$category_info = $this->model_catalog_category->getCategory($category['category_id']);
if (!$category_info) continue;
$name = htmlspecialchars($category_info['name'], ENT_QUOTES, 'UTF-8');
$link = $this->url->link('product/category', 'path=' . $category['category_id']);
$image = '';
if (!empty($category_info['image'])) {
$image = $this->model_tool_image->resize($category_info['image'], 300, 200);
}
$output .= '<a href="' . $link . '" target="_blank" rel="noopener" style="display:block; width:48%; text-align:center; text-decoration:none; color:inherit;">';
if ($image) {
$output .= '<img src="' . $image . '" alt="' . $name . '" style="width:100%; height:auto; display:block;">';
}
$output .= '<span style="display:block; margin-top:6px; font-weight:bold;">' . $name . '</span>';
$output .= '</a>';
}
$output .= '</div>';
}
return $output;
}
}
Journal3 widget elhelyezése
A widget a Journal3 bármely moduljában alkalmazható, ahol dynamic content választható.
Dynamic Content regisztrálása
- Nyisd meg a Journal3 admin felületét.
- Navigálj a Dynamic Content menüpontba, és kattints az Add New gombra.
- Állítsd be a típust: Custom PHP.
- A controller mezőbe írd be:
journal3/product_categories - Mentsd el.
Fontos: A widget csak termékoldalakon működik helyesen, ahol az URL tartalmazza a product_id GET paramétert. Más oldalakon (pl. kategóriaoldal, főoldal) üres kimenetet ad.
Elhelyezés termékoldali blokkban
- Hozz létre egy blokkot a Modules → Blocks menüben, és add hozzá a dynamic content-ként regisztrált widgetet.
- Nyisd meg: Product Extras → Extra Modules.
- Hozz létre egy modult, és rendeld hozzá a blokkot.
- Állítsd be a megjelenítési szabályokat (csak termékoldal).
- A Builderben helyezd el a blokkot a kívánt pozícióba.
Fájlszerkezet
| product_categories/ | |
| ├── docs/ | |
| │ └── product_categories.html | Ez a dokumentáció |
| └── upload/catalog/ | |
| └── controller/journal3/ | |
| └── product_categories.php | Controller: adatlekérés, HTML kimenet generálása |