jQuery UI - Accordion

Hi Leute,

mir war gerade langweilig heute Abnend, da dachte ich mit, spiel doch ein wenig Accordion.

Ist ja cool, dass der OXID Shop so viel kann, nur übersichtlicher wird es dadurch nicht, also verstecken wir doch ein bsichen was:

[ul]
[li] Zusatzinformationen
[/li]
[li] Stichworte
[/li]
[li] Variantenauswahl
[/li]
[li] Kommentar
[/li]
[li] Preisarlarm
[/li]
[li] Aktuelles Produkt[/ul]
[/li]
Das ganze wir wie hier (http://jqueryui.com/demos/accordion/#mouseover) zusammengeklappt und per mouseover angezeigt.

Und so geht es:
(Ich habe das jetzt nicht allzu sauber umgesetzt, sondern mehr darauf geacht, möglichst wenig von den org. Templates zu verändern, ausserdem habe ich schoin 3 Bierle intus, da wird man faul :wink: )

[B]#1 - jQuery UI Bibliothek runterlanden: http://jqueryui.com/download[/B]

#2 - Auspacken und im Shop hinterlegen: SHOPVERZEICHNIS\out\basic\src\jquery-ui heme

#3 - jQuery in _head.tpl, innerhalb des head einbinden:

<link type="text/css" href="[{ $oViewConf->getResourceUrl() }]jquery-ui/theme/ui.all.css" rel="Stylesheet" />	
	<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]jquery-ui/jquery-1.2.6.js"></script>
	<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]jquery-ui/jquery-ui-personalized-1.5.3.js"></script>

#4 - oxid.js anpassen und den auszuführenden jQuery-Code hinterlegen (einfach vorne dran einfügen):

$(function(){
	// Accordion, collaps : media files, variants, reviews, current Product, tags. price alert
	$(".accordion-container").accordion({ 
		event: "mouseover",				
		header: "strong.boxhead",
		active: false				
	});	
});

#5 - details.php und anpassen
in der details.php in Zeile 286 (vor

[{ if $oView->getAttributes() }]
) dieses öffnende div einfügen:
<div class="accordion-container">

Das schliesende div nach

 [{ include file="inc/product.tpl" product=$product size="thin" isfiltering=false head="DETAILS_PERSPARAM_CURRENTPRODUCT"|oxmultilangassign testid="current"}]

in Zeile 456 packen:

</div><!--/#accordion-container-->

#6 - product-detail.tpl anpassen
das öffnende div von Zeile 1 in Zeile 11 verschieben:

<div [{if $test_Cntr}]id="test_cntr_[{$test_Cntr}]_[{$product->oxarticles__oxartnum->value}]"[{/if}] class="product [{if $head}] head[{/if}] [{$size|default:''}] [{$class|default:''}]">

In der Class des Strong Tag nun noch boxhead einfügegen:

TAAADDAAA! nun neu laden und mit der Mouse über die Balken fahren :slight_smile:

(…nächstes mal wenn mir langweilig iss zogg ich wieder wow da muss man nett so viel tippen :wink: )

EDIT: Ich habe hier den zerschossen Code noch gefixt, und hier der Link zum Paket, dann müßt ihr nicht alles selbst anpassen: http://code.google.com/p/oxid-jquery-powered-template/

Gruß
Magnus

ICH BIN Magnus und ich bin “ZwergenProgrammierer” UND WAS SPIELST DUUUU???

toller Artikel - kurz und treffend. Mehr ;).

Jan

tolle sache nur leider funkt es bei mir net richtig!

  1. die - ich nenne es mal Kategorien - werden zwar geschlossen und geöffnet wie gewollt, aber zb. bei der variantenauswahl poppen dann die fenster auch wieder zu obwohl man das an der stelle garnicht will, weil man mit der maus ja noch im fenster ist und nicht über den head fährt!

  2. Die Script-Tags im Header sollten aber schon geschlossen werden :wink:

nee nee das mit den Tags gehört schon so :wink: erwischt… hmm mir sind da auch nochma bugs aufgefallen mit dem Anpassen des eine Template, das wirkt sich auch auf ne andere Ansicht aus, werd ich nächste Woche mal richtig machen, poste ich hier dann nochmal!

Morgen erst mal Auto putzen :slight_smile:

Schönes Wochenende

Gruß

Magnus

ps: ich habe gerade nochmal den ersten Beitrag bearbeitet, das mit den Script Tags, die hat hier der Validator gefressen, ich hab noch Leerzeichen ergänzt

Hi Magnus,

ich hab mal das gleiche mit der Reiter-Funktion von jquery probiert, allerdings sieht das ganz merkwürdig aus. Also wenn du mal Lust hast, kannst du vielleicht auch mal das probieren?

Jan

Hallo,

ich habe die Bugs nun beseitigt, auch der Seiten-Effekt, dass auf der Startseite dann die Produkte fehlerhaft dargestellt werden.

Ich habe ein Paket geschnürt, wo auch alles Weiter für die Installtion drinsteht.

http://code.google.com/p/oxid-jquery-powered-template/

Ich habe die Anweisungen in deutsch und englisch hinterlegt.

Feedback herzlich willkommen, kommt Ihr klar mit der Anleitung?

