Developer forum

Forum » Rapido » Partial/nested template using handlebars.js

Partial/nested template using handlebars.js

Martin Grønbekk Moen
Martin Grønbekk Moen
Reply

Im trying to get data from my feed into the product list.
I succeeded in doing this on the product page, but it was because the cshtml of most of the page was not in a template.
It is different in the product list "ProductRender.cshtml", here everything is inside templates.

Inside <script id="ProductContainer" type="text/x-template"> I try to add a reference to my feed like this.

<div id="BlogArticlesContainer" class="js-handlebars-root" data-template="BlogArticles" data-json-feed="@blogFeedPageUrl" data-pre-render-template="ProductPreRenderContainer" data-preloader="overlay"></div>

It did not work, so I found out I had to do it like this {{>BlogArticles}} and I get one step further. Now my template is used, but I get no data, because the feed is not initialized in {{>BlogArticles}}.
How can I get data from my feeds using this partial approach, without having to integrate my feed with the existing product list feed?


Replies

 
Karsten Thuen Dynamicweb Employee
Karsten Thuen
Reply

Hi Martin

I think you are very close to getting it to work. On Rapido we have made some additional javascript that auto initializes the partial templates. You will only need a root container, like you have here. 

The tricky part may be to set up the templates correctly. I may need a little more info to know the exact reason for your error, but my guess is that problem is that you are trying to render data that is a list (Array). What happens if you do this:

{{#.}}
    {{>BlogArticles}} 
{{/.}}

This uses a jocker for rendering lists. But if you have a key name for the list in the JSON feed, it could also look like this:

{{#ArticlesList}}
    {{>BlogArticles}} 
{{/.ArticlesList}}

You may find inspiration in the eCom7/CartV2/StepOnecart.cshtml template. Here you will find a little simpler example on this, than in the product list. If you have not already read it, you could also look in the documentation: http://doc.dynamicweb.com/rapido/development/development/rapido-javascript-ajax#sideNavTitle1-1-1-1

 

Best regards
Karsten Thuen

 
Martin Grønbekk Moen
Martin Grønbekk Moen
Reply

Thanks for your reply!

I think my case is a bit different, since I really have two feeds on the page. First I have the regular product feed which has all the information needed to render the product list. Second I have a custom feed to fetch the blog articles which is going to be listed under the product list.

If I integrate that blog list into the product list feed I guess it would be easier, but I dont want to mess with the existing feed, thats why I created a separate feed.
But the problem is that I dont know how to specify that I want to use that feed instead of the product list feed.

Was I clear?

 
Karsten Thuen Dynamicweb Employee
Karsten Thuen
Reply

I am sure we are going to get this to work. Thank you for the clarification. It is a little more visible for me now. So what you need, is to render a list of blog posts below the product list? Or mixed into the product list? Do you use the item publisher for the blog posts?

Do you have a url for the test site? Then I may be better suited to give you the answer you need. 

 
Martin Grønbekk Moen
Martin Grønbekk Moen
Reply

Thanks! I will send you an email with details :)

 
Karsten Thuen Dynamicweb Employee
Karsten Thuen
Reply

Hi again

Thank you for your email. I will answer your question here, so that others may be able to solve similair problems. You have two blocks of content that comes from two different feeds. Products and blog items. 

The area where you want to render the blog posts are inside the product list. And this is where the problems starts to occour. First off, if this should work, we must have an root container for each feed that we try to render.

But the problem here is that the data is rendered async = We do not easily know when to compile/render the blog feed that you keep inside the product feed. There may be ways to solve this, but it is a little complex. You will have to write some javascript. For example you could listen to when the product feed has been rendered (contentLoaded) and then call HandlebarsBolt.UpdateContent(...) with the parameters for the blog articles.  If being able to do this often, I will consider if it is possible to write some automation into HandlebarsBolt. And then it will be in a release of Rapido.

There is a much simpler and cleaner solution though. If it is not critical to render the blog posts inside the product list, then locate this line:

<div class="grid grid--align-content-start js-handlebars-root"....

Copy it, and paste it below it self. Then configure the new element for the blog posts like this:

<div class="grid grid--align-content-start js-handlebars-root" id="BlogArticlesContainer" data-template="BlogArticles" data-json-feed="@blogFeedPageUrl" data-preloader="minimal"></div>

 

I hope it helps. Else you may write again, and I will take another look at it.

 

Best regards
Karsten Thuen

 

You must be logged in to post in the forum