Design der Unterkategorieseite ändern (Basic Template)

Hallo zusammen,

ich bin gerade, das Design eines Shops zu ändern und stecke momentan bei der Unterkategorieseite fest. Ich habe mich schon totgesucht, aber nirgends eine Antwort gefunden. Dies ist die Seite um die es sich handelt: http://stage.wolf-angelsport.de/Karpfenshop/

Ich möchte einfach alle Unterkategorien 4-spaltig in einer Tabelle anordnen. Jeweils mit größerem Thumbnail, als aktuell sowie dem Namen der Unterkategore unter dem Bild.

Ich hoffe ihr könnt mir weiter helfen :slight_smile:
Danke schonmal…

Gruß
Daniel

Und was genau ist denn deine Frage?

wie/wo ich die Darstellung der Unterkategorieanzeige ändern kann :wink:
Habe mich in der list.tpl und oxid.css schon tot gesucht, aber nicht die richtige Stelle gefunden.

list.tpl müsste schon richtig sein,

irgendwo relativ mittig müsste sowas stehen:

 
        [{if $oView->hasVisibleSubCats()}]
            [{ oxmultilang ident="LIST_SELECTOTHERCATS1" }]<b>[{$actCategory->oxcategories__oxtitle->value}]</b> [{ oxmultilang ident="LIST_SELECTOTHERCATS2" }]
            <hr>
            <ul class="list">
            [{foreach from=$oView->getSubCatList() item=category name=MoreSubCat}]
                [{if $category->getContentCats() }]
                    [{foreach from=$category->getContentCats() item=ocont name=MoreCms}]
                    <li><a id="test_MoreSubCms_[{$smarty.foreach.MoreSubCat.iteration}]_[{$smarty.foreach.MoreCms.iteration}]" href="[{$ocont->getLink()}]">[{ $ocont->oxcontents__oxtitle->value }]</a></li>
                    [{/foreach}]
                [{/if}]
                [{if $category->getIsVisible()}]
                    [{assign var="iconUrl" value=$category->getIconUrl()}]
                    [{if $iconUrl}]
                        <a id="test_MoreSubCatIco_[{$smarty.foreach.MoreSubCat.iteration}]" href="[{ $category->getLink() }]">
                            <img src="[{$category->getIconUrl() }]" alt="[{ $category->oxcategories__oxtitle->value }]">
                        </a>
                    [{else}]
                        <li><a id="test_MoreSubCat_[{$smarty.foreach.MoreSubCat.iteration}]" href="[{ $category->getLink() }]">[{ $category->oxcategories__oxtitle->value }][{ if $category->getNrOfArticles() > 0 }] ([{ $category->getNrOfArticles() }])[{/if}]</a></li>
                    [{/if}]
                [{/if}]
            [{/foreach}]
            </ul>
        [{/if}]

das ist die Stelle

danke! eigentlich ganz logisch, wenn ich mir das jetzt nochmal alles ansehe. manchmal sollte man halt nicht zu ehrgeizig sein und die nacht durcharbeiten :wink:

Hallo, ich habe diese code in list.tpl eingefullt, aber bekommt diese Probleme…

als der fehler sprecht über der Übersetzung, ich habe LIST_SELECTOTHERCATS1 und LIST_SELECTOTHERCATS2 in source/Application/views/ in der Datei cust_lang.php, so gescrieben,

In alle drei dateien de, en, es, dann Leer tmp Verzeichnis, und bekommt diese Fenster,

Meine frage, warum bekomme keine Bilder ?

ich würde sagen, dass deine Kategorien keine Icons haben

danke für deine antwort!

ich würde sagen, dass deine Kategorien keine Icons haben

und wie kann die Bilder in Kategorie Lokta-Papier zum Schreiben und Verpacken haben ?

Bilder kann man im Admin in der Kategorienverwaltung im Reiter “Bilder” hochladen.

aber gibt es nur die möglichkeit ein Bild hochladen, ich brauche zwei, weil ich möchte in kategorie Lokta-Papier zum Schreiben und Verpacken zwei Untenkategorien legen, Lokta-schreibe und Lokta Bilder

Ich möchte bekomme eine Seite Ähnliche wie diesen,

ich versuche die Bilder verlinken mit den Untenkategorien Lokta-schreibe und Lokta Bilder

dann musst du die Bilder bei den jeweiligen Unterkategorien hochladen

ich habe schon gemacht,

in beiden, aber die bilder werden nicht gezeigt…

nicht ganz das, was ich geschrieben habe:


versuch da mal was hochzuladen

danke!

jezt bekomme,

Gibt es die möglichkeit deine Code zu verändert und bekomme,

Jetzt habe so,

