this is probably a newbie Qs... i am using Sitecore 7 for my web application, and this is what i have so far
Data Template - this has only one field called "Title" to display page specific title
One Layout - this is pointing to my cshtml file under asp.net mvc project path. This has complete markup starting from Doctype. The title tag under head tag uses Sitecore's Html extension to render the field "Title" from template mentioned in #1. This also renders sitecore's View via placeholder called "page-body" under body tag of layout.
I have created a View Rendering pointing to Razor view in my asp.net mvc project. This view simply has h1 calling out hello world.
The Sitecore/Content/Home item (from sitecore's master tree) uses the template created in #1 and uses the layout created in #2. This item has one and only one Rendering created in #3
Now when i hit the root from my local sitecore website, everything looks good! I see Hello World in H1 tag under body tag with complete html makrup mentioned in layout...
This is where things starts getting complicated... Now i want my View Rendering (created in #3) to refer a CSS file which is specific to this Rendering only. This CSS will not be referred to all the pages. Of course I want to add the reference into the head as link href. So tried using asp.net mvs "Section" but i keep getting that sweet error "file cannot be requested directly because it calls the rendersection method..." So i realized that my view rendering doesn't have any #{Layout = "..."} and ofcourse which is controlled by sitecore engine!!
So i still went ahead and added Layout reference in my view Rendering's cshtml file and refer to the same layout file that Sitecore Engine would (i.e. #2 above). I still have same error.
Then i found a post Using sections in Editor/Display templates which is essentially for Scripts and tried implementing for CSS. But this didn't work either because View Rendering executes after the Helper in head tag gets executed so my CSS reference never go spit out in stream. BTW for Scripts this solution works perfect because scripts rendering helper is called after the Sitecore's view rendering.
At this point i am totally stuck for "How can i get my CSS ref for View Rendering in head tag". Any sitecore experts to help here?
So it's definitely a more advanced customization, but we do this using Cassette and a customization to the renderLayout pipeline. Use of this pipeline solves your issue of the helper in the head tag being called before your view renderings.
Extend the view rendering template (/sitecore/templates/System/Layout/Renderings/View rendering) and add a field that stores the name of a Cassette bundle you want to include on the page.
In your RenderLayoutProcessor, loop through all the page renderings (Sitecore.Context.Page.Renderings), inspect the rendering item for the bundle field (rendering.RenderingItem.InnerItem[YOUR_FIELD]), and call Cassette's Bundles.Reference.
In the header of your main layout, call Cassette's Bundles.RenderStylesheets().
You can also accomplish this without Cassette, but it makes the bundling, referencing, and inclusion of scripts and stylesheets much easier.
The other advantage to this approach is that it does not break Sitecore caching. Any approach which requires code to execute in your View rendering will render Sitecore HTML caching useless, because when the rendering is cached, your code will not execute and the page styling will be broken.
Related
A client is using Sitecore 9 - we are not Sitecore developers.
We've been asked a simple thing: add social media links to the Footer of their Sitecore site.
Its proving more difficult than expected.
I've added the links on other pages by editing the HTML directly via the WYSWIG editor.
But the Footer appears more restricted, only accepting the addition of templates like 'Link'.
The 'Link' template has an option to add an external URL but doesn't have an option to add an image.
The CMS looks like this:
Is there any way to add a link, with an image, via the CMS (without the need to write Sitecore code), so the page chnages from this:
to this:
If you dont want to write Sitecore code, maybe you should think about using frontend.
Find the views that holds the footer (probably Foundation/Footer.cshtml) or something like that.
-To easily find where it is, follow these steps
Go to a content page Presentation Details that has footer (probably any)
Go to Controls
Find the footer rendering in there
Click on it
Grab the Datasource's value
Go to the Datasource's path
There should be a field holding the value of the view.
Add some css class on the div that holds those items, and do your frontend stuff in there...
It is not a scalable solution, so I would highly recommend updating the Footer rendering by adding new fields and adapting the model/view. So that way a content editor could easily add a new value for each socials.
I'm a greenhorn with typo3 templating. Actually I'm using "bootstrap_package" (standard layout). I would like to create a sub-page without logo, menu and footnote. I just want to have the content elements on a blank page. How do I do this? Can anyone help me?
Best regards
cgroughy
You should give some more information why you need such a special rendering to get some more detailed help.
The usual reasons for such a page are design flaws as there are more suitable solutions inside TYPO3.
In general: You need to create a new page rendering, where you switch off the generation of the HTML header.
add on:
make a page where you collect all the pages which should be available in this special rendering. This page should be a subpage from your root-page. regarding relaurl: [x] exclude from path
in this page create a typoscript template record.
as these pages need only one rendering I propose to modify the default page object instead of creating a new page object (with a new typeNum).
in the setup field of this template record remove all headers with:
config.disableAllHeaderCode = 1
You might need to disable further CSS and JS, especially if they are loaded at the end of the page.
if you need another html-markup than the default you can modify the configuration here: wraps, (fluid-)templates, ...
Then add your special pages with content.
In Sitecore I have created base Template & Renderings for "Header, Top Menu, Logo, Search ,Login Button…etc that comes in Header across all Pages of the Site."
Also the same template & Rendering is using in other website so we can't set value in Standard field.
Now the problem is “suppose we have 100 pages in a Site then each page we have to go and add/update rendering & data source.
Is there any way that a “Header rendering” contains child rendering and by placing “Header rendering” render all its child renderings.
Header Composite Component ===>
Logo Component
Top Navigation Component
Search Component
There is a composite component module on the Sitecore Marketplace :https://marketplace.sitecore.net/Modules/C/Composite_components.aspx?sc_lang=en
This fill's your requirements exactly.
It works by creating a "Composite Component" item, then you add your renderings for your header to that component. E.g. Logo, Navigation etc...
Then in the standard values of your page templates, you add a new Composite Component rendering and set the datasource to the component item you created.
The module will then inject the renderings from the component item presentation into your current item. So you only have to update a single place to update all pages etc...
I have this running in a few production sites and it works well. It even supports the Experience Editor.
I don't think there's a solution out of the box. SxA solves this with Partial and Page Designs at site level. Just wrote a blog about it:
http://reinoudvandalen.nl/blog/sitecore-experience-accelerator-partial-designs-and-page-designs/
I also made something that might help you: Partial Layout Presets
http://reinoudvandalen.nl/blog/sitecore-partial-layout-presets/
It even allows you to store presets per site, but keep in mind that it injects composed layouts. If you modify the preset then it does not get applied to the pages where it was injected (though you might be able to pull something of with a shared datasource per site).
Lastly the obvious solution would be to create a page template per site so you'll be able to have standard values per site.
You may want to take a look at using Placeholder Fallback.
This will allow you to add components and renderings to a top level page and then the child pages would "fallback" to using the renderings inserted into the placeholder of the top level page in the item hierarchy. The editors can also insert page specific renderings on each child page if required.
If you do not want to custom code and only out of the box features then you could use Devices. You can find more information in the documentation about Set up a device layout. Once the device is created you can specify a different default device per site:
Now when you open the Presentation Details on the __Standard Values of your templates you can specify a different Layout or Renderings per device, i.e. different ones for AltSiteDevice
So I have a layout view within Sitecore Mvc, this view contained a Controller Rendering that pulls in a header and footer navigation. Example:
#Html.Sitecore().Rendering("/sitecore/layout/renderings/some_rendering")
This specifies a Controller Rendering I've defined in Sitecore. This works great, except when I'm in the experience editor. It doesn't give me the ability to select this rendering. If I create a Placeholder and then define these navigation elements to this placeholder dynamically via Sitecore, then I can, but these navigational elements exist on every page of this layout, so I would like them statically placed instead of using a Placeholder, but I would still like the user to be able to select the navigation element in the experience editor (so I can create custom command to interact with this navigation, such as creating new links, etc).
Does anyone have an idea that will help me achieve this?
Use Edit Frame for that and create Custom Edit Frame Button for operations like adding new element to the navigation.
And remember to pass Datarsource ID or Path as a second parameter to the Html.Sitecore().Rendering() method:
#Html.Sitecore().Rendering("/sitecore/layout/renderings/some_rendering", new { DataSource = "{some-id-or-path}" })
Here is set of blog posts which can help you to understand how Edit Frames work and how to add them in Sitecore MVC solution:
https://visionsincode.wordpress.com/2015/01/08/how-to-use-editframe-in-sitecore-mvc/
https://www.cmsbestpractices.com/how-to-properly-use-sitecore-edit-frames/
https://briancaos.wordpress.com/2011/11/28/using-sitecore-editframe-in-pageedit/
You won't be able to remove the component or move it around the page (yeah, it's statically bound to one place on your layout), but you will be able to edit it's properties and datasource.
You can try to use GlassMapper views and statically inherit the view from the GlassView.
Then you'll be able to use Editable method to render the field.
But the consideration you need to take is that you'll not be able to set a datasource to the component from the page editor or content editor.
Instead of injecting the rendering through the Rendering method you should be able to use standart MVC RenderPartial.
I've used this approach on one of the projects I've been on and it worked.
Think about the scenario, where the page has to render the content dynamically when they do some operation on page.
Here basically, page will contain a list of rendering and in each rendering we will be able to get the current item using below statement.
var item = Sitecore.Mvc.Presentation.RenderingContext.Current.Rendering.Item;
Now if i have to show the content on button click, we will do a ajax call to our mvc controller/action, and in our Action we can render the item by following statements.
Item item = SitecoreHelper.GetSCDb().GetItem("{item id}");
or
Item item = SitecoreHelper.GetSCDb().GetItem("item path");
But in both the cases we have to hardcode the id/path.
So can anyone tell me, is there any better approach to do this.
I appreciate your help.
Cheers:)
Something I've done on Sitecore + MVC projects was for content items that are going to be accessed by both Page Editor and by AJAX calls in JavaScript, is creating a new device in that items template _StandardValues, in that I set the query to ?Ajax=true. I then put only the HTML piece (without styles, and JS) as the layout. While the desktop view has what it would look like "after" it's been called by AJAX. This doesn't need any .net coding, it's all done via sitecore.