JavaScript updatesicher verwenden/einbinden, aber wo?

Thema wurde von Leleli, 13. April 2015 erstellt.

  1. Leleli
    Leleli Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    74
    Danke erhalten:
    1
    Danke vergeben:
    21
    Hoi zäme,


    mal wieder eine "Template"-Frage:
    Ich würde gerne so ein schönen "Back to Top" Button einbauen. Damit der Sprung aber nicht so hart ist, braucht es JavaScript, um ein schönes "scrollen" hin zu bekommen.


    Wenn ich mir die index.html des EyeCandy vornehme, kann ich zwar <script> Tags einfügen, um externe js-Dateien zu laden, aber kein JavaScript selber. da sonst der smarty motzt. Ich brauche aber JavaScript, um auf den Click-Event reagieren und dann das jquery nutzen zu können.


    Wo gehört sowas dann korrekt (und vor allem Updatesicher) hin?


    Viele Grüsse,
    Benny


    P.S. Habe ich es richtig gelesen, dass Gambio das jquery bereits hat & nicht noch mit eingebunden werden muss?
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.627
    Danke erhalten:
    11.348
    Danke vergeben:
    1.614
    Eine Anleitung findest Du hier:
    (Link nur für registrierte Nutzer sichtbar.)
    Bitte nicht nur den 1. Post beachten , sondern weiterlesen :)
     
  3. Leleli
    Leleli Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    74
    Danke erhalten:
    1
    Danke vergeben:
    21
    Danke für den Link :)


    Jedoch funzt es irgendwie nicht, wie gewünscht . . . woran sehe ich denn, ob das jquery wirklich geladen wird? Habe mir eine js-Datei erstellt & diese unter Global gelegt . . . aber sanft hoch gescrollt wird noch immer nicht . . .
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.627
    Danke erhalten:
    11.348
    Danke vergeben:
    1.614
    In 2.0. funktioniert das, werde das mal in 2.2 einbauen. Melde mich gleich nochmal :)
     
  5. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Wenn du das JavaScript tatsächlich inline in der index.html einbauen willst kannst du auch folgende Notation verwenden:

    HTML:
    <script type=text/javascript>
        {literal}
            //hier kannst du dann deinen JavaScript-Code einfügen
        {/literal}
    </script>
    
    Das {literal} bewirkt, dass Smarty den definierten Bereich ignoriert und nicht verarbeitet.

    LG Torben
     
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.627
    Danke erhalten:
    11.348
    Danke vergeben:
    1.614
    Ich habe diese Datei:
    Den Anhang scrolltopcontrol.js betrachten

    ins Verzeichnis template/ EyeCandy/ usermod/ javascript/ Global geladen

    und das Bild entsprechend als "up.png" in den Ordner "images".
    Das funktioniert in 2.2 noch genau so wie in 2.0
     
  7. Leleli
    Leleli Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    74
    Danke erhalten:
    1
    Danke vergeben:
    21
    Hoi zäme,

    danke für Eurer Feedback. Das mit dem {literal} ist echt ein super Hinweis, vielen Dank.

    Ich habe die scrolltopcontrol.js nicht verwendet. Ich ein anderen Beispiel-Code verwendet, welche in der Demo auf der Seite funktioniert. Daher wollte ich wissen, ob es am verwendeten Code liegt oder daren, dass jquery nicht geladen ist. Aber dann scheint es letzteres zu sein.

    Werde dann jetzt mal scrolltopcontrol.js verwenden & noch ggf. erweitern. Vielen Dank :)

    Viele Grüsse,
    Benny
     
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.627
    Danke erhalten:
    11.348
    Danke vergeben:
    1.614
    #8 barbara, 13. April 2015
    Zuletzt bearbeitet: 13. April 2015
    Hallo Benny,

    ich habe gerade ein Problem festgestellt.
    Wenn ich die Datei scrolltopcontrol.js hochlade, funktioniert der Kundenlogin im Artikel nicht mehr.
    Da muss also irgendein Fehler in der Datei sein.

    Das Problem taucht nur auf der Artikel-Seite auf.
     
  9. Leleli
    Leleli Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    74
    Danke erhalten:
    1
    Danke vergeben:
    21
    Danke für die Info. Dann verwende ich die im Testsystem auch erst Mal gar nicht.
     
  10. Leleli
    Leleli Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    74
    Danke erhalten:
    1
    Danke vergeben:
    21
    Woran erkenne ich, ob er die JavaScript-Datei auch wirklich geladen hat? Teste gerade andere Back to Top Scripte, weiss aber nicht, ob die geladen wurden. Mag es ja gar nicht, so die Controlle ab zu geben ;-)

    Werde mal das Ganze via {literal} probieren.
     
  11. Avenger
    Avenger G-WARD 2012/13/14/15
    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    FireBug für FireFox ist hier Dein Freund....

    Da kann man sehen, welche separaten JS-Dateien geladen wurden.

    Bei Inline-Javascript kann man nach Code-Fragmenten des Scripts suchen.
     
  12. Avenger
    Avenger G-WARD 2012/13/14/15
    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Im Prinzip ja.

    Aber leider so spät eingebunden (im application_bottom.php), dass man die üblichen Einbauanleitungen nicht mehr verwenden kann.

    Skripte über das "usermod"-Verfahren einzubinden, reicht mir auch nicht, weil ich damit keine dynamischen Skripte einbauen kann (PHP-Dateien, die das Skript dynamisch erzeugen, um Parameter berechnen oder situationsabhängige Alternativen erstellen zu können.

    Das war eines der ersten Dinge, die ich geändert habe: ich lade jQuery im Header.

    Damit kann ich mich weitestgehend an Einbauanleitungen halten.

    Und ich kann Skripte kompakt dort einbinden, wo sie gebraucht werden, z.B. in Template-Dateien.
     
  13. Leleli
    Leleli Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    74
    Danke erhalten:
    1
    Danke vergeben:
    21
    Da der IE der Browser ist, der am intolerantesten ist, nutze ich den fürs Testen von Webseiten ;-) Aber im F12-Entwicklungstool vom IE habe ich da nichts entdeckt. Aber dann guck ich noch mal im Firefox.


    Das könnte erklären, warum mein Script nicht läuft, wenn das jquery erst zum Schluss kommt. Hast Du ein eigenes jquery eingebunden oder das von Gambio vom bottom in den Header verschoben?
     
  14. Leleli
    Leleli Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    74
    Danke erhalten:
    1
    Danke vergeben:
    21
    Ich habe mir die application_bottom.php angesehen, werde da aber addhoc nicht ganz schlau draus . . . wo wird denn die jquery dort geladen bzw. welchen Teil muss in die header übernehmen?
     
  15. Avenger
    Avenger G-WARD 2012/13/14/15
    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Das ist jetzt alles etwas komplexer....

    jQuery wird über "gm_javascript.js.php" geladen, was wiederum in "system\extender\ApplicationBottomExtenderComponent.inc.php" geladen wird, was über "system\classes\layout\BottomContentControl.inc.php" aktiviert wird, was in "includes\application_bottom.php" aktiviert wird.....

    Die Zeiten, in denen man das mit einem "echo" in "includes\application_bottom.php" erledigen konnte, sind vorbei.

    Dafür ist das dann updatesicher.
     
  16. robindas
    robindas Erfahrener Benutzer
    Registriert seit:
    3. November 2011
    Beiträge:
    348
    Danke erhalten:
    47
    Danke vergeben:
    27
    kann es sein das man innerhalb
    <script type=text/javascript>
    {literal}
    VARIABLE
    {/literal}
    </script>
    keine Variable abrufen kann welche ansonsten in der selben html genutzt wird ?

    also zB so:
    Code:
    <script type=text/javascript>
        {literal}
            //hier kannst du dann deinen JavaScript-Code einfügen
            
    <!--
    var win=null;
    
    onerror = stopError;
    function stopError(){
        return true;
    }
    
        
    
    function h1429979812(){
    
        productvideoinsert=$("PRODUCTS_URL");
        myleft=200;
        mytop=50;
        settings="width=640,height=480,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
    
        win=window.open(productvideoinsert,"Video",settings);
        win.focus();
    
    }
    
    // -->
    
        {/literal}
    </script>
     
  17. Xantiva
    Xantiva Erfahrener Benutzer
    Registriert seit:
    5. Mai 2013
    Beiträge:
    65
    Danke erhalten:
    2
    Danke vergeben:
    14
    Ja, das kann sein ...

    ... versuche es mal so:
    Code:
    <script type=text/javascript>
     {literal} 
    ... some code ...
      {/literal}{VARIABLE}{literal} 
    ... some code ...
     {/literal}
    
    </script>
    Smarty braucht für die Erkennung der Variablen die geschweiften Klammern.
     
  18. robindas
    robindas Erfahrener Benutzer
    Registriert seit:
    3. November 2011
    Beiträge:
    348
    Danke erhalten:
    47
    Danke vergeben:
    27
    nö geht auch nicht weder mit runden oder gescheiften klammer... trotzdem danke
     
  19. Xantiva
    Xantiva Erfahrener Benutzer
    Registriert seit:
    5. Mai 2013
    Beiträge:
    65
    Danke erhalten:
    2
    Danke vergeben:
    14
    Ups, da fehlt ja auch das $ ...
    PHP:
    <script type=text/javascript>
     {
    literal
    ... 
    some code ...
      {/
    literal}{$VARIABLE}{literal
    ... 
    some code ...
     {/
    literal}

    </
    script>
     
  20. robindas
    robindas Erfahrener Benutzer
    Registriert seit:
    3. November 2011
    Beiträge:
    348
    Danke erhalten:
    47
    Danke vergeben:
    27
    Also der code sieht jetzt so aus:
    Code:
    <script type=text/javascript>
        {literal}
            //hier kannst du dann deinen JavaScript-Code einfügen
            
    <!--
    var win=null;
    
    onerror = stopError;
    function stopError(){
        return true;
    }
    
        
    
    function h1429979812(){
    
        {/literal}
        productvideoinsert={$PRODUCTS_URL}; 
        {literal}
        myleft=200;
        mytop=50;
        settings="width=640,height=480,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
    
        win=window.open(productvideoinsert,"Video",settings);
        win.focus();
    
    }
    
    // -->
    
        {/literal}
    </script>
    und wird hiermit abgerufen
    Code:
    <input type="button" value="Test Button fuer Videos wir basteln gerade" onClick="h1429979812();">
    <body onBlur="self.close()">
    geht aber nicht... noch eine idee?