Vue Storefront 1.9 — custom URLs, Marketplace challenge, new live websites

Version 1.9 is the first stable release in the new release cycle and the effects are stunning! Not only it’s the most stable version of all time but we managed to ship great features. There are also 5 new modules from our community and 5 new live VS shops! It’s amazing to post such great news each month.

New features

• SEO-friendly URLs came out of beta and are now ready to use.
• Payment Request API is now integrated with VS checkout. You can integrate it with a payment provider of your choice and use to drastically simplify the checkout process.

Of course, that’s not all :) You can find a full list of new features, improvements and bug fixes at the end of this article.

New modules

There would be no Vue Storefront without its amazing community. This month our partners released 6 new modules!

• Layered Navigation by Get_Noticed
• first B2B module Request for Quote from the product page by Interactivated E-Commerce / Dmitriy Schegolihin
• Klarna Checkout by Kodbruket
• Storyblok Integration (visual editor) by Kodbruket
• Facebook Pixel by newfantastic
• Intercom by DeveloDesign

You can check other modules made by our community at the Vue Storefront Forum.

Marketplace challenge winners

While speaking about modules it’s hard not to mention marketplace challenge. With this challenge, we wanted to encourage freelance developers and partnering companies to share top quality integrations and popularize their solutions within the open-source community.

The competition was strong but in the end, we selected 3 excellent modules and integrations for Vue Storefront. The winners are:

• Get_Noticed
• Develo Design
• Kodbruket

Here you can read more about the challenge and its winners.

New Vue Storefront-based websites are live

It’s hard to describe how great we feel when we see new production website running Vue Storefront. In last month we felt it 5 times!

https://www.kentaur.com/

https://www.meubelplaats.nl/

https://www.klebefieber.de/

https://kubotastore.pl/

https://sklep.damian.pl/

More quality and less bugs!

We hired 3 amazing QA engineers (full-time!) that are testing Vue Storefront in and out. Thanks to their hard work and bug reports we are able to shipp more stable versions than ever before.

Vue Storefront hackathons

Last month Vue Storefront meetups visited Birmingham and Tel Aviv! As always it was a great occasion to meet local Vue Storefront communities and do training for newcomers!

If you’d like to participate in Vue Storefront hackathon and training check our events website. Everyone is welcome! ;)

Storefront UI on Vue.js Roadtrip

I’m happy to announce that this month Storefront UI will be shown publicly for the first time during Vue.js Roadtrip in Barcelona and Paris. If you live there to come and give a hi5!

What else?

Added

