I'm trying to customize the ProductListItemComponent and the ProductGridItemComponent in order to add some more functionality like a Stock counter.
After some quick research I came to the conclusion that they can't be remapped using the cmsComponents object, only the actual CMS Component, the CMSProductListComponent, can be remapped.
If my assumption is correct, what would be the best approach on customizing these components?
Thank you for your time!
Yup!
You are right! You can't customize ProductListItemComponent or ProductGridItemComponent via remapping it like a CMS Component, you should customize it over higher lever CMS Component - ProductListComponent.
And here you can find GitHub issues: https://github.com/SAP/spartacus/issues/4231 and https://github.com/SAP/spartacus/issues/4441, which relates to above problem.
Related
Context:
Currently, I am working on a complex editor application which uses vuex state, vuetify's expansion panel and vue's dynamic component. Each dynamic component uses data which is accepted as props and has its own nested components.
Problem:
The issue with this approach is as the app deals with the large, nested state, the add operation in the UI slows down and makes the UI unusable.
Note:
In the example, I have added 1000 objects just to replicate the issue. Unfortunately cannot use pagination here.
Is there any other way to approach this problem to improve the performance, any suggestions would be helpful.
Issue:
Codesandbox - Demo
Codesandbox - Edit
You are using index as your key and at the same time adding new item to the beginning of the array using unshift - which means every time the new item is added, all components needs to be rerendered. Use :key="item.name" instead and you will see huge speed improvement on adding new items...
Initial render is another problem - if the pagination is not an option, you can look at some virtual list solutions which do render only part of the list visible and make scrolling effective by reusing existing components. One example is vue-virtual-scroller. Vuetify itself has it's own implementation but I'm not sure how well it will work with expansion panel considering this note in the documentation:
We are in the process of integrating the v-virtual-scroll component into existing features and components. If you are interested in helping, please reach out to John Leider in the Discord Community.
(Also it seems you are using really old version of Vuetify...)
I personally and a lot of customers think the default icons for links with nested items in the Nav component are strange. Hence I want their look and behavior to change from this:
to this:
(In the screenshots the size is also different, but that's just from the context's I took them. I just want to change the icons).
The latter is btw also used by Microsoft OWA (Outlook Online), which also uses Fluent UI React. The only thing that I could come up with (but which doesn't work really well) was to hide the default chevron using styles and modifying the rendered link onRenderLink to display the other chevrons.
I'm aware of this question, but changing the icons via style is no option and I guess no longer a preferred way by fluent ui.
Is there any better or official way I'm missing?
I've taken a look at the code and unfortunately the icon is baked into the Nav component. Your best option would be to style the icon similar to what is being done in this codepen.
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
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.
I'm very new to Joomla. I have a question about components/modules.
I'm doing the development of a site for a firm and they provided me with custom news releases component that's supposed to show on the home page. From what I've seen, I can call modules to a page with "" based on their position.
Do I do the same sort of thing to get this component to display? Can anyone help me out please. Let me know if I'm not being clear.
EDIT: I figured out that I have to add this as a menu item, but this makes it into it's own page. I want this just as a module on the right of the home page. What do I need to do to achieve this?
Thank you
if this is a component than you won't be able to display it in a module position. You will have to write a new module to do that or use some modules which wrap around other types of content. See here, maybe this plugin will fit.
If this is a component you can also use the Component Loader extension to load the component output in a module position.
http://extensions.joomla.org/extensions/core-enhancements/embed-a-include/10721