Custom Code SLOTS!

Ideas
1

Dear team,

An extremely helpful addition to Bootstrap Studio would be if Custom Code could accept “slots”. I don’t expect any ambitious web component spec conformity, just the ability to nest other components inside the designated part of my Custom Code.

This ticket came to a similar idea but using an attribute data-bss-container, I would suggest using the element (or both!).

With this in place it would be trivial to make simple wrapper Custom Code.

1 Like
2

Thank you for the suggestion, I like the slots name. Right now we have a lot of other features to work on, but we will get to this eventually. If other wish to offer feedback about this feature we would love to hear it.

3 Likes
3

If the slots wrappers could be used for templating code, then it would be nice to be able to set the individual tag pair names for the wrapper. Might there also be a double triple wrap for if, if else, if or more…?

4

I was able to acheive this concept of “slots” by using a python export script to take divs with data-attributes and covert it to templating language by wrapping the inner html with template brackets "{ }'.

So this:

<div class="entries">
    <div exp-tag="exp:channel:entries" exp-attr-channel="blog" exp-attr-disable="category_fields|member_data" exp-attr-limit="4">
        <div class="entry post-preview"><a href="{path='blog/entry/{url_title}'}">
                <h2 class="post-title mt-5 mb-2 fs-4" exp-text="{title}">Post Titles (Linked)</h2>
            </a>
            <p class="post-meta">Posted by <a href="{path='member/{author_id}'}" exp-text="{author}">author</a><span exp-text="{entry_date format='%n/%j/%Y'},&nbsp;">01/01/2023, </span><a href="{path='blog/entry/{url_title}#comments'}" exp-text="{comment_total} comment{if comment_total != 1}s{/if}">0 comments</a></p>
        </div>
        <div class="d-none" exp-conditional="if no_results | if">
            <div class="alert warn no-results">
                <p>There are <strong>no</strong> entries in this channel.</p>
            </div>
        </div>
    </div>
</div>

get converted to this:

<div class="entries"> {exp:channel:entries channel="blog" disable="category_fields|member_data" limit="4" }
    <div class="entry post-preview"><a href="{path='blog/entry/{url_title}'}">
            <h2 class="post-title mt-5 mb-2 fs-4">{title}</h2>
        </a>
        <p class="post-meta">Posted by <a href="{path='member/{author_id}'}">{author}</a> <span>{entry_date format='%n/%j/%Y'}, </span><a href="{path='blog/entry/{url_title}#comments'}">{comment_total} comment{if comment_total != 1}s{/if}</a></p>
    </div> {if no_results}
    <div class="alert warn no-results">
        <p>There are <strong>no</strong> entries in this channel.</p>
    </div>
    {/if}
    {/exp:channel:entries}
</div>
2 Likes