Is there a way to create tabs and mark selected tab based on page loaded in spartacus - spartacus-storefront

I am using spartacus framework for storefront. I want to show tabs in my application and load pages based on selected tab. Is there any existing cms component or configuratio with which we can do or can i extent the cmscategorynavigation component and customize?

The CMSTabParagraphContainer is used on the product details page to display tabs. A CMSTabParagraphContainer can contain SimpleCMSComponents but not for example ContentPages. You would have to extend the CMSTabParagraphContainer on the backend to also accept ContentPages, ProductPages etc. and then extend the frontend components as well. To extend Spartacus components have a look at: https://sap.github.io/spartacus-docs/customizing-cms-components/
To be honest: This seems like a lot of work if you just want a visual change to the navigation

Related

Spartacus v2 Storefront - Header Navigation customisation/restructure

we are using Spartacus 2 lib in our project, and we want to customise (by restructuring the HTML) the navigation from:
OOTB Navigation
to this:
New Nav Implementation
Basically putting the Original level 1 nav links inside Shop Cameras link.
Can this be achieved by ng-template alone? Or do we need to create another component and call the service that retrieves the nav items again?
As #platonn suggests, it is recommended to use the CMS to build content. Hardcoded content can only be added, translated and maintained by developers and requires development testing, deployments, etc. Using a CMS gives you runtime flexibility by business users.

Routing to a page with sections in two slots

I have a question regarding routing.
We have a detail page that consists of two different sections.
However, these two components/sections are in different slots.
How does the routing work in such a case ?
How can we access the detail page ?
Is that even possible ?
Routing in Spartacus is not directly related to the structure of the CMS page. A url is connected to a page structure by using the following flow:
If it's a custom application route, spartacus will not touch it
if it's a product or category route, use configurable routing to match the product or category page from the cms
otherwise it's treated as a ContentPage, the CMS is queried for a matching page.label (or part of it).
if non of the above is found, the not-found content page is loaded.
The page structure which is loaded from the CMS is rendered on the page. The LayoutComponent is used to render the template, the PageComponent is used to render the page slots and the ComponentWrapperDirective is used to map the cms components to JS components.
If you have 2 different "sections", I assume you're talking about slots. In order to render the slots, you need to configure the Layout Configuration, see https://sap.github.io/cloud-commerce-spartacus-storefront-docs/page-layout/. Since the CMS doesn't provide any info on the order an location of slots, this additional configuration is required.
There's much more to it, but I hope this gives you a start at least.

Customize Hybris Backoffice login Theme

Anyone has an idea about how to change the default Backoffice Login Theme (Color, Background and image or any of these) ?
It could be helpful if you point out the file(s) responsible for this, or a specific way to customize it.
Using Hybris 6.0 or later.
Replacing Styles of Backoffice Application :
It is possible to replace the standard look and feel of the Backoffice Application. In other words, you can change the style sheet used in login page and main application pages including all components.
Files responsible for changing Backoffice main page style are located in the following key properties :
backoffice.cockpitng.mainpage.css=/cng/css/mainpage_whitelabel.css
backoffice.cockpitng.loginpage.css=/cng/css/loginpage_whitelabel.css
backoffice.cockpitng.overridewidgetsandeditors.css=/cng/css/customWidgetsAndEditors.css
For more about this topic, you can visit this link.

Piranha CMS customisation

A few questions on customisation with Piranha CMS.
Is there a way to create additional custom site-wide items similar to those from the site helper? http://piranhacms.org/docs/api-reference/site-helper
e.g. to be able to set a phone number used throughout the site but still editable in the settings section of the manager.
Is is possible to create additional custom items for a page, e.g. page subtitle, and for those to appear in the Information section of page editing? Creating a region for say a page subtitle seems overkill.
Is it possible to create a custom page type with a region that is a collection of HtmlRegions or similar? e.g. for the purpose of managing a set of FAQs or similar enumerated content?
Is is possible to define custom settings properties for a page type?
Yes, you can add regions to your site in the same way as with page types under Settings > Sites. You then add content for them under Content > Pages > Edit Site.
You can add simple text properties on the page type. They will be shown as single line text inputs under Properties when editing the page.
No native support, however the region body can be anything that can be serialized to JSON so you have to handle this in the edit view for your region.
There is no support for injecting fields into the page settings, however if it's important you can override the whole edit view for pages and do anything you like by placing a copy of the view in the manager area in your local project. You can find the views in the github repo in the 2.2.5 branch.
Regards
HÃ¥kan

how to add tab to preference page as part of plugin development

I have created a plugin showing in preference page of eclipse (using plugin develepment env of eclipse). I want to add tabs to this page but not able to find how to do so.
i want tabs as circled in image
These tabs are just ordinary TabFolder (or CTabFolder) tabs. There is no special support for this in preference pages you just code the TabFolder and TabItems in the createContents method of the preference page.
Your example page is created by org.eclipse.compare.internal.ComparePreferencePage, you could look at the source of that.