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.
Binnen shopify kun je bijv postcodes instellen
De gebruiker krijgt te zien wat verwacht wordt
de postcode komt overeen
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