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
Related
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.
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.
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.
The JS libraries that are meant for showing maps on the web pages and I guess many other libraries that visualize data on the web pages often modify the DOM quite heavily.
If I want to use such library with Vue.js and there is no fitting library adaption available for Vue.js then what are the best practices for adapting them, so that the DOM is updated properly and I can use the libraries safely?
Personally, for Vue or for any library, I just play with the lifecycle of the JavaScript framework.
In Vue, I create my map in mounted cycle (see the diagram from the official doc) because Openlayers like Leaflet both need a DOM element mounted to bind the map related elements.
It's the same if using React, you just use componentDidMount (see the React lifecycle diagram)
I want to use Polaris css components for my shopify app. I have go through their document https://polaris.shopify.com/components/get-started#navigation. As mentioned there I have include their css and html code for a component but some components are not working functionally like Date picker I have put html code on my page but I am not able to change month, select date etc.
I think I have to load js for get that working but I didn't found any js link in their document.
Can you please help me out?
If you are using the CSS-only version, we do not provide any JS. The CSS version is meant for someone who does not want to use React and is willing to write the scripts required for any interactive components. If you are using the React components, you will not find everything; as you've identified, this is not exactly like Bootstrap or similar frameworks. This is a more selective set of components that encompass patterns that have been established for Shopify's own applications. We will probably add more components in the future, though; if there's something you feel is obviously missing, please feel free to leave an issue.