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);
});