Neu Java Script updatesicher in HTML-Ausgabe einfügen

Rosco

Aktives Mitglied
22. November 2016
62
3
Hallo ins Forum,

ich würde gern im Template EVO nur ein paar Zeilen Java an das Ende der footer.tpl setzen. Um das Ganze updatefähig zu halten, habe ich verstanden, dass dann ein ChildTemplate geschaffen werden muss und in die entsprechende Datei (quasi als Extension zur originalen Datei) die neuen Inhalten ergänzt werden.

Daraufhin habe ich das EVO ChildExampe Verzeichnis kopiert, mit den Dateien und Verzeichnissen experementiert - und mir schlussendlich den Shop so verraspelt, dass der Aufruf der Shop-Startseite mit einem 500er Fehler quittiert wurde. Komischerweise ging es auch nicht, das Ganze wieder rückgängig zu machen. Also blieb mir nur ein Backup wiederherzustellen.
Sicher habt ihr inzwischen bemerkt, dass ich beim Dateijonglieren so gar nicht recht fit bin.

Könnt ihr mir bitte mitteilen,
  • welche Dateien in dem neuen ChieldTemplate Verzeichnis zwingend notwendig sind,
  • welche davon aus dem (original) EVO-Template übernommen werden müssen oder
  • welche davon neu erstellt werden müssen
  • welche Inhalte in diese Datei(en) eingefügt werden müssen, außer meinen Scriptzeilen
  • wie ich meine Scriptzeilen dann in die footer.tpl (Child) eintragen sollte
  • alternativ: wem ich mich ggf. auch vertrauensvoll anvertrauen darf
Ich hoffe, ich habe nix vergessen und ihr könnt verstehen, woran mir gelegen ist. Hierfür bereits vielen Dank!

Gruß ins Forum
Rosco
 

FMoche

Moderator
Mitarbeiter
15. Dezember 2014
1.369
345
Halle (Saale)
Wenn du wirklich nur ein wenig extra JavaScript (keine Datei, sondern Inline-Code) einfügen willst, brauchst du dafür herzlich wenig.

1) Unterodner in <shopverzeichnis>/templates/ erstellen
2) In diesem Ordner eine info.xml anlegen mit diesem Inhalt:

Code: 
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>FooterJS</Name>
    <Author>Irgendjemand</Author>
    <URL>https://www.example.com</URL>
    <Version>4.05</Version>
    <ShopVersion>405</ShopVersion>
    <Parent>Evo</Parent>
    <Description>JavaScript im Footer</Description>
</Template>

3) In diesem Ordner einen weiteren Unterordner "layout" anlegen.
4) Im Unterodner "layout" die Datei "footer.tpl" anlegen
5) In der footer.tpl diesen Inhalt einfügen:
Code: 
{block name="footer-js" append}
    <script>alert('Mein eigener JavaScript-Code!');</script>
{/block}

Anschließend natürlich noch das Template im Backend aktivieren.
 

Rosco

Aktives Mitglied
22. November 2016
62
3
Hallo FMoche,
vielen Dank für deine Rückantwort.
Ja, so ähnlich sah mein Rezept auch aus. Ich hatte allerdings noch die Zeile
Code: 
{extends file="{$parent_template_path}/layout/footer.tpl"}
eingebaut.
Somit stimmt aber das CSS-Design der Seite nicht mehr...
Allerdings habe ich nun festgestellt, dass der 500er Fehler durch den Code meines Script-Schnipsels verursacht wird.
Darf ich dir den Code mal per PN senden?
 

Rosco

Aktives Mitglied
22. November 2016
62
3
Ok, ich habe den Titel geändert - denn meine Anforderung passt offensichtlich nicht in die footer.tpl.

Ich möchte ein Java Script in der HTML Ausgabe einer jeden Seite implementieren. Da der Seitenfuß auf jeder Seite zu sehen ist, war ich der Meinung, dass die footer.tpl die geeignete Datei wäre. Leider kenne ich mich mit der Seiten-Architektur des JTL- Shop zu wenig aus.
Habe aber nun festgestellt, dass das Script nicht den 500er Fehler erzeugt, wenn ich den Code einfach in den Startseiten-Inhalt integriere.
Die Startseite ist aber ungeeignet, da dann das Script nicht auf allen anderen Seiten greifen würde. Also stellt sich wieder die Frage:

Welche Datei kann (updatesicher) über ein ChildTemplate (ohne mein derzeitiges Template Design zu verändern) ergänzt werden, dass in den HTML-Ausgaben einer jeden Seite das JavaScript enthalten ist?
 

elevennerds.de

Sehr aktives Mitglied
23. September 2015
1.215
188
Dein Problem ist, dass Dein Javascript durch Smarty durchgeht. Lager das JS einfach aus:
Code: 
<script type="text/javascript" src="mein-js.js"></script>
 

