Kutter Discount Wars: A videogame based e-commerce experience.
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-13 17:11:52

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


## What I Built
<!-- Share an overview about your project. -->

Kutter Discount Wars offers a videogame based e-commerce experience.

Users play a simple alien-caterpillar invasion game and their play score determines the discount they'll get on all purchases in the store.

The discounts will range from 0 - 25%, depending on the user's play score.

The higher the user scores, the higher the discount.

After a user is done playing the game, a discount coupon is generated and the user can "Proceed to Shopping" on the Wix shop and checkout using that coupon.

## Demo
<!-- Share a link to your Wix Studio app and include some screenshots here. -->

PLAY GAME, GET COUPON & PROCEED TO SHOPPING on Wix Shop.

WEB STUDIO SITE DEMO: https://vakinduphilliam.wixstudio.io/kutterwars

PLAY GAME & GET COUPON: https://vpengine.github.io/KutterWars/index.html



_**The Game Screenshots:**_

![Start Game Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phjwr2dtscrncduyq4g2.png)


![Game Play Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl44ydtgq2hn08i7u744.png)


![Discount coupon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kulxogxmzt7sp4ppayn.png)

_**Kutter Wars Shopping Cart Screenshots:**_

![Choose Items to Buy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iep7on0pxcd71sly1n2k.png)


![Items in a cart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu7477gt3mjiu9db7pzo.png)


![Items in Cart checkout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz529fv6xpwq2fpavczw.png)

## Development Journey
<!-- Tell us how you leveraged Wix Studio’s JavaScript development capabilities-->

The frontend videogame is built using JavaScript and HTML.
 
The shopping experience is built using Wix Studio, and the Velo JavaScript APIs.

<!-- Which APIs and Libraries did you utilize? -->

We used the following Wix Velo APIs, Functions and Packages: 

> addProducts() - Add product to Cart, 
> getProduct() - Capture product details,
> getQuantity() - Capture product stock quantity,
> removeProduct() - Remove product from cart,
> updateLineItemQuantity() - Update cart item quantity, 
> onChange() - Cart changed event,
> applyCoupon() - Cart coupon discount,
> removeCoupon() - Remove discount coupon,
> wixLocationFrontend.url - To capture current page url,
> wixStorageFrontend.setItem - To store local browser data.
> wixStorageFrontend.getItem - To retrieve local browser data.
> wixStoresFrontend - Interact with store items.


Add product to Cart button code: addProducts():

```
import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

$w("#myButton").onClick((event) => {

let targetId = event.target.id; // "myProductId"

// Capture product id using getProduct()
let productId = $w(`#${targetId}`)
.getProduct()
.then((product)=>{
    return product._id;
})
.catch((error)=>{
    return null;
});

// Capture product stock quantity using getQuantity()
let itemQuantity = $w(`#${targetId}`)
.getQuantity()
.then((productQuantity)=>{
    return productQuantity;
})
.catch((error)=>{
    return null;
});

let products =[{
    productId: productId,
    quantity: itemQuantity
}];

// Add product to cart using addProducts()
cart
.addProducts(products)
.then((updatedCart)=>{
    // products added to cart
    const cartId = updatedCart._id;
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    // products not added to cart
    console.error(error);
});

});

// });

```

Remove product from cart code: removeProduct():

```
import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

const cartLineItemId =3;

cart
.removeProduct(cartLineItemId)
.then((updatedCart)=>{
    // product removed
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    // products not removed
    console.error(error);
});

// });

```

Update cart item quantity: updateLineItemQuantity():

```

import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

const cartLineItemIdx =2;
const quantityx = 10;

// Update cart item quantity using updateLineItemQuantity()
cart
.updateLineItemQuantity(cartLineItemIdx, quantityx)
.then((updatedCart)=>{
    // cart line item quantity updated
    const cartId = updatedCart._id;
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    // products not added to cart
    console.error(error);
});

// });

```

Cart coupon discount code: applyCoupon():

```

import {cart} from "wix-stores-frontend";
import {local} from "wix-storage-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend, wix-storage-frontend

// $w.onReady(function () {

var discount = local.getItem("discountNumber");
var discountCoupon = local.getItem("discountCoupon"); // Coupon obtained from game play

const couponCode = discountCoupon; // For example, KutterGame-15 means value of discount is at 15%

cart
.applyCoupon(couponCode)
.then((updatedCart)=>{
    const couponDiscount = updatedCart.appliedCoupon.discountValue;
})
.catch((error)=>{
    console.error(error);
});

// });

```

Remove discount coupon code: removeCoupon():

```

import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

cart
.removeCoupon()
.then((updatedCart)=>{
    const cartId = updatedCart._id;
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    console.error(error);
});

// });

```

Capture discount and coupon from URL parameters:

```

//var urlString ="https://vakinduphilliam.wixsite.com/kutter-wars?d=7&c=KutterGame-7"; // Example URL
import wixLocationFrontend from "wix-location-frontend";
import {local} from "wix-storage-frontend";
// INSTALL NPM PACKAGES: wix-storage-frontend, wix-location-frontend

// $w.onReady(function () {

var urlQuery = wixLocationFrontend.query; // get url query

// Get parameter values
var discount = urlQuery.d;
var coupon = urlQuery.c;

if(discount =='' || coupon == '' || typeof discount == 'undefined' || typeof coupon == 'undefined'){

local.setItem("discountNumber", 0);
local.setItem("discountCoupon", "null");

} else {
local.setItem("discountNumber", discount);
local.setItem("discountCoupon", coupon);

}

// });

```

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

VPEngine @vpengine 


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


<!-- Thanks for participating! →