Kategorie-Navigation Links und als Sidebar für 4.8.4

Guten Morgen allerseits,

ich habe mich bereits hier durch die Suche des Forums gefummelt und habe auch einige Antworten zu dem oben genannten Thema gefunden.

Allerdings scheinen die dort gegebenen Antworten nicht mehr für das neue Oxid 4.8.4 zu gelten.

Ich hatte mich bereits an dem englischen Tutorial “Creating a custom theme” versucht. Leider sind die Bezeichnungen in diesem Tutorial in der neuen Oxid Version nicht mehr vorhanden.

Als Beispiel:
Ich soll lt. dem Tutorial aus der layout/header.tpl folgendes entfernen:
[{include file=“widget/header/topcategories.tpl”=)
Diese Zeile gibt es gar nicht mehr in der neuen Version.

Gibt es bereits ein Tutorial mit der neuen Version? Am wichtigsten ist mir dabei die Navigation durch die Kategorien von der horizontalen Variante in die vertikale und dann links zu bekommen.

Ich bedanke mich im Voraus für eure Hilfe.

Viele Grüße
Iain

p.s. ich habe zur Zeit Oxid 4.8.4 mit Demodaten installiert.

Guten Morgen allerseits,

ich habe die letzten Tage versucht, all die guten Lösungsansätze durchzuspielen, die hier im Forum für ältere Versionen angeboten wurden.

Mit mäßigen Erfolg.

Ich habe es bisher geschafft, dass der Categorytree nun in der Page.tpl angezeigt wird. (siehe Screenshot) Hauptsächlich duch das eine Tutorial aus dem Wiki (Customizing_online_storefront_with_oxid_eshop_450_themes.pdf).

Momentaner Erfolg

Hier der dazugehörige Code:

[{capture append="oxidBlock_pageBody"}]
    [{if $oView->showRDFa()}]
        [{ include file="rdfa/rdfa.tpl" }]
    [{/if}]
    <div id="page" class="[{if $sidebar}] sidebar[{$sidebar}][{/if}]">
        [{include file="layout/header.tpl"}]
        [{if $oView->getClassName() ne "start" && !$blHideBreadcrumb}]
           [{ include file="widget/breadcrumb.tpl"}]
        [{/if}]
        [{if $sidebar}]
            <div id="sidebar">
                [{include file="layout/sidebar.tpl"}]
			</div>
        [{/if}]
		
		<div id="content">
			[{include file="widget/header/search.tpl"}]
			[{include file="widget/minibasket/minibasket.tpl"}]
			
			[{oxid_include_widget cl="oxwCategoryTree" cnid=$oView->getCategoryId() sWidgetType="header" _parent=$oView->getClassName() nocookie=1}]
			
            [{include file="message/errors.tpl"}]
            [{foreach from=$oxidBlock_content item="_block"}]
                [{$_block}]
            [{/foreach}] 
        </div>
        [{include file="layout/footer.tpl"}]
    </div>
   
   [{*include file="widget/facebook/init.tpl"*}]
   
   
    [{if $oView->isPriceCalculated() }]
        [{block name="layout_page_vatinclude"}]
        [{oxifcontent ident="oxdeliveryinfo" object="oCont"}]
            [{assign var="tsBadge" value=""}]
            [{if $oView->getTrustedShopId()}]
                [{assign var="tsBadge" value="TsBadge"}]
            [{/if}]
            <div id="incVatMessage[{$tsBadge}]">
                [{if $oView->isVatIncluded()}]
                    * <span class="deliveryInfo">[{ oxmultilang ident="PLUS_SHIPPING" }]<a href="[{ $oCont->getLink() }]" rel="nofollow">[{ oxmultilang ident="PLUS_SHIPPING2" }]</a></span>
                [{else}]
                    * <span class="deliveryInfo">[{ oxmultilang ident="PLUS" }]<a href="[{ $oCont->getLink() }]" rel="nofollow">[{ oxmultilang ident="PLUS_SHIPPING2" }]</a></span>
                [{/if}]
            </div>
        [{/oxifcontent }]
        [{/block}]
    [{/if}]
[{/capture}]
[{include file="layout/base.tpl"}]

Leider endet hier aber schon mein Erfolg.

Ich habe die Tips ausprobiert die bei anderen Beiträgen schon gegeben wurden, z.B.: 2 Sidebars (rechts, links), Kategorienanzeige aufklappen und vererben auf alle Unterseiten, Kategorienanzeige nur Links, neue Boxen einfügen und erstellen,Kategorie-/Produktliste in der Sidebar und das Tutorial aus dem Wiki zum Modifying Page Layouts (Customizing_online_storefront_with_oxid_eshop_450_themes.pdf).

Keiner der Tips konnte ich richtig mit der neuen Version 4.8.4 ausführen. Selbst die Hilfe von Oxid selber zum Template anpassen hilft mir nicht weiter, weil Sie nicht auf den aktuellen Stand ist. Ich habe mich auch schon im englischen Forum umgeschaut, ob es dort mehr Erkenntnisse gibt.

Eigentlich plane ich, dass mein Layout zum Schluss wie folgt aussieht:

So hatte ich das Layout geplant

Ich habe eigentlich gedacht, dass man die verschiedenen widgets einfach hin und herschieben kann, bis es passt. Aber das scheint nicht der Fall zu sein.

Kann mir jemand weiterhelfen? Oder wäre es sinnvoll einfach eine ältere Version 4.7.10 zu installieren, damit ich die anderen Hilfestellungen anwenden kann?

Ich lasse den Testshop gerade auf meinem lokalen System laufen.
Version: Azur 4.8.4

Ich würde mich über eine Hilfestellung freuen.

Viele Grüße
Iain

P.S. Falls das hier nicht das richtige Stelle ist zum Fragen, da ich eindeutig ein Newbie bin, könnten die Admins den Post vielleicht ins Newbie Forum schieben. Vielen Dank!

änder doch die vorhandene sidebar ab und zeig nicht nur den gewählten ordner sondern alle an. warum willste alles neu machen?!

Hallo Caladan,

das mit der sidebar habe ich bereits probiert. Aber ich verstehe noch nicht ganz die Struktur hinter den verschiedenen Befehlen.

Bei den meisten Vorschlägen steht zum Beispiel etwas von categroylist.tpl.
Aber wenn ich diese einpflege funktioniert es nicht. Das System zeigt mir nur das bereits vorhandene Ergebnis an, wenn ich

[{oxid_include_widget cl="oxwCategoryTree" cnid=$oView->getCategoryId() sWidgetType="header" _parent=$oView->getClassName() nocookie=1}]

verwende.

Nun hatte ich noch die Idee, dass ich die sidebar.tpl kopiere und daraus sidebar2.tpl mache und versuche diese rechts auszurichten.

Das scheint bei 4.5 noch ganz einfach gewesen zu sein. Nur leider finde ich die passende Stelle nicht bei der neuen Version.

zeig nicht nur den gewählten ordner sondern alle an

Was genau meinst du damit?

warum willste alles neu machen?!

Du meinst, warum ich überlege nochmal alles neu aufzusetzten? Oder warum ich das Azure Theme so umgestalten möchte?

Zu a) Weil ich mit den Anleitungen nichts anfangen kann. Es gibt super Anleitungen für Sidebar links und rechts gleichzeitig. Also für ein Drei Spalten Layout, aber halt nur für die älteren Versionen. Versuche ich es auf die neue umzumünzen, finde ich die Einträge nicht.

