MODUL: jQuery Navislider auf Basis des xtc5-Templates

[Modulfux]

So, das große Rätselraten und Grübeln hat ein Ende. Meine erste Version war sehr fehlerbehaftet und ich habe eine neue Anleitung geschrieben. Das Hauptproblem bestand darin, dass die mitgelieferte jquery-ui.js aus modified eCommerce Shopsoftware für den Navigations - Slider nicht ausreichte. In der .zip Datei ist eine funktionierende Version enthalten. Keine Sorge die Tabs in der product_info.html funktionieren damit auch noch.

Ich selber habe eben noch einmal den Einbau an einem blanken xtc5-Template vollzogen und meine Freundin hat den Slider gemäß der Anleitung ebenfalls in einem blanken xtc5-Template zum Laufen bekommen.

Also, nun könnt ihr wieder fleißig basteln und hoffentlich nur positives berichten.

Gruß
Ronny

[EDIT Tomcraft 17.09.2010: Modul in Beitrag 1 aktualisiert.]

[guensi]

So, habe das Teil nochmal komplett neu eingebaut. Hat auf Anhieb (fast) einwandfrei funktioniert. Etwas Bastelei an meinem CSS, dann hab ich auch die Optik schon mal in die richtige Richtung gekriegt.

Aufgefallen ist mir in der index.html noch folgendes:

