DEV Community: Marc

Hiding WooCommerce Cart when empty by Enqueueing JavaScript

Marc — Mon, 13 Jan 2025 02:49:00 +0000

WooCommerce is a powerful, open-source eCommerce plugin designed for WordPress that transforms your website into a fully functional online store. Its user-friendly interface and extensive library of customizable themes and plugins make it an ideal choice for businesses of all sizes, whether you're launching a small boutique or a large-scale retail operation.

One common challenge developers face is hiding the cart icon when the cart is empty. It's surprising how frequently this issue comes up, given its simplicity, but here's why it happens:

WooCommerce uses dynamic data to control how the cart icon displays. If there are items in the cart, WooCommerce updates the cart element dynamically using a data attribute, such as data-cart-items-count. However, this dynamic update creates a timing issue. For example, you might add a CSS rule like:

[data-cart-items-count="0"] { display: none; }

But the cart icon still briefly appears before the data attribute updates, leading to an undesirable flicker.

The Solution: JavaScript!

To solve this, we need JavaScript to dynamically control the cart's visibility. Since WordPress relies on enqueuing for loading scripts properly, here's how you can implement the solution:

Step 1: Enqueue Your JavaScript

In your theme's functions.php file, add the following code to enqueue your custom JavaScript file:

function enqueue_custom_script() {
    wp_enqueue_script(
        'custom-cart-script', // Handle name
        get_stylesheet_directory_uri() . '/path/to/js/script.js', // Path to the JS file
        array('jquery'), // Dependencies
        '1.0.0', // Version
        true // Load in the footer
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Make sure the file path matches your theme's structure.

Step 2: Add the JavaScript Code

In the JavaScript file you just enqueued, add the following code:


document.addEventListener('DOMContentLoaded', function () {
    const miniCart = document.querySelector('.wc-block-mini-cart'); // Update selector as needed

    if (miniCart) {
        // Initially hide the mini-cart
        miniCart.style.display = 'none';

        const updateVisibility = () => {
            const itemCount = miniCart.getAttribute('data-cart-items-count');
            miniCart.style.display = itemCount === '0' ? 'none' : 'block';
        };

        // Run the visibility check on page load
        updateVisibility();

        // Monitor changes to the mini-cart for dynamic updates
        const observer = new MutationObserver(updateVisibility);
        observer.observe(miniCart, { attributes: true, attributeFilter: ['data-cart-items-count'] });
    }
});

How It Works

The script waits for the DOM to fully load.
It selects the cart icon (update the selector to match your theme's cart element).
Initially, the cart is hidden.
The updateVisibility function checks the data-cart-items-count attribute and toggles the cart's visibility.
A MutationObserver watches for attribute changes to dynamically update the cart as needed.
With this setup, your cart icon will only appear when there's at least one item in the cart, eliminating the flicker issue caused by delayed data updates.

Let me know if this helped you! I'd also love to hear what kind of WooCommerce sites you're building and how you're using this fantastic plugin.

MERN STACK Boiler Plate

Marc — Tue, 14 Nov 2023 06:01:06 +0000

The MERN stack is like a dream team for building web apps. It includes MongoDB for data storage, Express.js for the server, React for the front-end, and Node.js to tie everything together. It's a popular choice among developers for creating web applications.

I previously wrote an article about dynamically rendering data onto a travel map which, will not necessary to read before this one, really showcases the fun visuals we can create in modern web development.

Today, I'm going to go through the project technologies.

Here are the four languages that we will use within the MERN Stack.

MongoDB Database: First, get your MongoDB database up and running. It's like the digital warehouse where your data will live. Make sure you have it installed and configured.

Express.js Server: Next, create your Express.js server. Think of it as the traffic cop that handles requests and serves data from your MongoDB database.

React Front-End: Now, it's time to build the React front-end. This is what your users will see and interact with. Create your components and design the user interface.

Node.js Glue: Node.js plays the role of glue here. It connects your React front-end to the Express.js server. It's like the wiring that makes everything work together.**

Now that might seem like a whole load of jargon to process, but just think of each of these as main missions filled with side quests that will level you up into a full stack demi-god.

MongoDb Database
MongoDB is like the chef in the kitchen, expertly preparing your data, but it doesn't have a Chrome extension you can magically whip up in your browser. It's more like the secret sauce behind the scenes.

To interact with MongoDB, you'd need to play the role of the customer at a restaurant. You don't create the restaurant or the chef; you visit it. Your web browser is like the restaurant, and MongoDB tools are the menu that lets you order, view, and manage your data. So, you can't create MongoDB in Chrome, but you can definitely dine at the MongoDB restaurant with the help of web-based tools.

Express.js server
Your Express.js server is like the conductor of a symphony in the world of web development. It acts as the stage manager, orchestrating the flow of your web application. Just as a stage manager sets the scene, Express.js prepares the environment for your app to shine. It's the traffic cop ensuring that requests find their way to the right destinations and fetching the necessary data from the MongoDB database, like actors retrieving props. Express.js creates the scenes, or routes, where the action unfolds, and it handles the applause by serving responses back to the audience, your users. It's like a theatre in constant rehearsal, making sure everything runs smoothly, and just like a conductor keeps the show going, Express.js ensures your web app operates seamlessly, delivering the experience your users deserve. It's the maestro of your web application's performance.

CREATE-REACT-APP
Creating a React app using Create React App (CRA) is like painting a masterpiece on a digital canvas. It all begins with a blank canvas, and CRA is your virtual easel and paintbrush. With a simple command, you set up your creative workspace. Imagine you're an artist who picks up their favourite set of brushes (in this case, TypeScript) to start bringing your ideas to life. The components you design are like the vibrant colours on your palette, each with its unique role in your visual story. As you shape your user interface, it's akin to crafting a captivating composition. Just as artists draw inspiration from the world around them, you gather ideas from the digital landscape to create a web application that's both visually appealing and user-friendly. CRA takes care of the technical intricacies, allowing you to focus on the artistic side of web development. It's a platform that empowers you to paint your digital dreams, one pixel at a time.

Node.js
Node.js, the glue of your MERN stack web application, is like the bridge that connects two magical islands: your Express.js server island and your React front-end island. It's the mythical storyteller who weaves a tale connecting these distinct worlds. Just as a bridge links two lands, Node.js bridges the server and the front-end, ensuring they speak the same language and share data harmoniously. It's like the wiring in a complex machine, making sure that all the cogs and gears run smoothly. Think of it as a unifying force that binds your web app together. Just as a masterful chef combines various ingredients to create a delightful dish, Node.js mixes your server logic and front-end magic to serve a delectable user experience. It's the bard of your web development saga, harmonizing your MERN stack components into a beautiful, functioning whole.

Your MERN stack journey is a thrilling quest where MongoDB serves as the silent powerhouse, Express.js takes the director's chair orchestrating the web symphony, React paints a vivid canvas with TypeScript as its brush, and Node.js emerges as the master storyteller weaving connections between server and front-end islands. This dream team transforms web development into a captivating adventure, with each technology playing a vital role. MongoDB is the secret sauce, Express.js is the orchestrator, React is the artistic palette, and Node.js is the unifying force. Together, they create a seamless and enchanting digital experience, turning you into a full-stack demi-god on this exciting mission filled with coding quests.

Dynamic Data rendering with react-simple-maps

Marc — Sun, 10 Sep 2023 04:50:23 +0000

They say that an image is a thousand words, but when you have a thousand images you will need to come up with interesting ways to display them. So here's what I've come up with:

It's a travel map component that is part of a larger MERN Stack app, developed with Typescript. It displays markers for various European countries using the react-simple-maps library. To install with NPM, use:

npm i -S react-simple-maps

Let's break down the three main files we will use:

File 1 (markers.ts):
Within the first file, markers.ts we have defined an array called markers. Each element in the array represents a geographical marker for a European country. These markers have properties like coordinates (latitude and longitude), fill color, and text labels, which are essential for rendering on the map.

const markers = [
    { coordinates: [-3.1883, 55.9533], fill: "#F53", text: "Scotland" },
    { coordinates: [-1.7278, 53.5074], fill: "#05C", text: "England" },
    { coordinates: [-8.2603, 53.3498], fill: "#0AC", text: "Ireland" }
    // Add more coordinates for other European countries here
  ];

  export default markers;

File 2 (TravelMap.tsx):
Now, moving on to TravelMap.tsx. This is the main React component responsible for rendering the travel map. It imports data from other files, including travelmapdata.tsx and markers.ts. It uses the react-simple-maps library for map rendering. The component is divided into two columns, where the left side displays some information about the map, and the right side shows the actual map itself.

The react-simple-maps comes out the box pretty basic , but has a lot of room to work with. I've posted a link at the bottom of this article to their "Getting Started" section so you can try as well! All the code you need to get the map to appear is as follows:

import React from "react"
import { ComposableMap, Geographies, Geography } from "react-simple-maps"

const geoUrl =
  "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json"

export default function MapChart() {
  return (
    <ComposableMap>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography key={geo.rsmKey} geography={geo} />
          ))
        }
      </Geographies>
    </ComposableMap>
  )
}