b) Ich mache das hier für eine Freundin, um ihr zu helfen. Und die moche das Basic Layout von OXID, aber das neue ist ihr zu spacig.

Ich persönlich finde dieses Shopsystem super, aber nur wenn ich das Ursprungstheme mit maximal einer Farbanpassung benutze. Ansonsten finde ich es recht schwer einfachste Anpassungen am Layout vorzunehmen.

Viele Grüße
Iain

soweit ich verstanden habe willst du folgendes:

in der sidebar rechts sollen ALLE kategorien angezeigt werden und nicht nur die aktive. richtig?

Fast, es sollen alle Hauptkategorien angezeigt werden und wenn du auf eine draufklickst, sollen sich darunter die Unterkategorien öffnen.

Beispiel:
Hauptkategorie: Kiteboarding

  • Unterkategorie: Boards1
  • Unterkategorie: Zubehör

joa … aber das ist doch einfach…

da gabs auch letztens schon einen thread dazu…

ich hab mal ein eigenes menu geschrieben (allerdings oben) … misbrauch den quellcode davon einfach für deine sidebar…

http://forum.oxid-esales.com/showthread.php?t=10916&highlight=menunew

vorsichtshalber hier mal meine aktuellste version:

[{capture assign=MyMenuNew}]
$(document).ready(function(){initMenuNew();});function initMenuNew() {var $oe_menu= $('#oe_menu');var $oe_menu_items	= $oe_menu.children('li');$oe_menu_items.bind('mouseenter',function(){var $this = $(this);$this.addClass('slided selected');$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){$oe_menu_items.not('.slided').children('div').hide();$this.removeClass('slided');});}).bind('mouseleave',function(){var $this = $(this);$this.removeClass('selected').children('div').css('z-index','1');});$oe_menu.bind('mouseenter',function(){var $this = $(this);$this.addClass('hovered');}).bind('mouseleave',function(){var $this = $(this);$this.removeClass('hovered');$oe_menu_items.children('div').hide();})}
[{/capture}]
[{oxscript include="js/libs/adgallery/jquery.ad-gallery.js" priority=10}]
[{oxscript add=$MyMenuNew}]
<ul id="CompleteMenuOle" style="width:800px;height:108px;clear:both;margin:0;padding:0">
<li id="miep" style="float:left;position:relative;list-style:none;width:112px;height:101px;padding-bottom:2px;"><a href="/">Startseite</a></li>
<ul id="oe_menu" class="oe_menu" >
[{foreach from=$oxcmp_categories item=ocat key=catkey name=root}]
[{if $ocat->getIsVisible() }]       
<li><a href="/Uebersicht/">[{$ocat->oxcategories__oxtitle->value}]</a>
<div style="left:-[{math equation="x * y" x=$smarty.foreach.root.iteration y=112}]px;position:absolute;width:960px; display:none;-moz-box-shadow:1px 1px 2px #ddd;-webkit-box-shadow:1px 1px 2px #ddd;box-shadow:1px 1px 2px #ddd;border-radius:4px 4px 4px 4px;-moz-box-shadow:1px 1px 5px #000;-webkit-box-shadow:1px 1px 5px #000;box-shadow:1px 1px 5px #000;-moz-border-radius:4px;-webkit-border-radius:4px;">
[{foreach from=$ocat->getSubCats() item=osubcat key=subcatkey name=SubCat}]
[{if $osubcat->getIsVisible() and $osubcat->oxcategories__oxtitle->value != "Stahlmoebel" }]
<ul>
<li class="oe_heading">[{$osubcat->oxcategories__oxtitle->value}]</li>
[{foreach from=$osubcat->getSubCats() item=osubcat2 key=subcatkey name=SubCat2}]
[{if $osubcat2->getIsVisible() }]
<li><a href="[{$osubcat2->getLink()}]">[{$osubcat2->oxcategories__oxtitle->value}]</a></li>
[{/if}]
[{/foreach}]
</ul>    
[{/if}]
[{if $smarty.foreach.SubCat.last}]
[{if $osubcat|@getCategoryTopArticle|@count > 0}]
[{foreach from=$osubcat|@getCategoryTopArticle item=actionproduct name=CatArt}]
[{assign var="oCategory" value=$actionproduct->getCategory()}]
[{if $oCategory }]
[{if $oCategory->oxcategories__oxtitle->value ==$ocat->oxcategories__oxtitle->value}]
<ul id="SpecialCatOffer" style="width:390px;">
<li class="oe_heading">Aktuelles Angebot</li>
<span style="width: 390px;display:block;margin-left:auto;margin-right:auto;position:relative;">
<a id="SpecialOfferPic" style="margin-left:auto;margin-right:5px;text-decoration:none;float:left;height:auto;width:185px;-moz-box-shadow:1px 1px 2px #ddd;-webkit-box-shadow:1px 1px 2px #ddd;box-shadow:1px 1px 2px #ddd;border-radius:4px 4px 4px 4px;-moz-box-shadow:1px 1px 5px #000;-webkit-box-shadow:1px 1px 5px #000;box-shadow:1px 1px 5px #000;-moz-border-radius:4px;-webkit-border-radius:4px;" href="[{$actionproduct->getMainLink()}]"><img style="display:block;margin-left:auto;margin-right:auto;" src="[{$actionproduct->getThumbnailUrl()}]" alt="[{$actionproduct->oxarticles__oxtitle}]"></a>
[{ assign var="oManufacturer" value=$actionproduct->getManufacturer()}]
<span style="float:right; width:200px;">
[{if $oManufacturer->oxmanufacturers__oxicon->value}]
<p style="margin: 0;"><img src="[{$oManufacturer->getIconUrl()}]" alt="[{ $oManufacturer->oxmanufacturers__oxtitle->value}]"></p>
[{/if}]
<p style="font-size:13px;font-style:normal;font-weight:bold;padding-left:4px; margin: 0;">[{$oManufacturer->oxmanufacturers__oxtitle->value}]</p>
<p style="font-size:13px;font-style:normal;padding-left:4px;">[{$actionproduct->oxarticles__oxtitle}]</p>
<li style="text-align: center;float: left;font-size:16px;font-style:bold;"><a style="text-decoration: none;margin-left:auto;margin-right:auto;font-size:16px;font-style:bold;" href="[{$actionproduct->getMainLink()}]">jetzt nur [{$actionproduct->getFPrice()}] Euro</a></li>
</span>
</span>
</ul>
[{/if}]
[{/if}]
[{/foreach}]
[{/if}]
[{/if}]
[{/foreach}]
</div>
</li>
[{/if}]
[{/foreach}]
</ul>
</ul>