Ich versuche beiden Bilder zu trenen, aber ohne erfolgt…

Wie verstande habe, diese code rufen die bilder,

[{if $iconUrl}]
                    <a id="test_MoreSubCatIco_[{$smarty.foreach.MoreSubCat.iteration}]" href="[{ $category->getLink() }]">
                        <img class="bilder-lokta-link" src="[{$category->getIconUrl() }]" alt="[{ $category->oxcategories__oxtitle->value }]">
                    </a>
                [{else}]

ich habe an img ein class, er heißt bilder-lokta-link, dann mit CSS versuche sie zu trennen, aber ich weiss nicht…

Wie deine code habe,

[{if $oView->hasVisibleSubCats()}]
        [{ oxmultilang ident="LIST_SELECTOTHERCATS1" }]<b>[{$actCategory->oxcategories__oxtitle->value}]</b> [{ oxmultilang ident="LIST_SELECTOTHERCATS2" }]
       
        <ul class="list">
        [{foreach from=$oView->getSubCatList() item=category name=MoreSubCat}]
            [{if $category->getContentCats() }]
                [{foreach from=$category->getContentCats() item=ocont name=MoreCms}]
                <li><a id="test_MoreSubCms_[{$smarty.foreach.MoreSubCat.iteration}]_[{$smarty.foreach.MoreCms.iteration}]" href="[{$ocont->getLink()}]">[{ $ocont->oxcontents__oxtitle->value }]</a></li>
                [{/foreach}]
            [{/if}]
            [{if $category->getIsVisible()}]
              
                [{assign var="iconUrl" value=$category->getIconUrl()}]
                [{if $iconUrl}]
                    <a id="test_MoreSubCatIco_[{$smarty.foreach.MoreSubCat.iteration}]" href="[{ $category->getLink() }]">
                        <img class="bilder-lokta-link" src="[{$category->getIconUrl() }]" alt="[{ $category->oxcategories__oxtitle->value }]">
                    </a>
                [{else}]
                    <li><a id="test_MoreSubCat_[{$smarty.foreach.MoreSubCat.iteration}]" href="[{ $category->getLink() }]">[{ $category->oxcategories__oxtitle->value }][{ if $category->getNrOfArticles() > 0 }] ([{ $category->getNrOfArticles() }])[{/if}]</a></li>
                [{/if}]
            [{/if}]
          
        [{/foreach}]
        </ul>
    [{/if}]


[{/block}]

[{block name="page_list_listbody"}]
    [{if $oView->getArticleList()}]
        [{if $oView->getArticleList()|count}]
            [{block name="page_list_upperlocator"}]
                <div class="listRefine">
                    [{include file="widget/locator/listlocator.tpl" locator=$oView->getPageNavigationLimitedTop() attributes=$oView->getAttributes() listDisplayType=true itemsPerPage=true sort=true}]
                </div>
            [{/block}]

            [{* List types: grid|line|infogrid *}]
            [{block name="page_list_productlist"}]
                [{include file="widget/product/list.tpl" type=$oView->getListDisplayType() listId="productList" products=$oView->getArticleList()}]
            [{/block}]
            [{block name="page_list_bottomlocator"}]
                [{include file="widget/locator/listlocator.tpl" locator=$oView->getPageNavigationLimitedBottom() place="bottom"}]
            [{/block}]
        [{/if}]
    [{/if}]

In css ich mache

img.bilder-lokta-link { width: 25%; margin-right: 2rem;}
img.bilder-lokta-link {display: block; margin-top: 3rem;  }

und bekomme dieses fenster,


Wenn schreibe,

<span> [{ oxmultilang ident="LIST_SELECTOTHERCATS1" }] </span>

in

<ul class="list">
        <span> [{ oxmultilang ident="LIST_SELECTOTHERCATS1" }] </span>
        [{foreach from=$oView->getSubCatList() item=category name=MoreSubCat}] 

bekommt das,

Wo sollte ich zweite schreibe ?

[{ oxmultilang ident="LIST_SELECTOTHERCATS2" }]

wie kann bekomme Lokta-schreibe zusammen mit dem Erste bild, und Lokta-bild mit dem zweite bild ?

such mal im Internet nach “css layout tutorial”, such dir am besten etwas für Bootstrap v4.1

1 Like

ich habe drei tage nach Beispielen gesucht, die ähnliches hatten wie ich möchte habe, aber habe nicht gefunde…Meine Idee war neben jeden Bild eines test zu schreibe(ich habe zwei…). Weil oxid so zusammen mit Bootraps ist, es war für mich nicht machbar…jedes mal die versuche div zu bauen, immer war irgendwo etwas die Bootraps ruft…so, ich habe mich entschieden, bleib mit den Fenter die Bootrap anbieten…