Elevate Your eCommerce Experience: Discover VeloShop an Innovative Wix-Powered Platform!
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-14 13:57:03


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

## What I Built
Wix Website : https://adixander07.wixstudio.io/veloshop/login

Login Credentials:
Email: nostalgicsatoshi7@imcourageous.com
Password: test

**If you wish to see all functionalities of VeloShop try to see the Bottle Product  having all functionalities as I did not feed ProductData for all Products for now.**

Initial Wireframe : [Figma Link](https://www.figma.com/design/hnNic6Z8EIbvF7ZrqQlcrQ/Untitled?node-id=0-1&t=JXYb5EM6rTUo0vE1-1 )

### VeloShop

This project aims to create an innovative eCommerce experience using Wix Studio, leveraging Wix's APIs and libraries to enhance user experience. The platform includes a dynamic product page, custom cart implementation, Authentication  and an AI-powered custom T-shirt generator, providing users with a seamless and interactive shopping experience.

### Key Features

- **Registration and Login Process**: The registration and login process is implemented using the Wix Members API, providing seamless user authentication and management And Protecting all pages if you are not authenticated.
 
- **Home Page**: The home page is designed using the Wix Members API to display member-specific content and dynamically update media sources. It showcases testimonials with navigation and handles member authentication by redirecting non-members to the registration page.

- **Catalog Page**: The catalog page leverages the Wix Data API to filter and sort products by category and price, binding product data to a repeater for easy browsing. It handles navigation to product detail pages and retrieves product data from collections.

- **Contact Page**: The Contact Page was designed directly into wix Studio Connecting it to Contact Collection that is use for storing all the people who contacted the admin.

- **Subscribe Page**: The subscribe page employs the Wix Data API , Wix CRM API and Triggered Emails to allow users to subscribe to newsletters by entering their email. It stores subscriber information in the Wix Collection and sends triggered emails to users confirming their subscription, enhancing user engagement and communication.

- **Dynamic Product Page**: The dynamic product page, built using the Wix Stores Frontend API, displays detailed product information, including descriptions, prices, SKUs, ribbons, and media items. It allows users to add products to the cart with specified options, load and display product reviews, and handle review form submissions.


- **Custom T-shirt Page**: The custom T-shirt page integrates the Wix Data API and Replicate API to enable users to generate custom T-shirt designs using AI models. It stores generated images in the 'AIImage' collection and displays them on the custom T-shirt page, allowing users to create and view unique designs easily.

- **Custom Cart**: The custom cart feature, implemented using Velo by Wix, allows for a highly personalized shopping cart experience. Users can add products, view item details, update quantities, and proceed to checkout seamlessly. This custom solution ensures flexibility and enhanced user control over their shopping experience.

- **Chatbot**: The custom Chatbot feature implemented using Yourgpt.ai and trained on wix sites to give personalized responses based on user's input.

## Demo

Try It out Now : https://adixander07.wixstudio.io/veloshop/login

Login Credentials:
Email: nostalgicsatoshi7@imcourageous.com
Password: test

If you wish to see all functionalities of VeloShop try to see the Bottle Product  having all functionalities as I did not feed ProductData for all Products for now.

In The video the AI Image is not generated because of this as I published my code on github the token was disabled but now i have changed token and you can use it.

![AI Image Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1yyakls6dop5g1nsz03.png)


{% embed https://youtu.be/_p746QcUBME %}

**Some of the files on github are empty as I did not use custom templates of wix store and members**

{% embed https://github.com/AdityaGupta20871/veloshop
 %}

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nine2ain8lnwcu6z8y1y.png)


![Custom Tshirt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruacmqjxinrr3q38mf1j.png)



![Subscribe Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2hu0wpkf4kruv2631x5.png)


![Catalog Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wswnw70zt2x06g2wzf8a.png)


![Contact Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyatf0sa03spvmd39c62.png)


![Product Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn0cvtt2vhbyihmbc1ri.png)



## Development Journey
My development journey began two days after the challenge announcement. To organize my thoughts and vision for the website, I started by creating a wireframe on Figma. This initial step helped me to clearly define what I wanted to achieve with my website. Then, I moved on to developing on Wix Studio, initially installing Wix Stores and Members to leverage their prebuilt collections.

As my journey progressed, I began using my own collections, becoming comfortable with features like the Multireference Field. For the APIs, I started with the Auth APIs and then transitioned to using Wix Data for displaying product data. This was followed by implementing the Stores API to display products and a custom cart.

I initially intended to use the eCommerce API but due to some errors and time constraints, I decided to stick with the Stores API, which allowed only the admin to add products. Then, I had the idea of creating custom T-shirts with AI-generated images. I was inspired by Ania Kubow's YouTube video on ChatGPT, but I faced the obstacle of having no credits left in my OpenAI account.

That's when I discovered Replicate, which offers free usage for a limited period. I ran the AI-forever/kadinsky model on it and created the custom T-shirt page, although much work is still pending, like the add-to-cart feature. I used Wix Secrets to store the API key for Replicate. Additionally, I set up triggered emails and a subscribe page that sends an email to users who subscribe.

Throughout this journey, I faced numerous errors, but Anthony was incredibly helpful with his expertise on Wix, and I owe him a huge shoutout for conducting this challenge and guiding a complete beginner like me in creating a wonderful Wix website. This is my third dev challenge, and here are the links to my previous projects.

🛠️ Development Milestones:

- Figma wireframing
- Initial setup with Wix Stores and Members
- Transition to custom collections and fields
- Auth API, Wix Data, and Stores API implementation
- Custom cart development
- AI-generated custom T-shirt page using Replicate
- Triggered emails and subscribe page setup
- AI Chatbot implemented using yourgpt.ai

👨‍💻 Shoutout to @anthonywix and WixWiz YT channel : Thanks for your superpowers and guidance throughout this challenge!

🚀 Previous Dev Challenges: [GymBuddy](https://dev.to/dailydev/empowering-fitness-with-twilio-your-personal-gymbuddy-for-seamless-communication-and-progress-tracking-147i) [Yogify](https://dev.to/dailydev/yogify-your-yoga-community-builder-app-jb5)



<!-- Which APIs and Libraries did you utilize? -->
- Wix Members API: Used for implementing the registration and login process.
- Wix Data API: Utilized for displaying product data and managing collections.
- Wix Stores API: Employed for displaying products and implementing a custom cart.
- Wix Secrets: Used to securely store the API key for Replicate.
- Replicate API: Used for generating AI images for the custom T-shirt page.
- Wix Location API: Used for handling navigation and URL routing.
- Wix CRM API: Utilized for triggered Emails.
- Wix Ecommerce: Tried Transitioning from wix stores to e-commerce api.

<!-- Don't forget to add a cover image (if you want). -->

<!-- Thanks for participating! →