Facing issue while creating a "Custom component" in Spryker B2B demo shop
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
-
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 engine5 -
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!
0
Categories
- All Categories
- 42 Getting Started & Guidelines
- 7 Getting Started in the Community
- 8 Additional Resources
- 7 Community Ideas and Feedback
- 69 Spryker News
- 896 Developer Corner
- 758 Spryker Development
- 83 Spryker Dev Environment
- 361 Spryker Releases
- 3 Oryx frontend framework
- 34 Propel ORM
- 68 Community Projects
- 3 Community Ideation Board
- 30 Hackathon
- 3 PHP Bridge
- 6 Gacela Project
- 23 Job Opportunities
- 3.2K 📜 Slack Archives
- 116 Academy
- 5 Business Users
- 370 Docker
- 551 Slack General
- 2K Help
- 75 Knowledge Sharing
- 6 Random Stuff
- 4 Code Testing
- 32 Product & Business Questions
- 68 Spryker Safari Questions
- 50 Random