Alokai•2y ago

Custom Integration Boilerplate - Where is functionality?

Hi, we're implementing a complete custom integration with backend, api, theme etc 🙂 i'm curios how the shipping var is filled with calling the load function in useUserShipping. I can't find that code - only the types - could you tell me were to find it? The Magento integration is not that helpful....

37 Replies

rohrig•2y ago

Hi @fabianclemenz 👋 , let me take a look and see what I can find. 😄 I'll get back to you asap. If you find what you're looking for in the meantime, please let me know.

FabianClemenzOP•2y ago

HI @.rohrig thanks 🙂 - sure i will do that 🙂 i hope its clear what i mean 🙂

rohrig•2y ago

I think your explanation is enough to get me started. If I need more clarification when I'm digging in I'll be sure to ask. 😄

rohrig•2y ago

@fabianclemenz I think this is one of the situations where you're free to implement it as you need to for your integration. . . The useUserShipping function is a Vue Storefront composables for managing user shipping information. The way it works depends on the particular backend integration you are using with Vue Storefront, as the composable relies on integration-specific APIs to interact with the backend. Generally speaking, the load function in useUserShipping is designed to fetch the current user's shipping information from the backend and populate the shipping value with that data. It may call an API endpoint to fetch this information, and the actual implementation can vary depending on the backend being used. You would need to implement this function in a way that communicates with your backend to retrieve the necessary shipping information. I also had a look at the Magento integration and I agree it wasn't helpful. But fear not 🦸 there are other integration you can use for inspiration. Here is one integration that you may find helpful 👉 https://github.com/vuestorefront-community/prestashop/blob/main/packages/composables/src/useUserShipping/index.ts#L11 There are others on the vuestorefront-community org you may find helpful as well. I hope this sends you in the right direction. Does this answer your question? 😄

GitHub

prestashop/index.ts at main · vuestorefront-community/prestashop

Convert your traditional PrestaShop website into a fast, mobile friendly and modern website. - prestashop/index.ts at main · vuestorefront-community/prestashop

FabianClemenzOP•2y ago

Thanks for getting back 🙂 That is clear! but how does it populate the shipping value? ^^ the load function simply returns the data of specified type - but where is it populated?

rohrig•2y ago

I'm not sure I understand the question. Do you mean within the composable itself?

rohrig•2y ago

It looks like their calling their api here: https://github.com/vuestorefront-community/prestashop/blob/main/packages/composables/src/useUserShipping/index.ts#L121

GitHub

prestashop/index.ts at main · vuestorefront-community/prestashop

Convert your traditional PrestaShop website into a fast, mobile friendly and modern website. - prestashop/index.ts at main · vuestorefront-community/prestashop

rohrig•2y ago

Is that what you mean?

FabianClemenzOP•2y ago

here you return data.psdata but where is it magically loaded into the shipping variable? so i can simply use load and then access shipping.value ?

rohrig•2y ago

what shipping.value are you referring to? can you paste a link?

FabianClemenzOP•2y ago

https://github.com/vuestorefront-community/prestashop/blob/4a857dcfb5fb539d8cdfc9940c2b6c2664753848/packages/theme/pages/MyAccount/Addresses.vue#L84 << here you get the "shipping" variable this is filled if i call load and return the data from API - but where is the code which fills this?

GitHub

prestashop/Addresses.vue at 4a857dcfb5fb539d8cdfc9940c2b6c266475384...

Convert your traditional PrestaShop website into a fast, mobile friendly and modern website. - prestashop/Addresses.vue at 4a857dcfb5fb539d8cdfc9940c2b6c2664753848 · vuestorefront-community/prestashop

rohrig•2y ago

One minute, I'm looking into it 😄

rohrig•2y ago

rohrig•2y ago

following the path . . .

rohrig•2y ago

It appears to me that psdata is something returned by their API. Does that make sense?

rohrig•2y ago

This appears to confirm that:

rohrig•2y ago

Does this answer your question? 🙂

FabianClemenzOP•2y ago

i know that data.psdata comes from the API 🙂 and i know, that load returns the data. But where is it stored in shipping? so we can access it with shipping.value? for example:

const {shipping, load: loadShipping} from useUserShipping();

useFetch(async () => loadShipping(););

const {shipping, load: loadShipping} from useUserShipping();