Easy. There is a few different features that you can use straight away such as 'Annotation' and 'Graticule', however the one that I was most interested in was 'Marker'. It allows you to place a circle on a coordinate of your choosing. And if you will recall, I have created a whole file full of coordinates that I wish to use.

Which brings us along to our 3rd file:

File 3 (TravelMapData.tsx):
This component handles data fetching and processing. It uses Axios to make HTTP requests to retrieve image data related to travel. It then counts the number of images associated with each country and passes this data to the main map component (TravelMap.tsx).

useEffect(() => {
    axios
      .get<ImageData[]>("http://localhost:5000/images/")
      .then((response) => {
        // Count occurrences of each country
        const countryCounts: { [key: string]: number } = {};
        response.data.forEach((data) => {
          if (data.country in countryCounts) {
            countryCounts[data.country] += 1;
          } else {
            countryCounts[data.country] = 1;
          }
        });

This if else condition is looking for the same country name to appear. We need this to work otherwise every country will only appear as if they have 1 photo taken there.

        // Convert the countryCounts object to the array of CountryData
        const uniqueCountriesData: CountryData[] = Object.keys(countryCounts).map(
          (country) => ({
            country,
            count: countryCounts[country],
          })
        );

        // Call the prop function with the uniqueCountriesData
        onCountryData(uniqueCountriesData);
        setIsLoading(false); // Data has been fetched, so set isLoading to false

      })
      .catch((error) => {
        console.log(error);
      });
  }, []); // Add onCountryData as a dependency for useEffect

 if (isLoading) {
    return <p>Loading...</p>; // Display a loading message while fetching data
  }

