top of page

Wix Velo Order Tracking App for Bub Express

Updated: Dec 9, 2023

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).


Wix Velo Order Tracking App for Bub Express

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.


  1. Client inputs the tracking number given,

  2. Clicks on the track button,

  3. Tracking code is added at the end of the URL automatically (e.g. www.bizimuhit.com/ptb?code=3589730fnv),

  4. Shipment summary section is uploaded,

  5. 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.


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.

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.


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.


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).

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

  1. wixData

  2. wixLocation

  3. wixWindow

 

You are ready to go. If you have further questions in your mind, feel free to reach us any time.

0 comments

Related Posts

See All

Opmerkingen

Beoordeeld met 0 uit 5 sterren.
Nog geen beoordelingen

Voeg een beoordeling toe
bottom of page