Magento 2 City Zone Area Based Delivery module allows the customer to check the product is deliverable to their location. The admin will assign the cities to the product while editing or creating them.
Meanwhile, the advantageous point about the module is that the customer can check the product deliverability on the category and product page itself. They are not required to navigate to each product and type postcode for each of them.
Further, the admin has the leverage to assign the cities based on their zip codes to the products from the product edit page. Moreover, that product will be deliverable to all the cities assigned to the product by the admin.
Meanwhile, this module serves the logged-in and guest users in a different manner. The logged-in customers can select their location from the addresses list or can enter the postcode manually, whereas the guest users will enter the postcode manually.
Watch the below video tutorial to understand the extension workflow :
- The admin can create a city with their zip codes.
- Admin can create a custom region.
- The admin can also edit the regions and city details.
- The customer will be able to place orders for products that are deliverable in their location.
- Customers can check the product is deliverable on the category and product page easily.
- Support Multi address Shipping.
- The admin can import regions and cities by uploading a CSV file.
Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.
Further, the admin needs to transfer this app folder into the Magento2 root directory on the server as shown below.
After the successful installation of the Magento 2 City Zone Area Based Delivery module, you have to run these commands in the Magento2 root directory:
After running the commands, you have to flush the cache from the Magento admin panel by navigating through->System->Cache management as shown below.
Configuration of Multi-Lingual
For multilingual support, the admin will navigate through Store > Configuration > General ->Locale Options and select the locale as German (the language into which the admin wants to translate his store content).
First command –
php bin/magento setup:upgrade
Second Command –
php bin/magento setup:di:compile
Third Command –
php bin/magento setup:static-content:deploy
Fourth Command –
php bin/magento indexer:reindex
If you need to do the module translation, please navigate the following path in your system. app/code/Webkul/CityBasedDelivery/i18n. Open the file named en_US.CSV for editing as shown in the below screenshot.
Once you have opened the file for editing. Replace the words after the comma(,) on the right with your translated words.
After editing the CSV file, save it and then upload it to the same folder. Now your module translation is complete.
After the successful installation of the Magento 2 City Zone Area Based Delivery module, the admin can now manage the backend configurations.
For that, the admin will navigate to Stores > Settings > Configurations > PostCode Delivery as shown in the image below;
After that, the admin will set the Enable on the Frontend field to Yes for the proper working of the module.
Further, the admin will manage the regions. For this, the admin will navigate to Manage City/ Region > Manage Region under the admin panel.
After that, the admin can see a list of Regions with the grids like Country, Region Name, and Actions. Every region has a specific ID.
To create the custom regions mapped with the countries that are not available in the default list of State/ province while creating a new city. The admin can simply click on the Add New Region button to create a new region as shown in the image above.
Add New Region
After clicking on the Add New Region, the admin will add details regarding the region as shown in the image below:
The general information may include the following fields:
Country: The admin will select the country from the dropdown where the list of countries will appear.
Region Name: The admin will type the name of the region they are creating.
Import New Region
The admin can also mass add the regions using the Import regions feature by uploading a CSV file and click Submit as shown in the below image. Moreover, to download a sample CSV file just click on the download sample CSV.
To manage the cities navigate to Custom City/ Region > Manage City. After that, the admin can see the list of created cities. The grids of the list will include the Country, Region, Postcode, City, and Action.
Add New City
The admin can simply click on the Add New City button to create a new city. After clicking on the Add New City, the admin will add details of the city as shown in the image below.
Furthermore, the general information may include the following fields:
Country: The admin will select the country from the dropdown where the list of countries will appear
State/ Province: The admin will select the regions from the list. The custom regions will also appear in this list.
City: The admin will type the name of the City.
Zip in Range: This fields functions differently in both the following cases:
Note:- While creating a city, Alphanumeric zip code can’t be used in range.
- No: If this field is set to No, then the admin will enter the single postcode for the city, and the product will be deliverable in that particular postcode only. The single postcode can be entered in the Postcode field as shown in the above image.
- Yes: If this field is set to Yes, then the admin will enter the range of zip codes present in that city, and the product will be deliverable in that range of the Zip/ postcodes. The range of zip code can be entered in the Range From and Range To fields.
Import New Cities
The admin can also mass add the cities using the Import cities feature by uploading a CSV file and click Submit as shown in the below image. Moreover, to download a sample CSV file just click on the download sample CSV.
Assign Zip Codes to Products
Once all the regions and cities are created and managed, the next step for the admin is to assign zip codes to the products present in the store. For this, the admin will navigate to Catalog > Products.
Further, the list of products will be visible. The admin will click on the Edit button under the Actions attribute.
After that, the admin will see the product edit page and go to the Zip Code Inventory section. Under that section, the admin will click on the Assign Zipcodes button as shown in the image below:
Moreover, a slider popup will appear containing the list of cities, among those the admin will select the cities based on their zip codes present under the postcode grid.
After selecting the zip codes, the admin will click on the Done button, and save the configurations done to the product.
Mass Assign City to Multiple Products
Admin can mass assign cities to multiple products from the product list. To do so, the admin has to navigate through Catalog->Products->Actions-> Assign City as seen in the image given below:
Now admin selects all the products which they want to mass assign the city, after that click on Assign City. A slider page appears, now select the cities which you wants to mass assign to the selected products
After selecting the cities , click on Save city button then all the selected citites will assigned to all the selected products.
Once all the backend configurations and settings are done, the changes will reflect in the frontend. The Magento 2 City Zone Area Based Delivery module servers the registered and guest customers differently. The functionalities for both of them are available further in this user guide.
Guest User Functionalities
Once the guest user views the store website, a Select Address button will be visible on the top left corner of the page as shown in the image below:
After that, a popup will appear with two options for the customer. One button will be visible to sign in to the customer if they are already registered.
The second option is for guest users, that they can enter postcode which will appear with the configured city by the admin in the top left corner in the frontend.
Further, the functionalities will be the same as a registered user.
Frontend View for Registered Users
Whereas, the registered customer can simply login by clicking on the sign-in button available in the popup as shown in the image below:
After that, the customer will navigate to the login page shown in the image below:
Further, the customer will click on the select address button as shown in the image below
As the customer is registered, they have an option to add the Pincode manually or select the location from address list. A list of saved addresses for that customer will be visible on a popup. These addresses are added by that customer to their Address Book.
Moreover, the City and postcode of the selected address will be visible on the top left corner of the page as shown in the image below:
Also, an Add To Cart button and product details will be visible for the deliverable products for selected location by the customer.
Note: If the manually entered postcode is not one of those that are configured by the admin in any of the city, then the customer will get to see the “No product is deliverable to this Pincode.” message under the postcode field as shown in the image below:
This validation is for both the guest and logged in customers.
Product Deliverability Frontend View
Further, the customer can check the availability of the product on the category page as well as the product page. That will be different for Deliverable and Non-Deliverable products.
Deliverable Product View On Category Page
If the product will be deliverable then on the category page the product details and Add To Cart button will be visible as shown in the image below:
Deliverable Product View On Product Page
If the product will be deliverable then on the product page, the product details and Add To Cart button will be visible as shown in the image below:
Non-Deliverable Product View On Category Page
If the product is not deliverable then on the category page, the Not Deliverable status will be visible and product details will be hidden mentioned as shown in the image below:
Non-Deliverable Product View On Product Page
If the product is not deliverable then on the product page the Not Deliverable status will be visible and product details will be hidden mentioned as shown in the image below:
Update the Location
The products that are deliverable can be easily added to the cart and the cart will be visible as shown in the image below:
In case the customer changes the location after adding the products to the cart, then the popup message will be visible as Not-deliverable on the cart page for the products that are non-deliverable in the changed location.
Current Product Version - 4.0.0
Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x