A
Alokai

🙋|general-help

Custom Integration Boilerplate - Where is functionality?

FFabianClemenz5/25/2023
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....
Rrohrig5/25/2023
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.
FFabianClemenz5/25/2023
HI @.rohrig thanks 🙂 - sure i will do that 🙂 i hope its clear what i mean 🙂
Rrohrig5/25/2023
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. 😄
Rrohrig5/25/2023
@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
FFabianClemenz5/25/2023
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?
Rrohrig5/25/2023
I'm not sure I understand the question. Do you mean within the composable itself?
Rrohrig5/25/2023
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
Rrohrig5/25/2023
Is that what you mean?
FFabianClemenz5/25/2023
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 ?
Rrohrig5/25/2023
what shipping.value are you referring to? can you paste a link?
FFabianClemenz5/25/2023
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
Rrohrig5/25/2023
One minute, I'm looking into it 😄
Rrohrig5/25/2023
No description
Rrohrig5/25/2023
following the path . . .
Rrohrig5/25/2023
No description
Rrohrig5/25/2023
It appears to me that psdata is something returned by their API. Does that make sense?
Rrohrig5/25/2023
This appears to confirm that:
No description
Rrohrig5/25/2023
Does this answer your question? 🙂
FFabianClemenz5/25/2023
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
Rrohrig5/25/2023
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? 🙂
FFabianClemenz5/25/2023
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
Rrohrig5/26/2023
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 ...
Rrohrig5/26/2023
@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 🙂
Llincard5/28/2023
Hi How are you doing
FFabianClemenz5/30/2023
@.rohrig thanks, that is what I was looking for!:)
Ccok_cook6/29/2023
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 ?
Ccok_cook6/29/2023
thanks @.rohrig, haven't seen it. gotto watch this video
Rrohrig6/29/2023
To be clear, are you creating an integration, or trying to use an existing integration?
Ccok_cook6/29/2023
existing one
Rrohrig6/29/2023
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?
Ccok_cook6/30/2023
hi @.rohrig do you have any example that uses graphql ?
Rrohrig6/30/2023
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.
Mmybabysexy7/10/2023
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
.
Rrohrig7/10/2023
Hi 👋, I'll take a look and get back to you 🙂
Mmybabysexy7/13/2023
Hi, any news?
Rrohrig7/13/2023
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...

Looking for more? Join the community!

A
Alokai

🙋|general-help

Join Server
Want results from more Discord servers?
Add your server
Recommended Posts
SfComponentSelect dosen't hold selectionHi there, i have problem with SfComponentSelect component ``` <SfComponentSelect SFUI 2.x with Magento 2How can i use SFUI 2.x with Magento 2. Want to test SFUI 2.x on my local machine to see its performaVSF2 + OpenMageGreetings 🙂 I have a question regarding the integration of Vue-Storefront 2 with Magento 1.9 (OpenHi AllI am trying to implement Payment gateway in vsf ,But I cannot find the yarn or npm package mentioneBasic AuthHi all. I have a question regarding authentication. On our prod instance everything works fine. But "Accept all cookies"I am using shopware-pwa with Shopware 6 and I'm trying to expose an Accept all cookies button. The sFollowing Digitalocean deploy tutorial leads to errorHello! I'm following this step-by-step tutorial https://vuestorefront.io/blog/step-by-step-guide-dePaymentsI am planing to implement vsf payments for magento , I am following this guide "https://docs.vuestorHow to add additional field to Customer Typecompared to what it is said in the documentation I'm only able to get few information from the user CookiesWhere can I find more info on cookies ? Meaning, are the merchant cookies exposed to Storefront ? OrEditing index.js file in.nuxt projectHello I would like to add bootstrap to my porject so i added the import into the index.js file to maError deploying - connect ECONNREFUSED 127.0.0.1:80Hi - it's me again 🙂 in local development, using `yarn dev` everything works fine. Even directly Error _theme/layouts/default.vueHi i'm getting this error - does anyone know how to solve this?how to send an API content-type:multipart/form-data of this format in api-client?how to send an API content-type: multipart/form-data of this format in api-client?Themes marketplaceAre there any places where I can buy a Vue Storefront theme?, something like themeforest for ShopifyGetting error while static deploy vsf with magento 2 in EC2 for production ,yarn build yarn start works , but as soon as terminal is closed server stops if i build it with taDefault locale does not workHi everybody, when I set the defaultLocale in nuxt.config.js, it seems that it does not work, the rVue Storefront Cloud Docs Swagger authorizationHi there! The docs at https://docs.vuestorefront.io/cloud/v2/api/swagger.html say that `Access to Ash: cli: command not foundanyone know why i would be getting this error `sh: cli: command not found` when doing a new install Hello,I am trying to setup the shopware PWA. The backend is hosted at Ceroline and i would like to connect