I have a use case where a component is rendered via js within an ftl component. I’m running into an issue where, after the author makes a change to a component, the channel view isn’t updated until the page is refreshed. Is there any way to trigger a refresh in the channel after a component has been updated?
I haven’t tried it yet and not sure ;-), but it will probably refresh the page if your component adds a new head contribution [1] in preview mode.
For example, if you have a FTL template containing the JS, you might want to try something like this:
<@hst.defineObjects />
<@c.if hstRequestContext.channelManagerPreviewRequest>
<@hst.headContribution>
<@hst.link path="/js/dummy.js" var="dummyJs">
<@hst.param name="t" value="${.now?long}" />
</@hst.link>
<script type="text/javascript" src="${dummyJs}"></script>
</@hst.headContribution>
</@c.if>
Would you give it a try?
Woonsan
[1] Head Contributions - Bloomreach Experience - Headless Digital Experience Platform
Hi, Woosan,
I tried to implement the head contribution, and it is not working for me. The issue could be because the js is not included at the component level. We have created a large global js file that is included on every page. Here’s the contents of my component ftl file:
<#include "../../include/imports.ftl">
<#-- @ftlvariable name="document" type="com.resourcecenterbrx.cms.beans.HomePageHero" -->
<#if document??>
<div>
<#if hst.isNodeType(document.node, "resourcecenterbrx:HomePageHero")>
<#if hstRequestContext.channelManagerPreviewRequest>
<@hst.headContribution>
<@hst.link path="/js/dummy.js" var="dummyJs">
<@hst.param name="t" value="${.now?long}" />
</@hst.link>
<script type="text/javascript" src="${dummyJs}"></script>
</@hst.headContribution>
</#if>
<div class="homepage-hero-mount" data-cms-content="${document.getHomePageHeroJSON()}"></div>
<#elseif editMode>
<figure style="position: relative">
<@hst.manageContent documentTemplateQuery="new-document" parameterName="document" rootPath="testing"/>
<img src="<@hst.link path="/images/essentials/catalog-component-icons/banner.svg"/>"> Selected document
is not of the correct type, please select or create a HomepageHero document.
</figure>
</#if>
</div>
<#elseif editMode>
<div>
<figure style="position: relative">
<@hst.manageContent documentTemplateQuery="new-document" parameterName="document" rootPath="testing"/>
<img src="<@hst.link path="/images/essentials/catalog-component-icons/banner.svg"/>"> Click to edit HomePage
Hero
</figure>
</div>
</#if>
And then I added the following line within my base-layout file (that is used on every page) in the element:
<@hst.headContributions/>
Is there anything I’m missing?
Thanks,
Sarah
Hi Sarah,
Could you try it with moving the <#if hstRequestContext.channelManagerPreviewRequest> block above the <#if document??> block and removing the <@hst.headContributions/>?
(<@hst.headContributions/> is unnecessary in each component template as it’s done in the root/base template.)
Regards,
Woonsan
Pages are reloaded only if new head contributions are added:
https://issues.onehippo.com/browse/HSTTWO-3747
see also example of component re-initializations in our carousel example:
Hi, Marijan,
It looks like you’re reloading the page with some jquery. Would you be able to link me to that jquery file?
Thanks,
Sarah
Hi Sarah,
actually process is a bit different in above case:
- You drop a carousel component which includes some head contributions
- HST detects it, and reloads the page: carousel is initialized with 0 items. All good.
- You change carousel and link/add an image to it. Now, HST will not reload the page because no head contributions are added/changed. Carousel component is still in its old state and “thinks” it has 0 items.
Now, only way to tell carousel component that we added an item is to either reload the page or trigger our script again to re-initialize carousel again. In above case we are doing the latter, by calling init method for carousel component:
<script type="text/javascript">
if (window.jQuery && window.jQuery.fn.carousel) {
jQuery('#${componentId}').carousel();
}
</script>
So, you would need to know how to re-initialize your component / tell your javascript component “hey, something changed, please update your state”.
Only other option would be to reload the page, or try what Woonsan suggested (I haven’t tried it myself).
Hi all,
Seems like we are facing the same problem. We are however running on BR v 13.4.2.
From which version onwards should the head contributions fix work? I have tried on an empty archetype project with the same version. I installed the banners feature and added a banner to my homepage.
When first adding a carousel to my page I can see the following in the html:
<!--{"headElements":["<style org.hippoecm.hst.container.head.element.contribution.hint.category=\"htmlHead\" type=\"text/css\">\n /* Carousel base class */\n #da9f610f-5370-4241-aad7-a96394aed9fd {\n height: 250px;\n margin-bottom: 60px;\n }\n\n /* Since positioning the image, we need to help out the caption */\n .carousel-caption {\n z-index: 10;\n background: rgba(51, 122, 183, 0.7);\n }\n\n /* Declare heights because of positioning of img element */\n #da9f610f-5370-4241-aad7-a96394aed9fd .item {\n height: 250px;\n background-color: #FFFFFF;\n }\n\n /* center images*/\n .carousel-inner > .item > img {\n margin: 0 auto;\n }\n \n /* order CC-buttons next to each other */\n .item-button {\n float: left;\n }\n </style>","<script src=\"/site/_cmsinternal/webfiles/1623228855559/js/jquery-2.1.0.min.js\" org.hippoecm.hst.container.head.element.contribution.hint.category=\"htmlBodyEnd\" type=\"text/javascript\"></script>","<script src=\"/site/_cmsinternal/webfiles/1623228855559/js/bootstrap.min.js\" org.hippoecm.hst.container.head.element.contribution.hint.category=\"htmlBodyEnd\" type=\"text/javascript\"></script>"],"HST-Type":"HST_UNPROCESSED_HEAD_CONTRIBUTIONS"}-->
However the page does not reload so the contributions do not show up in my , and therefore the banner will not look fine and the interaction does not work. When the page is refreshed the banner looks and works fine.
Is this head contribution “fix” supposed to work on br 13.4.2?
Hi, All!
Sorry I haven’t responded for so long, I have been pulled onto several other issues. But to add to what @lucaswiersma said, I also haven’t been able to get this fix to work on 14.3.3.
Thanks,
Sarah
@woonsanko or @machak,
Can one of you guys possibly share your light on this?
My understanding was that the first time a component added to a page adds a head contribution the whole page should be re-rendered to make sure said head contribution is loaded. When the component changes the page is not reloaded because a trace had been kept of which head contributions where already loaded.
However even when I first add a new component that includes a head contribution my page is not fully re-rendered and I can see in the commented out section in the html that the head contribution is not processed. Should anything be configured to enable reloading the page fully when there are unprocessed head contributions?
I don’t know the detail how the channel manager works. I just replied based on some information like the following:
When a container or component is re-rendered, we check whether the new markup also contains unprocessed head contributions that are not part of the page yet. If so, we reload the page to make sure those head contributions are also loaded. [1]
My understanding is that the page should be reloaded if the component contributes an unprocessed - “new” head contribution item - to the page.
So, if you can try to contribute a new (randomly generated) head contribution in preview mode every time in rending, I expect the page including the component to be re-rendered.
Regards,
Woonsan
Ok than at least our understandings are the same 
.
However in practise this does not seem to work that way for me. I checked this using a new install based on a 13.4.2 archetype and adding only the skeleton site and the banner type.
When rendering a carrousel without changeing anything to the code I would expect this carrousel to be rendered correctly because multiple head contributions are in the default code. So I would expect that the page would be re-rendered at least on first adding the component but this does not seem to be the case.
Afterwards I expect the carousel to be updated by the javascript code that is re-initialized after the component is reloaded.
What I can see after I add a carousel component to my page is that nothing changes in the tag of my page. So neither the required (inline) css nor the javascript is added to the head causing the carousel to look weird initially.
Can I do anything else to force a page reload after adding/updating a component to my page?