Javascript in wordpress site. - Softwareontwikkeling

maandag 7 november 2016 17:42

Acties:

0 Henk 'm!

Topicstarter

Beste mede Tweakers wie kan / wil mij op weg helpen?

Ik heb een Wordpress site gemaakt. Op de welkoms pagina heb ik een simpele PHP script gemaakt die controleert welke dag van de week het is en of het tussen een bepaalde tijd is.

Voorbeeld:
Als het: ma, di, wo, do & vr is en tijd tussen 8:00 en 20:00
toon: groen
anders
toon: rood

Nu wil ik WP Super Cache gebruiken om de site sneller te maken.
Helaas wordt mijn php script ook statisch, mij is verteld dat ik deze PHP script moet gaan vervangen voor een Javascript.

Ik ben geen programmeur maar met PHP scripts red ik mij aardig, maar van Javascripts heb ik geen verstand. Ik heb wel een paar scrips gevonden maar ik heb geen idee hoe ik deze moet gebruiken, ik kan alleen javascrips vinden waarbij niet de gehele code vanaf het begin wordt getoond.

Het lukt mij zelfs niet na uren googlen om de volgende Javascript op een pagina werkend te krijgen:

code:

var objDate = new Date();
var hours = objDate.getHours();
if(hours >= 12 && hours <= 21){
    document.write('We Are Closed');
}
else{
    document.write('We are Open');
}

Ik weet niet hoe ik moet beginnen.
Kan iemand mij vertellen hoe ik de bovenste code werkend kan krijgen op een lege pagina?
Ik heb de code al geprobeerd tussen <script type="text/javascript"> </script> te zetten, andere complete Javascripts voorbeelden geprobeerd aan te passen, helaas weet ik niet wat ik fout doe...

Alvast bedankt.

maandag 7 november 2016 17:49

Acties:

0 Henk 'm!

TERW_DAN

Met een hamer past alles.

Iets als document.write zou ik sowieso niet gebruiken, dat is echt iets van de jaren 90.

Bovenstaande scriptje zou gewoon moeten werken, al zou ik document.write dan vervangen door iets dat de textContent van een element aanpast bijvoorbeeld (of de className waar je dmv CSS een kleurtje aanhangt).

maandag 7 november 2016 20:23

Acties:

0 Henk 'm!

Finder

Ik heb deze fiddle gevonden, en die lijkt te werken. Heb wel lokaal de dagen van de week aangepast naar maandag tot vrijdag.

http://jsfiddle.net/jp9BW/

maandag 7 november 2016 20:47

Acties:

0 Henk 'm!

kmichael

Topicstarter

Finder schreef op maandag 07 november 2016 @ 20:23:
Ik heb deze fiddle gevonden, en die lijkt te werken. Heb wel lokaal de dagen van de week aangepast naar maandag tot vrijdag.

http://jsfiddle.net/jp9BW/

Gesloten komt er niet te staan, ik krijg:

Click the button to check if now is working hours

1

20

45

maandag 7 november 2016 21:01

Acties:

0 Henk 'm!

Finder

Klopt, maar ik heb hem inderdaad lokaal aangepast. In het voorbeeld ging hij nooit de if/else stuk omdat het vandaag maandag is.

Had het nu zo gedaan:

<!DOCTYPE html>
<html lang="nl" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>First Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<p id="demo">Click the button to check if now is working hours</p>

<p id="hday">Day</p>
<p id="hhour">Hour</p>
<p id="hminutes">Minutes</p>

<button onclick="myFunction()">Check now</button>

<script>

function myFunction()
{
var now = new Date();
var hour = now.getHours();
var day = now.getDay();
var minutes = now.getMinutes();

document.getElementById("hday").innerHTML = day;
document.getElementById("hhour").innerHTML = hour;
document.getElementById("hminutes").innerHTML = minutes;

//weekdays 0==Sunday 1==Monday 2==Tuesday 3==Wednesday 4==Thurs 5==Friday 6==Sat
//Not Friday or Saturday
if ((day != 1) && (day != 6)){

if ((hour >= 9) && (hour < 17 )) {
//it's in schedule
document.getElementById("demo").innerHTML = "Office is open";
console.log('office open');
}
}
else
{
document.getElementById("demo").innerHTML = "Office is closed";
console.log('office closed');
}
}

</script>

</body>
</html>

[ Voor 111% gewijzigd door Finder op 07-11-2016 21:02 ]

zondag 13 november 2016 14:21

Acties:

0 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Ook dat is een oplossing. Maar een simpel pluginnetje in PHP had natuurlijk ook gekund.

PS: We hebben hier [code]-tags voor lappen HTML

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

zaterdag 26 november 2016 18:05

Acties:

0 Henk 'm!

Foamy

Fulltime prutser

if ((hour >= 9) && (hour < 17 )) {
//it's in schedule
document.getElementById("demo").innerHTML = "Office is open";
console.log('office open');
}

En wat als de bezoeker nu in een andere tijdzone zit? Dan ga je al stuk..
Je kunt in WP Super Cache gewoon pagina's/url's opgeven die je wilt excluden van het cachen, waarmee je direct je probleem oplost.

blub

donderdag 8 december 2016 12:25

Acties:

0 Henk 'm!

Cas

Je zou ook via javascript een php script op kunnen vragen die rekening houd met de tijdzone van de server. Deze zou je dan kunnen returnen binnen een stuk html. Op deze manier kun je de pagina wel gewoon netjes cachen.

Dit zou je met plain JavaScript op de volgende manier kunnen doen:

JavaScript:

function loadOpenStatus() {
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
      if (xmlhttp.status == 200) {
        document.getElementById("openStatus").innerHTML = xmlhttp.responseText;
      }
    }
  };

  xmlhttp.open("GET", "openStatus.php", true);
  xmlhttp.send();
}

Echter zit jQuery standaard in WordPress gebakken waardoor je het ook op de onderstaande manier kunt doen:

JavaScript:

$.ajax({
  url: "openStatus.php",
  context: document.body,
}).done(function(body) {
  $("#openStatus").html(body);
});

Heb beide code's niet getest, maar ze zouden moeten werken wanneer je openStatus.php correct oproept en hier je output '... is open' óf '... is gesloten' is.

donderdag 8 december 2016 12:44

Acties:

0 Henk 'm!

Verwijderd

Als je in de init-hook van WordPress controleert of de status open / gesloten veranderd is en je update de homepage dan gaat het waarschijnlijk ook goed. WP Super Cache zal de pagina dan verwijderen uit de cache en opnieuw de pagina opvragen.

Pseudo-code:

code:

$status = get_option('zijn_we_open');
if($status != open_status(time()){
  $frontpage_id = get_option('page_on_front');
  $post = get_post($frontpage_id);
  update_post($post);
  set_option('zijn_we_open', open_status(time());
}

Waarschijnlijk; weet niet hoe WP Super Cache technisch in elkaar zit. Wellicht is een andere action hook nodig.

Edit:
Dit truukje werkt standaard niet met WP Super Cache. Die plugin roept voor een pagina in de cache nauwelijks WordPress aan. Kan wel:

How do I delay serving the cache until the "init" action fires?
Cached files are served before almost all of WordPress is loaded. While that's great for performance it's a pain when you want to extend the plugin using a core part of WordPress. Enable 'Late init' mode on the Advanced settings page and cached files will be served when "init" fires. WordPress and it's plugins will be loaded now.

Bron: https://nl.wordpress.org/plugins/wp-super-cache/faq/

[ Voor 45% gewijzigd door Verwijderd op 08-12-2016 13:02 ]