Linkedin Twitter Facebook Github Send Instagram Rss Arrow Top
Back to home
Bonne Maman Bonne Maman

Bonne Maman

Vue.js webapp into a big e-commerce website. This is an jar label editor, enabling a customization of the product.

Bonne Maman is a French manufacturer of jam, marmalade, compotes, desserts, cakes and biscuits.

https://en.m.wikipedia.org/wiki/Bonne_Maman

Context

In order to increase his benefits, the brand Bonne Maman had the desire to add customization in some of his products.
In this case, they wanted to propose editable jar label to their customers.

At launch day, the project has been noticed by some medias, including the french TV channel CNEWS, who wrote an article about it

Custom jar's Bonne Maman
Custom jar’s label

Technical

The bonne-maman website uses Mangento 2 under the hood. It’s an all-in-one PHP solution for e-commerce website with a nice admin interface.

In the other hand, we chose to use Vue.js for our webapp. It allowed us to make a real time label editor.

To speed up developement, we used the mono-file feature of Vue.js, with a custom webpack (vue-loader, babel-loader, VueLoaderPlugin, UglifyJsPlugin) configuration to compile our files.

You can’t import modules with magento because it uses AMD modules so had to tweak our webpack to ouput Universal modules, compatibility first !

module.exports = {
  // ...  
  output: {
    filename: 'configurator.js',
    library: 'configurator',
    libraryTarget: 'umd',
  },
  // ...
};
Custom jar editor Bonne Maman
First step: choose your perfume
Custom jar editor Bonne Maman 2
Second step: choose you background and enter your message
Custom jar editor Bonne Maman errors
Second step with errors
Custom jar editor Bonne Maman add t o cart
Final step: add to cart
Custom jar editor Bonne Maman mobile
First step (mobile)
Custom jar editor Bonne Maman mobile perfume
Second step (mobile)
Custom jar editor Bonne Maman text editor
Third step (mobile)
Custom jar editor Bonne Maman complete
Complete (mobile)
Custom jar editor Bonne Maman add to cart mobile
Add to cart (mobile)

Next project: market-me.fr

The AgenceMe team (2 developers, 2 designers, 1 marketing) and I build a creative marketplace from scratch in 2 months.