Overview of the app:
Zip code checker is true wix checkout essential that wix ecommerce sites demanded from years but there was no option for them until now. No ecommerce store can deliver to every zip code. So preventing orders from certain zip code is must. They used to show ribbons or banners that we only support this zip code. With introduction of SPI it was possible to check zip code and restrict checking out. But this needs custom code to be setup along with entering all zip code in wix or external collection manually. Developers would take thousands to set this up and most users are no code site builders. Wix needs to be everything no code. With our app they just have to upload list of zip codes or enter them in fields and they can simple select which zip codes to allow and which one to restrict.
Features in action
Users can upload zip code list in csv format and toggle between Include and Exclude option. Include option will reject any zip code outside this list and Exclude option will accept any zip code outside this list.
They can also enable per product zip code support option. It will allow them to set zip code support for each product.
If they don't want to upload CSV file, they can simple paste zip codes manually in textbox.
We have made Widget that users can add on product page as double check measure for their site visitors who can enter zip code and check whether it is deliverable or not. Most big ecommerce sites have zip code checker on product page. Even if this widget is not added, they will be prevented from checking out in final checkout page.
On Each product, zip code list can be imported directly from master zip code list
In checkout our app automatically connects with SPI and there it prevents checkout if zip code is not supported. So one app without any hassle to user does all the heavy work that site builder / developer has to undertake just to check zip codes.
Why it's useful
All ecommerce platforms other than Wix like Woocommerce, Shopify, Magento, Bigcommerce have features that allows site builder to add checks for store supported zip codes. Big ecommerce sites too have zip codes check functionality. Small stores with less orders might not require it but most Wix ecom sites with good traffic demand it. The demand can be checked in Wix Forum too. Since years many are asking how to implement it. Even our old clients come back with that request. Few moved to other platforms for this particular limitation.
There are so many countries with so many places. The stores cannot delivery to each single place. Currently with shipping settings on Wix, only regions can be restricted. Many countries don't even have regions listed on Wix. Some stores want to deliver to few places in certain region only on selected area zip codes. So with zip code validations, store has full control at area level for where they are delivering. Some online stores are global too. The app has no limit on how many zip codes can be added in a list. Huge number of zip codes can be uploaded on our app.
So its our try with app to remove one of the Wix's big limitation. Only it is possible now due to option of adding block widget directly into product page and SPI validations on checkout page. So its useful for online stores that want to sell only to serviceable locations. This app can also be used on checkout of any other app that uses Wix Ecommerce Checkout like bookings, events etc.
Usage instructions
As user opens the app, the first page is settings. Here user can toggle between zip code support for entire store or per product. Product page will appear in menu if enabled. Below guidelines, tutorial and best practices will be linked.
On master zip code page list, user can enter zip codes manually in textbox or upload list in csv format. Sample csv file is linked below. The he has to toggle between Include / Exclude option. It’s for letting app know whether the list of zip codes supported will be allowed or rejected.
If product page is enabled, the list uploaded on master page will not be considered if any. Products will be shown to users where can upload zip code list for each product. Similar Include / Exclude toggle is given. Copy from master zip code list is given for ease of use. It will simply fetch filed uploaded on master page and use it on this particular product.
Limitations and unfinished work:
The app's functionality is constrained by Wix CMS' data limits. Specifically, there's a 500 KB per row limit, which restricts the number of zip codes users can input in the "Product-wise zip code feature". This is because our database schema for storing supported pincodes is one row per product and each row has a column where we store a list of zip codes. Now generally countries have several thousand zip codes, for instance USA has ~40K zip codes. This makes it impossible to add a list of 40K zip codes in a column because of the 500KB limit.
We also intended to allow users to specify delivery times for each zip code. Users could add this information in a column next to zip codes in a CSV file. However, this feature remains incomplete due to the same 500 KB row limit.
Database limitations further complicate the situation. We can't create databases dynamically or add columns via code. We must use the single collection our app creates upon installation. In this collection, zip codes for each product are stored in an array. These constraints mean we can't support individual zip code checks for each product, limiting the granularity of our delivery time feature.
Wix Data API limits severely impact our app's performance when handling large zip code lists. The API restricts operations to 1000 rows at a time, with each operation taking 2-3 seconds. Our Master Pincode list stores each zip code in a separate row. Consequently, deleting and replacing a large list, such as the 40K USA zip codes, is extremely slow. This process requires at least 40 operations, taking 80-120 seconds or more. These significant delays occur when users update large zip code lists, negatively impacting the overall user experience.
Due to less time, we were unable to show all product variants and give support for it. Currently Products show without any variants. This will be added very soon before making it live.
General zip code checker widget that can be added on any site page including cart page remains. So site builders can add it on cart page. It will check and return with show products from the cart that are not deliverable. Or add it anyplace on site that can only be added if support per product is disabled. It checks only from master zip code list and returns with Deliverable or non-deliverable location. But we are not sure if we can use toggle in block dashboard page to restrict where widget on site can be added.
We also want to make widget to add in slots of Shop Page. For filtering products that are shown to visitors based on zip code he entered. But we are not sure if changing content inside product gallery with widget is supported. Have to try it.
There was severe time constraint. Wix has too many limits in small places. We had find workarounds every time. There were many bugs and had to wait for few days before it get solved or our query got answered. This wasted too much of time. We worked 14 hours a day from last two week and still were not able to add above features we planned from start.
We also want to expose API of our checker so small velo developers can use it for any other use case they want for their clients.
How we made it and challenges on the way:
Half of the challenges we faced were due to block's limitations or too many bugs or poor documentation.
When we first started making app, first challenge we faced was how to enforce zip code rules on checkout. Solution was using eComm Validation Service Plugin.
Next challenge was that Service Plugins are not available in Blocks, so we had to make a companion custom app which provided Service Plugin functionality for Block.
When we started making Blocks app we faced an issue many times when app will stop installing on website and instead gives "App can not be installed" error. This error went away on its own when rebuilding and retrying several times.
In user dashboard we were using upload button to allow user to upload CSV file, but we found that there is bug with upload button and that it puts the uploaded files by user in Block's own media manager instead of user's media manager, making uploaded file's inaccessible to on user's dashboard. To solve this we found a way to open user's media manager when clicking on a simple button, using dashboard api and from there user can upload and select csv file.
Then we were faced with 500KB row data limit and which is still an issue.
For uploading CSV and parsing it we were initially thinking of using NPM module. But we faced an issue where the particular library "papaparser" was not being installed in our block app. Other libraries would install find, but this particular library would fail to install. So then we used native javascript to read the file manually and parse whole CSV manually. Without using any library at all.
Next we ran into an issue of time consuming update process on Wix Collection due to 1000 update per turn limit on wix-data api's functions. This issue is also still there.
There is also not an easy way to use menu in block. there is menu element but its not configurable. We had to use velo to actually show different menu items and write onclick event to change menu pages.
Then next challenge was how to let custom app's service plugin know about supported zip code which user provide in dashboard page made by user. For this we exposed api in block app using http-functions. Now ecom validation plugin can call block's exposed api to check if product is available at zip code or not.
Many time-consuming issues we faced were due to wrong documentation provided by Wix. There are examples on how to use Service Plugin with wrong URL and response format which took us way too much time to troubleshoot and with help of Wix Team we were able to solve it. Albeit at the cost of precious time.
Overall we found although Block provides many features an app will need, it also lacks some useful features like ability to create a service plugin. This limits the ability of Blocks to be used as standalone app without making a custom app or cli app.
Current state of Wix Blocks
Our app when completed consisted of Wix Blocks (which we used for showing dashboard page, storing user data like supported pincodes and product details) and Custom App (to use Service Plugin for validation visitor's checkout based on their address).
In total we can say Blocks is used for implementing around 90% of functionalities like dashboard page, product page plugin, CMS and also exposing site API to allow request for checking pincode support. And 10% is the Custom App which we use to add Service Plugin for validating request.
Overall Wix Blocks is a game changing platform for making custom apps faster. It removes the need of making UI using code unlike needed in Custom App or CLI app. And it brings the power of Wix's apis using velo which are easy to use compared to REST APIs. Also no hassle of implementing Auth and managing instance IDs etc. But still it lacks some important features. Block lacks the ability to add Service Plugins (SPIs), ability to add Embedded Scripts, etc. And many bugs makes it slower to build as we have to wait for support. Once these issues are sort out, Blocks has potential of bringing too many useful apps by users to Wix Marketplace which is currently dominated by Custom Apps.
What we learnt from building this?
Main thing we learnt was how to approach each problem with higher layer approach like users of users will use it. We used to think as site builders that how visitors on our site will use various features. Here we had to think in bit more complex way. How site builders will use our apps for their visitors and how those end users will experience functionality of our app.
By doing this project we got very deep understanding and knowledge on working of Wix Block Apps and how it integrates with the website. We got to learn many things regarding velo like how to open user's media manager from dashboard page, how to expose api's in blocks, how to save data and settings in CMS, etc. We learned how to make service plugins and extend functions of inbuilt Wix apps like store and checkout.
We also learnt to not trust Wix's developer documentation blindly. There is too little information about many things. And way too much errors in code. We wasted many days trying to work with wrong code given in documentation until helped by support team who said code on page is wrong and gave us other code to use.
Comments