Captiva Power Relaunch on ProcessWire (What else!)

[maxf5]

Here it is. The relaunch for Captiva.

High Quality Power since 1995! CAPTIVA GmbH was founded in 1995 and began selling graphics cards under its own CAPTIVA® label. Meanwhile, their portfolio includes modern Tablet PCs in a large selection with the right accessories, individually configurable PCs with extremely high quality standards and external hard drives. Since 2007, CAPTIVA® has been manufacturing complete PCs in the so-called built-to-order (BTO) process. Captiva builds your new PC exactly according to your requirements and wishes.

 

During the development i felt in love with processwire's magic day for day. I was so glad that i could use processwire for this site instead of typo3 or others which probably would have taken the triple time to develop. Much more products will be added in the next time. Also the english translation will follow and a dealer-login for support, service and downloads. With that i hope to improve the page builder more and more.

Some of the highlights of the page is the radius search for the dealers which are offering captiva products. All i had was a simple excel list with names, adresses, phone numbers, emails, websites, etc. I converted this .csv to a .json and built a script which imports all dealers as new page in processwire. The adress field is saved in the map marker module from Ryan. With that i also get the latitude and longitude for the radius search. 

Some make-life-easiers / extras:
+ a "page-builder" created with the PageTable field (see video):  options to add images, text + images, google map, form, the radius search, gallery, parallax section, product listing (made with page reference), technic details (this will render all technical informations from the product, made with page reference and repeaters on the product), grid width options made with the range slider (for desktop, tablet and mobile), options to set a full width container or boxed, margins, borders and so on
+ central management of drivers with connected page fields for the single driver page and the product page
+ connected page field for gamecoupons and products
+ events and promotions can be managed with start- and enddate, a lazy cron will do the rest
+ widgets on category and product sites which appear randomly
+ try the blue model switcher on the start-page, it changes the video in the background, the newest products and the slider on the bottom navigation (on a subpage it redirects to the category)
+ news listing made with ajax
+ theme switcher for every site (dark / clean)
+ prepared for multi-language
+ much more.. feel free to ask

Some insights:

Modules used:
Admin Custom Files
AdminOnSteroids
Uikit
Clear Cache Admin
Connect Page Fields
Cronjob Database Backup
Email Obfuscation (EMO)
Map Marker
Range Slider
URL (Multi-language)
Image Extra
Map Markup (Google Maps)
Markup Simple Navigation
Sitemap    
Pages2Pdf
Database Backups
Google Analytics
Jumplinks    
Upgrades
Simple Contact Form
Video embed for YouTube/Vimeo
Tracy Debugger

Frontend:
Grunt tasks for js / sass compilation / minifaction: grunt-sass, grunt-uglify, grunt-contrib-cssmin
bourbon.io mixins for sass (which i love next to self-made mixins)
uikit 2 (which bothers me a bit because uikit 3 was in early beta when i started the site)
owl carousel 2
awesomplete
noUiSlider
awesomplete
jQuery Lazy
picturefill

[Robin S]

Nice site!

I do wonder about this though...

I haven't done any research on it or anything, but I have a feeling that hiding the interface while it loads is something that users dislike. As designers/developers we may think it's tidier or slicker, but for the visitor who just wants to start viewing the content it's more boring and frustrating. Similar maybe to how a few years ago designers were hiding the fallback font until the custom webfont loaded, which is now considered a real no-no.

[wbmnfktr]

The frontend looks nice and clean but what caught my attention was the backend. We see lots and lots of frontend but this one is a nice look behind the scenes. I love it! Would be interesting to see or know more about this and some other backend solutions.

 

[SamC]

2 hours ago, wbmnfktr said:

The frontend looks nice and clean but what caught my attention was the backend. We see lots and lots of frontend but this one is a nice look behind the scenes. I love it! Would be interesting to see or know more about this and some other backend solutions.

 

Totally. One of my main interests is how other people organize the backend to make it as easy as possible for clients. It's the different backends used on production sites that people new to processwire don't ever get to see, only their own one. How a client interacts with the backend is of major importance IMHO.

Great video @maxf5

[maxf5]

Thank you for your great feedbacks!

Quote

I haven't done any research on it or anything, but I have a feeling that hiding the interface while it loads is something that users dislike. As designers/developers we may think it's tidier or slicker, but for the visitor who just wants to start viewing the content it's more boring and frustrating. Similar maybe to how a few years ago designers were hiding the fallback font until the custom webfont loaded, which is now considered a real no-no.

This would be interesting to know from the visitor / not-designer  - view. I will keep it until i have some further feedbacks / user experience.

Quote

Totally. One of my main interests is how other people organize the backend to make it as easy as possible for clients. It's the different backends used on production sites that people new to processwire don't ever get to see, only their own one. How a client interacts with the backend is of major importance IMHO.

Great video @maxf5

•  

Thank you @wbmnfktr and @SamC ! Indeed, it would be very interesting to see more backend-developing here instead the usual bootstrap frontends 
 

[SamC]

21 minutes ago, maxf5 said:

As designers/developers we may think it's tidier or slicker, but for the visitor who just wants to start viewing the content it's more boring and frustrating.

When the screen goes white and the spinner starts, that's usually my cue for the back button to find a resource that just loads up normally. Why? Simply because I don't know how long it's going to take and haven't the patience to wait and find out. This is a complete self opinion with no factual backup whatsoever so obviously some actual user feedback would be very useful.

I don't even care about a fout either tbh. If you want a big one, check this out: https://www.diy.com/find-a-store

I noticed it the other day. It's a major company in the UK with mega money for developers.

[wbmnfktr]

Instead of loaders: skeletons

Like Facebook and even this forum does for embedded content like the preview above.

 

[suntrop]

On 4.11.2017 at 12:16 AM, Robin S said:

Nice site!

I do wonder about this though...

I haven't done any research on it or anything, but I have a feeling that hiding the interface while it loads is something that users dislike. As designers/developers we may think it's tidier or slicker, but for the visitor who just wants to start viewing the content it's more boring and frustrating. Similar maybe to how a few years ago designers were hiding the fallback font until the custom webfont loaded, which is now considered a real no-no.

JFYI — That loading screen won’t disappear on my iPad (iOS 11)

Backend looks like a hell lot of work. ? 

[maxf5]

Hey @suntrop, thanks for the hint. I will figure that out.

And thanks @SamC, i removed the loaders except on the startpage and news page (ajax). 
It makes it also feel much faster.

Quote

Backend looks like a hell lot of work. ? 

 Yes, it sure was with the kind of pagebuilder inside, functions for product rendering (when some products should be mentioned in news, events, etc.), even made just3ba's nice simple contact form working in that page-builder, Lazy Crons for event begin and closing, connect fields for driver <-> products, etc.. I have a dozen of templates and fields as you can imagine. I am currently working on the frontend login for the dealers where they can find advertising material. Depending on what dealer is logged in, they only can see that material which is assigned to him via role-management. I can make a new video soon where i can show more stuff if you re interested in managing things in the backend. God bless processwire 

[SamC]

27 minutes ago, maxf5 said:

I can make a new video soon where i can show more stuff if you re interested in managing things in the backend.

+1 for that. The site does indeed feel faster now too, nice work, looks impessive  One thing I noticed, whether intentional or not:

 

[maxf5]

Alright, will do it when all features are ready.

What do you mean exactly in the dropdown, notebooks and tablets look bigger compared to the others?

[SamC]

Sorry, should have explained. It looks like the products are at the front, but the dropdown disappears behind the white diagonal.

Maybe could use a light grey with opacity for the dropdown background? If it's white, that explains the disappearing act.

As I said, not sure of it's intentional but it sure caught my eye.