Skip to content

Commit

Permalink
Merge pull request #518 from spryker-shop/feature/cc-34672-collapsibl…
Browse files Browse the repository at this point in the history 
…e-category-tree

CC-34672 Collapsible category tree integraton
  • Loading branch information
@tolerants
tolerants authored Oct 16, 2024
2 parents 3ee4a97 + 4b03907 commit 74b6b63
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 41 deletions.
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"spryker-feature/approval-process": "^202404.0",
"spryker-feature/availability-notification": "^202404.0",
"spryker-feature/cart": "dev-master as 202407.0",
"spryker-feature/catalog": "^202404.0",
"spryker-feature/catalog": "dev-master as 202410.0",
"spryker-feature/category-management": "^202404.0",
"spryker-feature/checkout": "^202404.0",
"spryker-feature/cms": "^202404.0",
Expand Down
26 changes: 17 additions & 9 deletions composer.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 39 additions & 1 deletion .../Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,16 @@

&--lvl-3 {
@include helper-breakpoint-media-min($lg) {
padding-left: 10px;
padding-left: rem(10);
}
}
}

&__menu-item {
display: flex;
flex-grow: 1;
color: $setting-color-gray-3;

&--lvl-2 {
&:first-child {
padding-top: rem(5);
Expand All @@ -36,6 +40,40 @@
}
}

&__category-row {
flex-grow: 1;

&--no-children {
margin-left: rem(16);
}
}

&__category-target {
@include helper-effect-transition(grid-template-rows);
display: grid;
grid-template-rows: 1fr;

&--hidden {
grid-template-rows: 0fr;
}
}

&__category-target-inner {
overflow: hidden;
}

&__category-toggle-button {
@include helper-effect-transition(transform);
color: $setting-color-gray-3;
margin-right: rem(5);
background-color: $setting-color-transparent;
cursor: pointer;

&--collapsed {
transform: rotate(-90deg);
}
}

&__menu-link {
@include helper-effect-transition(color);
display: flex;
Expand Down
115 changes: 85 additions & 30 deletions .../Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,39 +29,94 @@
{% endif %}
{% endfor %}

{% if data.filterPath is not empty %}
{% set currentUrl = url(data.filterPath, {categoryPath: (app.request.attributes.get('categoryPath'))}) %}
{% else %}
{% set currentUrl = app.request.attributes.get('categoryNode') ? app.request.attributes.get('categoryNode').url : null %}
{% endif %}
{% if quantity > 0 or (quantity == 0 and data.isEmptyCategoryFilterValueVisible) %}
{% if data.filterPath is not empty %}
{% set currentUrl = url(data.filterPath, {categoryPath: (app.request.attributes.get('categoryPath'))}) %}
{% else %}
{% set currentUrl = app.request.attributes.get('categoryNode') ? app.request.attributes.get('categoryNode').url : null %}
{% endif %}

{% set categoryUrl = data.filterPath is not empty ? url(data.filterPath, {categoryPath: (categoryNode.url | trimLocale)}) : categoryNode.url %}
{% set isActive = (currentUrl == categoryUrl) %}
{% set isHidden = (data.levelMenu != 1) %}
{% set disableAttribute = quantity == 0 ? 'disabled' %}
{% set menuItemActiveClass = isActive ? config.name ~ '__menu-item--active ' ~ config.jsName ~ '__menu-item' %}
{% set menuItemHiddenClass = isHidden and not isActive ? 'is-hidden-lg-xxl' %}
{% set menuLinkActiveClass = isActive ? config.name ~ '__menu-link--active' %}
{% set linkTextActiveClass = isActive ? config.name ~ '__link-text--active' %}
{% set triggerButtonJsName = data.parentJsName ? data.parentJsName ~ '__trigger' %}
{% set categoryUrl = data.filterPath is not empty ? url(data.filterPath, {categoryPath: (categoryNode.url | trimLocale)}) : categoryNode.url %}
{% set isActive = (currentUrl == categoryUrl) %}
{% set isHidden = (data.levelMenu != 1 and data.isEmptyCategoryFilterValueVisible) %}
{% set disableAttribute = quantity == 0 ? 'disabled' %}
{% set menuItemActiveClass = isActive ? config.name ~ '__menu-item--active ' ~ config.jsName ~ '__menu-item' %}
{% set menuItemHiddenClass = isHidden ? 'is-hidden-lg-xxl' %}
{% set menuLinkActiveClass = isActive ? config.name ~ '__menu-link--active' %}
{% set linkTextActiveClass = isActive ? config.name ~ '__link-text--active' %}
{% set triggerButtonJsName = data.parentJsName ? data.parentJsName ~ '__trigger' %}

<li class="{{ config.name }}__menu-item {{ config.name }}__menu-item--lvl-{{ data.levelMenu }} {{ menuItemActiveClass }} {{ menuItemHiddenClass }}">
<button class="{{ config.name }}__menu-link {{ config.name }}__menu-link--lvl-{{ data.levelMenu }} {{ menuLinkActiveClass }} {{ triggerButtonJsName }}" type="button" {{ disableAttribute }} data-url={{ categoryUrl }}>
<span class="{{ config.name }}__link-text {{ linkTextActiveClass }}">{{ categoryNode.name }}</span> <span>{{ quantity | executeFilterIfExists('formatInt', app.locale) }}</span>
</button>
{% set categoryNamePrepared = categoryNode.name | replace({'[^a-zA-Z0-9]': '_'}) %}
{% set childrenClass = categoryNode.hasChildren ? 'menu__item--has-children-list' %}
{% set triggerClassName = config.jsName ~ '__category-trigger-' ~ categoryNamePrepared %}
{% set targetCategoryClassName = config.jsName ~ '__category-target-' ~ categoryNamePrepared %}
{% set targetTogglerClassName = config.jsName ~ '__toggler-target-' ~ categoryNamePrepared %}
{% set classToToggle = config.name ~ '__category-target' %}
{% set categoryTargetInner = config.name ~ '__category-target-inner' %}
{% set classToToggleModifier = classToToggle ~ '--hidden' %}
{% set toggleButtonClassName = config.name ~ '__category-toggle-button' %}

{% if hasChildren %}
{% include molecule('filter-category', 'CatalogPage') with {
data: {
filter: data.filter,
filterPath: data.filterPath,
categories: categoryNode.children,
levelMenu: data.levelMenu + 1,
parentJsName: data.parentJsName,
},
} only %}
{% endif %}
</li>
<li class="{{ config.name }}__menu-item {{ config.name }}__menu-item--lvl-{{ data.levelMenu }} {{ menuItemActiveClass }}">
{% if hasChildren %}
{% block categoryItemToggler %}
<div>
{% block categoryItemTogglerIcon %}
<button type="button" class="spacing-right--small {{ toggleButtonClassName }} {{ triggerClassName }} {{ targetTogglerClassName }}">
{% include atom('icon') with {
class: config.name ~ '__category-toggle-button-icon',
modifiers: ['small'],
data: {
name: 'caret-down',
},
} only %}
</button>
{% endblock %}

{% block categoryItemTogglerHandlers %}
{% include molecule('toggler-click') with {
attributes: {
'trigger-class-name': triggerClassName,
'target-class-name': targetCategoryClassName,
'class-to-toggle': classToToggleModifier,
},
} only %}

{% include molecule('toggler-click') with {
attributes: {
'trigger-class-name': triggerClassName,
'target-class-name': targetTogglerClassName,
'class-to-toggle': toggleButtonClassName ~ '--collapsed',
},
} only %}
{% endblock %}
</div>
{% endblock %}
{% endif %}

<div class="{{ config.name }}__category-row {{ not hasChildren ? config.name ~ '__category-row--no-children' }}">
<button class="{{ config.name }}__menu-link {{ config.name }}__menu-link--lvl-{{ data.levelMenu }} {{ menuLinkActiveClass }} {{ triggerButtonJsName }}" type="button" {{ disableAttribute }} data-url={{ categoryUrl }}>
<span class="{{ config.name }}__link-text {{ linkTextActiveClass }}">{{ categoryNode.name }}</span> <span>{{ quantity | executeFilterIfExists('formatInt', app.locale) }}</span>
</button>

{% if hasChildren %}
<div class="{{ classToToggle }} {{ targetCategoryClassName }}">
<div class="{{ categoryTargetInner }}">
{% include molecule('filter-category', 'CatalogPage') with {
data: {
filter: data.filter,
filterPath: data.filterPath,
categories: categoryNode.children,
levelMenu: data.levelMenu + 1,
parentJsName: data.parentJsName,
isEmptyCategoryFilterValueVisible: data.isEmptyCategoryFilterValueVisible,
},
} only %}
</div>
</div>
{% endif %}
</div>
</li>
{% endif %}
{% endfor %}
</ul>
{% endblock %}
1 change: 1 addition & 0 deletions ...Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog/page-layout-catalog.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
filteredFacets: data.filteredFacets,
filterPath: data.filterPath,
categories: data.categories,
isEmptyCategoryFilterValueVisible: data.isEmptyCategoryFilterValueVisible,
parentJsName: catalogJsName,
numberFormatConfig: numberFormatConfig,
},
Expand Down

0 comments on commit 74b6b63

Please sign in to comment.