• validation for UTF8 alpha and alphanumeric characters in most checkout fields — @lromanowicz (#2653)
• helper to process config urls with default endpoint host config.api.host - @patzick (#2858)

Fixed

• ESlint throwing errors about undefined jest globals in tests — @lukeromanowicz (#2702)
• Fixed changing the country when entering the shipping address in checkout not updating shipping costs — @revlis-x (#2691)
• Instant Checkout fix — @qiqqq (#2750)
• Infinite loop on the multistore page after reload — @patzick (#2713)
• Refreshing MyAccount page on multistore — @patzick (#2780)
• “Toggle password visible” button in password fields works the right way — @lromanowicz (#2772)
• Range queries to elasticsearch — @oskar1233 (#2746)
• BaseInput has minimum height now to avoid jumping on forms — @patzick (#2771)
• Orders with invalid address don’t stack anymore in the queue and have proper notification popup — @AndreiBelokopytov, @lukeromanowicz (#2663)
• Offline orders with out of stock products don’t stack anymore and get canceled after going back to online — @lukeromanowicz (#2740)
• Build ServiceWorker on Docker — @patzick (#2793)
• Product image load after coming back to online — @patzick (#2573)
• Insufficient validation for city field in checkout address — @lromanowicz (#2653)
• Incorrect hover activity on the ‘filter by categories’ in the search view on mobile — @idodidodi (#2783)
• Unit tests written in JavaScript now support async/await functions and dynamic import — @michaelKurowski, @lukeromanowicz (#2851)

… and everything from RC version:

Added

• Payment Request API integration — @qiqqq (#2306)
• The Url Dispatcher feature added for friendly URLs. When config.seo.useUrlDispatcher set to true the product.url_path and category.url_path fields are used as absolute URL addresses (no /cand /p prefixes anymore). Check the latest mage2vuestorefront snapshot and reimport Your products to properly set url_path fields - #2010 - @pkarw
• Unit tests of cart module written in jest — @lukeromanowicz (#2305)
• New reactive helper to check online state. Usage: import { onlineHelper } from '@vue-storefront/core/helpers' and then onlineHelper.isOnline - @patzick (#2510)
• Cart count config, allows you to display the item count instead of a sum of the item quantities — @pauluse (#2483)
• Video support in Product Gallery component. — @rain2o (#2433)

Fixed

• Gallery low-quality image in offline mode when high quality already cached — @patzick (#2557)
• Problem with placing a second order (unbinding payment methods after first order) — @patzick (#2195, #2503)
• Remaking order on user orders page — @patzick (#2480)
• Images blinking on category page — @pkarw (#2523)
• state.ts not bound in the module-template — @pkarw (#2496)
• Validation in the Myprofile section for postcode field — @pkarw (#1317)
• Non-integer qty of product added to the cart — @pkarw (#2517)

Changed / Improved

• The core/helpers parsing URL methods exchanged to query-stringpackage - @pkarw (#2446)
• Unit tests in Karma are now removed in favor of jest — @lukeromanowicz(#2305)
• Material Icons are loaded asynchronously — @JKrupinski, @filrak(#2060)
• Update to babel 7 — @lukeromanowicz (#2554)
• Fixed an issue where the correct image for a product configuration wasn’t set on the product page image carousel. Also added the fix on the productcarousel in the zoom component — @DaanKouters(#2419)
• The way of creating VS Modules was changed to use the factory method instead of explicit object creation. — @filrak (#2434)
• Added clear filters button on the desktop also and only show if filters are applied — @DaanKouters (#2342)
• Improved docs at contributing.md and configuration.md (spelling etc.) — @ruthgeridema (#2421, #2422, #2423, #2425, #2426)
• Fixed design issue of Country label on Edge 17 & Firefox — @ananth-iyer(#2390, #2399)
• Wishlist and compare items are loaded from local cache only once, instead of every time when the module component is rendered — @patzick (#2431)
• Country field is filled by the first country from the list in cart in payment section — @RakowskiPrzemyslaw(#2428)
• Improved product quantity change component in product and cart — @patzick (#2398, #2437)
• Updated to Vue 2.6.6 — @filrak (#2456)
• Null sidebar menu data on static page fixed — @filrak (#2449, #2441)
• The fix cannot edit previous steps in checkout — @filrak, @patzick (#2438)
• Fixed route guard SSR problem — @vue-kacper (#2364)
• Fix links in the footer to static pages bug — @filrak (#2452)
• Fix links at docs, Basics/Configuration file explained — @daksamit(#2490)
• Improve images loading on the category page, corrected alt view and blinking problem — @patzick (#2465)
• Improve tsconfig for better IDE paths support — @patzick, @filrak(#2474)
• fix breadcrumbs changing too early — @filrak, @pkarw (#2469, #2529)
• improved product gallery load view, shows correct image on reload — @patzick (#2481, #2482, #2488, #2501)
• Fix an issue where the index.html template within a theme is ignored — @EnthrallRecords (#2489)
• Added async sidebar component with async off-screen components error handling and fetch retrying after coming back online — @filrak (#2408, #2451)
• Inconsistent filters behavior — clear filters on page load — @patzick(#2435)
• fix price is never below 0 and user can’t add 0 or below 0 products to cart — @RakowskiPrzemyslaw(#2437)
• Check for placing single order in case of an error in any payment module — @patzick (#2409)
• Display prices in products added in offline mode. — @patzick (#2450)
• Updated cypress dependency for e2e tests — @lukeromanowicz (#2518)
• Improved styles on recommendation filters, product title and numeric input — @patzick (#2458)

Deprecated / Removed

• @vue-storefront/store package deprecated - @filrak

Learn more at vuestorefront.io