gelöst Java Script einbinden wo?

Thema wurde von Anonymous, 8. September 2017 erstellt.

  1. Anonymous

    Anonymous Neues Mitglied

    Registriert seit:
    2. September 2016
    Beiträge:
    1
    Danke erhalten:
    0
    Hallo, unser Programmierer (und ich) suchen für ein Jawa Script den Eingang zum einbinden in den Gambio Shop.
    Wo kann ich das tun?
    Vielen Dank und freundliche Grüße
    Jürgen Wolff
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Templates/ Honeygrid/ usermod/ javascript/
    und dann in den passenden Unterordner, je nachdem wo das Script genutzt werden soll
     
  3. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
    Hallo Barbara, kannst Du mir vielleicht einen Tipp geben bitte?
    Ich habe über mailchimp ein javascript das auf der Startseite ein Pop-Up mit Newsletter Anmeldung darstellen soll. Ich habe es in die index.html kopiert, die im Ordner Templates/ Honeygrid/ usermod/ javascript/index/ sich befindet.
    Alle Caches (shop manuell, Shop ftp und Browser) geleert, aber leider ohne Erfolg. hast Du oder auch gerne jemand anderes eine Idee woran es liegen kann?
     
  4. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Die index.html in dem Ordner ist definitiv der falsche Platz für dein JavaScript. Du musst das in eine eigene Datei packen.
     
  5. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
  6. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Du legst dir in dem von dir genannten Ordner eine Datei mit beliebigem Namen (z.B. mailchimp.js) an und fügst dort deinen JavaScript-Code ein.
     
  7. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
    Guten Abend, das habe ich gemacht, muss ich nicht aber noch eine html Datei schreiben, die auf das Javascript verweist? In der "Anleitung" bei Mailchimp steht, das man das Javascript direkt in die html Datei einbinden soll. Ich muss leider gestehen, dass meine Java Kenntnisse bei 0 liegen.
     
  8. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Um da genaueres sagen zu können, brauche ich einmal das JavaScript. Das kannst du hier einfügen in dem du auf das kleine +-Symbol klickst und aus dem Dropdown "Code" auswählst
     
  9. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
    Code:
    <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"707432d80c0aa573c9afc5f83","lid":"193769ef32"}) })</script>
     
  10. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Ok, das ist noch wieder was anderes. Das muss nichtmal in eine eigene JavaScript-Datei, da das nur eine Anweisung ist, das eigentliche JavaScript zu laden und auszuführen. Wenn das nur auf der Startseite ausgeführt werden soll versuch mal folgendes:

    - Gehe per FTP in den Ordner templates/Honeygrid und leg dir dort eine Kopie der index.html an und nenne sie index-USERMOD.html
    - Öffne die neu erstellte Datei und geh dort ganz nach unten
    - Unter dem {$BOTTOM} fügst du dann folgendes ein:
    HTML:
    {if ""|detect_page == "Index"}
        <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"707432d80c0aa573c9afc5f83","lid":"193769ef32"}) })</script>
    {/if}
    - speichere deine Änderungen ab und leere den Seitencache deines Shops
     
  11. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Ok nächster Versuch:

    Code:
    {if ""|detect_page == "Index"}
        {literal}<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"707432d80c0aa573c9afc5f83","lid":"193769ef32"}) })</script>{/literal}
    {/if}
     
  12. Jan Brodowsky

    Jan Brodowsky Erfahrener Benutzer

    Registriert seit:
    20. Juni 2012
    Beiträge:
    249
    Danke erhalten:
    27
    Danke vergeben:
    129
  13. Folien21.de

    Folien21.de Mitglied

    Registriert seit:
    20. Januar 2019
    Beiträge:
    5
    Danke erhalten:
    0
    #14 Folien21.de, 22. Januar 2019
    Zuletzt bearbeitet: 11. Mai 2023
    @Torben (Gambio) Hallo Ich versuche ein textslider in footer bereich einzüfügen das code sieht so aus
    Code:
    <html>
    <head>
    
      <link rel="stylesheet" href="https://www.folien8.de/templates/Honeygrid/assets/javascript/bxslider.css">
      <script src="https://www.folien8.de/templates/Honeygrid/assets/javascript/jquery.js"></script>
      <script src="https://www.folien8.de/templates/Honeygrid/assets/javascript/bxslider.js"></script>
    
      <script>
        $(document).ready(function(){
          $('.slider').bxSlider();
        });
      </script>
    
    </head>
    <body>
    
      <div class="slider">
       <center><li><div>
                                <img src="https://www.folien8.de/slider/bewertung.png"style="margin:5px" align="center" />
                                <img src="https://www.folien8.de/slider/bewertung.png"style="margin:5px" align="center" />
                                <img src="https://www.folien8.de/slider/bewertung.png" style="margin:5px" align="center"/>
                                <img src="https://www.folien8.de/slider/bewertung.png"style="margin:5px" align="center" />
                                <img src="https://www.folien8.de/slider/bewertung.png" style="margin:5px" align="center"/>
                                <br></div><div>
                                Die bestellte Tischgruppe wurde schnell und zuverlässig geliefert. Das Preis-Leistungsverhältnis war absolut top!
                                <span>Julia M. aus Bamberg</span></div></li></center>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
            <div>I am another slide.</div>
                <div>I am another slide.</div>
                    <div>I am another slide.</div>
                        <div>I am another slide.</div>
      </div>
    
    </body>
    </html>

    Wenn ich das in ein html datei bei einem externen server laufen lasse funktioniert es wenn ich aber das in mein shop einfüge diese bereich füge ich footer.html

    Code:
    <div class="slider">
       <center><li><div>
                                <img src="https://www.folien8.de/slider/bewertung.png"style="margin:5px" align="center" />
                                <img src="https://www.folien8.de/slider/bewertung.png"style="margin:5px" align="center" />
                                <img src="https://www.folien8.de/slider/bewertung.png" style="margin:5px" align="center"/>
                                <img src="https://www.folien8.de/slider/bewertung.png"style="margin:5px" align="center" />
                                <img src="https://www.folien8.de/slider/bewertung.png" style="margin:5px" align="center"/>
                                <br></div><div>
                                Die bestellte Tischgruppe wurde schnell und zuverlässig geliefert. Das Preis-Leistungsverhältnis war absolut top!
                                <span>Julia M. aus Bamberg</span></div></li></center>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
        <div>I am another slide.</div>
            <div>I am another slide.</div>
                <div>I am another slide.</div>
                    <div>I am another slide.</div>
                        <div>I am another slide.</div>
      </div>
    und diese bereich beim head.html

    Code:
    <link rel="stylesheet" href="https://www.folien8.de/templates/Honeygrid/assets/javascript/bxslider.css">
      <script src="https://www.folien8.de/templates/Honeygrid/assets/javascript/jquery.js"></script>
      <script src="https://www.folien8.de/templates/Honeygrid/assets/javascript/bxslider.js"></script>
    
      <script>
        $(document).ready(function(){
          $('.slider').bxSlider();
        });
      </script>
    leider ohne erfolg was mache ich den da falsch kann mir jemand helfen bitte ?
     
  14. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Das erste Problem wird sein, dass du dann jQuery doppelt einbindest, denn das ist schon im Shop vorhanden und das dürfte dann miteinander kollidieren.

    Für alles weitere müsste ich das wohl live in Aktion sehen, was genau daran nicht funktioniert.
     
  15. Folien21.de

    Folien21.de Mitglied

    Registriert seit:
    20. Januar 2019
    Beiträge:
    5
    Danke erhalten:
    0
    Hallo Torben Wark
    könntest du nachschauen wieso das nicht funktioniert ?
     
  16. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Wenn du damit meinst, dass mich in deinen Shop einlogge und da schauen, dann nein. Ich arbeite nicht mehr für Gambio, sondern bin meiner Freizeit hier aktiv, um noch weiter helfen zu können, so gut ich kann :). Dementsprechend habe ich auch keinerlei Befugnis mich in irgendeinem Shop einzuloggen und da Dinge zu tun.
     
  17. roberto_iannone

    roberto_iannone Erfahrener Benutzer

    Registriert seit:
    30. Juni 2019
    Beiträge:
    107
    Danke erhalten:
    1
    Danke vergeben:
    37
    Hallo ich mal wieder :D weis zwar nicht ob ich hier das richtige Fenster habe wenn nicht bitte sagen :)

    habe jetzt einen Countdown mit 3 scripten einmal html einmal css und javascript jetzt meine frage wo muss ich was einfügen das es angezeigt wird richtig? css wahrscheinlich im eigenen css und html im content manger Bereich aber javascript?

    HTML:
    <div id="countdown" data-minutes-left="20" data-reset-delay="5">
      <p><strong>Hurry...</strong></p>
      <div class="canvas-container" >
        <canvas id="days"></canvas>
        <canvas id="hours"></canvas>
        <canvas id="minutes"></canvas>
        <canvas id="seconds"></canvas>
      </div>
    </div>
    Code:
    #countdown p {
      text-align: center;
      margin-bottom: 30px;
      font-size: 2rem;
    }
    #countdown .canvas-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 440px;
      margin: 0 auto;
    }
    
    @media (max-width:500px){
      #countdown .canvas-container { max-width: 220px; }
      #countdown canvas:nth-child(-n+2) { margin-bottom: 10px; }
    }
    Code:
    // variables
    var countdown = document.getElementById('countdown');
    var timer;
    var specs = {
      'radius': 50,
      'centerX': 50,
      'centerY': 50,
      'thickness': 10,
      'offset': -Math.PI/2,
      'color': '#f00',
      'bgColor': '#ccc',
      'idFont': 'small-caps 400 10px Verdana',
      'valueFont': 'bold 30px Verdana',
      'fontColor': '#000'
    };
    var time = {
      'millisecond': 1000,
      'second': 60,
      'minute': 60,
      'hour': 24,
      'day': 365
    }
    var info = {};
    
    // countdown init
    var endCountdown = new Date();
    var timeLeftMinutes = countdown.dataset.minutesLeft || 30;
    var resetDelayMinutes = countdown.dataset.resetDelay || 0;
    var timeLeft = timeLeftMinutes * time.second * time.millisecond;
    var resetDelay = resetDelayMinutes * time.second * time.millisecond;
    var newTime;
    if(!localStorage.getItem('countdownTimer')) {
      // timer not started yet
      newTime = endCountdown.getTime() + timeLeft;
      localStorage.setItem('countdownTimer', newTime);
      console.log("Set new timer");
    } else if((parseInt(localStorage.getItem('countdownTimer')) + resetDelay) < endCountdown.getTime()) {
      // timer is ended, delay is over, so reset timer
      newTime = endCountdown.getTime() + timeLeft;
      localStorage.setItem('countdownTimer', newTime);     
      console.log("Restart timer");     
    } else {
      // restore timer from local storage
      newTime = localStorage.getItem('countdownTimer');
      console.log("Restore timer from local storage");
    }
    endCountdown.setTime(newTime);
    console.log("Timer end on: " + endCountdown);
    
    // canvas init
    var canvasElements = Array.prototype.slice.call(document.querySelectorAll('canvas'));
    var canvasCtx = [];
    canvasElements.forEach( function(canvas, index) {
      canvas.width = specs.centerX * 2;
      canvas.height = specs.centerY * 2;
      canvasCtx[index] = canvas.getContext('2d');
      var name = canvas.id;
      info[name] = {'ctx': index, 'value': 0, 'prevValue': -1};
    });
    var canvasKeys = Object.keys(info);
    info.days.denominator = time.day;
    info.hours.denominator = time.hour;
    info.minutes.denominator = time.minute;
    info.seconds.denominator = time.second;
    
    // show remaining time
    function showRemainingTime() {
      var now = new Date();
      // calculate new values
      var secondsLeft = Math.max(0, Math.floor((endCountdown - now)/1000));
      info.days.value = Math.floor(secondsLeft / (time.second*time.minute*time.hour));
      info.hours.value = Math.floor((secondsLeft % (time.second*time.minute*time.hour)) / (time.second*time.minute));
      info.minutes.value = Math.floor((secondsLeft % (time.second*time.minute)) / time.second);
      info.seconds.value = Math.floor(secondsLeft % time.second);
     
      // update changed values only
      canvasKeys.forEach( function(key) {
        if(info[key].value !== info[key].prevValue){
          if(key === 'days' && info[key].value > 365) {
            // exception if days is more than 1 year
            draw(canvasCtx[info[key].ctx], 1, key, info[key].value);
          } else {
            draw(canvasCtx[info[key].ctx], info[key].value/info[key].denominator, key, info[key].value);
          }
          info[key].prevValue = info[key].value;
        }
      });
    }
    
    // draw function
    function draw(ctx, part, id, value) {
      // calculate angles
      var start = specs.offset;
      var between = 2 * Math.PI * part + specs.offset;
      var end = 2 * Math.PI + specs.offset;
     
      // clear canvas
      ctx.clearRect(0, 0, specs.centerX * 2, specs.centerY * 2);
     
      // draw remaining %
      ctx.fillStyle = specs.color;
      ctx.beginPath();
      ctx.arc(specs.centerX, specs.centerY, specs.radius, start, between);
      ctx.arc(specs.centerX, specs.centerY, specs.radius - specs.thickness, between, start, true);
      ctx.closePath();
      ctx.fill();
    
      // draw bg
      ctx.fillStyle = specs.bgColor;
      ctx.beginPath();
      ctx.arc(specs.centerX, specs.centerY, specs.radius, between, end);
      ctx.arc(specs.centerX, specs.centerY, specs.radius - specs.thickness, end, between, true);
      ctx.closePath();
      ctx.fill();
     
      // draw text
      ctx.fillStyle = specs.fontColor;
      ctx.font = specs.idFont;
      ctx.fillText(id, specs.radius - ctx.measureText(id).width/2, specs.thickness*3);
      ctx.font = specs.valueFont;
      ctx.fillText(value, specs.radius - ctx.measureText(value).width/2, specs.radius*2 - specs.thickness*3);
    }
    
    // change countdown every second
    timer = setInterval(showRemainingTime, 1000);
     
  18. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    24. Januar 2019
    Beiträge:
    30
    Danke erhalten:
    0
    Danke vergeben:
    5
    @barbara

    Ich muss bei mir für Proven Expert den Java Code in mein HoneyGrid Template bekommen für alle Artikelseiten. Verstehe ich das richtig, dass ich das dann im Ordner /templates/Honeygrid/usermod/javascript/ProductInfo machen muss? Und da in die index.html?

    Der Code wäre:
    Code:
    <div class="pe-richsnippets"></div>
    <script type="text/javascript" src="https://www.provenexpert.com/widget/richsnippet.js?u=1VKZlZUBkRGBiumZjNmZjVKA0pwAkMwZ&v=2" async></script>
     
  19. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Das, was Du da hast, kommt nicht in .../usermod/javascript/
    sondern in eine html-Seite, oder (wenn es funktioniert - wäre dann aber auf allen Seiten) im Admin unter Tracking-Codes.

    Wenn es nur auf die Artikelseite und in den Body soll, wäre die templates/Honeygris/module/product_info/standard.html die betreffende Datei.
    Wobei man dass dann über die Smarty-Blöcke lösen sollte, damit es Updatesicher ist.