Product
Custom webshop module

Platform
Shopify

Werkzaamheden
Requirements omzetten in werkend script

Postcode module banner

Shopify Module

Postcode controle voor lokale diensten

Mij werd gevraagd of het ook mogelijk is om Shopify voor lokale dienstverlening te gebruiken, geofencing dus. De vrager was van plan om maaltijden aan huis te gaan bezorgen en wilde dat als starter eerst zelf gaan uitproberen, dus in gebieden die hij zelf kon bedienen, met de optie om dat te kunnen uitbreiden in de toekomst. Na wat overleg bleek dat hij dat zou kunnen doen op basis van de postcode van de klant, waarmee het systeem kan beslissen om de bestelling aan te nemen of anders beleefd aan te geven dat het gebied (nog) niet tot de ondersteunde postcodes behoort.

Voor dit doel heb ik een Shopify-module op maat gemaakt. Om het mijn klant zo makkelijk mogelijk te maken, kan hij de postcodes binnen de module zelf aanpassen. Net als bij het bewerken van een thema krijgt hij een invulveld te zien, waarin de met een komma gescheiden te bedienen postcodes ingevuld kunnen worden. Als de koper dan in in de winkelwagen komt (kan ook op andere pagina’s zijn, maar dat was hierbij niet nodig) blijft de betaalknop nog verborgen en wordt aan de koper eerst gevraagd naar diens postcode. Na invulling wordt die gecontroleerd op het juiste aantal cijfers (om vergissingen te voorkomen) en of die code voorkomt in de live data. Zo ja, wordt de bestelknop getoont met daarbij de boodschap dat er besteld kan worden. Zo nee, wordt aangegeven dat bestellen helaas (nog) niet mogelijk is en blijft de bestelknop verborgen.

Behalve met postcodes kan deze module natuurlijk ook werken met andere teksten en cijferwaarden. Hij is gemaakt met HTML5 en Javascript dat is gemixt met Liquid, de codetaal van Shopify, om zo de postcodes in het systeem uit te lezen binnen het script. Te allen tijde kunnen deze waarden door de klant zelf worden aangepast, zonder de kern van de module te beïnvloeden. En aanpassingen zijn bij het opslaan direct actief.

Voor meer over mijn module diensten klik hier

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