See how we have built an order tracking app for Bub Express, which is a logistics company in Turkey, using Wix Velo features such as data collections, repeaters, user input elements, and regular expressions (regex).
How We Built an Order Tracking App
Building an order tracking app for a logistics company, Bub Express was such a great task to present the power of Wix Velo features. What we have built was hopefully away from what client had requested at first.
Client request: Solution to let clients track their orders easily on a site page.
Client data: Sender-receiver and timestamp information about the delivery.
What we planned: A well-designed page for order tracking, beyond the requests. Here is the workflow.
Client inputs the tracking number given,
Clicks on the track button,
Tracking code is added at the end of the URL automatically (e.g. www.bizimuhit.com/ptb?code=3589730fnv),
Shipment summary section is uploaded,
Shipment status is uploaded.
Planning data collection
We had need to establish a well-planned Wix data collection that can be easily used by the owner of site within content manager. We had used less field to handle data much easily. See the fields added to this data collection.
"Code" field was chosen as the primary field (allows twelve characters on page),
"Status" field was set as an array of two strings: ["<Shipping status>", "<Service Area>"],
"Sender" field was set as an array of two strings: ["<Sender name>", "<Sender address>"],
"Receiver" field was set as an array of two strings: ["<Receiver name>", "<Receiver address>"],
"Time" field was set to input the exact time of delivery status.
"Date" field was set to input the exact date of delivery status.
"Day" field was set to input the exact day name of delivery status.
Tracking the shipping progress
Once the data retrieved from the Wix data collection, a summary about delivery and the percent of progress withing a progress bar welcomes the client.
Copying to clipboard
After the track button is clicked, a query is added to the URL of the page. That URL can be used now for copying it to clipboard.
Masking sensitive information
To prevent the leak of sensitive personal information about both sender and receiver of this delivery, we mask the data presented on page by a simple regular expression (regex).
Client don't have to add ***** signs to the data collection fields.
APIs we used
wixData
wixLocation
wixWindow
You are ready to go. If you have further questions in your mind, feel free to reach us any time.