Add a custom page to Spartacus - spartacus-storefront

Probably my question is a bit dumb as there is a lot of documentation about routing. The problem is, I am not an angular specialist, so I am missing a bit of context.
I would like to add a custom sub page (http://localhost:4200/image-upload) to spartacus. The Header and Footer should be the same. Just the content should be an upload form.
Where and how do I configure the route?

Add a new content page in CMS with page label /image-upload (with the leading slash). Spartacus routing should handle it OOTB. https://sap.github.io/cloud-commerce-spartacus-storefront-docs/adding-and-customizing-routes/
Add a layout config only if your page has custom layout https://sap.github.io/cloud-commerce-spartacus-storefront-docs/page-layout/#configuring-the-layout
Implement Angular CMS components that should appear on this page and configure mapping from CMS component type to the implementation https://sap.github.io/cloud-commerce-spartacus-storefront-docs/customizing-cms-components/#page-title

Related

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

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

ASP.Net Core route template behaviour

I've seen in some sample code that a route template ("{id:int}") on top of razor page causes the links to that page to use another pattern:
https://localhost/Movies/Edit/6
instead of
https://localhost/Movies/Details?id=6
My question is how asp.net manages to change all the links to that pattern, does it know about that page before rendering it?
Does it collaborate with other pages when processing a page?
When the application first starts, a collection of attribute routes are built. The routes are built for any Razor file with an #page directive in the root Pages folder, and for any other routes that have been defined via PageRouteConventions.
When you use the Url helper to generate links, or the anchor tag helper (which uses the Url helper behind the scenes), the link that gets generated is based on the attribute route that was built for the page that you pass to the helper.
In attribute routing, route parameters are added as segments in the URL, which is why the values are not appended as query string values. If you prefer query strings, don't declare route values as part of the #page directive.
Run the dotnet publish -c Release command and take a look inside the bin/Release folder.
You will not find your .cshtml files with html in them. What happaned where did all the html go? And how does this relate to the question?
You gotta remember that cshtml will endup being your regular ol' c# and all that fancy razor templating syntax end's up being c#. This process has many names and transpilation is one of them performed by transpilers.
Okey so now that we can safely assume that when you have a Index.cshtml file it will get populated in to some sort of an object, let's call it RazorPage.cs this will just store all the configuration for this page. Now let's say this index page is living in a folder called Home now we can have a dictionary Dictionary<string, RazorPage> and let's say that the key will be "/Home/Index". Following along based on transpiled #page "{id:int}" syntax, it might generate a template string for the route and store that in the RazorPage in a RouteTemplate parameter.
So when you use asp-page tag helper it will find the correct RazorPage and it can know the template for the url, populating it with the values you provided.
I haven't seen the actual implementation this is just my guess.
My question is how asp.net manages to change all the links to that pattern, does it know about that page before rendering it?
Yes it knows everything about the page at run time. Most likely the services.AddMvc() service takes care of loading in all the razor pages / views / controllers, at startup.
Does it collaborate with other pages when processing a page?
Highly likely no, unless you mean components/layouts/partials. It will however struggle to resolve a page if you have identical route for 2 pages.

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 customize the page?

I'm attempting to customize the Piranha CMS system. I'm interested in changing the layout, setting up my own styled menu and tweaking where the content on the page shows up.
Is the intent that I modify the _Layout.cshtml file to my liking?
If there's a page in the documentation that covers this, please helpfully provide the link. :)
Piranha CMS is just a framework for content management, not a website template with widgets, themes and stuff like that :) With that said, a basic Piranha CMS project is basically a standard MVC project with two included controllers, one that loads the model for a requested page, and one that loads the model for a requested post.
This means you can do anything that you can do with any normal MVC application when it comes to styling and modification.
There exists some helpers for rendering Menus, Breadcrumbs and so on. Documentation for the helpers can found here:
http://piranhacms.org/docs/api-reference/site-helper
http://piranhacms.org/docs/api-reference/ui-helper
For the helper methods that render html there are hooks for overriding all content rendered so that you can change the standard menu to your own style of html if you need. Documentation for the hooks available can be found here:
http://piranhacms.org/docs/api-reference/hooks
Regarding what can be achieved with Page types and creating templates with different regions you can check the following pages:
http://piranhacms.org/docs/pages/page-types
http://piranhacms.org/docs/pages/page-model
http://piranhacms.org/docs/pages/regions
http://piranhacms.org/docs/extend/extensions
I hope this helps you a bit.
Regards!
Håkan

link to another controller with hot towel and durandal

I am developing an mvc4 app with multiple spa's.
I am using the hot towel template for my spa.
What I want to do is have a anchor link within my views for a spa go to the index action for another controller, so my users can exit one spa and open another. Not all actions will start a spa some are regular mvc style pages.
I have put code like like the following in my spa html pages:
Navigate to another controller
This will change the url in the browser but always reloads the default html page for the spa. If I hit the refresh button in the browser then if will go to the proper page.
I have been able to put a target on the anchor tag of _parent or _top like:
Navigate to another controller
and it will navigate to the new controller page.
I believe it is something in the durandal framework that is preventing the spa from navigating to the second controller, but since I am just starting to work with this, I am stumped as what I need to change. I think there should be a better way than using the target in the anchor tag, or is that the best option.
I hope that I have understood you correctly. I believe this behaviour is caused my Sammy.js (which the durandal router is currently based on). The default behaviour of Sammy is to hijack all links and process them as regards to the SPA itself.
I didn't like this behaviour for the website I am working on and needed links to other MVC web pages to be possible from within the SPA. What I really wanted is for regular links to just work and hash links to be interpreted as a link to another view within the SPA. So '/controller/action' would go to another web page and '#moduleId' would go to another durandal V/VM.
I found this Sammy option that works for me and set it in my main.js
// This stops Sammy from hijacking regular links
Sammy.Application.prototype.disable_push_state = true;