Benötige Zähler, der als Wert in Attribut geschrieben wird

Hallo ins Forum,

ich möchte einen animierten Zähler auf die Homepage setzen, der beim Aufruf der Seite per jQuery startet. Das Ganze funktioniert soweit auch, wenn ich hierfür ein CE "HTMl"-Element nutze. Nun möchte ich das aber per TS realisieren, um den Wert täglich zu erhöhen. Mein HTML sieht so aus:

<div class="counter">
  <!-- Bild aus Iconfont -->
  <i class="fa fa-code fa-2x"></i>
  <!-- Counter mit Endwert und Zählgeschwindigkeit -->
  <h2 class="timer count-title" id="count-number" data-to="357" data-speed="2000"></h2>
  <!-- Text darunter -->
  <p class="count-text">Tassen Kaffee</p>
</div>

Die Werte von data-to und data-speed werden vom jQuery ausgelesen und entsprechend animiert. Nun möchte ich aber gerne, dass die Anzahl der Tassen Kaffe sich täglich um 2 erhöht. Also muss ich das ja in TS machen.

Nur wie? Mach ich hierfür ein BE-Layout, in dem die einzelnen Elemente eingegeben werden können oder ein section-frame oder kann ich das irgendwie im RTE einfach alles eingeben? Und vor allem wie kriegt man das Attribut data-to="357" täglich automatisch um 2 erhöht?

Vielen Dank für Eure Hilfe und Gruß
mimii

Du könntest einen festen timestamp als Startdatum setzen und dann mit der Differenz zum aktuellen timestamp (date:U) arbeiten.
In etwa so (1437350400 ist der tstamp vom 20.07.):

lib.counter = TEXT
lib.counter {
  current = 1
  setCurrent.data = date:U
  setCurrent.wrap = ((| - 1437350400) / 86400) * 2

  prioriCalc = intval
}

Hallo mimii.

Die Rechnerei sollte klappen, indem Du Deinen Startzeitpunkt im TS mit hinterlegst. Wenn Du danach den aktuellen Timestamp nimmst, den Timestamp zum Startzeitpunkt abziehst, so kannst Du die vergangenen Tage berechnen (und "* 2 Tassen" nehmen)

Allgemein zum Rechnen mit TS: http://typo3blogger.de/rechnen-mit-typoscript/

Viele Grüße
Julian

Danke schon mal für die Antworten,

das werde ich mal so probieren. Die Frage ist jetzt nur noch, wie krieg ich den Wert ins Atribut data-to="hier muss dann der berechnete Wert rein"? Mein CE ist ja ein einfaches HTML Element. Hier kann ich ja keine Variable rein setzen, oder?
z.B. so

...
<h2 class="timer count-title" id="count-number" data-to="Variable" data-speed="2000"></h2>
...

Danke euch schonmal und Gruß
mimii

Wenn du so oder so mit JavaScript/jQuery arbeitest, dann kannst du das TypoScript Objekt zuerst irgendwo in einen Marker rendern und dann erst im JavaScript darauf zugreifen.

Sauberer wäre es mit einem eigenen Frontend-Plugin.

Hallo,

ich kämpfe immer noch und möchte das Ganze mit der Rechnerei nun komplett auf TS aufbauen. Dazu habe ich mir die Erweiterung typoscript2ce installiert und hole mir nun die lib.counter ins Content-Element. Das funktioniert soweit. Auch das Berechnen der Tassen Kaffee klappt.

Nun müsste jedoch das JQuery auf die Daten zugreifen, um sie zu animieren. D.h ich muss den berechneten Wert ins Atribut "data-to" eintragen, dass es dann so aussieht:

<p id="count-number" class="timer count-title" data-speed="4000" data-to="hier muss der Wert rein"></p>

Wie baue ich das ins TS? Das habe ich bisher, aber das gibt mir nur die Zahl aus, ohne was drumherum

lib.counter = COA
lib.counter {
  ...
  20 = COA
  20 {
    10 = TEXT
    10.value (
      <i class="fa fa-coffee fa-2x"></i>
    )
    20 = TEXT
    20 {
      current = 1
      setCurrent.data = date:U
      setCurrent.wrap = ((| - 1388534400) / 86400) * 2
      prioriCalc = intval
    }
    30 = TEXT
    30.value (
      <p class="count-text">Tassen Kaffe</p>
    )	
    wrap = <div class="counter col span_3">|</div>
  }
  ...
}

