I have a basic ecommerce site which has a products page, in which a full overview of the products is displayed, including thumbnails, brief description, etc. On the same page, and other pages on the site, there is a sidebar which lists the products by title only.
Since the sidebar is reused around the site I want to set this as an embedded template.
With this setup, must I retrieve all the products from the database twice; once in the main Products page, and again in the sidebar? Or is there any way to speed things up on the Products page by retrieving the entries once in the parent template and passing them to the embedded page?
For example:
products parent template:
<html>
{exp:channel:entries channel='products'}
// display full product info
{/exp:channel:entries}
{embed='includes/_products_sidbar' data={entries}} // ^ Can I pass all the data from the above loop to this embedded template?
</html>
embed:
{if data}
// if we already have the data available then use it without having to get it all again from the database
{else:if}
// if not then use another entries loop:
{exp:channel:entries channel='products'}
// display a list of products
{/exp:channel:entries}
{/if}
I think you are better of using a different approach. Have a look at layouts:
https://docs.expressionengine.com/latest/templates/layouts.html
or, if that's not possible, you can use stash https://github.com/croxton/Stash too.
oh yeah, you'll get better help on https://expressionengine.stackexchange.com/
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 very much new to Node JS and Express Framework & mongodb. I am working on a website which has multiple categories and when we click on category it goes to a view, where based on the category clicked, data gets loaded in the view.
please check the link for website here.
I am looking help for navbar links eg. Montessori Premium->Toddler Material
As these are static links I can not figure how to pass any parameter or url format for this.
I have done the routing for individual products as they have ids coming from database so I am using that id in url.
Thanks in advance.
It seems to me like you're just missing a bit of glue in between the front-end and the back-end database calls. Here's a rough idea of the sequence you might be after and an explanation of what I think you're missing.
If I'm wrong, please add a comment and update your question to include the new details and I'll see about editing my answer.
In this example I'm creating a website which has a list of "items" in a shop and we're looking to display them all on a single page. Each item should then have an a href clicking through to that specific item where there might be more detail such as a "full description" of the item and maybe some images or something. We're going to look at the flow to build that first page with the list of items.
The user makes a HTTP GET call to the root of your website such as "http://www.mystore.com/".
This request comes through in Express to your controller which takes the req, res, next parameters.
Your controller makes a call to the database to get a list of all items including their names and ID's.
You then use something called templating to inject in the list of items.
In this template you iterate through the list doing something like this.
.
<ul>
{{#each items}}
<li><a href="/items/{{id}}>{{name}}</a></li>
{{/each}}
</ul>
In this template (which happens to be Handlebars), we're going through the list of items and using the id and name of each to inject them into the HTML to get something a bit like this back.
<ul>
<li><a href="/items/1>Shoes</a></li>
<li><a href="/items/2>Red spotted dress</a></li>
<li><a href="/items/3>Jeans</a></li>
</ul>
This is then served up to the user once the template has been processed.
In essence I think you're after some sort of templating engine, I'd highly recommend having a look at Handlebars with something like the express-hbs.
Thank you #Elliot for your time to answer this. Yes I am using handlebars for templating. The solution I found is, because I am using static links, I am passing query string in anchor tag link.
eg. http://localhost:8000/product?category=Toddler_Material
and then using req.query for capturing the values (Toddler_Material) in router
var category = req.query.category;
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
I've got a website with two channels, news and products.
Products are displayed using an embedded channel entries tag pair called marketing. The news articles are displayed using a regular channel entries tag pair.
When the user clicks on a news article, the website navigates to a new page (news/view) containing the contents of just the news article in question. The template also includes the embedded template containing the products tag pair. This is where the problem occurs: the only published item that displays is the news article. None of the products display on the news article template.
The homepage and 'news/view' mock-up:
{exp:channel:entries channel="news"}
{title}
<some markup>
{body}
{/exp:channel:entries}
{embed="includes/marketing"}
The marketing embedded template looks something like:
<some dividing markup>
{exp:channel:entries channel="products"}
<list markup>
{product_image}
{product_description}
</list markup>
{/exp:channel:entries}
</some dividing markup>
Since the homepage and the 'news/view' template are essentially the same, I have no idea why the products are displaying on the homepage and not the 'news/view' page.
I'm not entirely sure but try adding dynamic="no" to your channel:entries loop. This seems to resolve 99% of my EE problems :)
{exp:channel:entries channel="products" dynamic="no"}
I want to use the Next/Previous Entry Linking technique in EE2:
{exp:channel:next_entry}
<p>Next entry: {title}</p>
{/exp:channel:next_entry}
{exp:channel:prev_entry}
<p>Previous entry: {title}</p>
{/exp:channel:prev_entry}
When this works, I'm on a single entry ie. awesome.com/index.php/my-cool-entry, I can click page through the entries in that channel.
Is it possible to ALSO display a full list of the entries on this page while I'm looking at one article? I want to be able to show the list of entries as a way to navigate to a particular article.
Think of it like the way {pagination_links} builds links:
First Page < 1 2 3 > Last Page except instead of numbers I want to display parts of that entry, rather than just a number.
What bothers me is that {paginate} generates ugly URLs ie. awesome.com/index.php/articles/P1, I'd rather have awesome.com/index.php/articles/my-cool-entry. exp:channel:next_entry/prev_entry preserves the URL_title!
Is there a plug-in that can handle this kind of thing?
Embedding a template is the way to go.
Create a new template with an {exp:channel:entries} loop. Within that you can dump out the entries you want and display any info you want from them.
One thing to make sure of is to use the dynamic="no" parameter within the {exp:channel:entries}. It'll go something like this:
In your article page, embed another template:
{embed="article/full_list"}
And within the article/full_list template use a loop like:
{exp:channel:entries dynamic="no" channel="[YOUR CHANNEL]" LIMIT="10"}
{title}
{/exp:channel:entries}