Infamous Guitars: Wix Studio 'Make an Offer' eCommerce Website using Wix Velo

#devchallenge #wixstudiochallenge #webdev #javascript

This is a submission for the Wix Studio Challenge .

What I Built

Visit Site
'Make an Offer' eCommerce website with an immersive user audio experience. This fictional store 'Infamous Guitar' sells authenticated guitars and memorabilia, with one-off items, where customers can read about the history of the item, be immersed and reminded of the artists music & biography, and make an offer on the high ticket memorabilia. Opposed to a warehouse style store, this website has a bespoke experience reflecting the truly one-off and special nature of the product offered.

Feature Overview

Note: this site is fully functional with all features from members sign-up to checkout (final checkout step to place order is restricted for demo). All features built with native Wix elements and Wix velo; audio from Spotify API.

Customers can submit an offer on a product or purchase at full price.
Detailed triggered emails for offers received, accepted, rejected.
Validation for offer minimum & maximum
Auto-accept offers above store owner defined value
Accepted offers time expiry (15 minutes for demo), with countdown
Realtime updates on offer status, and when another member submits and offer.
Member 'My Offers' account page, with realtime updates.
'Offer Manger' dashboard for store owners with filtering and realtime updates (made available in demo site front end for challenge purposes)
Checkout to offer value, restricted to specific member account (validation SPI)
Immersive and rich user shopping experience, with Spotify Audio
Custom built full width slideshow with audio experience

Demo

Submission Site: Infamous Guitars

Bespoke Audio Slideshow and Storefront

Product Page - Make an Offer

Email Notifications

Realtime Status Updates

Checkout Template

'My Offers' Member Area

'Offer Manager' Store Owner Dashboard Demo

Development Journey

My Brief

My personal brief was to 1. do something novel with Wix eCommerce and 2. Build a bespoke eCommerce experience. Wix Stores products have a fixed price, so for a novel eCommerce challenge, I decided to create 'make an offer' functionality as this is not a current feature of Wix Stores. In the spirit of the Dev Challenge, for the bespoke experience, I built the entire UI, not using any eCom widgets.

I have a great passion for music (and the particular artists included in the demo!), so it was loads of fun to build! Music evokes deep memories and connections, although a fictitious store, I wanted to show how web design and development skills could create the user experience of "I love this song", and how that enhances the product offering and adds value to the business.

Make an Offer and eCom

Satisfying the customer being able to checkout with their offer value, when an offer is accepted, a coupon is created for the product (Wix Marketing API), to the exact value discount, single use, and a set expiry date. A checkout template (Wix eCom API) is created with the product, discount code applied and locked and the user is navigated to this checkout URL. Using checkout templates streamlines the user experience to purchase, reducing any cart steps, avoiding quantity display (one-off products) and allows for restricting checkout capability (locked coupon code). Although not in the Dev challenge scope, I included a validation SPI to restrict coupon codes to a member - as a safe guard mitigation against customers sharing an offer. Wix marketing coupons cannot currently be set to a particular site member - the coupon settings and checkout restrictions are additional mitigations.

With this method, the product price (and discounted price) is set at the highest value in Wix Stores, allowing a customer to directly purchase without offer and then any offer is simply a calculated 'amount' discount coupon.

Audio and Controlling UX

The audio was a particular challenge encountered. Wix Studio does not have a Spotify Widget (as Classic Editor) and complying with licence/attribution I could not simply load audio files in the audio player. Additionally, an HTML embed was not permitted in this Dev Challenge. Therefore the site uses Spotify Web API (Wix Secrets API, Wix Fetch API) to get compliant 'preview tracks' (30 seconds) for artists, attributed to Spotify with required backlink and the audio player controlled with velo. *see footnote on the 'audio journey'

With the bespoke and immersive vision, I wanted to use a slideshow to display the rich content and build this audio experience across the artists. Wix slideshow repeater does not have controllable API's e.g. detecting or controlling a slide change. Therefore I build a bespoke full width and responsive slider using Wix elements and Wix Animations API. This allows the control of playing the audio, with a custom fade in and fade out. Play/pause/stop velo functions on the audio player immediately stops/starts the music and I wanted a nicer user experience. With this custom build I am able to have my slideshow timer controlled, manually controlled, and constructed neatly with the audio transitions.

Apps, APIs and Libraries

Wix Stores App (& App Events)
Wix CMS (& Data Hooks)
Wix eCom API
Wix Marketing API
Wix CRM API
Wix Members API
Wix Realtime API
Wix Data API
Wix Secrets API
Wix Fetch API
Wix Animations API
Wix eCom V2 SPI (eCom Validations)
Wix Storage API
Spotify Web API

Developed by Duncan Simpson, solo and wholly original project. Phoe Design

All imagery attributed to creative commons owners, and thanks to them. The site is greatly enhanced with 'real' artists.

Footnote - the Audio Journey

Originally, to comply with content and audio licencing, I was going to use creative commons music, attribution and stock images. A massive thanks to my Dad for spending a day listening to and gathering creative commons music, although not used in the end, his support was greatly appreciated! With the greatest of respect for those artists and suppling music in the commons, the content was not enhancing and delivering the experience I dreamed of - this inspired revisiting how to achieve 'commercial' and famous (at least in my vinyl collection!) audio; endeavouring to work with Spotify Web API - adding to the wealth of 'Dev' used in the project! Spotify does not provide a preview for all tracks and artists, presenting another challenge, and sadly a few of my favourite artists had to be missed.