Are there any storefront templates out there I can use for demonstration purposes?
I am working on a closed source back end offering similar to PrestaShop in functionality. One of the features we wish to offer is integration with Vue Storefront.
I have already written an SDK module and an API client that I have talking to the https://github.com/vuestorefront/storefront-nuxt3-boilerplate front end. However, this front end is not fully alive. It has one specific category and one specific product hard-coded into it. While it was easy to make it display whatever products I serve it from our back end, it still only displays one category because the relevant SDK method does not accept any arguments — the name of the category is hard-coded. There are other hard-coded pieces all over the code base as well.
I want to do a great presentation to my colleagues and stakeholders, and for that I need a front end where people can actually click on links and walk between different categories. This is certainly not beyond me to implement myself, but it would be ideal if I can integrate with a complete, fully working front end instead. This would reinforce the appreciation of flexibility and efficiency that Vue Storefront can potentially offer.
So, are there any front end templates out there such that I could simply drop my SDK module and API client in and have everything working so far as I serve the stuff from my back end? A quick search on the Internet did not reveal anything.
It does not matter for me how the front end would look — rather, I want to see possibly more functionality. We are ready to modify our API as needed to match the Unified Data Model or whatever other interfaces such a template front end would want from us.
6 Replies
You have a few options, none of them would allow you to avoid some manual steps. You can replace the commerce module here: https://github.com/vuestorefront/storefront-nuxt3-boilerplate/blob/develop/apps/web/sdk.config.ts#L4
GitHub
storefront-nuxt3-boilerplate/apps/web/sdk.config.ts at develop · vu...
Nuxt 3 Storefront Boilerplate. Contribute to vuestorefront/storefront-nuxt3-boilerplate development by creating an account on GitHub.
with your implementation. But you'd need to ensure you either:
- conform to the interfaces
- or adjust the interfaces to conform to you data
there's no magic bullet solution here. As for the hard-coded values, you'll need to manually replace them with your dynamic data as well.
Yep, this is nearly what I did. I added another SDK module and replaced some of the calls to
sdk.commerce with calls to my our own SDK module. The difficulty here is that it is not documented precisely what should work once you replace the boilerplate SDK with an actual back end and what is hard-coded for good.
Are there any other front end templates or examples out there that I can try out?
I am not afraid of tweaking some code but it would be advantageous to have more than one code base to try our SDK module out with.
In the ideal it would have been fantastic to see a front end example that matches the Unified Data Layer specification.I'll see if I can arrange something and get back to you .
@Ignat Insarov Hey!
You can try the recently launched PWA from Plenty Markets as an example if that helps - https://pwa-docs.plentymarkets.com/
Code is here https://github.com/plentymarkets/plentyshop-pwa
plentyShop PWA Docs
Documentation for plentyShop PWA, built with VueJS, Nuxt 3 and Vue Storefront.
GitHub
GitHub - plentymarkets/plentyshop-pwa: plentyShop PWA Boilerplate -...
plentyShop PWA Boilerplate - Using Nuxt 3 and Vue Storefront - plentymarkets/plentyshop-pwa
Thank you. This looks good.