Thank you, but the purchase procedure has already been working perfectly for about 3 years. purchases are already managed with cron. my only problem is displaying a timer for which I already have the closing datetime available
OK @Marzio,
I think I got your problem...
The counter-up (1,2,3,4...) is easy, I showed it to you.
But I had problem doinf the counter-down (5,4,3,2...)
I think I got it by running through some posts in here
Please add the following to your code and check if it is correct:
- add before your repeat list (outside), 2 DateTime components (1 local time, 1 UTC time) and 1 Variable holding the offset
<dmx-datetime id="var_DateTime"></dmx-datetime>
<dmx-datetime id="var_UTCDateTime" utc="true"></dmx-datetime>
<dmx-value id="var_offset" dmx-bind:value="var_DateTime.datetime.secondsUntil(var_UTCDateTime.datetime.split('Z')[0])"></dmx-value>
- Then in your repeat table add the counterdown (just a table
<td>)
<td dmx-text="(((var_DateTime.datetime.secondsUntil(prh_StartedAt.addSeconds(-var_offset.value+300))/60)%60).floor()+'m'+(var_DateTime.datetime.secondsUntil(prh_StartedAt.addSeconds(-var_offset.value+300))%60).floor()+'s')" class="text-center"></td>
So add the above or replace a column (td) you have in your repeat table ans check the result.
*When you paste the above code, REPLACE prh_StartedAt with the datetime field from your query
**This counterdown doesn't stop at 0m0s... Neither disables/remove the button so the user can purchase the specific item when counterdown is less tha zero (time ended...).
You have to take care of these actions
How about modifying something that has already been done..?
Example here of a countdown using inputs.
To simplify I started again from Chief
-
First consideration
The script downloaded from the internet works very well (for the moment with a date manually inserted MMM DD, Yyyy HH: MM: SS) -
The first line of the attached screenshot reports the value of the date taken from Query Server Connect
-
The second line reports the formatted result of the value of the VAR
-
The third line is the result of the script (with manual date)
The problem is only to replace the value of the variable in the script
Don't fully understand, sorry, but if you need to create a countdown on your page you can try this:
- We have a dynamic value of datetime which for testing:
- I will call it on an API so:
- On the client side we have 4 things:
- The server connect
- The notification component
- 1 flow for running the script
No auto load - 1 flow for running when the countdown ends
No auto load
- The server connect is attached to the countdown api, so we get the value from there.
It has a succesfully dynamic event to run flow 1:
The flow 1 is just run contador() function:
The flow 2 will run a notification:
Don't try to run the script BEFORE server connect has loaded the date. Otherwise you'll have an empty javascript variable.
That's why we run flow:contador()with the sucessfuly event = when it has a value
Full code:
<!doctype html>
<html>
<head>
<base href="/wapplercommunity/">
<script src="../dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
</head>
<body is="dmx-app" id="countdown1">
<dmx-notifications id="notifies1"></dmx-notifications>
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/wappler_community/countdown.php" dmx-on:success="flow1.run()"></dmx-serverconnect>
<script is="dmx-flow" id="flow1" type="text/dmx-flow">{
runJS: {outputType: "text", function: "contador"}
}</script>
<script is="dmx-flow" id="flow2" type="text/dmx-flow">{
run: {
name: "notification",
outputType: "text",
action: "{{notifies1.danger('The time has expired')}}"
}
}</script>
<div id="countdown"></div>
<script>
function contador() {
// get date
var targetDate = dmx.parse('{{serverconnect1.data.query[0].date}}');
console.log(targetDate); // Testing that targetDate has a value
// to utc
var countDownDate = new Date(targetDate.replace(" ", "T") + "Z").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "Time has expired";
dmx.parse("flow2.run()");
}
}, 1000);
}
</script>
<script src="../bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Results:
UTC
LOCAL:
When expired:
Just run whatever you need on your flow2
I thank you
Now I am unfortunately engaged on another urgent project, but as soon as I can, I try and then I'll let you know
I took a look again at the code that works perfectly but only with the value given manually inserted
Before the code I displayed a SC connection to obtain the dynamic value of the date formatted correctly
I also created the "Vartimer" variable
My only problem is therefore to be able to replace the "Vartimer" value to the manual value requested in the script
I think I understand that I have to use Parse and Page Flow to get this, but I didn't understand how. I have very confused ideas
This is the current result, with the date taken from the hints and the date timer
This is the code
`
<h1 dmx-text="sc_biglietto_populate.data.qry_biglietto_populate.timer_start.formatDate('MMM dd, yyyy HH:mm:ss')">date stop</h1>
<dmx-value id="vartimer" dmx-bind:value="sc_biglietto_populate.data.qry_biglietto_populate.timer_start.formatDate('MM dd, yyyy HH:mm:ss')"></dmx-value>
??????????????? parse and flow method. ???????????
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jul 25, 2024 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
- minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</div>
<!-- TIMER CHIUSURA -->`
Marzio, if you don't envolve the script under a function and call it after server connect loads, then it means that the script will start instantly when the page loads, and it's probably that the server connect doesn't have a defined value yet.
It's all about timing:
You need to ensure that countDownDate takes a server connect value, but in this case, server connect is loading AFTER countDownDate is declared.
Envolve the entire script under a function and call it when server connect has finished loading (flow with dynamic success event)..
Can you post full page code? I'll try to change it for you..
1 Like
Test
Sorry, finished the work day just now..
Here's the file:
test.php.zip (3.9 KB)
With this, the script runs after server connect has completed, equals, when it should have a value.
For that:
-
We envolve it under a function, in this case
contador():
function contador() {Here the rest of the script} -
We need to parse the server connect value, so we can use it on the javascript
-
But now we need to call that function (it won't run by loading the page automatically) so we create a flow with
run javascriptand noauto run(because we need to wait the server connect):
-
And we run the flow when server connect has value (that means, when value have been downloaded)
-
Now, when
contadorruns, it will have a value
You can check console, have added a few logs so you can check if it fails something..
Thank you very much but unfortunately it doesn't work yet.
But if it works, it probably depends on some project setting, which I don't want to change at the moment ..
I decided to let it go, because the site works perfectly and I don't want to risk creating problems
You were really kind.
However, I keep these suggestions in mind and I will undoubtedly try them with a new site. I will let you know
Thank you
Don't really understanding this, the only difference, is that you need to run the script, after server connect loads, that is the reason of using function, a flow, etc..
If you can, there are some logs on console, so you can share here if you want