Alpha Wolf Gear - Adventure Sports eCom on Wix Studio

This is a submission for the Wix Studio Challenge .

What I Built

I created an innovative and interactive eCommerce experience using Wix Studio. The project includes several features designed to enhance the user experience on an eCommerce platform. These features include a dynamic product showcase, wishlist functionality, product reviews, product shuffling, and a custom products page with a unique design approach. Below is a detailed overview of each feature and how they were implemented.

Demo

https://maveristic.wixstudio.io/aplha-wolf-gear

Development Journey

Leveraging Wix Studio's JavaScript development capabilities, I developed various features to create a seamless and interactive eCommerce experience.

1. Dynamic Product Showcase Section for Wireless Earbuds
This section allows users to select from four color options (black, blue, green, and red) for wireless earbuds. The background color of the section changes based on the selected color, and users can add the product directly to their cart.

Code Overview:

• Fetching product details using wixData.get from the Stores/Products dataset.
• Displaying product details dynamically.
• Setting up color options using a repeater and handling color selection to change the background color and update the product image.
• Adding the product to the cart using the cart.addProducts API from wix-stores.

2. Wishlist Functionality
Users can add products to their wishlist and view their wishlist items. The wishlist is personalized for each user and dynamically displays the products they have added.

Code Overview:

• Querying the products-wishlist collection to fetch wishlist items for the current user.
• Filtering the Stores/Products dataset based on the fetched product IDs.
• Displaying wishlist items in a repeater and handling actions such as removing items from the wishlist.

3. Product Reviews
Users can submit reviews for products, including a rating (via emoji) and review text. Reviews are displayed dynamically for each product, with the ability to store and retrieve reviews from the ProductReviews collection.

Code Overview:

• Submitting reviews with ratings and review text.
• Fetching and displaying reviews for each product.
• Handling user interactions with the emoji repeater for rating.

4. Product Shuffling Section
This unique section allows users to shuffle through products randomly. Users can start and stop the shuffling process, and four random products are displayed at a time. This creates an engaging and dynamic product browsing experience.

Code Overview:

• Shuffling products from the Stores/Products dataset and displaying them in a repeater.
• Implementing start and stop functionality for the shuffling process.
• Dynamically updating the repeater data to show random products.

5. Custom Product Page
A custom products page was created with a unique design approach. This page dynamically loads product details, including images, descriptions, pricing, and additional information. It also integrates color options, a shopping cart, and other interactive features to enhance the user experience.

Code Overview:

• Fetching product information using wixData.get from the Stores/Products dataset.
• Displaying product details including a dynamic image gallery, product options, and additional information sections.
• Handling user interactions such as selecting product options and adding items to the cart.

Challenges Faced

1. Setting Up the Wishlist
We faced a specific challenge in setting up the wishlist as we were not able to create a reference field in the dataset. To overcome this, we stored the Product ID in a text field and then converted it to a string. We fetched the product ID from the Stores/Products dataset to add the product to the user's wishlist catalog.
Solution:
By storing the Product ID as a string in the products-wishlist dataset and then using this string to filter and match products in the Stores/Products dataset, we were able to dynamically fetch and display the correct wishlist items.

2. Handling Product Reviews
Storing and displaying product reviews dynamically posed a challenge as we had to ensure that the reviews were correctly associated with the respective products. This was managed by storing the product ID as a text field in the ProductReviews dataset and matching it with the product ID from the Stores/Products dataset during the fetch operation.
Solution:
We ensured that the product ID was stored as a string in the reviews and matched it correctly during the fetch operation to display the relevant reviews for each product.

3. Implementing Product Shuffling
A unique challenge was to implement a product shuffling feature that dynamically displays random products in a repeater. Ensuring that the shuffling stops after a certain time or when a stop button is clicked was crucial for enhancing user interaction.
Solution:
By setting up an interval for shuffling products and allowing users to start and stop the shuffling process, we were able to create an engaging and dynamic browsing experience.

APIs and Libraries Utilized

• Wix Data API: For fetching and updating product details, color options, wishlist items, and reviews.
• Wix Stores API: For managing the shopping cart and enabling direct purchase functionality.
• Wix Users API: For handling user authentication and personalizing wishlist and review functionalities.
• JavaScript: To handle interactions, update UI elements dynamically, and manage the overall functionality of the eCommerce platform.