@Jan: das mit den Tabs denke ich ist auch eine nette Sache, ich schau mal ob ich nächste Woche mal dazu komme :slight_smile:

Gruß

Magnus

Hallo Magnus,

willst Du das Päckchen noch in den eXchange einstellen?

Gruß


Marco Steinhäuser
Community Guide
OXID eSales AG
http://twitter.com/marcosteinhaeus

Hi,

hmm nee mag ich selber da nicht einstellen, ich bin ein Mensch der AGB wirklich liest und die finde ich für meinen Geschmack nicht passend für ein freies Modul, ich mach das weil ich Spass dran hab, weil ich das sowieso mache und teilen mag, ohne Verpflichtungen.

Aber hey das ist GPL stells selber ein! …ich leg auch keinen wert meine Name überall zu lesen, im Gegenteil, ich bemühe mich sehr das Netz von mir sauber zu halten und Infos über mich gezielt zu steuern

Ich arbeite auch gerade an einer Fortsetzung in der ich noch ein wenig mehr “unaufdringliches Javascript” verwenden werde, abba alles jquery.

Viele Grüße

Magnus

Hallo Magrnus,

hier mal ein Feedback fuer Dich - das ist ja auch mal interessant, hoffe ich. Ich habe es etwas abgewandelt auf meiner Shopseite im Content-Management eingebaut, hier kann man es finden:

http:/www.1wire.de unter Lösungskatalog und dann 1-Wire FAQ

Was ich beim einbinden gesehen hatte, offenbar werden auch von OXID jquery Teile irgendwo benutzt…oder ich interpretiere das falsch. Naja, auf jeden Fall habe ich das CMS Grundsystem von OXID inzwischen etwas mehr vergewaltigt…

Gruss Uwe

Hausautomation - Hersteller von 1-Wire ElektronikFotodienst mit umfangreichen Partnerprogrammen

Hi,

hmm das mit dem jquery ist erst seit der neuen version drin, aber ich finde (noch) nicht wie und wo das genau eingesetzt wird.

die Erweiterung die dabei liegt: “jquery.event.drag.min.js” läßt mich spekulieren, dass man artikel per drag und drop im Warenkorb ablegen kann… iss aber noch nciht.

Das wird auch derzeit noch in keinem (Frontend) Template referenziert.

Evtl. sehen wir hier Auswirkungen eines Raum Zeit Risses, der uns einen Blick in die Zukunft gewährt (>>dummgebabbelt iss glei!)

Gruß

Magnus

Hat das einer von Euch nun mal integriert, seltsamerweise sind die links weg.
Würde das gern mal in der freien Wildbahn sehen.
Kann mir die usability in einem shop nicht so gut vorstellen…

Leider funktioniert diese Änderung nicht, kann mir das hier einer mal bitte erklären?

Ich habe das File gedownloadet und Installiert… aber ohne Erfolg!

Ja hi,
was genau klappt denn nicht?

Noch genauer kann ich es glaube nicht beschreiben:
Post mit Anleitung: http://www.oxid-esales.com/forum/showthread.php?t=664#post3962

Templates und Files gibts hier:
http://code.google.com/p/oxid-jquery-powered-template/

In dem Paket ist auch nochmal eine ausführliche Beschreibung… und in den jeweiligen Ordnern nochmals Readme’s… und die in deutsch UND englisch…

Gruß
Magnus

Hallo Magnus,
nun habe ich nach langem Kampf das Accordion reingefrickelt. Hatte letztendlich das Jquery in den falschen Ordner kopiert. Naja, lesen müsste man können.

Ich habe bei mir in den Artikeln das Zubehör aus der rechten Seite in die Artikeldetails verlagert. Diese möchte ich nun auch in das Accordion integrieren.

Leider werden, auch wenn das Accordion zu ist, immer ein paar Artikel angezeigt, egal, was ich in der Administration eingestellt habe (Anzahl angezeigter Corss Sellings).

Du kannst dir das ja mal ansehen:
http://www.kinderwagen-onlineshop.de/test/Autositze-oxid-1/Autositz-ca-1-4Jahre/Maxi-Cosi-Autositz-Priori-XP-Roasted-Brown.html

Wäre toll, wenn Du mir helfen könntest !!

Viele Grüße,
chris

P.S: Super klasse, das package :-))

hallol frickel,

seh bei dir kein accordion. oder meinst du die tabs? (reiter)
wenn bei dir javascirpt deaktiviert ist, fehlen die überschriften. find ich nicht ideal!

zu deinem problem:
schau mal in den anderne 3 textreitern, mit was die in jquery umschlossen sind.
das zubehör, packst du in die gleiche struktur wie bereits dei textelemente.

die Reiter habe ich per Hand reinkopiert, das war nur ein Test, ob der jquery überhaupt funktioniert.
Weiter unten habe ich das accordion, Preialarm, Kommentare und eben das Zubehör. Er macht da auch irgend was, aber das Accordion klappt an der Stelle nicht ganz zu.

Ich mache die Spielerei mit den Tabs mal raus aus dem ARtikel, dann wird es etwas übersichtlicher

servus,

hat einer mal versucht das aktuelle ui 1.8.9 in den ce 4.4.5 einzubinden ?