da hast du abfragen für alle kats drin … (inkl. kat topangebot… das müsstest du in deinem fall rausmachen)

  • js für aufklappen. das müsstest du auf “klick” ändern.
    und laylout anpassen.

Danke dir. Da lese ich mich gleich mal durch und teste es aus, ob es bei mir den gewünschten Effekt hat.

[B]Edit:[/B] Nochmals danke. :slight_smile: Ich sage dir dann bescheid, ob es funktioniert hat oder ob ich was vergessen habe.

wie gesagt ist eigentlich für ein menü oben. aber einfach umstellen vom layout … und statt mouseover einfach klick … das könnte was bringen :slight_smile:

Du bekommst ein screenshot, wenn ich es geschafft habe. :slight_smile:

Hallo caladan,

ich habe deine Variante ausprobiert und es leider nicht hinbekommen. Trotzdem vielen Dank! :slight_smile:

Ich bin nun wenigstens soweit, dass ich beim weiteren durchforsten des Forums ca. 5 ähnliche Fragestellungen gefunden habe, wo die Antworten zusammen genommen mir geholfen haben, dass wenigstens die Menüleiste nun vertikal und komplett angezeigt wird.

Hier mein momentanes Ergebnis.

Leider ist das immer noch nicht dass, was ich gerne hätte. Nun habe ich genau das Menü gefunden, was ich brauche. Auf einer gelinkten Homepage. Da wird die Navigation vertikal angezeigt. Die Hauptkategorien klappen bei Anwahl auf und bleiben offen, bis man was Neues anwählt. Hier ein Bildbeispiel.

