Hey everybody! I'm Brendan, a certified Velo Developer and after working with Wix's platform and Velo for over a year I have come to find that Wix has the ability to do so many things that you may not even think are possible. A lot of the development with Velo requires thinking outside of the box in order to get the solution you want, however, just about anything is possible. For my example here, I recently had a client who was using WixBooking's native platform in order to manage and organize all of their Kayak, Paddleboard, and Pontoon Rentals. However, this came with limitations inside of the WixBooking's platform- which wouldn't allow them to rent out multiple items at once (Ex: The inability to rent both Kayaks and Paddleboards). It also wouldn't let them rent out multiple quantities of the items without having to checkout separately with different transactions. Due to these limitations, I faced the challenging task of building them their own bookings platform. For the length of this article, I am going to talk about the process I used to build the Kayaks & Paddle Boards section - The process for adding other rentals (such as boats) is the exact same process just using different timeslots. Velo APIs Below are the numerous Velo API's that I combined in order to make them all to work together: WixData WixStorage WixLocation WixPay WixWindow WixCrm Collections For the Paddle Board and Kayak rentals, I created three collections. One collection holds the Items' information, such as the name, image, cost, and description - this way I have the ability to easily display the product data in a repeater later. The second collection is an inventory collection, which is a collection that is used to create a static timeslot system. A static timeslot system is when each row in the collection is a timeslot at a one-hour interval for the entirety of the client's open hours. Through this, I can keep track of all items available per timeslot. Finally, the third collection is used to store the booking data when the user is done checking out. Select Equipment Page Now that we understand the collections used in this project, I will begin to show off the final project. The page below is a simple row and column repeater with a filter in order to sort out the items you're searching for. When a user selects a filter option, the system uses to sort the items based on the item selected. WixData.Filter() { newFilter = wixData.filter(); (checkName) {
        preFilter = newFilter = newFilter.eq( , name)
    } ( preFilter === ) {
        $w( ).value = filterItem
        newFilter = newFilter.eq( , filterItem)
    } setFilter = $w( ).setFilter(newFilter); .log(newFilter); .all([setFilter])
        .then( {
            $w( ).setSort(wixData.sort().ascending( )).then( {
                loadRepeater()
                $w( ).expand();
            })

        })
        .catch( { .log(error);
        });
} ( ) function filter let if "false" 'name' if "true" "#dropdown1" 'name' let "#dataset1" console Promise => () "#dataset1" "cost" => () "#repeater1" ( ) => error console After the user has found the item that they want, they can select that item by clicking the add button in the item's listing. This will add the items object into an array and disable the button. This brings up the ability to add a second/third item. Once selected, the repeater filters for all other rental possibilities that the user can pair with the selected item. For this example, I selected a One Hour Paddle Board rental, so it will show me all the other one-hour rental options that are available. {
    $w( ).forEachItem( {
        $item( ).text = + numberWithCommas(itemData.cost);

        $item( ).onClick( {
            $w( ).enable()
            $item( ).label = ;
            $item( ).disable();
            items.push(itemData);
            filterItems(itemData.hours)
        })
    })
} ( ) function loadRepeater "#repeater1" ( ) => $item, itemData, index "#costTxt" "$" "#bookBtn" => () "#next" "#bookBtn" "Added" "#bookBtn" Once the items are selected, I then proceed to the next page. In doing so, it will take my items array and set them in the user's session using then using I am directed to the next page. session.setItem() WixLocation.to() { data = .stringify(items); .log(data) session.setItem( , data); wixLocation.to( );
} export async ( ) function next_click event let JSON console await "data" await "/quantity" Quantity Page We now have our items selected. Next, the system will bring me to the quantity page, which does exactly as it sounds. The quantity page allows the user to select how many of each selected rental they want. First, the code grabs the data array that I sent to the user's session in the previous page. Next, it loads the repeater with the quantity options, the names of the rentals the user chose, and loads up the question asking how many of each rental the user wants. This is a similar process to what the last page did, however, it simply adds on to the itemData object with a key value pair of "quantity": {USER INPUT}. Then using session and wixlocation again, I pass the data and the user to the next page. { session } ; wixLocation ; items = [] quantity data = session.getItem( ); dataParsed = .parse(data);

