This document discusses Lakefields' modules for Vue Storefront, including a layered navigation module and payment service module. The layered navigation module has won awards and is used in multiple projects. The payment service module allows for payment integration in Vue Storefront through event listeners and by moving logic to the backend layer. Future steps include standardizing the module to support multiple payment service provider APIs.

1. VueStorefront
Hackathon #21
Hosted by:
Networking Sponsored by:
&

2. Our Modules
for Vue Storefront
● Layered Navigation Module
● Payment Service Module
@lakefields

3. Layered Navigation
Vue Storefront module
Winner of The Marketplace Challenge 2019
Used in multiple projects around the world
Begin of 2020 new release for VSF v1.10.5
@lakefields

4. Layered Navigation
Vue Storefront module
Changelog
● Bugfixes in priceslider and reset slider on
routechange
● Hide filters and filteroptions without yield
● Now the clear all filters button works
● Add config setting for sorting options
alphabetically
● Add config setting to limit the size of
filteroptions - if this limit is exceeded
the user can toggle
@lakefields

5. Our Modules
for Vue Storefront
● Layered Navigation Module
● Payment Service Module
@lakefields

6. Payment integration
for Vue Storefront
● How it works
● Improvements
● Next steps
@lakefields

7. Payment integration
for Vue Storefront
How it works
● Eventlisteners for checkout events
● Diagram
@lakefields

8. Fetch payment methods
@lakefields

9. From checkout to payment gateway
@lakefields

10. Payment integration
with Vue Storefront
Improvements
● Move logic to backend layer
● Reconsider the hash checks
@lakefields

11. Checkout flow optimized
@lakefields

12. Thank you page
@lakefields

13. Webhook
@lakefields

14. Payment integration
with Vue Storefront
Demonstration
@lakefields

15. Payment integration
with Vue Storefront
Next steps
● Standardization for support multiple PSP APIs
@lakefields

17. Payment integration
with Vue Storefront
Questions?
@lakefields
https://github.com/Lakefields/vsf-layered-navigation
https://github.com/Lakefields/vsf-payment-service