Vielleicht hast du noch eine Idee?

Viele Grüße und eine gute Nacht
Iain

ich würde dir ja gern was fertiges geben … aber ich arbeite nicht mit der menüleiste links… find ich pers. veraltet…

was genau hat denn nicht geklappt?

der code ohne js muss ja auf alle fälle mal alle kategorien anzeigen samt unterkategorien…

achtung: bei der 4.8.4 musst du noch ein kleines modul einbinden, damit er auch immer alle menüs anzeigt. das gibts hier im forum.

das bei klick aufklappen stellt via css /js kombi kein problem dar… auch dazu hab ich schonmal was gepostet (thema war glaub ich lange texte zu verbergen und mit “hier klicken” aufklappen lassen) das könntest du dafür verwenden.

:slight_smile: Ich kann dir mal einen Screenshot posten, was genau passiert. Wörtlich würde ich sagen, das ganze Layout verschwindet und es wird nur noch eine reine, nackige HTML ausgabe angezeigt.

Da ich mich leider nicht mit js oder smarty auskenne, kann ich nicht mal sagen, was da schiefläuft. CSS ist kein Problem für mich.

Also, sobald ich heute zu Hause bin, baue ich das nochmal ein und zeige dir das Ergebnis.

Viele Grüße
Iain

na ein wenig erfahrung braucht man da schon :wink:

aber du kannst ja den js code weglassen… dann dürfte auch kein fehler /leere seite kommen.

