ProductSlider and Scrollable
Hi.
I have latest installation of VSF and vsf-ui according to doc guide.
I am trying to use ProductSlider. I copied the code from official example to src/theme/components/ProductSlider.vue, and imported the component to my custom page. I am expecting the slider to look at least as in official website example, but it looks completely different. No arrow, only vertical scrollbar.
Also, I want to create product carousel using scrollable component as in https://docs.storefrontui.io/v2/vue/components/scrollable.html#usage.
I am trying to integrate source code and use it as a component but it does not look like possible.
Overall, ui components from official docs are not compatible with my current VSF installation
What am I doing wrong?
Scrollable | Storefront UI
Documentation for the Storefront UI
16 Replies
Hi @bohdanbatsenko π ,
I just added the slider to a sample project of mine and it seems to work fine. Can you elobrate on the issue your having? Also, please provide some more details about your project. If you can, please paste your package.json here.
Here's the code I used.
I just copy/pasted from the docs here βοΈ
package json
It looks like your project is a VSF2 Project π€ , which is not compatible with SFUI 2.
I see. Any solution?
With VSF2 you have the option to use SFUI v1.
But SFUI2 is not compatible.
I have just installed the VSF project according to https://docs.vuestorefront.io/magento/installation-setup/installation.html
Why it's incompatible?
Installation | Vue Storefront 2 for Magento
Documentation for the Magento connector for Vue Storefront 2
Could you please provide some info how to install latest SFUI2. with magento?
The Magento 2 Integration does not have a frontend implementation for the current Architecture. You could use this boilerrplate: https://github.com/vuestorefront/storefront-nuxt3-boilerplate and create the frontend implemenation using the SDK.
GitHub
GitHub - vuestorefront/storefront-nuxt3-boilerplate: Nuxt 3 Storefr...
Nuxt 3 Storefront Boilerplate. Contribute to vuestorefront/storefront-nuxt3-boilerplate development by creating an account on GitHub.
Also, here is an example project that could help you get started: https://github.com/TidycodeIT/nuxt3-magento-sdk-storefront
GitHub
GitHub - TidycodeIT/nuxt3-magento-sdk-storefront: A boilerplate sto...
A boilerplate storefront build with the Vue Storefront Magento 2 Integration and Storefront UI - GitHub - TidycodeIT/nuxt3-magento-sdk-storefront: A boilerplate storefront build with the Vue Storef...
Great! I will give a try! Thank you very much!
np π