Skip to content

Feat: wcga #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ahuininga-orisha wants to merge 3 commits into
base: beta
Choose a base branch
from
Open

Feat: wcga #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b390d2c
wip
Dec 4, 2025
fa0d3d1
wip
Dec 12, 2025
72fe95f
Update view.phtml
Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/view/frontend/templates/layer/state.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ use Tweakwise\Magento2Tweakwise\Block\LayeredNavigation\Navigation\State;
<a class="action remove text-center block py-1.5 px-1.5 rounded border border-container text-primary hover:text-primary-darker"
href="<?= $escaper->escapeUrl($filter->getRemoveUrl()) ?>"
data-js-filter-id="<?= $escaper->escapeHtmlAttr($block->getActiveFilterCssId($filter)) ?>"
tabindex="0"
aria-label="<?= $escaper->escapeHtmlAttr(__('Remove') . " " . $currentFilterName) ?>"
role="button"
title="<?= $escaper->escapeHtmlAttr(__('Remove') . " " . $currentFilterName) ?>">
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
Expand Down
41 changes: 36 additions & 5 deletions src/view/frontend/templates/layer/view.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ $filtered = count($block->getLayer()->getState()->getFilters());
<?php if ($block->getLayer()->getState()->getFilters()): ?>
<div class="block-actions filter-actions">
<a href="<?=$escaper->escapeUrl($block->getClearUrl())?>"
tabindex="0"
role="button"
class="action clear filter-clear text-xs text-primary underline hover:text-primary-darker"><span><?= $escaper->escapeHtml(__('Clear All'))?></span></a>
</div>
<?php endif; ?>
Expand All @@ -88,8 +90,9 @@ $filtered = count($block->getLayer()->getState()->getFilters());
: 'true'
) ?>

<div class="filter-option card my-4 pb-0 <?= $escaper->escapeHtmlAttr($filter->getCssClass())?>"
<fieldset class="filter-option card my-4 pb-0 <?= $escaper->escapeHtmlAttr($filter->getCssClass())?>"
x-data="{ open: <?= $escaper->escapeHtmlAttr($filterActive) ?>, showTooltip: false }">
<legend id="<?= $escaper->escapeHtmlAttr($filter->getUrlKey()) ?>" class="sr-only"><?= $escaper->escapeHtml($filter->getName())?></legend>
<div class="filter-options-title flex justify-between items-center border-container pb-2 <?= $escaper->escapeHtmlAttr($filter->isCollapsible()) ? 'cursor-pointer hover:text-secondary-darker' : '' ?>"
:class="{ 'border-b': open }"
<?= $filter->isCollapsible() ? '@click="open = !open"' : ''?>>
Expand All @@ -101,6 +104,9 @@ $filtered = count($block->getLayer()->getState()->getFilters());
<span class="ml-2 mt-1 block relative tooltip">
<span @mouseover="showTooltip = true"
@mouseleave="showTooltip = false"
tabindex="0"
aria-label="<?= $escaper->escapeHtmlAttr(__('More info')) ?>"
aria-describedby="<?= $escaper->escapeHtmlAttr($filter->getUrlKey()) ?>-tooltip"
class="flex justify-center items-center relative text-blue-900 w-5 h-5 cursor-pointer tooltip-toggle">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 18 18" fill="currentColor">
Expand All @@ -111,13 +117,20 @@ $filtered = count($block->getLayer()->getState()->getFilters());
</span>
<span x-cloak
x-show.transition.origin.top="showTooltip"
id="<?= $escaper->escapeHtmlAttr($filter->getUrlKey()) ?>-tooltip"
class="absolute bottom-0 mb-8 block bg-gray-900 bg-opacity-95 rounded p-2 text-white text-xs font-normal absolute w-32 z-10 text-left tooltip-content"><?= $escaper->escapeHtml($tooltip)?></span>
</span>
<?php endif; ?>
</span>

<?php if ($filter->isCollapsible()): ?>
<span class="py-1 px-1 rounded border border-container">
<span
class="py-1 px-1 rounded border border-container"
:tabindex="!open ? '0' : '-1'"
role="button"
@keydown.enter.prevent="open = !open"
aria-label="<?= $escaper->escapeHtmlAttr(__('Expand filter options for %1', $filter->getName())) ?>"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg"
class="transition-transform transform duration-300 ease-in-out text-primary"
Expand All @@ -135,15 +148,16 @@ $filtered = count($block->getLayer()->getState()->getFilters());
<?=/* @noEscape */
$block->getChildBlock('renderer')->render($filter)?>
</div>
</div>
</fieldset>

