This is a submission for the Wix Studio Challenge .

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

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