useFetch(async () => loadShipping(););

now i have access to shipping.value where my data from the api is stored. but how does it get there - where is the code where something like shipping.value = datahappens

rohrig•2y ago

But where is it stored in shipping? <- what is the "it" you're referring to? Sorry, I'm trying to follow but I'm having trouble? 🙂

FabianClemenzOP•2y ago

the data from the api. i simply return in in the load function. but i never call sth like shipping.value = data to set it so somewhere there has to be code, where shipping is populated

rohrig•2y ago

Here's one example, does that help? 😄 https://github.com/vuestorefront/vue-storefront/blob/main/packages/core/src/factories/useUserShippingFactory.ts#L78

GitHub

vue-storefront/useUserShippingFactory.ts at main · vuestorefront/vu...

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 ...

rohrig•2y ago

@fabianclemenz ☝️ There are a few places in that file where shipping.value is being set. Please let me know if that's what you were looking for. Thanks 🙂

lincard•2y ago

Hi How are you doing

FabianClemenzOP•2y ago

@.rohrig thanks, that is what I was looking for!:)

Cookie•2y ago

hey guys, i am new to vue storefront and i am trying to test custom integration. And i tried

npx @vue-storefront/cli generate store

npx @vue-storefront/cli generate store

command and terminal says following

◇  :raised_hands: Node.js version is compatible
│
◇  :tada: Vue Storefront project has been generated
│
◇  :tada: Dependencies have been installed successfully
│
◇  To start working with the project, cd into project directory:

◇  :raised_hands: Node.js version is compatible
│
◇  :tada: Vue Storefront project has been generated
│
◇  :tada: Dependencies have been installed successfully
│
◇  To start working with the project, cd into project directory:

but i can not find anything related with vue inside my folder. can anyone help ?

rohrig•2y ago

Hi @cok_cook 👋 I'll try to help 😄 have you seen this video? 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/

Cookie•2y ago

thanks @.rohrig, haven't seen it. gotto watch this video

rohrig•2y ago

To be clear, are you creating an integration, or trying to use an existing integration?

Cookie•2y ago

existing one

rohrig•2y ago

ah, then that video won't be useful to you @cok_cook can you send me the link to the custom integration so I can run the command with it?

Cookie•2y ago

hi @.rohrig do you have any example that uses graphql ?

rohrig•2y ago

Sure, here's a link to the Magento 2 integration create by our team. https://github.com/vuestorefront/magento2/blob/main/packages/api-client/src/index.server.ts#L27

GitHub

magento2/packages/api-client/src/index.server.ts at main · vuestore...

Vue Storefront 2 integration for Magento 2. Contribute to vuestorefront/magento2 development by creating an account on GitHub.

mybabysexy•2y ago

hi @.rohrig , I created an integration, added a sample endpoint then push to git. Then I ran

npx @vue-storefront/cli generate store

npx @vue-storefront/cli generate store

and pasted the integration git link, but when I build it said

can't cd to playground/app

can't cd to playground/app

rohrig•2y ago

Hi 👋, I'll take a look and get back to you 🙂

mybabysexy•2y ago

Hi, any news?

rohrig•2y ago

Hi 😄 , The new SDK-based integrations are not inherently compatible with Vue Storefront 2 (VSF2) stores. If you wish to utilize your custom integration within an external application, it's necessary to first publish it to a registry an install them into an application. Alternatively, these integrations can be linked locally, similar to the procedure for other packages. I wouldn't recommend using VSF 2 unless you have to. It would be better to use either Nuxt 3 or Next.Js. If you'd like to see some examples, or even use something to get you started, check out the Next.js boilerplate: https://github.com/vuestorefront/storefront-next13-boilerplate Another example is https://github.com/vuestorefront/nuxt3-magento-sdk-storefront for Nuxt, but this has Magento. In either case, it can give you an idea of how to use your custom integration in a real-world app.

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.

GitHub

GitHub - vuestorefront/nuxt3-magento-sdk-storefront: A boilerplate ...

A boilerplate storefront build with the Vue Storefront Magento 2 Integration and Storefront UI - GitHub - vuestorefront/nuxt3-magento-sdk-storefront: A boilerplate storefront build with the Vue Sto...

Gaming

Programming

Custom Integration Boilerplate - Where is functionality?