Handling WooCommerce wishlist functionality in Vue.js

Building a Seamless WooCommerce Wishlist with Vue.js

Building a robust and user-friendly wishlist functionality is crucial for any e-commerce platform. It allows customers to save items they’re interested in, making their shopping experience more efficient and enjoyable. In this blog post, we’ll delve into the world of integrating WooCommerce’s wishlist functionality with Vue.js, showcasing a comprehensive approach for a seamless shopping experience.

Project Setup and Initial Considerations

Before diving into the code, let’s lay out the foundation for our project.

1. Project Setup

• Create a Vue Project: You can utilize the Vue CLI for easy project setup: vue create my-wishlist-app.
• WooCommerce Integration: Ensure your WordPress site has WooCommerce installed and set up.
• REST API: WooCommerce provides a powerful REST API for interacting with its data. We’ll be using this API to manage the wishlist functionality.

2. Key Considerations

• User Authentication: Determine how you’ll handle user authentication. For logged-in users, you can store wishlist data in their account. For guests, you’ll likely use cookies or local storage.
• Wishlist Data Storage: Decide on the method for storing wishlist data. You can use local storage, cookies, or server-side storage like WordPress databases.
• Product Information: You’ll need to retrieve product details from WooCommerce, including image URLs, prices, and other essential information.
• Wishlist Actions: Consider the features you want to include: adding/removing products, viewing wishlists, and potentially sharing wishlists.

Building the Wishlist Functionality

Now, let’s build the core functionality of our wishlist feature.

1. Create Vue Components

We’ll break down the functionality into separate Vue components for better organization and reusability.

• Wishlist Component (Wishlist.vue): This component will display the user’s wishlist, allowing them to remove items and potentially share their list.
• Product Item Component (ProductItem.vue): This component will represent each product in the wishlist, displaying essential details.
• Add to Wishlist Button Component (AddToWishlistButton.vue): This component will be placed on product pages, allowing users to add products to their wishlist.

2. Fetching Product Data

To display product information on the wishlist, we’ll use the WooCommerce REST API.

ProductItem.vue:

<template>
  <div class="product-item">
    <img :src="product.images[0].src" alt="Product Image">
    <h3>{{ product.name }}</h3>
    <p>{{ product.price }}</p>
    <button @click="removeFromWishlist(product.id)">Remove</button>
  </div>
</template>

<script>
export default {
  props: {
    product: Object
  },
  methods: {
    removeFromWishlist(productId) {
      // Implement logic to remove product from wishlist
      this.$emit('removeFromWishlist', productId);
    }
  }
}
</script>

Wishlist.vue:

<template>
  <div class="wishlist">
    <h2>My Wishlist</h2>
    <div v-if="wishlist.length === 0">
      Your wishlist is empty.
    </div>
    <div v-else>
      <product-item v-for="product in wishlist" :key="product.id" :product="product" @removeFromWishlist="removeProductFromWishlist">
      </product-item>
    </div>
  </div>
</template>

<script>
import ProductItem from './ProductItem.vue';

export default {
  components: { ProductItem },
  data() {
    return {
      wishlist: []
    };
  },
  mounted() {
    this.fetchWishlist();
  },
  methods: {
    fetchWishlist() {
      // Implement logic to fetch wishlist data from local storage or server
    },
    removeProductFromWishlist(productId) {
      // Implement logic to remove product from wishlist and update UI
    }
  }
}
</script>

3. Adding Products to the Wishlist

AddToWishlistButton.vue:

<template>
  <button @click="addToWishlist(productId)">Add to Wishlist</button>
</template>

<script>
export default {
  props: {
    productId: Number
  },
  methods: {
    addToWishlist(productId) {
      // Implement logic to add product to wishlist and update UI
    }
  }
}
</script>

4. Wishlist Data Management

We’ll store wishlist data using either local storage or cookies.

Local Storage:

// In `Wishlist.vue` or a separate helper function
fetchWishlist() {
  const wishlistData = localStorage.getItem('wishlist');
  if (wishlistData) {
    this.wishlist = JSON.parse(wishlistData);
  }
},

removeProductFromWishlist(productId) {
  this.wishlist = this.wishlist.filter(product => product.id !== productId);
  localStorage.setItem('wishlist', JSON.stringify(this.wishlist));
},

addToWishlist(productId) {
  // Fetch product details from WooCommerce API
  // Add the product to the wishlist array
  localStorage.setItem('wishlist', JSON.stringify(this.wishlist));
}

Cookies:

// Using a library like js-cookie
import Cookies from 'js-cookie';

fetchWishlist() {
  const wishlistData = Cookies.get('wishlist');
  if (wishlistData) {
    this.wishlist = JSON.parse(wishlistData);
  }
},

removeProductFromWishlist(productId) {
  this.wishlist = this.wishlist.filter(product => product.id !== productId);
  Cookies.set('wishlist', JSON.stringify(this.wishlist));
},

addToWishlist(productId) {
  // Fetch product details from WooCommerce API
  // Add the product to the wishlist array
  Cookies.set('wishlist', JSON.stringify(this.wishlist));
}

5. User Authentication

For logged-in users, you can store wishlist data in their WooCommerce account using the REST API. For guests, you’ll continue using local storage or cookies, potentially with unique identifiers to manage multiple wishlists.

Example (Logged-in Users):

// Fetching wishlist for a logged-in user
fetchWishlist() {
  const userId = this.$store.state.user.id; // Assuming you have user state in Vuex
  fetch(`${WC_API_URL}/customers/${userId}/wishlist`)
    .then(response => response.json())
    .then(data => {
      this.wishlist = data;
    });
},

// Adding a product to the wishlist for a logged-in user
addToWishlist(productId) {
  fetch(`${WC_API_URL}/customers/${userId}/wishlist`, {
    method: 'POST',
    body: JSON.stringify({ product_id: productId })
  })
  .then(response => response.json())
  .then(data => {
    // Handle success or error
  });
}

Advanced Features

• Wishlist Sharing: Implement functionality to allow users to share their wishlists with others, either publicly or privately.
• Wishlist Notifications: Implement email notifications to remind users about items in their wishlists or when items go on sale.
• Wishlist Syncing: If you’re using local storage or cookies, ensure that wishlist data is synced across multiple devices.

Conclusion

Building a robust WooCommerce wishlist with Vue.js provides a powerful and engaging shopping experience for your customers. By effectively utilizing the WooCommerce REST API and well-structured Vue components, you can create a user-friendly interface for managing wishlists, adding products, and enhancing the overall shopping journey.

Remember to tailor the implementation to your specific needs, considering factors like user authentication, data storage, and advanced features. With this comprehensive guide and the flexibility of Vue.js, you can create a truly dynamic and valuable wishlist functionality for your WooCommerce powered e-commerce platform.