Rosco

Aktives Mitglied
22. November 2016
62
3
Hallo dropshipout,
vielen Dank für deinen Hinweis.
Ich habe jetzt den Java Script Code in eine eigene Datei ´meinscript.js´ geschrieben, in der Datei ohne Script-Element Bezeichnung (<script>...code...</script>
Diese Datei ist in die footer.tpl im ChildTemplate eingebunden - und wird nun auch in dem Bereich mit angehängt (siehe Code-Auszug aus der Startseite)
Code: 
                                        <script>
            $(function() {
                $.backstretch('templates/Evo-Child-Template/themes/base/images/backgrounds/background_sterne.jpg');
            });
        </script>
 
    <script>
        jtl.load(["templates/Evo/js/jquery.touch.min.js?v=4.05","templates/Evo/js/jquery.backstretch.min.js?v=4.05","templates/Evo/js/jquery.dimension.js?v=4.05","templates/Evo/js/jquery.offcanvas.js?v=4.05","templates/Evo/js/jquery.nivo.slider.pack.js?v=4.05","templates/Evo/js/jquery.waitforimages.js?v=4.05","templates/Evo/js/jquery.lazy.js?v=4.05","templates/Evo/js/jquery.serialize-object.js?v=4.05","templates/Evo/js/bootstrap.min.js?v=4.05","templates/Evo/js/bootstrap-tabdrop.js?v=4.05","templates/Evo/js/bootstrap-slider.js?v=4.05","templates/Evo/js/bootstrap-modal.js?v=4.05","templates/Evo/js/bootstrap-grid.js?v=4.05","templates/Evo/js/bootstrap-toolkit.js?v=4.05","templates/Evo/js/bootstrap-select.js?v=4.05","templates/Evo/js/bootstrap-hover-dropdown.min.js?v=4.05","templates/Evo/js/jtl.evo.js?v=4.05","templates/Evo/js/jtl.article.js?v=4.05","templates/Evo/js/jtl.basket.js?v=4.05","templates/Evo/js/jtl.io.js?v=4.05","templates/Evo/js/jtl.gallery.js?v=4.05","templates/Evo/js/typeahead.bundle.js?v=4.05","templates/Evo/js/photoswipe.js?v=4.05","templates/Evo/js/slick.js?v=4.05","templates/Evo/js/spin.js?v=4.05","templates/Evo/js/global.js?v=4.05",]);
            </script>

    <script type="text/javascript" src="meinscript.js"></script>


<script type="text/javascript">var cin = cin || {};
cin.plugin = cin.plugin || {};
cin.plugin.cookie_notification = cin.plugin.cookie_notification || {};

cin.plugin.cookie_notification.config = {
   'cFrontendPfadURL': 'https://website.de/includes/plugins/cin_cookie_notification/version/103/frontend/',
         'btn_position': 'right',
         'spacer': '',
         'expire_days': '7',
         'show_privacy_url': 'Y',
         'position': 'bottom',
         'text_color': '#838391',
         'bg_color': '#edeff5',
 
};

Hier hätte ich jetzt den sichtbaren Code vermutet und nicht die Anweisung mit der ausgelagerten Datei oder sehe ich das falsch?
So wird das Script doch bestimmt nicht ausgeführt, oder?
 

Rosco

Aktives Mitglied
22. November 2016
62
3
Hatte ich auch so gedacht, aber der alert() wird auch nicht ausgeführt.
Hier mal die Dateianordnung:

templates/Evo- Child-Template/template.xml
templates/Evo-Child-Template/layout/footer.tpl
templates/Evo-Child-Template/layout/meinscipt.js

Inhalt footer,tpl:
Code: 
{extends file="{$parent_template_path}/layout/footer.tpl"}

{block name="footer-js" append}
    <script type="text/javascript" src="meinscript.js"></script>
{/block}

Inhalt meinscript.js:
Code: 
alert('Mein eigener JavaScript-Code!');

Inhalt des tatsächlichen Scripts:
Code: 
   (function(w,d,t,u,n,a,m){w['Object']=n;
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
        m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://website.de/mtc.js','mt');

    mt('send', 'pageview');

Leider geht kein Alert Fenster beim Laden der Website Startseite des Shops auf.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.221
1.958
Berlin
Also, der erste weg den dir FMoche sagte, das war der weg der gut war, da du dann auch gleich ein Childchast, das mit dem extended hattest du richtig erkannt.

Wenn du in einer TPL Datei Javascript einbidest, solltest du das am besten mit {literal} {/literal} umschließen (innerhalb des Blocks).

Du kannst alternativ, in dein Template auch eine custom.js im js/ Verzeichnis im Template einbinden, diese wird dann automatisch gezogen ohne das du etwas tun musst.
 
Du musst Dich einloggen oder registrieren um hier antworten zu können.
Top Bottom