What is Fragments 🧙🏻‍♂️? How To use that in my woocommerce?🛒

Fragments are small pieces of HTML code that can be dynamically updated without requiring a full page reload🧑🏻‍💻. In the context of WooCommerce, fragments are used to update specific parts of a page, such as the cart, mini cart, and other dynamic elements, without refreshing the entire page. This technology is powered by AJAX (Asynchronous JavaScript and XML)🔗, which enables seamless communication between the browser and the server in the background.

Benefits of Fragments in WooCommerce🥶

1. Enhanced Performance🚀: Fragments significantly improve the performance of your WooCommerce store by reducing the amount of data transferred between the server and the browser🗄. This leads to faster page loading times, contributing to a smoother and more efficient shopping experience.
2. Real-time Updates⏱️: With fragments, your customers can see real-time updates to their cart🛒, wishlist🔖, and other dynamic elements without needing to manually refresh the page🔃. This instantaneous feedback fosters a sense of interactivity and responsiveness, making customers more likely to engage with your store.
3. Reduced Server Load📉: Since fragments only update specific portions of a page, server resources are used more efficiently🎢. This is particularly valuable during peak traffic times, as it helps prevent server overloads and ensures consistent performance🤖.
4. Mobile Optimization👌: Fragments play a crucial role in optimizing your WooCommerce store for mobile devices🤙🏻. By minimizing data transfers and only updating relevant parts of a page, you create a mobile-friendly shopping experience that’s fast and user-friendly🗄.

How To Make It🪄?

after we know what a fragment is, we can try to create a wordpress fragment. here is a simple flowchart of how fragments work.

This is actually a simple thing. just like creating a rest api or ajax then in it we return a response HTML file that we have cleaned up such as using php, and then we use or render it using javascript. I would like to show you how i make fragments manually using AJAX before i show you how to make it using woocommerce hook.

so, you can see in this code below this text. i insert fragment to the data parameter.

when we go to the render_fragments function you will find this code.

In this code i do render the fragments file and parsing a parameter to the template fragments file. it’s the way i make fragments manually. To make it more easy you could change the fragments structure to like this code.

when we come back to the javascript who we call this ajax/api. we can do this code to render html that we send as response.

when we get the fragments response loop the fragments and parsing the value to element who have selector same with our key.

In WooCommerce, fragments are updated using hooks and AJAX functions. WooCommerce provides a set of hooks specifically designed for updating and refreshing fragments on your store’s pages.

.cart-total are the element selector. You can change it anything you want, but make sure the element should exists in woocommerce mini cart template. We don't need to make ajax and javascripts like before when we using this hook.