Code: XML  [Auswählen]

                {if $smarty.session.customers_status.customers_status_id == '1'}
                <li{php} echo $selected = $cur_link=='create_account.php' ? ' id="selected"' : ''; {/php}><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">
                {#new_customer#}</a></li>
                {/if}
 

Das bezieht sich auf die allgemeine Textangabe für diesen Link, wer hier eine Änderung vornehmen will, muss zuerst mal die Anweisung für den new_customer in der lang_german.conf unter [index] (ca. Zeile 430) als link anlegen, und dann darauf so verlinken:

Code: XML  [Auswählen]

                {if $smarty.session.customers_status.customers_status_id == '1'}
                <li{php} echo $selected = $cur_link=='create_account.php' ? ' id="selected"' : ''; {/php}><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">
                {#link_new_customer#}</a></li>
                {/if}
 

Mein Grund für diese Anweisung? Da ich vorher links und rechts Platz über die Angabe eines paddings zwischen den Texten der Navileiste eingebaut hatte, dies aber zu Anzeigefehlern geführt hat (der Slider war immer um die doppelte Angabe des paddings nach rechts breiter als beabsichtigt) habe ich mir den Platz durch Angabe fester Leerzeichen in der lang_german.conf für die einzelnen Navi-Links frei gesperrt. Das hat dann logischerweise nur mit der Definition des Links für den new_customer funktioniert.

Alles in allem sag ich aber mal, Top! So kann man das Teil auf die Community los lassen.  

Ach ja, bevor ich mir noch den Wolf suche, wo stellt man die Höhe des Sliders ein? Aktuell hat der nach oben und unten ja einen Überhang. Hätte den jedoch gerne nur in der gleichen Höhe wie die Navileiste.

[Modulfux]

@guensi

Geh mal in die jQuery.spasticNav.js. Dort kannst du den Parameter "overlap" nach Belieben ändern.

Gruß
Ronny

[guensi]

Danke, funktioniert einwandfrei.  

Wenn ich jetzt noch rauskriege, wo ich die Farbe des Overlaps einstellen kann, hab ich keine weiteren Fragen mehr. Die Angaben im Stylesheet werden ignoriert, das blob.png ist ja sowieso nur transparent?

[Modulfux]

Nein, das ist eine 50% schwarz/transparente PNG-Grafik.

Wenn du die eine komplette Farbe einstellen möchtest, ohne Grafik, sondern nur über CSS, dann machst du folgendes:

jquerySpasticNav.js um den Parameter "color" erweitern:

Code: Javascript  [Auswählen]

options = $.extend({
  overlap : 20,
  speed : 500,
  color : '#FARBWERT',
  easing : 'easeOutExpo'
}, options);
 

und in der stylesheet.css fügst du im Bereich "#blob" eine background-color:#FARBWERT hinzu.
Es macht natürlich nur Sinn, wenn die Farbwerte aus der .js und der .css übereinstimmen.

Gruß
Ronny

[guensi]

Nochmals danke, funktioniert und ist genau das was ich gesucht hatte. Noch ein paar Spielereien am Farbwert, und ich hab genau das was ich brauche.

 

[Modulfux]

Siehst du guensi, mein weltbester Betatester, wir verstehen uns.

[guensi]

Yep, Webkiste, wir verstehen uns und das muss auch mal gesagt werden, das Teil ist ne echt reife Leistung.

Einbau problemlos, Anpassung - wenn man erst mal weiß wo auch kein Problem - (die Hinweise könntest du vielleicht noch in die Anleitung aufnehmen)

Sehr selten, dass so ein Teil sich auch etwas abseits vom Standard so locker integrieren lässt. Was gibt's da noch zu sagen außer
 

[guensi]

Ein kleines Problemchen mit der Logik dieses Navi-Sliders hab ich noch.

Sobald ich eine Kategorie auswähle steht der standardmäßig auf der Startseite und funktioniert beim Überfahren der Navi-Leiste mit der Maus einwandfrei.

Habe ich jedoch einen Artikel ausgewählt, ist das Teil verschwunden. Schon mal seltsam, denn entweder ist die Kategorie nach dem Verständnis ein Unterpunkt der Startseite, dann sollten es alle nachgegliederten Unterkategorien und Artikel auch sein. Fahre ich in dieser Ansicht mit der Maus dann über die Leiste, erscheint kein Slider. ??? Da könnte der Gedanke aufkommen, ob das Teil kaputt ist, oder was der User sich in so einem Fall sonst noch denken könnte...

Denke mal, entweder das Teil ist auf allen Seiten verfügbar, oder der optische Mehrwert auf einigen Seiten muss gegen den Verwirrungsfaktor des Verschwindens bei Produktseiten abgewogen werden.

Das müsste dann jeder für sich selbst entscheiden.

[Modulfux]

@guensi
Die Kategorie lautet ja auch standardmäßig "index.php?cPath=x" und das Produkt "product_info.php?products_id=x", somit ist klar, dass der Slider bei der Kategorie auf dem Link "Startseite" stehen bleibt.

Weil aber heute genau die gleich Frage von meinem Kunden kam, habe ich mal eben geguckt und die Lösung war binnen einer Minute da. Somit bleibt der Navislider, wenn nicht irgendwelche speziellen Links im Topmenü geklickt werden immer auf "Startseite".

Suche in der templates/dein_template/index.html

Code: PHP  [Auswählen]

<li{php} echo $selected = $cur_link=='index.php' ? ' id="selected"' : ''; {/php}><a href="{$index}">{#link_index#}</a></li>
 

Ersetze mit:

Code: PHP  [Auswählen]

<li{php} echo $selected = ($cur_link=='index.php' or $cur_link=='product_info.php' or $cur_link=='shop_content.php') ? ' id="selected"' : ''; {/php}><a href="{$index}">{#link_index#}</a></li>
 

Gruß
Ronny

P.S.
Guensi, wir müssen mal verhandeln, ob ich dich nicht als ehrenamtlichen Betatester engagiere.

[guensi]

...Weil aber heute genau die gleich Frage von meinem Kunden kam, habe ich mal eben geguckt und die Lösung war binnen einer Minute da. Somit bleibt der Navislider, wenn nicht irgendwelche speziellen Links im Topmenü geklickt werden immer auf "Startseite".
...P.S.
Guensi, wir müssen mal verhandeln, ob ich dich nicht als ehrenamtlichen Betatester engagiere.

LOL, als ehrenamtlicher Betatester bin ich ja wohl schon unterwegs. Aber über ein Engagement als zumindest nebenberuflicher Betatester können wir gerne verhandeln.

Dass dein Kunde dieselbe Frage hatte, zeigt dass es dafür Bedarf gibt.  

Aber im Gegenzug auch gleich mal das Lob für die schnelle Lösung.  

PS. Werde die Lösung natürlich gleich mal testen.

[guensi]

Test wurde gerade durchgeführt, Ergebnis positiv! Funktioniert alles wie es soll!  

Und wenn wir schon gleich dabei sind, die Korrektur behebt auch gleich den Fehler, dass Cloud-Zoom in den Artikel-Seiten nicht mehr funktioniert. Mit dem angepassten Code funktioniert das wieder einwandfrei.

Damit zusätzlich mal ein Lob für den Zufallstreffer.   Denn das Problem hätte ich als nächstes angesprochen.

[Modulfux]

Das war kein Zufallstreffer, denn die JS-Fehlermeldung hat eben die anderen Sachen ausgehebelt.*gg*

[guensi]

tztztz, da siehste mal wie viel Leichen man auf einen Schlag ausgraben kann. So kann ein falscher Codeschnipsel gleich zum Massenvernichtungsinstrument werden.

[hedon02]

Hi Webkiste,

funktioniert super, der vorgenannte Bug hatte mich gar nicht gestört, aber so ists auch toll. Vor allem liebe ich, dass der Slider bei Gästen die auf Konto oder Kasse klicken automatisch zum Anmeldebutton weiterslidet. Das entwirrt echt.

Lg