City Zone Area Based Delivery for Magento 2

• 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.
• This extension is fully compatible with the Hyva Theme.
• This module is now compatible with GraphQL.

 To improve customer’s shopping experience, Magento 2 delivery date module is available, which allows them to pick their preferred date and time to receive the order package.

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 Magento 2 root directory on the server as shown below.

After the successful installation of the module, you have to run these commands in the Magento 2 (Adobe Commerce) 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

Language Translation 

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 (Adobe Commerce) 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.

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. 

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. 

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 field functions differently in both the following cases:

Note:- While creating a city, an Alphanumeric zipcode can’t be used in the 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 codes can be entered in the Range From and Range To fields.

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.  

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 to the city, after that click on Assign City. A slider page appears, now select the cities which you want to mass assign to the selected products

After selecting the cities, click on the Save city button then all the selected cities will assigned to all the selected products.

Frontend View

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 serves the registered and guest customers differently. The functionalities for both of them are available further in this user guide. 

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, who can enter a postcode which will appear with the configured city by the admin in the top left corner of the frontend.

Further, the functionalities will be the same as a registered user. 

 

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 the 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 the 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 cities, 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.

 

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 deliverable products can be easily added to the cart and the cart will be visible as shown in the image below:

For any location update after adding the products to the cart, it will again check the products for updated location. And if there are any non-deliverable products, they will be notified to the customer.

That’s all for the Magento 2 City Zone Area Based Delivery. Still, have any issues please email us at support@webkul.com else you can generate a ticket at https://webkul.uvdesk.com/en/

Explore the Adobe Commerce Cloud development service by Webkul. You may also browse other Magento 2 marketplace addons. Also our quality Magento 2 extensions.