My question is about SAP Spartacus.
I wanted to know which way should be followed while making components:
1)Make components in Hybris, and use it on Spartacus storefront via a REST call.
2)Make components in Angular and use it on app component.Also wanted to know what is the correct way to use it on Spartacus storefront
I would generally go with 2nd option, i.e. create components in Angular and:
1) map them to existing component defined in hybris
2) Use CMSFlexComponent with flexType in hybris CMS to map it to your Angular component
You can read how to configure CMS component mapping in docs:
https://sap.github.io/cloud-commerce-spartacus-storefront-docs/customizing-cms-components/
Related
Developing a Windows Desktop application that uses Chromium Embedded Framework for the UI frontend, but I assume this would apply equally to Electron and similar platforms as well.
The application will have multiple pages, each implemented as its own component. In a traditional SPA this would typically be implemented using Vue Router, but I assume the main benefits of Vue Router are the ability to route to the appropriate resource based on URI, parse URI query parameters, and enable the forward and back buttons with history.
Since none of these really apply to my Desktop application, I am thinking that Vue Router will bring little to the table and just add more boilerplate noise to the codebase. If I'm missing something and there is a significant benefit in Vue Router for my use case, please let me know.
Side note: I do plan on using Vuex to allow the different page components to work on the same set of state data without a lot of tedious prop/event binding.
I would still opt for vue-router, since it provides a standardized way for in-app routing in Vue apps. It is not some sort of exotic dependency you are introducing.
If your app is growing and you need things like nested routes and dynamic routing, passing props to a route, having navigation guards like ‘beforeEach’, you can just use it, without creating your own solution or rework the app to use the router. Also, another vue developer immediately understands the app routing and so do you, if you have to change something in the app after a year not working on it. And it is all well documented.
And you are developing a desktop app, which makes a few kB more or less in the bundle not a concern, I would think.
Automatic active link CSS classes
HTML history with back/forward navigation support
Nested components
etc.
I will like to from a Vue app load a component from a URL(could be in the same domain or not), create an instance of it, and show it on the current view.
The idea is to have a component storage service that will contain lots of components, and load them on-demand from the app, depending on the need.
I will like to avoid having all the components included directly on the app.
Any ideas?
There is an excellent article exactly for this usecase - https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
I am a beginner to Spartacus so I have a few queries in my mind.
Kindly validate my understanding so far with respect to spartacus:
I believe, Spartacus framework will expect all CMS component from SAP Commerce. Once spartacus receive a component from SAP Commerce then it can be customized as per need
I have setup the sparatcus storefront and it's up and running. I have followed the steps mentioned in documentation, but now coming to my customization/implementation of my storefront from complete scratch like header/footer banner etc component needs to be created. So how can I go and which files need to be updated? I mean can this be done from SAP Commerce side first (Component) then Applying CSS and JS can done in Spartacus side?
These are brought questions, and not easy to answer with short answers. A few pointers:
Not necessarily. You can adapt other CMS systems, or customise partially regardless of the CMS.
You can customise CSS, customise CMC components, use outlets to amend existing DOM, etc.
I want to get my data from server in the component where the data is needed.
(call api at mounted or beforemounted or created (component lifecycle loop))
If I followed the rule above, it is inevitable to call same multiple REST api at same page.
I tried to cache them but it is quite difficult to handle the REST api result.
( Because the result of REST api depends on to params and it also depends on to time....)
I know that nuxt provide fetch and async but getting all data at page level looks bad.
Is there any good strategy for call api efficiently? I think this kinds of concern is not restricted to nuxt or vue, it also happens in react, angualr like component based framework...
If you want an SSR page than you can make API requests in the asyncData method inside pages or if you want to make API requests on client-side than you can go for mounted method.
And for state management/managing data in component/across component can be achieved via VueX
You can use nuxtServerInit to store in vuex
Check out the documentation
We are building a website that—to our all sorrow—has a lot of advertisements. Now we wanna use VUE to build the website, do server side rendering and hydrate the website in the client.
The problem is that the advertisements can basically do anything. Ie. change the background image, inject stuff in the dom, etc. pp.
So the the strategy we want to implement is to render the site in the server and only hydrate specific parts of the website, i.e. specific components with VUE, leaving the rest to the site to the advertisements.
Is that possible with VUE?
edit to clarify: The problem ist that if we hydrate the entire site VUE will clash with things the ads have changed in the site. That is why we want to hydrate specific components in the site only.
Late answer but perhaps the Vue Quench library offers some functionality you're looking for. This presentation from the creator details how their team runs a sports website composed of 4 smaller hydrated Vue components based on static HTML markup.
A strategy such as this allows a coexistence of both a Vue app (or multiple Vue instances) alongside the advertisement content you're required to embed.