Vielen Dank für Eure Hilfe und Gruß
mimii

Ein Wrap drumherum?

Japp, an sowas dachte ich auch ;-)

Nur es geht nicht so, wie ich es mir dachte.

Weder so

    20 = TEXT
    20 {
      current = 1
      setCurrent.data = date:U
      setCurrent.wrap = <p id="count-number" class="timer count-title" data-speed="4000" data-to="((| - 1388534400) / 86400) * 2"></p>
      prioriCalc = intval
    }

    20 = TEXT
    20 {
      current = 1
      setCurrent.data = date:U
      setCurrent.wrap = ((| - 1388534400) / 86400) * 2">
      prioriCalc = intval
      wrap = <p id="count-number" class="timer count-title" data-speed="4000" data-to="|"></p>
    }

funktioniert es. Dann wird immer 0 angezeigt. Ich geh mal davon aus, dass meine ungeschickten Versuche den wrap drumherum zu bauen recht peinlich sind. Ich krieg den Wert partout nicht ins Attribut :-(

Viele Grüße
mimii

Probier's mal so:

20 = TEXT
20 {
    stdWrap {
        current = 1
        setCurrent.data = date:U
        setCurrent.wrap = ((| - 1388534400) / 86400) * 2">
        prioriCalc = intval
    }
    wrap = <p id="count-number" class="timer count-title" data-speed="4000" data-to="|"></p>
}

:-)))))

Tausend Dank !!!

Was macht das stdWrap dadrum jetzt genau? Nur für mein Verständnis und den Lerneffekt :-)

Und weil ich jetzt übermütig werde, sollte der Wert (im Beispiel "475") noch im <p> innerhalb eines <span> stehen, damit auch der Besucher mit deaktiviertem Javascript was zu sehen kriegt. Im HTML einfach so:

<p id="count-number" class="timer count-title" data-speed="1000" data-to="475">
  <span class="wert"> 475</span>
</p>

Also folgendes hätte ich gern, geht so aber nicht.

...
  20 = TEXT
  20 {
    stdWrap {
      current = 1
      setCurrent.data = date:U
      setCurrent.wrap = ((| - 1441929600) / 86400 * -1)
      prioriCalc = intval
    }
    wrap = <p id="count-number" class="timer count-title" data-speed="1000" data-to="|"><span class="zahl">|</span></p>
  }
...

Auch dieser Verucht scheitert:

...

  20 {
  stdWrap {
    current = 1
    setCurrent.data = date:U
    setCurrent.wrap = ((| - 1388534400) / 86400) * 2
    prioriCalc = intval
  }
  10 = COA
  10 {
    10 = TEXT
    10.wrap = <p id="count-number" class="timer count-title" data-speed="4000" data-to="|">
    20 = TEXT
    20.wrap = <span class="zahl">|</span></p>
  }
...

Viele Grüße
mimii

Was macht das stdWrap dadrum jetzt genau? Nur für mein Verständnis und den Lerneffekt :-)

Also ich habe mir das so gemerkt:
stdWrap ist so eine Art Multifunktionsklasse. Die meisten Typo3 Container bieten teilweise oder sogar vollständige stdWrap-Funktionen. stdWrap hat aber selbst stdWrap, d.h. kann mehrfach verschachtelt werden. Das ist insbesondere dann wichtig, wenn wie in deinem Fall die Ausführungsreihenfolge der stdWrap-internen Funktionen in die Quere kommt, dann können diese Teile über das untergeordnete stdWrap vorausgewertet werden. So in etwa halt...

Was macht das stdWrap dadrum jetzt genau? Nur für mein Verständnis und den Lerneffekt :-)

Also ich habe mir das so gemerkt:
stdWrap ist so eine Art Multifunktionsklasse. Die meisten Typo3 Container bieten teilweise oder sogar vollständige stdWrap-Funktionen. stdWrap hat aber selbst stdWrap, d.h. kann mehrfach verschachtelt werden. Das ist insbesondere dann wichtig, wenn wie in deinem Fall die Ausführungsreihenfolge der stdWrap-internen Funktionen in die Quere kommt, dann können diese Teile über das untergeordnete stdWrap vorausgewertet werden. So in etwa halt...