BETA MODUL: jQuery Sliding Login Menü

[ralph_84]

Hallo Freunde

Habe mal das jQuery Sliding Login Menü an modified eCommerce Shopsoftware angepasst.
Es sind im Sliding Menü 3 Boxen verbaut:
1. Newsletter
2. Warenkorb
3. Login

Quelle: Nice & Clean Sliding Login Panel built with jQuery

Kann aber durch jede andere Box getauscht werden.
Habe es bei mir Offline getestet und geht.
Aber bitte erst richtig Testen bevor Ihr das ganze Real im Shop einsetzen wollt.

Installationsanleitung zum Online Lesen:

_______________________________________________________________________________________________________________________
Installation des Slider Menues
_______________________________________________________________________________________________________________________

Angepasst an Modified 1.05
Funktioniert mit dem Normalen jquery des Systems
_______________________________________________________________________________________________________________________

1. Alle Neuen Dateien in den Shop Kopieren / Hochladen

Neue Dateien und Verzeichnisse:

/templates/xtc5/slide.css
/templates/xtc5/javascript/slide.js
/templates/xtc5/javascript/pngfix/supersleight-min.js
/templates/xtc5/javascript/pngfix/x.gif
/templates/xtc5/img/bt_close.png
/templates/xtc5/img/bt_open.png
/templates/xtc5/img/tab_b.png
/templates/xtc5/img/tab_l.png
/templates/xtc5/img/tab_m.png
/templates/xtc5/img/tab_r.png

_______________________________________________________________________________________________________________________
_______________________________________________________________________________________________________________________

2. Änderungen an den Dateien:

______________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________

/templates/xtc5/index.html öffnen:
##################################

suche nach:
###########

Code: PHP  [Auswählen]

<div id="wrap">

füge davor ein:
###############

Code: PHP  [Auswählen]