<?php if ($renderFilterButton): ?>
<div class="show-items-link">
<button type="button"
class="btn btn-primary btn-block js-btn-filter"
aria-label="<?= $escaper->escapeHtmlAttr(__('Apply filters')) ?>"
>
<?= $escaper->escapeHtml(__('Show <span>%1</span> items',
$block->getLayer()->getProductCount()));?>
<?= $escaper->escapeHtml(__('Show items')); ?>

</button>
</div>
<?php endif; ?>
Expand Down Expand Up @@ -189,11 +203,27 @@ $filtered = count($block->getLayer()->getState()->getFilters());
.sort((a, b) => a.dataset[sortType].localeCompare(b.dataset[sortType],undefined,{numeric: true}))
.forEach((item) => {
items.appendChild(item);
item.focus();
});
},
toggleShowMore(moreItemsShow, hasAlternateSort) {
this.moreItemsShow = moreItemsShow
this.sortItems(hasAlternateSort)

// Focus the first visible item
this.$nextTick(() => {
const items = this.$refs.items;
if (!items) return;
const firstVisible = Array.from(items.children).find(
item => item.style.display !== 'none'
);

if (firstVisible) {
// Try to focus input or anchor
const input = firstVisible.querySelector('input, a, button');
if (input) input.focus();
}
});
}
}
}
Expand Down Expand Up @@ -241,6 +271,7 @@ $filtered = count($block->getLayer()->getState()->getFilters());
if(value.length === 0) {
moreItems.style.display = '';
lessItems.style.display = '';

} else {
moreItems.style.display = 'none';
lessItems.style.display = 'none';
Expand Down
12 changes: 9 additions & 3 deletions src/view/frontend/templates/product/layered/default.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ $hasAlternateSortOrder = $block->hasAlternateSortOrder();
?>
<div x-data="initTweakwiseNavigationItems()" x-init='sortItems(<?= (int)$hasAlternateSortOrder ?>)'>
<?php if ($block->isSearchable()): ?>
<input @keyUp="filterSearch()" x-ref="tw_filtersearch" x-data="initFilterSearch()" data-max-visible="<?= $escaper->escapeHtmlAttr($block->getMaxItemsShown())?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $escaper->escapeHtmlAttr($block->getSearchPlaceholder()); ?>" >
<input aria-hidden="true" tabindex="-1" @keyUp="filterSearch()" x-ref="tw_filtersearch" x-data="initFilterSearch()" data-max-visible="<?= $escaper->escapeHtmlAttr($block->getMaxItemsShown())?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $escaper->escapeHtmlAttr($block->getSearchPlaceholder()); ?>" >
<div x-ref="search_no_results" style="display: none" class="search_no_results empty"><?= $escaper->escapeHtml($block->getSearchNoResultsText()); ?></div>
<?php endif; ?>
<ol class="items" x-ref="items">
Expand All @@ -33,15 +33,17 @@ $hasAlternateSortOrder = $block->hasAlternateSortOrder();
data-original-sort="<?= $escaper->escapeHtmlAttr($index); ?>"
<?php endif; ?>
>
<a <?= /* @noEscape */ $block->renderAnchorHtmlTagAttributes($item); ?> class="flex w-full py-1 mb-1 hover:text-black">
<a aria-hidden="true" tabindex="-1" <?= /* @noEscape */ $block->renderAnchorHtmlTagAttributes($item); ?> class="flex w-full py-1 mb-1 hover:text-black">
<?php $cssId = $item->getCssId(); ?>
<?php if ($block->showCheckbox()): ?>
<label for="<?= $escaper->escapeHtmlAttr($cssId) ?>" class="block m-0 font-normal flex w-full">
<input id="<?= $escaper->escapeHtmlAttr($cssId) ?>"
name="<?= $escaper->escapeHtmlAttr($item->getFilter()->getFacet()->getFacetSettings()->getUrlKey()) ?>[]"
name="<?= $escaper->escapeHtmlAttr($item->getFilter()->getUrlKey()) ?>[]"
type="checkbox" <?= ($item->isSelected() ? 'checked="checked"' : '') ?>
value="<?= $escaper->escapeHtmlAttr($item->getLabel()) ?>"
class="block w-4 h-4 mr-2 mt-1"
tabindex="0"
aria-labelledby="<?= $escaper->escapeHtmlAttr($item->getFilter()->getUrlKey()) ?> <?= $escaper->escapeHtmlAttr($cssId) ?>"
>

<?= $escaper->escapeHtml($block->getItemPrefix()) ?>
Expand Down Expand Up @@ -73,12 +75,16 @@ $hasAlternateSortOrder = $block->hasAlternateSortOrder();
@click.prevent="toggleShowMore(true, <?= (int)$hasAlternateSortOrder ?>)"
:class="{ 'hidden': moreItemsShow }"
x-ref="moreItems"
role="button"
tabindex="0"
><?= $escaper->escapeHtml(__($block->getMoreItemText())) ?></a>
<a href="#" class="less-items underline cursor-pointer"
x-cloak
@click.prevent="toggleShowMore(false, <?= (int)$hasAlternateSortOrder ?>)"
:class="{ 'block': moreItemsShow, 'hidden': !moreItemsShow }"
x-ref="lessItems"
role="button"
tabindex="0"
><?= $escaper->escapeHtml(__($block->getLessItemText())) ?></a>
<?php endif; ?>
</div>
4 changes: 4 additions & 0 deletions src/view/frontend/templates/product/layered/link.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,15 @@ $hasAlternateSortOrder = $block->hasAlternateSortOrder();
<a href="#" class="more-items underline cursor-pointer"
@click.prevent="toggleShowMore(true, <?= (int)$hasAlternateSortOrder ?>)"
:class="{ 'hidden': moreItemsShow }"
tabindex="0"
role="button"
><?= $escaper->escapeHtml(__($block->getMoreItemText())) ?></a>
<a href="#" class="less-items underline cursor-pointer"
x-cloak
@click.prevent="toggleShowMore(false, <?= (int)$hasAlternateSortOrder ?>)"
:class="{ 'block': moreItemsShow, 'hidden': !moreItemsShow }"
tabindex="0"
role="button"
><?= $escaper->escapeHtml(__($block->getLessItemText())) ?></a>
<?php endif; ?>
</div>
7 changes: 6 additions & 1 deletion src/view/frontend/templates/product/layered/link/item.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ $hasAlternateSortOrder = $block->hasAlternateSortOrder();
data-alternate-sort="<?= $escaper->escapeHtmlAttr($item->getAlternateSortOrder()); ?>"
<?php endif; ?>
>
<a href="<?= $escaper->escapeUrl($block->getCategoryUrl($item)) ?>" class="flex w-full py-1 mb-1 hover:text-black">
<a tabindex="0"
id ="<?= $escaper->escapeHtmlAttr($item->getCssId()) ?>"
href="<?= $escaper->escapeUrl($block->getCategoryUrl($item)) ?>"
class="flex w-full py-1 mb-1 hover:text-black"
aria-labelledby="<?= $escaper->escapeHtmlAttr($item->getFilter()->getUrlKey()) ?> <?= $escaper->escapeHtmlAttr($item->getCssId()) ?>"
>
<?= $escaper->escapeHtml($block->getItemPrefix()) ?>
<?= $escaper->escapeHtml($item->getLabel()) ?>
<?= $escaper->escapeHtml($block->getItemPostfix()) ?>
Expand Down
4 changes: 3 additions & 1 deletion src/view/frontend/templates/product/layered/slider.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ $jsSliderConfig = $block->getJsSliderConfig();
$bucketHeight = floor((float)$bucket['relativeamount'] * $bucketHightFactor);
$bucketWidth = (($rangeMax - $rangeMin) / ($totalRange)) * 100;
?>
<a href="javascript:void(0);" class="bucket-link" style="width: <?= $bucketWidth ?>%" data-rangemin="<?= $escaper->escapeHtmlAttr($rangeMin) ?>" data-rangemax="<?= $escaper->escapeHtmlAttr($rangeMax) ?>">
<a tabindex="-1" href="javascript:void(0);" class="bucket-link" style="width: <?= $bucketWidth ?>%" data-rangemin="<?= $escaper->escapeHtmlAttr($rangeMin) ?>" data-rangemax="<?= $escaper->escapeHtmlAttr($rangeMax) ?>">
<div class="bucket-range" style="height: <?= $escaper->escapeHtmlAttr($bucketHeight) ?>px;">
</div>
</a>
Expand Down Expand Up @@ -98,6 +98,7 @@ $jsSliderConfig = $block->getJsSliderConfig();
id="<?= $escaper->escapeHtmlAttr($urlKey) ?>-min"
name="<?= $escaper->escapeHtmlAttr($urlKey) ?>-min"
value="<?= $escaper->escapeHtmlAttr($currentMinValue) ?>"
aria-label="<?= $escaper->escapeHtmlAttr(__('Minimum value')) ?>"
>
</div>
<div class="slider-max-wrapper w-2/5 ml-1">
Expand All @@ -107,6 +108,7 @@ $jsSliderConfig = $block->getJsSliderConfig();
id="<?= $escaper->escapeHtmlAttr($urlKey) ?>-max"
name="<?= $escaper->escapeHtmlAttr($urlKey) ?>-max"
value="<?= $escaper->escapeHtmlAttr($currentMaxValue) ?>"
aria-label="<?= $escaper->escapeHtmlAttr(__('Maximum value')) ?>"
>
</div>
<input type="hidden"
Expand Down
8 changes: 5 additions & 3 deletions src/view/frontend/templates/product/layered/swatch.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ if (!$swatchData['swatches']) {
data-attribute-code="<?= $escaper->escapeHtmlAttr($swatchData['attribute_code']) ?>"
data-attribute-id="<?= $escaper->escapeHtmlAttr($swatchData['attribute_id']) ?>">
<?php if ($block->isSearchable()): ?>
<input @keyUp="filterSearch()" x-ref="tw_filtersearch" x-data="initFilterSearch()" data-max-visible="<?= $escaper->escapeHtmlAttr($block->getMaxItemsShown())?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $escaper->escapeHtmlAttr($block->getSearchPlaceholder()); ?>" >
<input tabindex="-1" @keyUp="filterSearch()" x-ref="tw_filtersearch" x-data="initFilterSearch()" data-max-visible="<?= $escaper->escapeHtmlAttr($block->getMaxItemsShown())?>" type="text" class="tw_filtersearch js-skip-submit" name="tw_filtersearch" placeholder="<?= $escaper->escapeHtmlAttr($block->getSearchPlaceholder()); ?>" >
<div x-ref="search_no_results" style="display: none" class="search_no_results empty"><?= $escaper->escapeHtml($block->getSearchNoResultsText()); ?></div>
<?php endif; ?>
<div class="swatch-attribute-options clearfix flex flex-row flex-wrap" x-ref="swatch">
Expand All @@ -111,13 +111,15 @@ if (!$swatchData['swatches']) {
?>

<a <?= /* @noEscape */$block->renderAnchorHtmlTagAttributes($item); ?>
aria-label="<?= $label['label'] ?>"
class="swatch-option-link-layered swatch-option cursor-pointer select-none m-1 flex border justify-center"
:class="{ 'block': moreItemsShow, 'hidden': '<?= $escaper->escapeHtmlAttr($block->itemDefaultHidden($item))?>' && !moreItemsShow }"
tabindex="0"
role="button"
aria-labelledby="<?= $escaper->escapeHtmlAttr($item->getFilter()->getUrlKey()) ?> <?= $escaper->escapeHtmlAttr($item->getCssId()) ?>"
>
<?php $cssId = $item->getCssId(); ?>

<label for="<?= $escaper->escapeHtmlAttr($cssId) ?>"
<label aria-label="<?= $escaper->escapeHtmlAttr($label['label']); ?>" for="<?= $escaper->escapeHtmlAttr($cssId) ?>"
class="swatch-option-inner cursor-pointer relative block select-none m-0"
:class="{ 'w-6 h-6' : getSwatchType('<?= (string)$type; ?>') !== 'text' }"
:style="getSwatchBackgroundStyle('<?= (string)$type ?>', '<?= (string)$value ?>', '<?= (string)$swatchImage ?>')"
Expand Down