I have good knowledge of Angular but I am new to Spartacus storefront.
At the moment I have read a lot of documentation and watched many video tutorials but I have not yet understood how to start customizing pages and components: the documentation is unclear and other resources found are often out of date.
How can I understand from the CMS which is the Home page? And what are the components that build it? How can I customize them?
Can anyone tell me what is the best approach to start customizing the header, footer and content based on the sketches I need to replicate? Where do I find a step by step guide that helps me do this?
Thanks in advance for your help.
P.S. Locally I have a default B2C multisite installation (Appareal and Electronics) with our backend as baseSite.
Try joining the Spartacus courses SAP is giving, it will give you a good start on how to work with the CMS. They are free and hold value for beginners.
Using the CmsService you can get the currentPage and based on the UID you can determine if you are on the homepage.
You can override components by creating Angular components and creating an override based on the class or flexType https://sap.github.io/spartacus-docs/customizing-cms-components/
If you are new to Angular I really recommend doing a deep-dive on this first otherwise Spartacus will be very confusing. Been there...
Related
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 have just picked up Vue and am trying to figure out the best way to structure this project.
Requirements:
A basic MPA (traditional site) with about 6 pages. This will be static info.
There will need to be a login section where customer will transmit data via form. Payment will happen here as well so will need to be secure.
My question is how should I be using Vue here? (I've already used VueCLI to scaffold out the project)
Should I:
A) use it for some components (Navbar, buttons, forms, etc) and keep structure traditional? How would i build out the User Dashboard to submit form info in this case - just as a new page?
B) or should I build this whole site as a SPA and have the new 'page' info loaded in on click? This would be easier for the login section?
One thing that may be clear on reading this is I don't understand well how the site will recognize users and deal with logins. Would this be easier if it were structured as a SPA? (more secure?)
(Also, I'm using this site to teach myself front-end development, specifically would like to learn more about building SPAs - so I realize I could use a web editor or easier solutions, but want to learn how to do a lot of this from 'scratch')
From what you've described it is entirely up to you. Both SPA or MPA would work fine and either would be totally reasonable given the requirements.
Have you worked with Vue-router before? SPAs don't need to appear as a single page to the user. They can still function as an MPA with different routes, page files, permissions, etc.
If you are hoping to use this project to teach yourself front-end web dev and know you have a particular interest in learning about SPAs, I think that is your answer.
I would go with an SPA and set up vue-router to manage your routes, and pages.
I have webiste which is available in the internet. Front is written in Vue.js and CMS is created using Laravel (PHP). These are separate applications.
Unfortunatelly Google dosen't see the page because of lack of SEO (yeah! Vue). The website is big, has a lot of routes, fetches data from API ex. for a blog.
Here is my question. What is a better solution? Move website to Nuxt.js or use some fancy plugin like https://github.com/chrisvfritz/prerender-spa-plugin and fetch data from API.
I'll be gratefull for any tips!
Use #prerenderer/renderer-puppeteer if: You're prerendering up to a couple hundred pages and want accurate results.
Use #prerenderer/renderer-jsdom if: You need to prerender thousands upon thousands of pages, but quality isn't all that important, and you're willing to work around issues for more advanced cases. (Programmatic SVG support, etc.)
I have a react-admin app where we are making frequent changes.
Is there an existing plugin or a way to detect a new version of app and provide user with a toast to refresh the application so that they are working with latest version?
If not with react-admin, is anyone familiar with a way to do this easily with react?
I have found some manual way to do this in following places but I am asking here in case there is an existing package or a more elegant solution that I can leverage directly.
How to force update Single Page Application (SPA) pages?
https://medium.com/#kellyrmilligan/create-react-app-let-your-users-know-when-the-app-has-been-updated-with-a-notification-21335d85481c
Any help is appreciated even if its, nothing exist and I should just hand-roll.
Thanks for reading.
This is not the responsibility of React Admin to handle this kind of issue.
You can think of RA as a simple React component that helps you define an admin.
Hence, RA doesn't provide any helper to manage code update or something similar.
You have to implement this refresh system by hand, and your links are a good start for that.
With the serviceWorker you can do that :
https://github.com/marmelab/react-admin/blob/master/examples/tutorial/src/registerServiceWorker.js
But i don't know why in the demo the service worker is not used ?
https://github.com/marmelab/react-admin/tree/master/examples/demo/src
I am in the process of converting a web application that has been in play for some time into a Sitefinity 4 managed site. There is plenty of documentation on how to use the software to CREATE a new site, but I've found precious little that describes the process of how to migrate from non-cms to Sitefinity.
So - specifically, I would like some guidance on the process of conversion from non-managed to managed. I've been searching google and the Sitefinity forums, etc. but finding nothing except how to migrate from one version of Sitefinity to another - not what I'm trying to do.
Any leads for web sites to visit or documentation pages to read would be very helpful.
You'll have to bite the bullet and invest more resources at the beginning of your project and not release anything for some period of time. You won't be able to drive your car without fundamental components. The same principle applies here.
Whatever your requirements are, you will either have to hack around the CMS and then fix the hacks later, or do it properly from the very start.
Look at your existing site and break it down into smaller chunks
Consult Sitefinity documentation/partners/freelancers on how your existing content can be migrated onto Sitefinity platform
Task up the migration and start implementing
This is very rough guideline, but so are your requirements.
To summarise, there is no quick way. You'll have to do it properly form the start, or invest more resources later on bug/hack fixing.
If we have Sitefinity at the root of the application, we cannot,
according to Sitefinity, have any pages not managed by SF
That's not entirely correct. Sitefinity allows you to add "external pages", meaning that you can create odes in your sitemap which would like to external pages. Thus, your navigation in Sitefinity would show a complete website page structure, while some of the pages in that structure would actually be linking to external ones.
It would be absolutely easy and quick task to create your page structure programatically.
actually this is quite simple to achieve. Sitefinity is completely dynamic CMS (meaning, no real files). The implementation uses RoutingEngine and VirtualPathProvider to achieve this. What this in reality means is that you have two solid and standard extension points to split the site in "sitefinity managed part" and "custom managed part".
So, a very simple way to do this is to simply register a route (more info here: ASP.NET routing) before the SitefinityPageRoute, as SitefinityPageRoute will throw 404 if it cannot find a page.
So, let's say you register a route "~/mystuff" before SitefinityPageRoute, all the requests that start with "~/mystuff" will first go to your RouteHandler where you can decide to handle them (write to http response) or do nothing and let it fell down to Sitefinity routes.
Another way is of course to implement a custom VirtualPathProvider, however, this may be an overkill if you simply want some pages to be handled differently.
All this being said, it's obvious that pages not handled by Sitefinity will not be handled by Sitefinity :) (so, no page editor, no workflows, no translations, no widgets, no templates, no themes).