<!-- BOF Panel -->
<div id="toppanel">
        <div id="panel">
                <div class="content clearfix">
                        <div class="left">
                                <h1>{#heading_guestnewsletter#}</h1>
                               <br>
                                {$box_NEWSLETTER}
                        </div>
                        <div class="left">
                                <h1>{#heading_cart#}</h1>
                               <br>
                                        {$box_CART}
                        </div>
                        <div class="left right">

                        <h1>{#heading_login#}</h1>
                       <br>

                                {if $smarty.session.customer_id}
                                <li><a href="{$logoff}">{#link_logoff#}</a></li>
                               {else}
                                {$box_LOGIN}
                                {/if}
                        </div>
                </div>
</div>

        <div class="tab">
                <ul class="login">
                        <li class="left"> </li>
                        <li>Warenkorb | Shoppingcart!</li>
                        <li class="sep">|</li>
                        <li id="toggle">
                                <a id="open" class="open" href="#">Log In | Register</a>
                                <a id="close" style="display: none;" class="close" href="#">Close | Schliessen</a>
                        </li>
                        <li class="right"> </li>
                </ul>
        </div> <!-- / top -->

</div> <!-- EOF panel -->

_____________________________________________________________________________________________________________________
_____________________________________________________________________________________________________________________

öffne die Datei: /templates/xtc5/style.css
##########################################

suche nach:
###########

Code: CSS  [Auswählen]

/* -----------------------------------------------------------------------------------------
   $Id:stylesheet.css 1262 2005-09-30 10:00:32Z mz $

   modified eCommerce Shopsoftware - community made shopping
   http://www.modified eCommerce Shopsoftware.org

   Copyright (c) 2010 modified eCommerce Shopsoftware
   -----------------------------------------------------------------------------------------
   based on:
   (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
   (c) 2002-2003 osCommerce(stylesheet.css,v 1.54 2003/05/27); www.oscommerce.com
   (c) 2003 nextcommerce (stylesheet.css,v 1.7 2003/08/13); www.nextcommerce.org
   (c) 2004 XT-Commerce (stylesheet.css 1262 2005-09-30); www.(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))

   Released under the GNU General Public License
   -----------------------------------------------------------------------------------------

   XTC5 Template & Stylesheets
   -----------------------------------------------------------------------------------------
   (c) 2007 Ing. Michael Fuerst
       bluegate communications
   http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))
   ---------------------------------------------------------------------------------------*/

füge danach ein:
################

Code: CSS  [Auswählen]

@import url(slide.css);

suche nach:
###########

Code: CSS  [Auswählen]

body {
font-family:Arial, Sans-serif;
font-size:12px;
margin:20px 0;

ändern in:
##########

Code: CSS  [Auswählen]

body {
font-family:Arial, Sans-serif;
font-size:12px;
margin:38px 0;

______________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________

öffne die Datei /templates/xtc5/javascript/general.js
######################################################

suchen nach:
############

Code: PHP  [Auswählen]

<script src="<?php echo DIR_WS_BASE.'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>

füge davor ein:
###############

Code: PHP  [Auswählen]

        <!--[if lte IE 6]>
                <script src="<?php echo DIR_WS_BASE.'templates/'.CURRENT_TEMPLATE; ?>/javascript/pngfix/supersleight-min.js" type="text/javascript"></script>
        <![endif]-->

suche nach:
###########

Code: PHP  [Auswählen]

<script src="<?php echo DIR_WS_BASE.'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

füge danach ein:
################

Code: PHP  [Auswählen]

<script src="<?php echo DIR_WS_BASE.'templates/'.CURRENT_TEMPLATE; ?>/javascript/slide.js" type="text/javascript"></script>

______________________________________________________________________________________________________________________
______________________________________________________________________________________________________________________

alles fertig!

Viel Spass Gruß Ralph_84

Anbei 2 Screenshots

Bild 1

  [ Für Gäste sind keine Dateianhänge sichtbar ]

Bild 2

  [ Für Gäste sind keine Dateianhänge sichtbar ]



Linkback: https://www.modified-shop.org/forum/index.php?topic=10508.0

[h-h-h]

Wie kann man so etwas schönes nur so misshandeln.

Erstmal für die Anpassungen und für's Teilen.

Es müssen noch folgende Template & CSS Dateien bearbeitet werden.
box_newsletter.html, box_login.html sollten eine eigene CSS-Klasse bekommen.
Und in der stylesheet.css müssen diese Klassen noch gestaltet werden.
Dies gilt auch für .boxcartheader und .boxcartbody welche in der box_cart.html auftauchen.

Schönen Gruß

h-h-h

[ralph_84]

Danke h-h-h

Für das Danke für die Anpassung.
Mit dem Anpassen der CSS Classen überlasse ich gerne einem anderen.
Bin nicht gerade der große CSS Profi das war noch nie mein Ding Sorry.
Aber Danke für Deinen Hinweis, denke wird sich jemand finden der das schneller per CSS anpassen kann als ich nur Programmierer.

Gruß Ralph

[Shorty]

Wenn man die zip runtergeladen hat lässt sie sich nicht entpacken?

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[Tomcraft]

Benutze 7-Zip, damit geht es bestimmt: FAQ: Liste wichtiger Freeware- & OpenSource-Programme für die Shop-Erstellung

Grüße

Torsten

[ralph_84]

Stimmt ist mit 7-Zip gepackt

Sollte auch damit wieder entpackt werden.

Gruß Ralph

[Tomcraft]

Ich habe das Modul nochmal neu gepackt, damit es nicht mit 7-Zip entpackt werden muss.

Den Ansatz, dass du die Boxen übernimmst und nicht wie im Original-Modul nur hardcodet die index.html anpasst, finde ich gut, da dadurch weiterhin Mehrsprachigkeit des Shops gewährleistet ist.

Vielleicht findet sich ja noch jemand, der es so schön stylen kann wie im Original zu sehen:

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[ralph_84]

Ja so war es auch der schnellere Weg denke ich.
Warum viel Tippen wenn ja alles schon fast fertig ist.
Aber ich denke man könnte von den Boxen eine Kopie wie Cart2 und login2 usw. machen.
Diesen dann z.B. neue CSS Prameter mit auf den Weg geben und diese dann einbinden oder was denkst Du?

Na mal sehen vielleicht hat ja auch jamand eine Idee dazu.
Wie gesagt ich bin nicht der CCS Crack und möchte es auch nicht werden.

Gruß Ralph

[Tomcraft]

[...]
Aber ich denke man könnte von den Boxen eine Kopie wie Cart2 und login2 usw. machen.
Diesen dann z.B. neue CSS Prameter mit auf den Weg geben und diese dann einbinden oder was denkst Du?
[...]

Wieso das denn?

Grüße

Torsten

[ralph_84]

Na wenn jemand die Original Boxen doch noch warum auch immer zusätzlich im Shop Nutzen möchten!
Kann ja sein das Jemand eine Box sowohl im Sliding Menü als auch Normal im Shop einsetzen möchten oder?
Egal wenn jemand eine bseere Idee hat bitte nur zu.
Gruß Ralph

[xarnu]

Hehe, hab das Sliding-Panel schon seid 6 Monaten in meinem Shop.

[Tomcraft]

Würdest du deine Anpassungen mit uns teilen?

Grüße

Torsten

[p3e]

Ich fände wichtig, dass bei allen die kein javascript aktiviert haben, die Boxen einigermaßen ansehnlich erscheinen. Momentan erscheinen die Boxen ja grundsätzlich, was sicherlich überflüssig ist.

[xarnu]

soll ich fürs modified eCommerce Shopsoftware eine Anpassung machen und welche Boxen sollen oben sichtbar sein?

[Tomcraft]

Ja, das wäre prima, wenn du da etwas für das xtc5 Template machen könntest.

Welche Boxen... gute Frage... Warenkorb, Login, Newsletter?

Sollte ja kein Problem sein anhand des dann vorhandenen Codes weitere Boxen einzufügen.

Grüße

Torsten