BoxBody component

This is for:

In this article

Options
Methods
Usage

This component takes care of appending a ResultList component and ensuring that the correct CSS styles are applied so that infinite scrolling works correctly.

By default, the ResultList component is initialized with the following option:

enableInfiniteScroll: true;

If you want to modify other options on the ResultList component, you can do so when initializing the framework.

$('#MyBox').coveo('initBox', {
    BoxBody : {
        infiniteScrollPageSize : 20
    }
})

Options

enableInfiniteScroll

Specifies whether the component should automatically load more results when the user has reached the bottom of the result list.

The default value is true.

<div class="CoveoBoxBody" data-enable-infinite-scroll="true"></div>

resultTemplate

Note

If you created your Box component using the Interface Editor and the HTML template editor that’s provided with that product, then you will most likely not have to handle the templates manually.

The following documentation is provided only if you manually created the markup of your page.

This is not relevant for you if you’re using the Interface Editor.

This option specifies a result template that the body should use.

There are many ways to specify a result template:

Put a script tag with the class result-template and the correct mime-type as a child of the component in your HTML markup.

Example

 <div class="CoveoBoxBody">
     <script class='result-template' type="text/x-underscore-template">
        <%= clickUri %>
     </script>
 </div>

Assign the result template to the BoxBody Component itself when you initialize the framework.

Example

Assuming you have a script tag with the id MyBoxTemplate, your tag should look like this:

 $('#MyBox').coveo('initBox', {
     BoxBody : {
         resultTemplate : new Coveo.Ui.UnderscoreTemplate($('#MyBoxTemplate').get(0))
     }
 });

 [...]
 <script id="MyBoxTemplate" type="text/x-underscore-template">
    <%= clickUri %>
 </script>

Note

You can read more about result templates and result template helpers.

Methods

getHeight

Returns the height of the component. It’s used mostly for the resize method.

$('#myBoxBody').coveo('getHeight')

resize

Calculates the current required height for the body so that infinite scrolling works correctly.

It’s called once when the component is first initialized and after every query, but you might need to call it again if you have something in your box that changes the header or footer height.

$('#myBoxBody').coveo('resize')

Usage

<div class='CoveoBoxBody'></div>