[QUOTE=Iain;142509]
Leider ist das immer noch nicht dass, was ich gerne hätte. Nun habe ich genau das Menü gefunden, was ich brauche. Auf einer gelinkten Homepage. Da wird die Navigation vertikal angezeigt. Die Hauptkategorien klappen bei Anwahl auf und bleiben offen, bis man was Neues anwählt. Hier ein Bildbeispiel. [/QUOTE]
Wenn die Seite schon verlinkt ist dann mach du das doch auch! :wink:
Probier mal diese Änderung, widget/sidebar/categorytree.tpl:

[{if $oxcmp_categories }]
[{assign var="categories" value=$oxcmp_categories->getClickRoot() }]

ändern in

[{if $oxcmp_categories }]
[{assign var="categories" value=$oxcmp_categories }]

Dann hast du eigentlich schon alle Kats und die aktuelle ausgeklappt oder hab ich da was falsch verstanden?

@Hallo Frank,

>>Wenn die Seite schon verlinkt ist dann mach du das doch auch!<<

Du meinst, wo ich das Menü gefunden habe, wie ich es mir vorstelle? Ich habe immer ein wenig skrupell Seiten zu linken, wenn ich nicht weiß, ob derjenige das erlauben würde.
Die Homepage, die ich in einem anderen Thread gefunden habe lautet: http://www.nature-point.de/Gesicht/

Dort ist genau das Menü (Links), wie ich es brauche.

Nun zu deinem Post. Ich habe es ausgetestet.
Und genau wie bei Caladans Code passiert folgendes:

Fehlerhafte Anzeige

@Caladan
Sorry, leider mußte ich Überstunden machen und komme jetzt erst dazu.
Das Bild oben bekomme ich auch, wenn ich deinen Code eingebe.

Viele Grüße
Iain

Naja das ist jetzt schwer vorstellbar dass der Fehler von dem Code kommt den ich gepostet habe. Du solltest im Prinzip nur den Teil “->getClickRoot()” entfernen, das kann eigentlich keinen Fehler auslösen, genau so wird das ja im Top-Menü auch verwendet.

Verlinken auf eine produktiv-Seite ist schon OK.

Ich stimme dir, aus vollen Herzen zu. Ich weiß leider auch nicht, warum die Ansicht rumspinnt, wenn ich nur das eine rausnehme. Ich habe nun die widget/sidebar/categorytree.tpl noch einmal vom Eltern-Template kopiert und frisch angefangen.

Ich habe nur den Teil “->getClickRoot()” entfernt. Nun ist meine Ansicht immer noch okay, nur die Kategorien sehe ich nicht.

Meine Vermutung: Da es eine Kopie von der categorytree.tpl ist, die sonst nur auf den Unterseiten zu sehen ist, wenn man über die horizontale Navigation geht, ist sie momentan nicht sichtbar, da ich keine horizontale Navigation habe.

[B]Edit:[/B] Ich habe mich zu früh gefreut. Ich habe den Browser zweimal neugeladen und voila…die Ansicht ist wieder fehlerhaft. Ich werde daraus nicht schlau. Liegt es an meiner lokalen Umgebung? Ich habe sonst nichts weiter geändert, außer die CSS und eine zweite Sidebar angelegt. Aber das funktionierte vorher auch ganz gut, bis auf die Navigation.

@Frank:
So, alles nochmal von vorne eingelesen. Nun scheint es zu funktionieren.

>>Genau, wie ich es haben will. Allerdings nur auf den Unterseiten.
Muss ich noch einen speziellen Code für die Startseite eingeben? <<

Ich habe die Lösung gefunden! :slight_smile: Ich habe folgendes gemacht:

Ich habe die Verlinkung der 2.Sidebar in widget/layout/page.tpl geändert:

[{block name="sidebar_categoriestree2"}]
	    [{if $oView->getClassName() eq "start" && $oView->getClassName() != 'compare'}]
            [{oxid_include_widget cl="oxwCategoryTree" cnid=$oView->getCategoryId() deepLevel=0 noscript=1 nocookie=1}]
        [{/if}]
	[{/block}]

Hier habe ich != in eq geändert.

Dann habe ich in der oxi.css Datei den Code #sidebar kopiert und diese Kopie mit dem Namen meiner 2 Sidebar versehen.

Nun sieht es gut aus. Werde noch ein wenig mit den Farben ausprobieren.

Danke euch beiden. Mit euren Anregungen und Tips habe ich endlich die Lösung gefunden.

Viele Grüße
Iain