 So my name is Mitko Kočkovske. I come from Skopje, Macedonia. I'm a WordPress developer since 2010. I'm a codable, I'm a founder of Web Pigment, a WordPress agency based in Macedonia. I'm a codable expert, and I'm proud father. So a bit about my talk today and what are we going to speak about is what, how, and why we should use Ajax, how to use Ajax in WordPress, and how to use Ajax with WooCommerce. So it's pretty simple. Let's see, what is Ajax? Ajax stands for Asynchronously JavaScript and HTML, which is a client-side technique that communicates with your server. How it works, that is load server data without refreshing the page. And why should we do it? Because we want to build 21st century websites. So far, the way that I've used Ajax in WordPress are two ways that we are going to go through today. So I'm really bad with names, so please excuse me for that. So the first way I say it, I named it NotWordPressWay, which is actually creating a PHP file in the root of the WordPress installation. On the first line, we include the WPconfig file, and then we can put our WordPress code there. The other way that I've used Ajax in WordPress is with using query strings. So as you can see on the screen now, the code of the right is a base PHP file from the Sage team by roots. So if in the request there is a query string parameter is Ajax, we are not printing the whole header and footer of the team. We are just printing the content. And then easily with just a simple Ajax request, we just replace the container of the main content. So now that we know those two things, we can see how the WP Ajax functionality works. So it's basically an action that always starts with WP underline Ajax, underline and the action. And then we put the function that should be executed when we hit that endpoint URL. Or we can use WP underline Ajax underline no privilege, which stands for not logged in users. And then we also put in the function that needs to be called as well. You have to remember that you always have to have a WP die or an exit at the end of that function, otherwise the WordPress itself will print out just one as a character. And then there is the WP JSON, which is now, as we all know, into the WordPress core. And it can be accessed through any domain name slash WP minus JSON. So the way that we can use this is that we can register new routes. So a lot of people ask me, when should I use the WP Ajax or where should I use the WP JSON? Some of them, when I ask them, well, what's your logic behind that? They say, I use WP Ajax when I want to print out HTML. And I use WP JSON when I want to retrieve a JSON, which is correct. But you can also use the WP JSON by using the functionality of obi start, which will prevent anything from printing until you call the function obi underline get clean, which will provide everything that was printed out between the obi underline start and obi get clean. So that's how you can use an HTML into the JSON response. So now that we know how we can use Ajax with WordPress, let's see how we can leverage that into WooCommerce. Everything that I'm going to say today is already built in into the WooCommerce. It's just some tips and tricks that can help you move around into the WooCommerce. So each time when you open a WooCommerce page, there is an Ajax request that refreshes the cart fragments. As you all know, each WooCommerce page is hard, and it does a lot of loading on the server. So most of them are cached all the time. So thanks to the cart fragments, as you can see in an example, thanks to the cart fragments, the customer sees his correct cart. So the way that this works, as you can see on the JavaScript code, is that it gets the response fragments and then replaces the whole HTML elements. Just to leverage that, you can use the filter WooCommerce to cart fragments and put your own container that will be replaced each time the page loads. But just be sure that you're using the container as well inside because it replaces the whole container. And for some reason, if you want to call this function multiple times on the same page without reloading, then it won't work. Now, how many of you guys built the WooCommerce website and wanted to add an Ajax functionality on the app to cart on the product page? That happens to me very often. And it's pretty hard, especially with plugins like custom fields on the product page and stuff, which then you'll need to code in each time and each time the client adds a new field, et cetera. So I took a look at how WooCommerce add to cart functionality works. And the way that it works is that you can just do an any page request. It can be a get or post request using the add to cart parameter, which should be equal to the product or the product variation or the bulk product ID. And you can have any other field or anything else into the same request. And WooCommerce will automatically do that for you. So on the screen now, you're seeing an example of a custom WP Ajax functionality that I've created that is getting the WooCommerce notices. And based on that, it detects if the product was sexually added to cart or not. And besides that, the functionality for WooCommerce that we spoke of, we can see the checkout and the checkout itself has a lot of built-in functionalities. So for example, the init checkout is being called, which is a document trigger. So each time someone lands on the checkout page, we can get that in JavaScript by init checkout. Or when someone submits the checkout form or updates the shipping method or payment method, the update checkout and updated checkout are being triggered. If there is an error in the submission, the checkout error will be triggered as well. Each time someone switches, for example, from the United States to the UK or the other way around, the country to state change triggers being triggered. And then when someone tries to place an order, there is the checkout place order and the gateway ID or just the checkout place order trigger that are being called. And you can leverage that to, like if you return false in that function, then the checkout won't be submitted and you can validate the fields or whatever you like to do and prevent that from submitting. So now that we know all of this, let's see how simple it will be for us to add the previous or next product buttons on the product page without reloading the website. So as you can see here, I've created a simple function that on Ajax request using the action name as next product, it will call this function and it will display the product content which is located into the WooCommerce folder. And it will return the HTML of the content area of the product and then we can simply just replace all of that with the existing content and the next product will appear. If we apply any of like browser.js framework to all of this, we can simply have a fully Ajax WordPress process without any problems and pretty fast. Or we can use the WP JSON and retrieve the product ID and then build out the HTML with JavaScript. I had to speed up because of the limited time. Thank you, Mitko. Sorry about that. Thank you, Mitko. Thank you.