Using pnp-popup in slider template

[jfmathieu]

Version used 3.15.1.0

Describe the bug I'm trying to integrate into a slider display a pnp-popup "popup". The pnp-popup work well in the accordeon but not in the slider. I get the error message : "Template element with ID equal to "popupclick" not found" instead of the item result.

To Reproduce Steps to reproduce the behavior:

1. Go to a page
2. Add the search result webpart
3. Step 1: Search : *
4. Step 2: All default
5. Step 3: Select "Caroussel" > Edit Model and past the code below.
6. Republish
7. A error will be display instead of item be display

Code to past:

<content id="template">
    <style>       
        .flickity-page-dots { 
            bottom: 5px; 
        }
    </style>
    <div class="template_root">
        {{#if @root.hasPrimaryOrSecondaryResults}} 
            {{#>slider items=(JSONstringify @root.items 2) options=(JSONstringify @root.sliderOptions)}}
                <div class="slide" style="height: 360px;width: 318px;margin: 5px;">

                    <pnp-popup>
                        <template id="popupclick">
                            <span>TEST</span>
                        </template>
                        <template id="popupheader">
                            <span>Title: TEST</span><br /><span>Header HTML here</span>
                        </template>
                        <template id="popupbody">
                            <span>Title: TEST</span><br /><span>Body HTML here</span>
                        </template>
                    </pnp-popup>

                </div>                
            {{/slider}}
            {{#if @root.paging.showPaging}}
                <pnp-pagination 
                    data-total-items="{{@root.paging.totalItemsCount}}" 
                    data-hide-first-last-pages="{{@root.paging.hideFirstLastPages}}"
                    data-hide-disabled="{{@root.paging.hideDisabled}}"
                    data-hide-navigation="{{@root.paging.hideNavigation}}"
                    data-range="{{@root.paging.pagingRange}}" 
                    data-items-count-per-page="{{@root.paging.itemsCountPerPage}}" 
                    data-current-page-number="{{@root.paging.currentPageNumber}}"
                >
                </pnp-pagination>
            {{/if}}
        {{else}}
            {{#unless showBlank}}
                <div class="template_noResults">{{@root.strings.NoResultMessage}}</div>
            {{/unless}}
        {{/if}}
    </div>
</content>
<content id="placeholder"> 
    <style>        
        .flickity-page-dots { 
            bottom: 5px; 
        }
    </style>
    <div class="placeholder_root">
        {{#>slider items="[{},{},{},{},{}]" options=(JSONstringify @root.sliderOptions)}}
            <div class="slide" style="height: 360px;width: 318px;margin: 5px;">
                <pnp-document-card-shimmers data-is-compact="\{{@root.isCompact}}"></pnp-document-card-shimmers>
            </div>                
        {{/slider}}
    </div>
</content>

Expected behavior Expect to see the popup link in the slider and the popup when clicking on the link.

Screenshots Should see this:

Desktop (please complete the following information):

• Browser Version 86.0.4240.75 (Build officiel) (64 bits)

[wobba]

The two components work a bit different. The accordion is a one item wrapper, while the slider take a list of items and this impacts how the template is passed. You can use a workaround like this where you pass the template as a string in a parameter.

{{#>slider items=(JSONstringify @root.items 2) options=(JSONstringify @root.sliderOptions)}}
                <div class="slide" style="height: 360px;width: 318px;margin: 5px;">
                    Text
                    <pnp-popup template="<template id='popupclick'><span>TEST</span></template><template id='popupheader'><span>Title: TEST</span><br /><span>Header HTML here</span></template><template id='popupbody'><span>Title: TEST</span><br /><span>Body HTML here</span></template>
"/>
                </div>                
{{/slider}}

[wobba]

@jfmathieu managed to figure out a fix - pushed to the dev branch :)