A
AlokaiIgnat Insarov

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.
R
rohrig85d ago
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.
R
rohrig85d ago
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.
II
Ignat Insarov85d ago
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.
R
rohrig80d ago
I'll see if I can arrange something and get back to you .
FR
Filip Rakowski80d ago
@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
II
Ignat Insarov75d ago
Thank you. This looks good.
Want results from more Discord servers?
Add your server
More Posts
during this temporary transition fase, how to?What is the best way, to get up and running using vsf2, magento, nuxt3, storefront-ui using tailwindHow to use vsf nuxt3 version?i just watched new workshop where core team was using nuxt3 with vue storefront, now i m curious aboUsage of SDK in frontendI'm unable to use sdk in frontend, I added one API endpoint in sdk and want to fetch data and displanuxt vuestorefrontuiCan I use vuestorefrontui with another ui library like ui.nuxt? I need more reusable components likeHow to Deploy Vue Project in Nuxt to my Ubuntu Serveri configured my server using pm2 and apache2 but when loading using the ip address it doesn't fetch Canonical Links have forward slash encoded which breaks the pageHi. The Canonical Links that get added to the head have the forward slashes encoded to `%2F` You caI got an error when i try to start my vue storefront projectHello @skirianov @rohrig i got an error when i try to start my VSF1 project please check onceWhat happened to VSF and Vendure integration?Hello all, I've been up and down the channels looking for some info on integrating vendure with the how to add external checkout in vue storefront?hey, i m working on vue storefront and i wana use external checkout like i wana use the magento 2 chGET error Error when product goes out of stockWe have set up our Magento config so that out-of-stock products are not visible on the website. If custom query to change customer passwordHi, I'm trying to change password for an existing cutomer using graphql mutations. I have a vsf2nuxtvsf adyen-commercetools express checkout flowThe v5 module only implements the new adyen session api, however express payments require the advancWhere is the demo / a theme?I've read a lot of documentation, and I can't find where frontend pages connecting the UI and SDK arstorefront-nuxt3-magento2 integrationI have installed in my local machine `storefront-nuxt3-boilerplate` and then implement a custom mageMagento 2 Docker image errorI'm using npx @vue-storefront/cli m2-only to generate the magento2 pwa project, but encountered an eGraphQL queries are using POST, should be GETWe have noticed that all our GraphQL queries are using POST, and not GET. We have the below defaultnavigation guardWhen i refresh a product page, an error is thrown of navigation guard. This error is getting triggeVSF 1.12.3Hello, anyone can help for an issue on VSF v1?New project Magento integration setup with CLI not working**Replicate** npx @vue-storefront/cli init Magento integration template INstall Magento 2 locally --Post Installation errors```bash ERROR [VSF][error]: [Network error]: TypeError: Only absolute URLs are supported