Alokai•2y ago

Complete ecommerce backend implementation

Hi Team, I want to build an ecommerce website using VSF (https://github.com/vuestorefront/vue-storefront) and custom backend API which handles all the calls to get, update and delete ( products, wishlist, place order, make payment). Can anyone help in steps I need to follow. So far I see that I need to follow Custom integration creation using CLI. But after creating it how to integrate to VSF and Do I need to define all the hooks? Resources so far found: [1] https://docs.vuestorefront.io/sdk/sdk/custom-integrations/quick-start.html [2] https://github.com/vuestorefront/integration-boilerplate [3] https://www.youtube.com/watch?v=HoDGl9bqsFc

GitHub

GitHub - vuestorefront/vue-storefront: The open-source frontend for...

The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total ...

Creating an integration SDK module via CLI | Vue Storefront 2 for V...

Documentation for the Vue Storefront SDK integration for Vue Storefront 2

GitHub

GitHub - vuestorefront/integration-boilerplate: Framework Independe...

Framework Independent boilerplate containing SDK and API Client starters. - GitHub - vuestorefront/integration-boilerplate: Framework Independent boilerplate containing SDK and API Client starters.

Vue Storefront

YouTube

Building a Custom Integration for Vue Storefront 2

Vue Storefront offers several integrations ready to use out of the box and you can check it out here - https://docs.vuestorefront.io/v2/integrations/. In this video tutorial, our Senior Fullstack Developer and Dev 🥑 Under Cover - Jakub Andrzejewski, will guide you through the process of creating a custom integration with JSON Placeholder. Githu...

34 Replies

rohrig•2y ago

Hi @gourava 👋 , The first two links you listed are for the SDK based architecture. The last link is for the Nuxt2 based version of VSF. You shouldn't really mix the two if you're just starting out. This would be a better video for the SDK based integrations: https://youtu.be/QdNRrZ6R-mI

Vue Storefront

YouTube

Build a frontend-agnostic integration for your headless backend | S...

Our Newsletter: https://vuestorefront.io/developer-newsletter Boilerplate Repo: https://github.com/vuestorefront/integration-boilerplate Storefront UI https://docs.storefrontui.io/v2/ Join us on Discord: https://discord.vuestorefront.io/

nalincah•2y ago

ah, thank. struggle with the same problem tried to run npx @vue-storefront/cli create integration it gives me Cannot open assembly 'create': Datei oder Verzeichnis nicht gefunden. ah, was still on node 14, works with v16 I can't wrap my head around the two concepts. For me, the first video https://www.youtube.com/watch?v=HoDGl9bqsFc looks exactly what I need if I want to integrate my Sylius App (to list some products). But the second video (https://www.youtube.com/watch?v=QdNRrZ6R-mI) also shows me how to implement a middleware where I create endpoints that communicate with some API

rohrig•2y ago

I understood you're creating a custom integration, is that correct?

nalincah•2y ago

I think so. My problem is we use Sylius v1.10, so the existing integration won't work My first goal is to create a productListing

rohrig•2y ago

I'll try to clear it up for you 😄 Creating a full integration is not a trivial task. But you can do it using the resources. I think where the confusion lies is the new Integrations are not the same as the old integrations. You won't be using VSF2. The new integration you build will also need to be implemented in a frontend (Vue, React etc). So the steps would be: 1. Create an integration 2. Implement it in a frontend

nalincah•2y ago

Do I need to write the frontend from scratch? I mean, are there any boilerplates for the "end user part"?

rohrig•2y ago

We have a boilerplate for react/next.js: https://github.com/vuestorefront/storefront-next13-boilerplate

GitHub

GitHub - vuestorefront/storefront-next13-boilerplate: Vue Storefron...

Vue Storefront Next 13 Boilerplate. Contribute to vuestorefront/storefront-next13-boilerplate development by creating an account on GitHub.

rohrig•2y ago

The Nuxt boilerplate is a work in progress

nalincah•2y ago

mhh, okay. so maybe I stick with the old version?

rohrig•2y ago

I wouldn't, Vue2/Nuxt2 reach end of life at the end of this year

nalincah•2y ago

I followed the documentation at https://docs.vuestorefront.io/v2/integrate/integration-guide.html and now I try to get my middleware to, at least, try to execute a request

Integrating e-commerce platform | Vue Storefront 2

Vue Storefront 2 documentation

nalincah•2y ago

oh, okay So I could either try to get it running in vue2/nuxt2 or I wait until nuxt3 frontend or I build my own frontend?

rohrig•2y ago

That's up to you. The Nuxt3 boilerplate would also require you to customize it for that particular backend. 😄

nalincah•2y ago

I know, but only the mapping, right?

rohrig•2y ago

I guess you could say that. I just don't want you to think it will be plug n play solution. It will still require some effort

nalincah•2y ago

Okay, lets say I ignore the end-on-life for vue2 and do it the old way. I did everything from the documentation above. Now to test it, i've created some Foo.vue in pages (how to change the default Homepage is yet another mystery for me) I can access my Foo-Page and there I want to execute my query to my backend. So I did

<template>
  <div>
    <h1>fooooo</h1>
    products: #{{ products }}#
    product: #{{ product }}#
  </div>
</template>
<script>
import { productGetters, useProduct } from '@vue-storefront/zincplatformfrontend';
import { computed, useRoute } from '@nuxtjs/composition-api';

export default {
  setup() {
    const route = useRoute();
    const { products } = useProduct('products');

    const product = computed(() => productGetters.getFiltered(products.value, { master: true, attributes: route.value.query })[0]);

    return {
      product,
      products
    };
  }
};
</script>

<template>
  <div>
    <h1>fooooo</h1>
    products: #{{ products }}#
    product: #{{ product }}#
  </div>
</template>
<script>
import { productGetters, useProduct } from '@vue-storefront/zincplatformfrontend';
import { computed, useRoute } from '@nuxtjs/composition-api';

export default {
  setup() {
    const route = useRoute();
    const { products } = useProduct('products');

    const product = computed(() => productGetters.getFiltered(products.value, { master: true, attributes: route.value.query })[0]);

    return {
      product,
      products
    };
  }
};
</script>

but product and products are just empty array, no requests at all

FabianClemenz•2y ago

You have to implement the useProduct load (or search) function, the api client and call the function in your Foo.vue With something like useFetch

gouravaOP•2y ago

@.rohrig Thanks for the response. I have watched the video and I have some followup questions on top of the video content. What would be the next step once I create integration using npx @vue-storefront/cli create integration? How would I consume this integration in the store that I have created using magento 2 integration, now I want to get rid of it and use this for Vue Storefront store. Can you please guide me in this regard And, Once I integrate this to the store, Do I need to write all custom composables (useProduct, useCart, useWishlist etc.,) And, when would be the estimated date of release of nuxt storefront biolerplate code

rohrig•2y ago

Hi @gourava 👋 , Let me make sure we're talking about the same things. When you say, " I have created using magento 2 integration" do you mean the Magento SDK based Integration? https://docs.vuestorefront.io/sdk-magento2/

Vue Storefront 2 for Magento 2

Documentation for the Magento 2 module for Vue Storefront 2

gouravaOP•2y ago

Yes @.rohrig i have created the store using magento2 integration as I was not having custom integration in seperate git repo. And, was not aware of exact process for setting up the store with custom integration

rohrig•2y ago

What framework did you use? just curious 😄

gouravaOP•2y ago

Nuxt

rohrig•2y ago

Nuxt 3?

gouravaOP•2y ago

Yes

rohrig•2y ago

Okay, the exact same way you insalled the Magento 2 sdk and set up the middleware, is how you would use your custom integration. Since it's a custom integration, only the stuff you implemented will be available. So, you will have to implement all of the features you want in the sdk and API, using the integration-boilerplate. then publish it or link it locally to consume in your Nuxt 3 app. (This is already set up in the playground)

gouravaOP•2y ago

What do you mean by publish it? Shall I push all the changes to git?

rohrig•2y ago

The integration is a set of modules that will be installed into frontend applications. So that you can install them in frontend apps, you need to publish them to a registry, like npm So the steps would be: 1. Create your custom integration using the boilerplate 2. Publish the sdk and api client to a registry 3. Install them into your frontend application (sdk in frontend, api in middleware) Does that answer your question? 😄

nalincah•2y ago

this is the way for the new SDK? And not the "old" with Vue2/Nuxt2, right?

rohrig•2y ago

Right

gouravaOP•2y ago

@.rohrig yes. Really appreciate your time in clearing all the queries 😀

gouravaOP•2y ago

@.rohrig When I use the SDK approach, I should have my own frontend using Storefront-UI components. right? Or When I create a store using npx @vue-storefront/cli generate store I can choose custom integration and provide the npm published package's git repo link. I am in a confusion which approach to choose as there is no boiler plate available for Nuxt.

rohrig•2y ago

Thank you @gourava for this feedback. We are in a transition period and I can see how this might be confusing. Sorry for that. 😊 If you use the command you have shown ☝️ generate store then you are creating a VSF2/ Nuxt 2 store. Choosing a custom integration that assumes an old-style custom integration, which has a different structure than the new sdk style integrations. In short, it will not work. You could adjust things to make it work, but that would require a majorly significant effort, which wouldn't make a lot of sense considering Nuxt2/Vue 2 is sunsetting at the end of this year.
In a nutshell, one cli, two completely incompatible versions. (I will address this internally and find a way to communicate this better during the transition period) If you create an SDK-based integration, you are not limited by the frontend as it is frontend agnostic. The frontend could be Vue/Nuxt or React/Next. You could follow the steps I listed earlier. Does that clear things up for you? 😄

gouravaOP•2y ago

@.rohrig yes. Sorry for too many queries. Just want to be clear on approach I follow before putting on effort. I am trying to build complete e-commerce site. I want to go with VSF as it offers many features and very performant. So, I might be postng here for help when I am feeling struck. Please dont mind 😁

rohrig•2y ago

Not at all, we're here to help 😄 . I'll lock this post as we've cleared up this issue. For future queries please open a new post.

Gaming

Programming

Complete ecommerce backend implementation