I added the isLoading state as a large project may have thousands of images and this would be better to implement that to have a bare map on display!

A CRUD app has been created, which allows the user to upload images to the website and give them a location and title.

For each image is uploaded to the site, a snippet of data is saved in a MongoDB database that will look like this:

{
"_id":{"$oid":"646c6bc493d04bd54d458413"},
"src":"0ed50ffd-a196-4c28-9d1e-9e3c30579c76-1684827076823.jpg",
"width":{"$numberInt":"150"},
"height":{"$numberInt":"150"},
"country":"Scotland",
"subregion":"East Kilbride",
"caption":"Skateboarding",
}

Here we have a unique ID for all images, then the end of a URL that will join onto a web address for the image stored. I have also chosen to include "width" and "height" in my data, however that is for a masonry image gallery that is on another section of this app (I will write an article about that if people are interested!). "country" is probably the most important field here for us and we will see further down where it comes into play with out code. "Subregion" and "caption" are for aesthetic purposes as well.

If you don't want the hassle of creating a MongoDB and backend to manage this, you can copy the text above and save it in a separate file with other dummy data. This will allow you to work along with this article. I won't be going over the CRUD app in this post, but I can make another article about it if people are interested. The purpose of this article is to talk about the code that visualises travel data, specifically the number of photos taken in each country.

So, we can go back to our second file travelmap.tsx. We have our coordinates, we have our images and their data being fetched from our API, now we just have to display them. Let's look at how I've done this.

