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?

  1. A widget a Journal3 modul API-ján keresztül töltődik be, a product_id GET paraméter alapján – ez automatikusan elérhető a termékoldal URL-jéből.
  2. A controller (ControllerJournal3ProductCategories) az OpenCart beépített getCategories() metódusával lekéri a termékhez rendelt kategóriákat, majd legfeljebb 2-t dolgoz fel belőlük.
  3. 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).
  4. 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.

1. ábra – Modul megjelenítés

Követelmények

KomponensVerzióMegjegyzés
OpenCart3.xBeépített modellek szükségesek
Journal3 témabármely aktuális verzióDynamic content támogatás
PHP7.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 – catalog/controller/journal3/product_categories.php
<?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

  1. Nyisd meg a Journal3 admin felületét.
  2. Navigálj a Dynamic Content menüpontba, és kattints az Add New gombra.
  3. Állítsd be a típust: Custom PHP.
  4. A controller mezőbe írd be: journal3/product_categories
  5. 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

  1. Hozz létre egy blokkot a Modules → Blocks menüben, és add hozzá a dynamic content-ként regisztrált widgetet.
  2. Nyisd meg: Product Extras → Extra Modules.
  3. Hozz létre egy modult, és rendeld hozzá a blokkot.
  4. Állítsd be a megjelenítési szabályokat (csak termékoldal).
  5. 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