How to get a preview of fragments

Enonic version: 6.11
OS: Centos
How should we get a preview of fragments in content studio with css applied on them
As of now, we see the them without any css changes applied to them
I have tried creating template template but could not find any content type to be added in *Supports dropdown

In site.xml:

<!-- Used for Fragments to work in XP Content Studio preview -->
<mapping controller="/site/pages/default/default.js">

In default.js:

const isFragment = content.type === 'portal:fragment';

In default.js view, do not render regions and then:

<!--/* Render Fragments (single view, supported with mappings in site.xml) */-->
<main th:if="${isFragment}" th:remove="tag">
    <div data-portal-component="fragment" th:remove="tag"/>

You can also see how this was done in the “sample blog” app:

1 Like