Facing issue while creating a "Custom component" in Spryker B2B demo shop

ashutosh.mishra

Hi All,

I am creating a custom component in B2B-Demo-Shop and have followed the document linked below to complete the task. However, I am facing some issues. Please review the attached screenshot and help me resolve this issue.

Document Link: Creating Components

Screenshot:

Below is the content of my twig file for your reference

{% extends template('page-blank') %}
{% define data = {

isOverlayOpen: false,

} %}
{%- block class -%}js-page-layout-main{%- endblock -%}
{% block body %}

{% block notifications %}

{% include organism('notification-area') only %}

{% endblock %}
{% block sidebar %}

    {% include organism('side-drawer') with {

        class: 'is-hidden-lg-xl',

        attributes: {

            'container-selector': 'js-page-layout-main',

            'trigger-selector': 'js-page-layout-main__side-drawer-trigger',

        },

    } only %}

{% endblock %}


{% block outside %}

    {% include molecule('outside-widgets') only %}

{% endblock %}


{% block header %}

    {% embed organism('header') only %}

        {% block mobile %}

            <a href="#" class="link link--alt js-page-layout-main__side-drawer-trigger">

                {% include atom('icon') with {

                    modifiers: ['big'],

                    data: {

                        name: 'bars',

                    },

                } only %}

            </a>

        {% endblock %}

    {% endembed %}

{% endblock %}


<div class="container">

    {% block pageInfo %}

        <div class="box">

            {% block breadcrumbs %}

                {% include molecule('breadcrumb') only %}

            {% endblock %}


            <hr class="box__separator">


            {% block title %}

                <h1 class="title--h3">{{ data.title }}</h1>

            {% endblock %}

        </div>

    {% endblock %}


    <main>


         {% block componentCounter %}

            {% include molecule('new-component-counter') with {

                modifiers: ['big'],

                data: {

                    name: 'Counting a tags...',

                    description: 'How many links are there on this page?'

                },

                attributes: {


                    'element-selector': 'a'

                }

            } only %}


        {% endblock %}

    </main>


    {% block footer %}

        {% include organism('footer') only %}

    {% endblock %}

</div>


{% block globalComponents %}

    {% include molecule('action-single-click-enforcer') with {

        attributes: {

            'target-selector': '[data-init-single-click]',

        },

    } only %}


    {% include molecule('form-input-default-value-disabler') with {

        attributes: {

            'form-selector': '[data-init-default-value-form]',

            'input-selector': '[data-default-value-disabler]',

        },

    } only %}


    {% include molecule('form-submitter') with {

        attributes: {

            'trigger-selector': '[data-form-submitter]',

        },

    } only %}


    {% include molecule('viewport-intersection-observer') only %}


    {% include molecule('main-overlay') with {

        attributes: {

            'is-open': data.isOverlayOpen,

        },

    } only %}

{% endblock %}


{% block icons %}

    {% include atom('icon-sprite') only %}

{% endblock %}
{% endblock %}

Thank you for your assistance.

Best regards,
Ashutosh Mishra

victor.vanherpt

Hi @ashutosh.mishra ! You are calling your component outside any {% block … %} tags.

The error here is very twig specific: You are including html content outside the twig blocks, this is invalid if you are extending a twig template. Here's some docu on how to extend templates in twig: extends - Documentation - Twig - The flexible, fast, and secure PHP template engine

ashutosh.mishra

Hi Victor,

I tried moving the code after the {% block body %} line, but now I'm encountering a "FAIL WHALE" error. Could you please help me understand what might be causing this issue?

Thank you!