EC-CUBE, one of the largest open source ecommerce CMSes in Japan, has released a beta plugin to use AMP for their ecommerce stores. The plugin was built by EC-CUBE’s well known partner SUNDAY SYSTEMS, Inc. in collaboration with Mobile Solutions Consultants from Google, in just one month 😲. For websites who use EC-CUBE, you can try the plugin here.
A PHP based CMS with more than 1.8M downloads and 30K+ live merchants, EC-CUBE was seeking further opportunity to satisfy the UX of their end users. They just released their major update v4.0.0 in October 2018 which focused more on the backend performance and architecture. Now they have decided to put effort in optimizing the frontend as well, leveraging AMP and key PWA technologies. The newly released AMP plugin is still in an experimental phase but already has some remarkable features which provide faster and optimized UX/DX.
- To reuse existing assets and work with their PHP developer community, the AMP plugin will convert current PHP Twig templates into valid AMP templates. No need to struggle with AMP specific syntax!
- The plugin is fully integrated into the CMS admin interface. Developers will be able to turn on/off the plugin, customize layouts, build components and edit the converted AMP templates directly from a dedicated UI.
- Developers will have the option of “paired AMP mode” and “AMP first mode”. In paired AMP mode the main site is unaffected, but the first landing page (such as from a search engine) is optimized using AMP. In AMP first mode, the whole site is changed to always return AMP for all pages on the site.
- It also works as a PWA. Having Service Worker and Web App Manifest bundled in the plugin, developers can now add an EC-CUBE store to the homescreen of a mobile device and even think about offline use cases.
EC-CUBE has performed a trial with their default template (an ice cream shop🍦) and have seen a significant improvement in speed, as well as their canonical features being converted correctly to AMP. For example, using `amp-sidebar` for the slide menu, fetching product options with `amp-list`, changing the price once the user selects the option with `amp-bind` etc.
In their trial, they also experimented PWA features such as add to home screen and offline browsing. Merchants can now start thinking about leveraging these App-like features in their business strategy.
EC-CUBE’s solution was featured during the “Progressive Content Management Systems” session at the Chrome Dev Summit earlier this week. Also, EC-CUBE and SUNDAY SYSTEMS have published the details of their AMP plugin and the overall project in an article linked here (Japanese). You will be able to see what they have done by looking at the code snippets and their architecture. Also please visit the demo page, try the plugin, check out the code on GitHub, and let us know what you think! Comments and feedback are welcome via the plugin’s GitHub issues or the Slack channel.
Special thanks to Alan Kent, Developer Advocate and Chris Sater, Global Product Partnerships at Google for advising us throughout the project.
Posted by Yusuke Utsunomiya, Mobile Solutions Consultant and Monisha Varadan, Global Product Partnerships at Google