$w.onReady( { .log(dataParsed);
    loadRepeater()
}); {
    $w( ).data = dataParsed
    $w( ).forEachItem( {
        $item( ).text = itemData.name + ;

        $item( ).onKeyPress( { debounceTimer; (debounceTimer) {
                clearTimeout(debounceTimer);
                debounceTimer = ;
            }
            debounceTimer = setTimeout( {
                quantity = $item( ).value
                itemData.quantity = (quantity)
                items.push(itemData)
            }, );
        })
    })
} {
    session.setItem( , .stringify(items));
    wixLocation.to( )
} import from "wix-storage" import from 'wix-location' let let let "data" let JSON ( ) function console ( ) function loadRepeater '#repeater1' "#repeater1" ( ) => $item, itemData, index "#nameTxt" "'s" "#quantityIpt" => () let if undefined => () "#quantityIpt" Number 200 export ( ) function nextBtn_click event "data" JSON "/select-timeslot" Select a Timeslot Page This step is where things begin to get a little complex. The user is now presented with a date picker. onChange, the date picker will filter the Inventory collection which was referenced earlier in the Collections section at the top of this article. What this does is filters the static timeslots in that collection, filters by the day, and filters the items I chose as well as how many are available. If none are available, the system will hide that timeslot by making it unclickable to the user. In the image below, all timeslots are available for selection. Once a timeslot is selected, the repeater will collapse and the user is able to proceed to the next step. Clicking a timeslot uses a similar function as what was explained in the "Selecting Equipment" section of this article. It adds to the "items" array that we've been passing along from page to page throughout this process. The passing of the "item's array" a running theme all the way to the cart page. { session } ; wixData ; wixLocation ; date data = session.getItem( ); dataParsed = .parse(data); .log(dataParsed); name = dataParsed[ ].name quantity = dataParsed[ ].quantity hours = dataParsed[ ].hours selectedTimes = []; maxHours count

