Countdown Timer for Posts in Oxygen

le 26/10/2021
JAG

In the comments section of Countdown Timer using ACF in Oxygen tutorial a member asked:
can we have the ACF time picker field elsewhere than in the Options? And how to do if i want to have more than 1 countdown on a page (within a Oxygen repeater) with time deadline located in ACF field (not in Options)?
In this members-only tutorial we shall
add “Event Date” custom field of the type Date Time Picker to Event Custom Post Typeshow 5 latest events using a Repeateruse pre_get_posts to limit the events to only those that are future/upcoming i.e., having the Event Date higher than todayset the event date and time info as the value of a custom data attribute, data-countdown-date for each eventadd JavaScript to loop over the events list, pull the data attribute’s value and setup countdown timer for each event

Step 1
Install and activate Advanced Custom Fields.
Go to Custom Fields > Add New.
Create a group named say, Event Fields.
Add a field having the label of say, Event Date and set the field type as “Date Time Picker”.
Set your desired Display and Return formats. It need not be F j, Y H:i:s as mentioned in the earlier tutorial.
Set the field group to appear on Event CPT entries.
Step 2
Edit the Page where you would like to display the upcoming events with Oxygen.
Add a Section having a Repeater.
Set the query to this manual query:
post_type=event&posts_per_page=5&no_found_rows=true
Select the Repeater Div and add the post title and link it to permalink.
Step 3
Let us change the query so it only pulls future events.
Add a Code Block above the Repeater.
PHP & HTML:

set(
'meta_query',
array(
array(
'key' => 'event_date',
'compare' => '>',
'value' => $date_now,
'type' => 'DATETIME',
),
)
);

}

?>
Step 4
Add a Code Block below the linked title inside the Repeater Div.
PHP & HTML:
Starts in:
Step 5
Install and activate My Custom Functionality plugin.
Connect to your hosting account using a FTP client and navigate to site’s /wp-content/plugins/my-custom-functionality-master.
Create a file named say, countdown-date.js in the plugin’s assets/js directory having the following code:
document.addEventListener('DOMContentLoaded', function () {
var list = document.getElementsByClassName('countdown-date');

function processDate(countDownDate, item) {
// 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 item
item.innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

// If the count down is finished, write some text
if (distance < 0) { clearInterval(x); item.innerHTML = 'EXPIRED'; } } for (let item of list) { // Set the date we're counting down to var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime(); // Update the count down every 1 second var x = setInterval(processDate, 1000, countDownDate, item); } }); Let us load the above js file. Edit plugin.php and add the following inside the custom_enqueue_files() function: if ( is_page( 'sample-page' ) ) { wp_enqueue_script( 'countdown-date', plugin_dir_url( __FILE__ ) . 'assets/js/countdown-date.js', [], '1.0.0', true ); } In the above replace is_page( 'sample-page' ) as needed depending on where you want to have the countdown timer script. For the site’s homepage, you would replace it with is_front_page(). Reference: https://stackoverflow.com/questions/63436579/same-countdown-value-appearing-for-different-dates

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat