Een shop met een uitgebreid assortiment.

client
iPhone Supply
product
Webdesign en WordPress site op maat met handige features
iPhone Supply preview>

Projectbeschrijving.

iPhone Supply is een webshop met een groot assortiment aan producten voor iPhone devices. Voor iPhone Supply heb ik op basis van een bestaande huisstijl en richtlijnen een compleet nieuw webshop op maat ontworpen en ontwikkeld. Nadat het design via een ontwerptraject was goedgekeurd was ik begonnen met het bouwen van een op maat WordPress webshop met WooCommerce.

Ontwikkeling.

Voor de back-end is gebruik gemaakt van WordPress in combinatie met de WooCommerce plugin. Het bestel proces is zo simpel en overzichtelijk mogelijk opgezet. Betalen kan gemakkelijk via iDeal, Paypal of creditcard en hier is Mollie voor ingezet als payment provider. Voor de homepagina moest er zoveel mogelijk van de assortiment tentoon worden gesteld met een weekaanbieding waarvoor een timer is geintegreerd.  Op de product pagina is er een review systeem en vragen en antwoorden systeem erin gebouwd. Hierin heb je ook de optie om het product aan je verlanglijst toe te voegen, hiervoor is een verlanglijst plugin gebruikt en opgemaakt naar de huisstijl van iPhone Supply. Voor de rest zijn de overige pagina’s van WooCommerce naar de huisstijl opgemaakt.

Optimalisaties.

Tijdens het ontwikkelen worden alle script libraries beheerd via Node.JS/NPM waardoor altijd gemakkelijk het laatste versie kan worden opgehaald (denk bijv. aan Bootstrap, Fontawesome etc.) en wordt er aan hand van ‘task runners’ met Gulp.js alle SASS en JavaScript code ‘gecompiled’ naar ‘geminified’ en ‘combined’ scripts.  Daarnaast wordt er binnen het scripts gezorgd dat afbeeldingen ‘ge-lazyload’ worden en waar mogelijk worden scripts in de footer geladen. Dit zorgt ervoor dat een minimum aantal requests wordt behouden wat het snelheid flink ten goede komt. De website is responsive en ‘mobile first’ ontwikkeld waardoor hij optimaal voor elk device en potentiële klant te bewonderen is.

iPhone Supply case image>

Development tools.