$w.onReady( { (dataParsed.length > ) {
		name = }
    
}); { i = hoursArray = []
    dataParsed.forEach( {
        hoursArray.push(item.hours);
    });
    maxHours = hoursArray.reduce( { .max(a, b);
    }); (count === ) {
        $w( ).text = ;
        $w( ).expand();
    } {
        $w( ).text = + dataParsed.length + + name + + maxHours + + maxHours + ;
        $w( ).expand();
    }

    $w( ).onItemReady( {
        $item( ).label = itemData.timeslot; timeslots = []

        $item( ).onClick( {
            i++
            $item( ).disable();

            selectedTimes.push(itemData)

            selectedTimes.forEach( { time = timeslot.timeslot
                timeslots.push(time)
            });

            timeslots = timeslots.join()
            $w( ).text = + timeslots

            $w( ).expand(); (i === maxHours) {
                $w( ).collapse();
                $w( ).enable();
                $w( ).expand();
            }

        })
    })
} {
	date = $w( ).value
	filter(date);
	$w( ).text = ;
} { newFilter = wixData.filter(); .log(date) .log(dataParsed)
    newFilter = newFilter.eq( , date)    

    dataParsed.forEach( { (item.name === ) {
            newFilter = newFilter.ge( , item.quantity)
        } (item.name === ) {
            newFilter = newFilter.ge( , item.quantity)
        } (item.name === ) {
            newFilter = newFilter.ge( , item.quantity)
        } { .log(item.name)
        }
    }); setFilter = $w( ).setFilter(newFilter); .log(newFilter); .all([setFilter])
        .then( {
            loadRepeater()
            $w( ).expand();
        })
        .catch( { .log(error);
        });
} {
	dataParsed = [
		dataParsed,
		selectedTimes, 
		]
	session.setItem( , .stringify(dataParsed));
	wixLocation.to( );
} {
	count = $w( ).getTotalCount(); (count); .log(count)
} import from "wix-storage" import from 'wix-data' import from 'wix-location' let let "data" let JSON console let 0 let 0 let 0 let let let ( ) function if 1 "items" ( ) function loadRepeater let 0 let => item ( ) function a, b return Math if 0 "#infoTxt" "There are no timeslots available, please select a different date" "#infoTxt" else "#infoTxt" "You have selected " " " " For " " hours, Please Select " " available timeslots" "#infoTxt" "#repeater1" ( ) => $item, itemData, index "#TimeSlot" let "#TimeSlot" => () "#TimeSlot" => timeslot let "#timeslotsSelectedTxt" "Time selected: " "#timeslotsSelectedTxt" if "#repeater1" "#nextBtn" "#nextBtn" export ( ) function datePicker1_change event "#datePicker1" "#headerTxt" "Select A Timeslot" ( ) function filter date let console console 'date' => item if "Paddle Board" 'paddleboard' else if "Single Kayak" 'kayak' else if "Tandem Kayak" 'tandumKayak' else console let "#dataset1" console Promise ( ) => results "#repeater1" ( ) => error console export ( ) function nextBtn_click event "data" JSON "/rental-agreement-new" export ( ) function dataset1_currentIndexChanged '#dataset1' Number console Rental Agreement Form Page I am not going to show this page because it has a bunch of legal jargon that I know nobody wants to see. However, with this specific custom bookings solution, the client required that the user has to have a waiver on file in order to check out. Once the waiver is filled out, the data is inserted into the signed waivers collection, and the user as well as the user's data is pushed over to the cart page. The data is input using the connect-to-data method rather than using . I chose this method because it is not always efficient to use code for a task. wixData.insert() If I were to use code, I would have to name each input as a variable, which then would be put into a data object, which then all would be inserted into the collection. Using the connect-to-data method is much simpler and more time-efficient. As a Velo developer, I am always looking for ways to use WIX tools to save time and energy on projects like this one, after all, that's why those tools are there! Cart Page The end is where our hard work comes to fruition and all the magic happens! Right on arrival to this page the user is presented with an input to verify their email. If the email is found in the signed waivers collection then it will expand the cart. If the user is not found in the collection, they are redirected back to the rental agreement form. In order to verify, I use to search the database for the email the user has input. If results are found then the code will display the cart. WixData.query() {
    email = $w( ).value
    checkEmail(email)
} {
    wixData.query( )
        .eq( , email)
        .find()
        .then( { .log(results) (results.totalCount > ) {
                customerData = results.items[ ];
                dataParsed.push(customerData);
                $w( ).expand();
                $w( ).expand();
                $w( ).expand();
                $w( ).expand();
            } {
                $w( ).expand();
                wixLocation.to( )
            }
        }).catch( { .log(err)
        })
} export ( ) function checkEmail_click event "#emailIpt" ( ) function checkEmail email "SignedLiabilityWaitForm" "email" ( ) => results console if 0 0 "#waiverTxt" "#repeater1" "#text23" "#box1" else "#waiverTxt" "/rental-agreement-new" ( ) => err console Displaying the Cart: In this case, I am simply using the loadRepeater() function that I have been using in previous examples in order to show the items in the cart and dynamically insert the items into the repeater. {
    $w( ).data = dataParsed[ ]
    $w( ).forEachItem( {
        $item( ).text = itemData.name;
        $item( ).src = itemData.image
        $item( ).text = + itemData.hours
        $item( ).text = + itemData.cost * itemData.quantity
        $item( ).text = + itemData.quantity
    })
} ( ) function loadRepeater '#repeater1' 0 "#repeater1" ( ) => $item, itemData, index "#itemNameTxt" "#itemImage" "#hoursTxt" "Hours: " "#costTxt" "$" "#quantityTxt" "Quantity: " The cart object is built by adding the cost of the processing fee, tax, and total for each item together. This is using simple Javascript math in order to calculate and has nothing to do with Velo. Now when the user clicks on the check out button, this will trigger the . wixPay API The rental's data is sent from the front end to the back end, where it is manipulated to fit the function options in order for it to work. This will build a checkout page based on the prices and quantities of the rentals that I sent to the function. Front End: Wix Pay Function {
    createMyPayment(dataParsed)
        .then( {
            wixPay.startPayment(payment.id, { : }).then( (result) => { (result.status === ) {
                    updateCollection();
                    createBooking(payment.id, result.status);
                    createContact();
                    sendEmailToContact(email, date, items);
                    sendEmailToStaff(name, date, items);
                    wixWindow.openLightbox( , dataParsed);
                } (result.status === || result.status === || result.status === ) {
                    
                    createBookingCancelled(payment.id, result.status);
                }
            })
        })
} export ( ) function payBtn_click event ( ) => payment "showThankYouPage" false async if "Successful" "ThankYou" else if "Cancelled" "Failed" "Pending" Back End: Wix Pay Function pay.jsw The back end function takes the data, manipulates it, and returns the items for sale. wixPayBackend ; { .log(data) items = [] totalAmount = []
    data[ ].forEach( { price = item.totalPrice quantity = item.quantity product = item.name cost = item.cost amount = price * quantity
            totalAmount.push(amount);
            items.push({ : product, : price, : quantity,
            })
    });

    totalAmount = getArraySum(totalAmount) .log(items) .log(totalAmount); wixPayBackend.createPayment({ : items, : totalAmount
    }).catch( { .log( ) .log(err)
    })
} { total= ; ( i a) { 
        total += a[i];
    } total;
} import from 'wix-pay-backend' export ( ) function createMyPayment data console let let 0 => item let let let let let name price quantity console console return items amount ( ) => err console "Back" console ( ) function getArraySum a var 0 for var in return Check Out Process: Once the check out button is clicked and the back end functions are completed, we are presented with a check out modal that takes the customer's personal and payment information. Once completed, this will show a payment status of "Successful". If the payment status is successful,  I will then have the ability to run a few extra functions. In the next section, I will go over those. updateCollection() Using wixData, I retrieve the quantity of the items rented out and subtract them from the quantity that is currently available in the inventory database. Once subtracted, I use in order to update the collection with the new inventory numbers. wixData.update() {
    dataParsed[ ].forEach( {
        dataParsed[ ].forEach( { quantity = item.quantity name = item.name (name === ) {
                timeslot.paddleboard = timeslot.paddleboard - quantity
            } (name === ) {
                timeslot.tandumKayak = timeslot.tandumKayak - quantity
            } (name === ) {
                timeslot.kayak = timeslot.kayak - quantity
            }
        });
        wixData.update( , timeslot).then( { .log( ) .log(results)
        }).catch( { .log(err);
        })
    });
} ( ) function updateCollection 1 => timeslot 0 => item let let if "Paddle Board" else if "Tandem Kayak" else if "Single Kayak" "DailyInventoryKayaksPaddleboard" ( ) => results console "Collection Updated" console ( ) => err console createBooking() This function essentially takes all that session storage data that we've been passing from page to page and stores it into the bookings collection for admin use and display. SendEmail() functions These functions use in order to send an automated triggered email to the user notifying them that their booking is confirmed. The other notifies the site owner about their new booking. wixCrm wixCrmBackend ; { contacts } ; { contactId; emailToFind = email queryResults = contacts.queryContacts()
        .eq( , emailToFind)
        .find(); contactsWithEmail = queryResults.items; (contactsWithEmail.length === ) { .log( );
        contactId = contactsWithEmail[ ]._id;
    } (contactsWithEmail.length > ) { .log( ); } { .log( ); } triggeredEmailTemplate = ;
    wixCrmBackend.emailContact(triggeredEmailTemplate, contactId, { : { : date, : items
            }
        })
        .then( { .log( );
        })
        .catch( { .error(error);
        });
} import from 'wix-crm-backend' import from 'wix-crm-backend' export async ( ) function sendEmailToContact email, date, items let const const await "info.emails.email" const if 1 console 'Found 1 contact' 0 else if 1 console 'Found more than 1 contact' // Handle when more than one contact is found else console 'No contacts found' // Handle when no contacts are found const "<templateID>" "variables" "date" "item" => () console 'Email sent to contact' ( ) => error console Conclusion Finally, once the checkout is complete, the user is presented with a "thank you" light box confirming their booking. All booking data is stored in a collection and the process is complete. There is also an admin dashboard which queries and displays the bookings from the bookings collection. I often hear from people saying Velo can't do things that other coding languages can. However, I believe that with a wealth of experience, knowledge, creativity, dedication, and research into the Velo documentation, you will find that Velo is a very diverse language with many opportunities for ingenuity and development. While custom solution have their time and place, WIX offers a simple and flexible way to create a striking web application in a fraction of the time by taking out all of the CSS. If you have made it this far in the article, I just want to say thank you for taking the time to read and learn about this awesome project. If you have any questions, or need help with a Velo project, I am always available! Simply email me and let me know how I can be of service. Service@pixelprogrammers.com

BUNCH

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Build Your Own Booking Platform with Velo

Too Long; Didn't Read

Company Mentioned

Brendan Johnson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Build Your Own Booking Platform with Velo

Too Long; Didn't Read

Company Mentioned

Brendan Johnson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES