PWGermanShop for ProcessWire – Live Demo

[eutervogel]

The order detail page had become increasingly cluttered and unintuitive over time as more buttons and features were added, so I gave it a proper overhaul.

[eutervogel]

Hey everyone, the post about the product configurator went out way too early. Sorry about that! 😅

It’s just some minor UI cleanup needed. We'll have a working version up shortly.

Edited August 5 by eutervogel

[howdytom]

@eutervogel  I am glad it wasn't me 😅. I was browsing through the demo shop's pages like crazy. 

[eutervogel]

Hi all,

a quick follow-up: the latest addition to the shop suite is now live - a generic product configurator with a visual engraving/label designer.

frontend: https://demoshop.mholte.de/produkt/fruehstuecksbrett-gravur/

backend: https://demoshop.mholte.de/admin/shop/configurator/?template=5

Try the product “Frühstücksbrett mit individueller Gravur” - a personalised oak cutting board. Pick a design, enter some text and choose a font. The main product image updates live, and the finished artwork is frozen onto the order as a proof image for the workshop.

The options are completely data-driven - no code required. Shop operators can create select, radio, checkbox, text, number and area options, including surcharges, directly in the admin. A rule engine handles conditions such as: if option A is X, show, hide or add a surcharge to option B.

Price calculation and validation happen live on the product page, while the server remains authoritative: the price is recalculated and frozen when the product is added to the cart.

The engraving designer is optional per product. Each design can have its own image and text area, which the shop operator positions visually in the backend - including moving, resizing and rotating it. On the storefront, the selected design, the customer’s text and the chosen font are combined into a live preview. During checkout, the finished PNG is frozen and attached to the order, the confirmation email and the customer’s account view.

Area pricing is supported as well: the operator enters the price per m², the customer enters the dimensions in cm, and the conversion happens automatically.

The easiest way to understand it is probably to simply have a look around the backend and try it out.

If you want to create a configurator product yourself, just create a normal product and tick “Configurator product”. It will then appear under Shop → Configurator. Don’t forget to select a tax rate - I’ll make that field mandatory soon.

Feedback is very welcome!

Cheers,
Martin

[eutervogel]

I've added some new products to the category "Individuelles und nach Maß" to show off a bit more of what the configurator is capable of. 

[eutervogel]

Configurator update: per‑m² pricing, oval engraving areas, multi‑line text

A few more improvements to the product configurator since last time - all live on the demo shop if you want to click through them.

Per‑m² surcharges. Value options can now carry a surcharge per square meter, not just a flat amount or a percentage. So a made‑to‑measure roller blind can charge, say, +10 €/m² for a blackout fabric — the surcharge scales with the size the customer enters, instead of being the same for a tiny window and a patio door. The live price reflects it instantly, and the server recalculates it bindingly at add‑to‑cart.
Try it: the Rollo nach Maß product, "Anthrazit (Verdunklung)" fabric.

Oval / elliptical engraving areas. The engraving designer used to map text onto rectangular areas only. Text boxes can now be ellipses: the preview clips to the arc and shrinks the text to fit the curve, so an oval plaque or a round pendant uses its real usable area without running into the border.

Multi‑line engraving. The customer's engraving field is now a proper multi‑line text area, so names, dates and short dedications can be laid out over several lines and the live preview and the final proof image render them exactly the same.

As always the whole thing is data‑driven and operator‑configurable. No code per product.

[eutervogel]

Configurator follow-up: buyer-side design, colour-aware preview — a full worked example

Rather than list features in the abstract, here's one product on the demo shop set up end-to-end: a personalised jute bag. https://demoshop.mholte.de/produkt/jutebeutel/

Full disclosure on the bias: years ago I worked at a company that put names and prints on clothing all day, so this whole engraving/labelling rabbit hole is probably just an old occupational reflex. Anyway...

What it shows:

The buyer designs the text. Per engraving field the operator decides what the customer may change: alignment (fixed, or left/centre/right buttons) and colour (off, a fixed palette, or a free colour picker). Everything the buyer picks flows into the live preview, the frozen proof image, and the order data, so the workshop knows exactly what was ordered. On the bag, the two illustrated motifs use a fixed ink palette; "Schlichter Rahmen" (plain frame) is set to free colour choice,  pick that motif and you get the full colour picker instead of swatches.

Colour-aware preview. Pick a bag colour (natural / black / terracotta / green) and the whole preview photo swaps to that colour, with your text composited on top. Behind it is just a photo-per-combination grid (motif × colour) the operator fills in, no code.

Print-safe text. For single-colour print/engraving the text field filters out emoji and colour glyphs. An entered ❤️ becomes a producible single-colour heart where the operator allows the symbol.

You can see the setup side too: log into the demo backend (https://demoshop.mholte.de/admin/, demo account) → Shop → Konfigurator → Personalisierter Jutebeutel. That's where the palette, the free-colour setting on "Schlichter Rahmen", and the motif×colour image grid live.

[Peter Knight]

Hi @eutervogel
I gave the front-end a spin and maybe these are helpful suggestions?

As a user, I'd like to see:

1. A default "Your message" text already applied to the Text field (and bag).
2. I often wonder if displaying actual font names to the user is helpful Vs traditional, script, playful, etc or
3. Font field should have upper-case F
4. On the Crowd input field, is this meant to read Quantity?
5. The text - Choose a design, add text, font and bag color — with live preview. Seems like it's in the wrong place if it's useful to provide context to users. 
6. Configuration should have an upper-case C but seems more like an internal label. Could be dropped or swapped for the text in item 5?
7. When I clicked Add to Cart, it took the confirmation a few seconds to appear.
8. On the Added to cart popup - is 'To the basket of gooods' meant to have the extra 'o'?
9. 'To the basket of gooods' also might be better as View your Cart?

Happy to send more if you want as a DM

 

[howdytom]

@eutervogel Great work! The “Eichen-Regalbrett nach Maß” is pretty close what I had in mind. Some additional optional features would be nice, e.g. holes for cables (Kabeldurchlass) with and without covers, cover color, or a drilling assembly kit to demonstrate the various possibilities. It would be helpful if these configurable options were listed line by line in the shopping basket summary.

The »Frühstücksbrett mit individueller Gravur« could also be used for clothing shops, Shirts... with image upload. I think displaying actual font names is essential. You can’t rely on images only.

Discounts based on the quantity would be another idea. Let’s say I would like purchase 50 or more plants.

Given the short timeframe, the result is brilliant

[eutervogel]

@howdytom

Thanks for the kind words!

Pretty much all the features you’re missing from the “Eichen-Regalbrett nach Maß” can already be handled through the configurator.

Cable cut-outs would simply be another option, just like choosing whether or not to add covers. A rule could then show the cover option only once cable cut-outs have been selected.

The drilling template can also easily be added as an option with an additional charge. I’ll happily add all of this to the demo seed when I get a chance.

I’m currently working on listing the individual options separately in the cart. Image uploads are on the roadmap, but that’ll be a separate slice.

There’ll also be placeholder text in the text box very soon. The dropdown could show the font name, with the entered text, or the example text, rendered in that font underneath.

Categorising the fonts by style isn’t a bad idea either, @Peter Knight

Quantity discounts are a very good idea and should be relatively easy to implement, so I’ll definitely add those.

[eutervogel]

@Peter Knight

Thanks for your feedback!

I’ve already covered points 1 and 2 in my reply above.

Points 3, 4, 6, 8 and 9 are most likely Google Translate errors, as there isn’t an English i18n yet. So I can’t explain where that extra “o” came from either. It definitely isn’t in the code.

5. Yes, that’s right. I’ll move it to a more prominent position.

7. It takes that long because a screenshot of the finished product preview is generated and attached to the order. But yes, it shouldn’t behave like that. I’ll look into either handling it in the background or at least showing a proper notification while it’s being processed.

Please feel free to send me a DM if you find any more issues.