Add a new section/widget to main.html

Developing with LiveWhale
1

Hello!

We’re looking to add a “Featured Article” on the main calendar view below the list of upcoming events.

Our first thought was to create a new template and reference it in the main.html. So, in main.html (at _ingredients/themes/global/includes) you’d see:

   <xphp var="lw_calendar_view_menu" />
      <xphp var="lw_calendar" />
      <xphp var="lw_calendar_feature_template" />

and we’d add a new template under _ingredients/themes/global/components/calendar named lw_calendar_feature.html with something like this in the contents:

<!-- <div id="lw_calendar_feature"></div> -->
<script id="lw_calendar_feature_template" type="text/template">
  <h2>Featured Article</h2>
  <!-- most of the template here -->
</script>

It doesn’t render on the page. When inspecting the javascript runtime I’m not seeing the new template being loaded, its not in the lodash sources like the others.

Is there a file naming or class naming convention that I need to adhere to for things to be loaded?

Then I tried throwing a widget directly in the main template but it gets its script removed and doesn’t work.

What’s the recommended course of action for creating a new section of a page and adding it to the template? Or would we need to approach it differently, like using a widget?

Happy to walk through our environment if it’d help

Thanks,
Greg

2

Hi Greg,

Thanks for sharing this – I see what you’re getting at, but the way we’ve built the LWC theming tools don’t exactly support extending them this way. That is, we load our set of core components, each of which can be overridden, but we don’t have a way of adding client-specific JS components currently.

What you can do is add a file include to pull in the HTML markup of wherever your featured article is going to be living. For instance, that might look like

<xphp var="lw_calendar_view_menu" />
<xphp var="lw_calendar" />
<xphp include="/_ingredients/includes/featured-article.html" />

That would work for pulling a static file. Or, you could pull something from your main https:// site. Lastly, a custom module could be useful if you’re trying to pull some sort of dynamic content and LiveWhale wants to do some calculations for you. Let us know if this gets you there or if you’d like to chat more about what you have in mind; thanks!

1 Like
3

Love the simple answer! We’ll be working with this, probably adding widgets to the included file.

Probably would be good to dive into modules for the future though.

Thanks!

4

Sounds good! One tip, when adding events widgets to the include files, you don’t need to use the HTML/JS copy-paste code that you would for a 3rd party site. Instead you can take the ID of the saved widget and just use <widget id="123" />. Hope this helps!

1 Like