<ComposableMap
            projection="geoMercator"
            projectionConfig={{
              scale: 775,
              center: [0, 54], // Center of the map on initial load
            }}
            width={800}
            height={700}
          >
            <Geographies geography={geoUrl}>
              {({ geographies }: any) =>
                geographies.map((geo: any) => (
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                    fill="#355233"
                    stroke="#3C629E"
                  />
                ))
              }
            </Geographies>

            {/* Render Markers for each country */}
            {uniqueCountryData.map((countryData) => {
              console.log("Rendering Marker for:", countryData.country);
              const marker = markers.find(
                (marker) => marker.text === countryData.country
              );

              if (marker) {
                return (
                  <Marker
                    key={countryData.country}
                    coordinates={marker.coordinates}
                  >
                    <circle r={countryData.count.toString()} fill={marker.fill} />
                    <text
                      textAnchor="start"
                      y={-15}
                      x={5}
                      style={{ fontFamily: "Roboto, sans-serif", fill: "#fff", fontWeight:'bold' }}
                    >
                     {marker.text}

                    </text>
                    <text x={5} style={{ fontFamily: "Roboto, sans-serif", fill: "#A0BCEB", fontWeight:'lighter' }}> Photos: {countryData.count.toString()}
                    </text>
                  </Marker>
                );
              }
              return null;
            })}
          </ComposableMap>

So here, we have as the root element for the rendering map. It uses 'projection' to specify the type of map that will display. The map uses 'scale' to control how zoomed the map is initially and 'center' determines the centre point of the map when it loads. Here, it's set to [0, 54], which means the map will be centred on the latitude 54 and longitude 0.

is used to render the geographical shapes on the map based on the data provided by the geoUrl. It fetches the geographical data from the specified URL and renders the shapes accordingly.

{({ geographies }: any) => ... }:

This is a function that takes the geographies object as a parameter. It's used to map over each geographical shape and apply rendering logic to it.

Within the geographies.map function, for each geographical shape (geo), a component is rendered.
key is set to geo.rsmKey to ensure React can efficiently update and re-render the components.
geography specifies the shape to render.
fill sets the fill color of the geographical shape.
stroke sets the stroke (border) color of the geographical shape.

 {uniqueCountryData.map((countryData) => { ... })}:

This section iterates over the uniqueCountryData array, which contains information about the countries and the number of photos taken in each.
Inside the mapping function:

It logs a message to the console for each country being processed, which can be useful for debugging.
It searches for a corresponding marker in the markers array using the countryData.country as a reference.
If a matching marker is found, a component is rendered to place a marker on the map at the specified coordinates.

is used to render a marker on the map.
key is set to countryData.country to uniquely identify the marker.
coordinates specifies the latitude and longitude where the marker should be placed.

Inside a element is used to create a circular marker with a radius (r) proportional to the number of photos taken in that country. The more photographs, the larger the circle! It's important that (r) is represented as a string rather than a number, as the will not render at the correct size if (r) is a number. If it is I'm not sure why it won't accept a number instead of a string, and all my Google searches have yielded no results. If you know the reason, please leave a comment below!

Finally, we have two elements are used to display the country name and the count of photos next to the marker. And this is what we get when all the code works together:

I hope this has inspired you to see what you can come up with the react-simple-map. I think it might have to change its name now as its not so simple anymore!

This is part of an ongoing project that I am working on. I will have a working link to the whole site once I get a server up and running. If you have any questions about this, or would like to know more please reach out to me! I've linked the Git repo below, as well as the docs for react-simple-map.

Conclusion

We've delved into the world of code-driven map visualization using the react-simple-maps library. By dissecting geographical markers, data retrieval, and dynamic rendering, we've crafted an immersive travel map.

As you venture into your coding projects, remember that react-simple-maps is a powerful tool for creating interactive maps with your data. Whether it's displaying travel memories or visualizing complex datasets, this library provides the foundation.

I hope this article has equipped you with the knowledge to embark on your coding adventures. For a deeper dive into the code, explore my GitHub repository. And for more insights and resources, consult the react-simple-maps documentation linked below.

Happy coding, and may your projects thrive with innovative map-based solutions!

Github
React-Simple-Maps