Where can we find the Spartacus OOTB Component HTML's - spartacus-storefront

For the available existing OOTB Spartacus Component's in Cart, PLP, PDP or Checkout pages, where we can get see the list component HTML's and Stylings used.?

Let's use one example for illustration. Say if you want to explore the html implementation of component named "UnitDetailsComponent", just search it in github repository: https://github.com/SAP/spartacus/search?q=UnitDetailsComponent
Then you can find its path in project: feature-libs\organization\administration\components\unit\details\unit-details.component.ts
With this path you can find its html implementation: feature-libs\organization\administration\components\unit\details\unit-details.component.html
Best regards,
Jerry

We used to have a documentation link but since a week it giving 404(link).
The Spartacus repo is public so you can clone and see components and styles there - repo.
You can see the documentation to see how to override components and also to customise OOTB components - docs.

Related

How to override component on specific slot

i'm trying to make a banner component to use as SimpleBannerComponent, but i need to override only in a specific slot/section on homepage.
In another pages I will use the default component.
How can I do that?
Thanks for your time.
The best way is to create a new CMS component only for that specific slot/section on homepage, because once you update a component, all its instances will also be updated everywhere.
Documentation on how to create and map a new component can be found on Spartacus Documentation Site.

Vuetify - how to disable Display Helpers in a custom build?

Some of Vuetify's display helpers (https://vuetifyjs.com/en/styles/display/#display) collide with Tailwind classes.
In Bootstrap, fore example, there's a way to disable (=not include) utility classes in a custom build.
Searched in the docs and in vuetify-loader's docs for a way to do it, couldn't find one - is it possible?
I found this article that helped me remove some of the Display helpers (utility classes) from Vuetify. Over here you can see all the available utilities you can disable.
While I'm not aware of any way to disable Vuetify's Display Helpers, it is possible to prevent collision by prefixing Tailwind's classes. You can read about it in this thread on Tailwind's GitHub.

How to build documentation for vuejs component?

Is there a tool to build documentation for vuejs components in a way similar to what Quasar or Vuetify do for their own components? ie: a browseable table with tabs corresponding to prop, slot, methods, events?
Is there anythis similar to what is Sphinx for Python, ie a tool that does introspection of the code to collect info to show?
Searching in google returned a lot of docuemntation ON veujes rather than how to document our vuejs code...
From my limited research, I've found this one: https://vuese.org. I haven't tried it though.

How to customize/ extend ootb components in spartacus

I am new to Spartacus and I am trying to add more elements to the component AddedToCartDialogComponent. Not sure how I can customise/extend this component.
I need to extend the typescript and also the template which is the view for this component.
Probably, your best bet is reading through the Spartacus docs about customizing components here. Also try to find your answer in other places in our docs.
If your question was about extending components from Angular perspective, you should probably first read Angular docs

Custom Login page in Docusaurus

I have a task at work, It is to implement the login page inside the Docusaurus.
I am trying to customizing the index.js by adding some HelloWorld. Including login.js which has actual Docusaurus Index page
const Index = require('./login.js');
const React = require('react');
class Button extends React.Component {
render() {
return ("helloworld");}
}
module.exports = Button;
But Error thrown is:
Error: Cannot find module './login.js'
Is it possible to call the class from another js page in Docusaurus?
Docusaurus maintainer here! Yes, it should be possible as the current module system is CommonJS. You have to put that component in the same directory as index.js. Link me to a repository if possible and I can help you take a look.
On a side note, it doesn't make much sense to build a login form for Docusaurus as Docusaurus generates a static site that loses state across page navigations unless you persist them in cookies or localStorage. It'd be quite troublesome to do so. Maybe you could explain what you're trying to build here and I can recommend you better alternatives.
I found a way to work this out, even though there is no official documentation on this matter. I used the Docusaurus Swizzle to intervene in the Root component so that I can use Firebase Authentication (I think that you can use Auth0 or any custom logic in replacement).
I wrote a detailed blog on this so that I hope it can help others, you can see it here: https://medium.com/#thomasdevshare/docusaurus-authentication-with-firebase-c824da24bc51
There is also full example source code in the article, you can clone it.
First of all. What does "login.js" look like? It is an exported module with a well defined (default) namespace?
Secondly, you shouldn't add the file extension to an import. It's "require('./login')" not "require('./login.js')".