Content List With Body Template | Communifire Documentation

Create a template for the Content List Widget that displays the full content body right on a Page Builder page. Save people a click and give them everything they need to know right on the page.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Content List With Body as the Template Name.
4. Select Content List as the Widget Type.
5. Select Content List as the Widget Sub Type.
6. In the editor, paste the following code.

   <div class="axero-widget axero-widget-content-list-with-body {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
      {{#if ShowWidgetHeader}}
         <div class="axero-widget-header">
            <h3>{{WidgetTitle}}</h3>
         </div>
      {{/if}}
      <div class="axero-widget-content">
   
         {{#each Contents}}
            <div class="item">
               <div><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></div>
               <div id="content-body-{{ContentID}}"></div>
               <script>
                  var xhttp = new XMLHttpRequest();
                  xhttp.open("GET", "/api/content/{{ContentID}}", false);
                  xhttp.setRequestHeader("Content-type", "application/json");
                  xhttp.send();
                  var response = JSON.parse(xhttp.responseText);
                  var contentHTML = response.ResponseData.ContentBody;
                  var contentBodySection = document.getElementById("content-body-{{ContentID}}");
                  contentBodySection.innerHTML = contentHTML;
               </script>
            </div>
         {{/each}}
      
      </div>
      {{#if ShowWidgetFooter}}
      <div class="axero-widget-footer">
   
      </div>
      {{/if}}
   </div>

7. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Content List with Body template*/
   .axero-widget-content-list-with-body div.item {
       list-style: none; 
       margin: 0; 
       padding: 15px;
       border-bottom: solid 1px #efefef;
   }
   
   .axero-widget-content-list-with-body div.item:last-child {
      border-bottom: none;
   }

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page.
3. Click the Widgets tab.
4. Drag a Content List widget onto the page.
5. On the Content List widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Configure the widget properties.
   • Note: To display specific pieces of content in the widget, you can add a unique tag to the content, then filter the widget by the tag.
8. Click Template.
9. Select the Content List with Body template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.