Product
Custom webshop module

Platform
Shopify

Werkzaamheden
Requirements omzetten in werkend script

Postcode module banner

Shopify Module

Area code check for local services

I was asked if it's possible to use Shopify for local service delivery, essentially geofencing. The inquirer planned to start delivering meals to homes and wanted to initially try it out themselves in areas they could serve, with the option to expand in the future. After some discussion, it turned out that this could be done based on the customer's postal code, allowing the system to decide whether to accept the order or politely indicate that the area is not yet among the supported postal codes.

For this purpose, I created a custom Shopify module. To make it as easy as possible for my client, they can adjust the postal codes within the module themselves. Similar to editing a theme, they are presented with a field to enter the serviceable postal codes, separated by commas. When the customer reaches the shopping cart (it could also be on other pages, but it was not necessary here), the payment button remains hidden and the customer is first asked for their postal code. After entering, it's checked for the correct number of digits (to prevent mistakes) and whether that code is in the live data. If yes, the order button is displayed with the message that ordering is possible. If not, it's indicated that ordering is unfortunately not possible yet, and the order button remains hidden.

Besides postal codes, this module can also work with other texts and numerical values. It was created with HTML5 and JavaScript mixed with Liquid, Shopify's coding language, to read the postal codes from the system within the script. These values can be adjusted by the client at any time, without affecting the core of the module. Changes are immediately active upon saving.

For more about my module services click here

Postcode controle webshop 1

Binnen shopify kun je bijv postcodes instellen

Postcode controle webshop 2

De gebruiker krijgt te zien wat verwacht wordt

Postcode controle webshop 3

de postcode komt overeen

Postcode controle webshop 4

De postcode is niet ingevuld in Shopify

Technieken

HTML5

Voor het weergeven van de feedback en feedfoward informatie

Javascript

Voor het intepreteren van de data en deze te vergelijken

Liquid Code

Om via het Shopify systeem de huidige data op te kunnen halen die de klant invult

SCSS

Voor de styling

CONCEPTING

Het omzetten van een idee in een werkende module