ShopEase
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-13 00:20:22

*This is a submission for the [Wix Studio Challenge ](https://dev.to/challenges/wix).*


## What I Built
 I built a fully functional e-commerce website called ShopEase using Wix Studio. ShopEase focuses on promoting and selling eco-friendly products, specifically reusable bags. The website features a dynamic homepage with sections for featured products, promotional banners, and seamless navigation.

## Demo
https://swetakanguri.wixsite.com/shopease

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ai234lq9ie4o3xi7bm1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvuomq74la4zpyb1xb1o.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36xr4kwa5j22hyyy92z5.png)


## Development Journey
 Leveraging Wix Studio’s JavaScript Development Capabilities
I utilized Wix Studio's powerful JavaScript capabilities to enhance the functionality and interactivity of the ShopEase website:

Custom JavaScript Functions: Implemented custom JavaScript to add interactive elements such as hover effects and dynamic content updates.

javascript
Hover Effects for Banner Text:

javascript
Copy code
// Change banner text on hover
$w.onReady(function () {
    $w("#bannerText").onMouseIn(() => {
        $w("#bannerText").text = "Don't Miss Out - Limited Time Offer!";
    });

    $w("#bannerText").onMouseOut(() => {
        $w("#bannerText").text = "Summer Sale - Up to 50% Off";
    });
});
This script changes the text of #bannerText when a user hovers over it, providing dynamic content based on user interaction.

Dynamic Product Listing:

javascript
Copy code
// Fetch and display product data dynamically
import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query("Products")
        .find()
        .then((results) => {
            let items = results.items;
            items.forEach((product) => {
                // Display product details on the page
                $w("#productList").append(`<div>${product.name} - $${product.price}</div>`);
            });
        })
        .catch((error) => {
            console.log("Error fetching products: ", error);
        });
});
This script fetches product data from a collection named "Products" and dynamically displays each product's name and price on the website.

Navigation Menu Activation:

javascript
// Activate navigation menu item based on current page
$w.onReady(function () {
    let currentPage = window.location.pathname;
    $w("#navMenu").forEach((menuItem) => {
        if (menuItem.link === currentPage) {
            menuItem.activate();
        }
    });
});
This script activates the navigation menu item that corresponds to the current page URL, providing visual feedback to users about their current location on the site.

// Example: Change banner text on hover
$w.onReady(function () {
    $w("#bannerText").onMouseIn(() => {
        $w("#bannerText").text = "Don't Miss Out - Limited Time Offer!";
    });

    $w("#bannerText").onMouseOut(() => {
        $w("#bannerText").text = "Summer Sale - Up to 50% Off";
    });
});

## APIs and Libraries Utilized
Wix Velo (Corvid): Leveraged for custom JavaScript development, enabling advanced interactions and data handling.
Wix Editor: Used for visual customization and layout design.
Wix Stores API: Integrated to manage product data and display information on the website 
import wixStoresBackend from 'wix-stores-backend';

// Example function to fetch products from Wix Stores API
async function fetchProducts() {
    try {
        // Query products using Wix Stores API
        const products = await wixStoresBackend.products.query()
            .limit(10) // Limit the number of products returned
            .find();

        // Process the products data
        products.items.forEach(product => {
            console.log(`Product Name: ${product.name}, Price: ${product.price}`);
            // Further processing or display logic can be added here
        });

        return products.items; // Return the products array if needed
    } catch (error) {
        console.error('Error fetching products:', error);
        throw error; // Handle or rethrow the error as needed
    }
}

// Example usage
fetchProducts()
    .then(products => {
        // Handle products data as needed
        console.log('Fetched products:', products);
    })
    .catch(error => {
        // Handle errors
        console.error('Error fetching products:', error);
    });


## Team Submissions: https://dev.to/sweta_kangurisonulkar_ published the submission and credit Sweta Kanguri Sonulkar