1

Is is possible to get UI-elements of Craft 3.5 in the front end? Specifically wanting to get hold of the headers I use to separate fields of products.

This is my current code:

{% set layout = product.getFieldLayout() %}
{% for tab in layout.tabs %}
    {% if tab.name == "Detaljer" %}
        {% for field in tab.getFields %}
            {% if not product.getFieldValue(field.handle) is empty %}
                {% switch field.className() %}

                    {# Can I get UI header out of the tab.getFields method? #}
                    {% case "craft\\fields\\UI-header-element" %}
                        {# Do stuff #}
                    {% case "craft\\fields\\PlainText" %}
                        <tr>
                            <th>{{ field.name|t }}</th>
                            <td itemprop="value">{{ product.getFieldValue(field.handle )}}</td>
                        </tr> 
                    {% case "craft\\fields\\Categories" %}
                        <tr>
                            <th>{{ field.name|t }}</th>
                            <td>
                                {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                            </td>
                        </tr> 
                    {% case "craft\\fields\\Dropdown" %}
                        <tr>
                            <th>{{ field.name|t }}</th>
                            <td>{{ product.getFieldValue(field.handle).label}}</td>
                        </tr>           
                    {% case "craft\\fields\\Lightswitch" %}
                        <tr>
                            <th>{{ field.name|t }}</th>
                            <td>{% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}</td>
                        </tr>         
                    {% case "craft\\fields\\Number" %}
                        <tr>
                            <th>{{ field.name|t }}</th>
                            <td>{{ product.getFieldValue(field.handle) }} {{ field.suffix }}</td>
                        </tr>                                                                                                        
                    {% default %}
                        <tr>
                            <th>{{ field.name|t }}</th>
                            <td>{{ field.className() }}</td>
                        </tr>

                        {# todo: other non implemented fields #}
                {% endswitch %}
            {% endif %}
        {% endfor %}
    {% endif %}
{% endfor %}   
1
  1. Use the Kint plugin to spit out the current tab to the JS debug console:
{% for tab in layout.tabs %}
    {% if tab.name == "Detaljer" %}

        {{ j(tab) }}

        {% for field in tab.getFields %}

You will see that the structure of the tab-object actually contains the UI-elements as well:

debug output from Kint's j() method displaying headers and fields of the current entry, which is a product

  1. Instead of looping tab.getFields, loop tab.elements:
{% set layout = product.getFieldLayout() %}
{% for tab in layout.tabs %}
    {% if tab.name == "Detaljer" %}

        {% for element in tab.elements %}
            {% switch element.className() %}

            {% case "craft\\fieldlayoutelements\\Heading" %}
                <tr>
                    <th class="field-category" colspan="2"><h5>{{ element.heading }}</h5></th>
                </tr> 

            {% case "craft\\fieldlayoutelements\\CustomField" %}
    
                {% set field = element.getField() %}           
                {% if not product.getFieldValue(field.handle) is empty %}

                    {% switch field.className() %}
                        {% case "craft\\fields\\PlainText" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{{ product.getFieldValue(field.handle )}}</td>
                            </tr> 
                        {% case "craft\\fields\\Categories" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>
                                    {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                                </td>
                            </tr> 
                        {% case "craft\\fields\\Dropdown" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{{ product.getFieldValue(field.handle).label}}</td>
                            </tr>           
                        {% case "craft\\fields\\Lightswitch" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}</td>
                            </tr>         
                        {% case "craft\\fields\\Number" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{{ product.getFieldValue(field.handle) }} {{ field.suffix }}</td>
                            </tr>                                                                                                        
                        {% default %}
                            <tr>
                                <th scope="col" itemprop="name">{{ field.name|t }}</th>
                                <td>{{ field.className() }}</td>
                            </tr>

                            {# todo: other non implemented fields #}
                    {% endswitch %}
                {% endif %}

            {% endswitch %}
        {% endfor %}

    {% endif %}
{% endfor %}   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.