My end goal is to have a page that displays a Heading then links.
The Heading text would come from child folder, and the links would be pages within that folder.
I'm not concerned about the actual HTML at this point, but say an h2 for the header, an LI for each link.
I had thought i could create a repeater with a transformation to grab the folder name, and then all the sub nodes, but i'm struggling here since I've never tackled something like this in Kentico before, and have never attempted to build a navigation system using hierarchical transformations.
Here's my current content tree
Missed Payments
Group
Arrears Overview
Arrears Deductions
Flex
When rendered, Missed Payments should have the following code. When i add mew pages to Group and Flex, page links are shown
<h2>Group</h2>
<ul>
<li><a href='link to overview'></a>Page Name</li>
<li><a href='link to deductions'></a>Page Name</li>
</ul>
<h2>Flex First</h2>
I have a Header, Item and Footer transformation types, with Header, Link and Footer transformation. The HTML is simple, but i'm missing the piece to bring it all together.
Have you looked at the Creating a Mega Menu using Hierarchical transformations how to on Kentico?
For your level 0 header have <ul><li>
Level 1 header have
<ul>
<li><h2>{% Documents[NodeAliasPath].Parent.DocumentName #%}</h2></li>
<li>
All levels item: <a href="{% Transformation.GetDocumentUrl() #%}" >{%DocumentName%}</a>
All level separator: </li><li>
Footer: </li><li>
Make sure transformation type is Text/XML
Related
Hi I am new to broadleaf and i want to add the customized products to home page of broadleaf like the home page will load two cateogries of products at at time for example the home will want to load top sale products and hot sauces.
Please help me to Solve the issue.
Thanks in Advance
First off, i am not that experienced with broadleaf either, but my background has made it pretty easy for me to wrap my head around ( i think), and there are a quite a few different ways to do this and it really depends on how you ultimately like to maintain the lists, and your experience level.
As you have said you are just getting started, i'll give you what i think is the most simple way to do this.
First, assuming you are working from a recent version of the demo site. In this case, the home page is actually just a category with a custom template. If you look in the Admin app at the "Home" category and select the "Products" tab, you will see a list of the 4 Hot Sauces that are displayed on the home page in the Demo store.
The important thing to note here is that it is specifically not the "Hot Sauces" category, it is a specific subset that is selected in the admin app, giving you control of the not only the items displayed but the number of items displayed.
If you have seen the code in the homepage html template, you will see something like:
<div class="row">
<h3 class="text-center">
The Heat Clinic's Top Selling Sauces
</h3>
<th:block th:if="${products}" id="products" class="group" th:each="product : ${products}" th:object="${product}" >
<div class="col-sm-6 col-md-3" th:if="${product.isActive()}"
th:include="catalog/partials/productListItem">
</div>
</th:block>
</div>
This is the code in the demo site that is displaying the list of hot sauces on the home page. The CategoryController retrieved ths list of products for the category and put them in the Model.
Now, the absoloute easiest way to add a second list of products to the home page is use the same technique. In Admin look at the "Marketing" tab, you will see the same list of 4 products in the "Featured Products" section. As far as I am aware this is not actually being used in the new versions of the demo site. Note that there is also the upsell and xsell product lists, but for this purpose i am just going to use the Featured Products list. I suggest you change these to some other products now just so you can see the changes to the home page are pulling the correct list later.
In homepage.html insert something like the following code (it's similar to the code you looked at above):
<div class="row">
<h3 class="text-center">Top Selling Products</h3>
<th:block th:if="${category?.featuredProducts}" id="featuredProducts" class="group" th:each="featuredProduct : ${category.featuredProducts}">
<div class="col-sm-6 col-md-3" th:with="product=${featuredProduct.product}" th:object="${featuredProduct.product}"
th:include="catalog/partials/productListItem">
</div>
</th:block>
</div>
And your done.
This is certainly not the only way, or even the best way, unless your definition of best is "It takes 5 minutes and 6 lines of HTML".
At some point, depending on how your requirements pan out, you may end up creating a specific HomepageController, this approach should still work in that case, without customising the admin interface, as long as the data is still put in the model by the controller.
FYI: The homepage template is located at site/src/main/resources/webTemplates/layout/homepage.html
I'm having an issues with two repeaters, both using the same Selected Item Transformation. Each repeater is fed by a separate Page Data Source, since i also have pagination.
When an item from repeater 1 is selected, i see the memo data, but also repeater 1 table header, and all of repeater 2's table. Is it possible to set up a new page template for this, and have the memo detail show there?
Here is the memo landing page:
And here is the detail page:
Here's the tranformation code:
<section id="memoDetail">
<h1>Memorandum</h1>
<ul id="memoHeader">
<li><span class="headerLabel">To:</span> {% To %}</li>
<li><span class="headerLabel">From:</span> {% From %}</li>
<li><span class="headerLabel">Subject:</span> {% Subject %}</li>
<li><span class="headerLabel">Date:</span> {% Date %}</li>
</ul>
<div id="memoDetails">{% Details %}</div>
</section>
I believe you're using the same page template for items listing as well as details pages. The answer is yes, you can have different templates for those pages. You'll have to update each page shown in the repeater with new template in this case.
However this is not necessary: you may try to hide second repeater, e.g. base on page type, if repeaters show pages of different type, or put some visibility macro there.
I'm not sure why does header shows up on the second screenshot - there should be something wrong with repeater setting.
Mark, there is a way to force all the content for a page type to be display using a dedicated template. Go to Page Types app > select the page type > General > New page settings > Default page template, and set it there. This way, it doesn't matter where the items are listed by whatever repeaters, they will be displayed with the same template.
I have index.html and the catalog.html, in this page I have some Id in order to move throw diferents sections in that page.
I have a menu, with Hone and Catalog, this option it´s a dropdownmenu, so, what I need is if I´m index and clic on catalog can go to specific section (named "canal-prisma") of cataglo page, I have this code but didn´t work, thank you for your help
<li class="dropdown">
Catálogo<span class="caret"></span>
<ul class="dropdown-menu">
<li>CANAL PRISMA</li>
</ul>
Are you trying to go to a section on the page with the id or name attribute set as canal-prisma? If you set the id attribute, you should change that to the "name" attribute. Otherwise, more code is really needed to determine the answer to your question.
For example, in order to create a section of the page called canal-prisma:
Go to the Canal Prisma section
And in catalog.html:
<a name="canal-prisma">#</a>
I have been tasked with converting a design heavy, fairly advanced HTML template for a site into an Orchard theme and I am struggling with the best way to accomplish certain things. The theme is built on bootstrap and is a modern responsive HTML template like you might find on ThemeForest or something. The site will have a number of content types (staff members, portfolio items, partners, etc.) and will need a number of templates. The content types will have a large number of fields (upwards of a dozen) inside of custom content parts.
Based on what I have read the proper way to do theming in Orchard is using placement.info in combination with alternates, wrappers, etc. This gracefully handles if parts or properties are added/removed. However, this technique is quickly becoming overwhelming, since I have to declare the name and order of every field/part in the placement.info for every content type, and every display type of that content type. Each field of each content type then needs to be wrapped in very specific html. This creates an issue because a single page can be split out into potentially a couple dozen views, with HTML tags opening in one view and closing in another.
The best work around for this I have found is to basically ignore the placement.info file and build templates just by traversing the object model. So basically, for a portfolio page, I would copy in the template HTML I have and then replace the text values with values from the model. This might look something like:
<li class="#Display(Model.ContentItem.PortfolioPart.PortfolioCore.Value.ToLower())">
<a href="#Url.ItemDisplayUrl(contentItem)" >
#foreach (var media in Model.ContentItem.PortfolioPart.PortfolioImage.MediaParts)
{
<img src="#Display(media.MediaUrl)" />
}
<span class="type">#Display(Model.ContentItem.PortfolioPart.PortfolioCoreArea.Value)</span>
<span class="portfolio-item-content">
<span class="header">#Display(Model.ContentItem.TitlePart.Title)</span>
<span class="body">
<p>
#Display(Model.ContentItem.PortfolioPart.PortfolioTagline.Value)
</p>
</span>
</span>
</a>
</li>
The benefit with this method is that I can apply all of the values in a couple of views and it's more readable. Obviously the problem with this is that if any properties or parts are removed, the template breaks.
Is there a way in Orchard to have the best of both worlds? I can't have a wrapper or template for every field - this would end up potentially hundreds of fields by the end. I also might need to display content types in multiple places with different views - each field would then require a whole new set of wrappers or alternates for every projection.
Please let me know if I'm missing anything or if there is a better way to do this besides manually traversing to the properties I need. I need a way to be able to easily plug in properties into very specific html.
My final thought was to use very specific templates for custom content types using the object model but still provide good general templates/placement.info file so that general Orchard content is flexible but the custom content types have to stay how they are.
Side thought - I guess another option would be to wrap any code that accesses a property directly in a try catch block or some kind of error handler helper, but that doesn't seem like a "best practice".
I think the techniques in this article are what you're looking for: http://weblogs.asp.net/bleroy/archive/2013/02/13/easy-content-templates-for-orchard-take-2.aspx
We have a row of header menu links where a couple of them need to be fancybox popups. However, when I insert the appropriate fancybox code into the menu section the text is slightly smaller and higher than the other links (and does not incorporate the minislide background button etc.):
<li><a id="tip6"><strong>How it works</a></li> <li class="line">|</li>
I realised for the text to appear correct it needs to have an actual href= link so the menu system knows it's a link (which it doesn't need to be). So of course when a link is added it overrides the fancybox operation. This is what a functional link needs to be formulated as in our menu system:
<li><strong>How it works</strong></li> <li class="line">|</li>
I want it to function as a fancybox link though, so how can I remove the actual href= link and fool the menu into thinking it's a link so it's correctly displayed?
I've already tried the following, without success:
<li><strong><a id="tip4" href="link.php">How it works</a></strong></li> <li class="line">|</li>
You could also use href="javascript:;" to avoid overriding the fancybox functionality and still having the href attribute to work with your style settings so
<li><strong><a id="tip4" href="javascript:;">How it works</a></strong></li> <li class="line">|</li>
or with the strong tag inside the anchor (doesn't really matter)
<li><a id="tip4" href="javascript:;"><strong>How it works</strong></a></li> <li class="line">|</li>
On the other hand, if you are planning to use the same script for more than one element within the same html document, the better use classes instead of ID. Check http://fancybox.net/faq No. 7 for more