Calling Developers!
We are reenergizing our code contribution process! Learn More

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

Options
ashutosh.mishra
ashutosh.mishra Spryker Solution Partner Posts: 5 🧑🏻‍🚀 - Cadet

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

Answers

  • ashutosh.mishra
    ashutosh.mishra Spryker Solution Partner Posts: 5 🧑🏻‍🚀 - Cadet
    Options

    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!