Bonne Maman

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

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 development, 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',
  },
  // ...
};