mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

wip: fix facets

fix/facets
jatin 2024-11-11 15:20:31 +05:30
parent 7d0af44501
commit 1f714d75af
4 changed files with 184 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
_dev/js/listing.js
View File

@ -22,34 +22,35 @@
* @copyright Since 2007 PrestaShop SA and Contributors * @copyright Since 2007 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
*/ */
import $ from 'jquery'; import $ from "jquery";
import prestashop from 'prestashop'; import prestashop from "prestashop";
// eslint-disable-next-line // eslint-disable-next-line
import "velocity-animate"; import "velocity-animate";
import updateSources from './components/update-sources'; import updateSources from "./components/update-sources";
import ProductMinitature from './components/product-miniature'; import ProductMinitature from "./components/product-miniature";
$(document).ready(() => { $(document).ready(() => {
const move = (direction) => { const move = (direction) => {
const THUMB_MARGIN = 20; const THUMB_MARGIN = 20;
const $thumbnails = $('.js-qv-product-images'); const $thumbnails = $(".js-qv-product-images");
const thumbHeight = $('.js-qv-product-images li img').height() + THUMB_MARGIN; const thumbHeight =
$(".js-qv-product-images li img").height() + THUMB_MARGIN;
const currentPosition = $thumbnails.position().top; const currentPosition = $thumbnails.position().top;
$thumbnails.velocity( $thumbnails.velocity(
{ {
translateY: translateY:
direction === 'up' direction === "up"
? currentPosition + thumbHeight ? currentPosition + thumbHeight
: currentPosition - thumbHeight, : currentPosition - thumbHeight,
}, },
() => { () => {
if ($thumbnails.position().top >= 0) { if ($thumbnails.position().top >= 0) {
$('.arrow-up').css('opacity', '.2'); $(".arrow-up").css("opacity", ".2");
} else if ( } else if (
$thumbnails.position().top + $thumbnails.height() $thumbnails.position().top + $thumbnails.height() <=
<= $('.js-qv-mask').height() $(".js-qv-mask").height()
) { ) {
$('.arrow-down').css('opacity', '.2'); $(".arrow-down").css("opacity", ".2");
} }
}, },
); );
@ -58,51 +59,51 @@ $(document).ready(() => {
const productConfig = (qv) => { const productConfig = (qv) => {
const MAX_THUMBS = 4; const MAX_THUMBS = 4;
const $arrows = $(prestashop.themeSelectors.product.arrows); const $arrows = $(prestashop.themeSelectors.product.arrows);
const $thumbnails = qv.find('.js-qv-product-images'); const $thumbnails = qv.find(".js-qv-product-images");
$(prestashop.themeSelectors.product.thumb).on('click', (event) => { $(prestashop.themeSelectors.product.thumb).on("click", (event) => {
// Swap active classes on thumbnail // Swap active classes on thumbnail
if ($(prestashop.themeSelectors.product.thumb).hasClass('selected')) { if ($(prestashop.themeSelectors.product.thumb).hasClass("selected")) {
$(prestashop.themeSelectors.product.thumb).removeClass('selected'); $(prestashop.themeSelectors.product.thumb).removeClass("selected");
} }
$(event.currentTarget).addClass('selected'); $(event.currentTarget).addClass("selected");
// Get data from thumbnail and update cover src, alt and title // Get data from thumbnail and update cover src, alt and title
$(prestashop.themeSelectors.product.cover).attr( $(prestashop.themeSelectors.product.cover).attr(
'src', "src",
$(event.target).data('image-large-src'), $(event.target).data("image-large-src"),
); );
$(prestashop.themeSelectors.product.cover).attr( $(prestashop.themeSelectors.product.cover).attr(
'alt', "alt",
$(event.target).attr('alt'), $(event.target).attr("alt"),
); );
$(prestashop.themeSelectors.product.cover).attr( $(prestashop.themeSelectors.product.cover).attr(
'title', "title",
$(event.target).attr('title'), $(event.target).attr("title"),
); );
// Get data from thumbnail and update cover sources // Get data from thumbnail and update cover sources
updateSources( updateSources(
$(prestashop.themeSelectors.product.cover), $(prestashop.themeSelectors.product.cover),
$(event.target).data('image-large-sources'), $(event.target).data("image-large-sources"),
); );
}); });
if ($thumbnails.find('li').length <= MAX_THUMBS) { if ($thumbnails.find("li").length <= MAX_THUMBS) {
$arrows.hide(); $arrows.hide();
} else { } else {
$arrows.on('click', (event) => { $arrows.on("click", (event) => {
if ( if (
$(event.target).hasClass('arrow-up') $(event.target).hasClass("arrow-up") &&
&& $('.js-qv-product-images').position().top < 0 $(".js-qv-product-images").position().top < 0
) { ) {
move('up'); move("up");
$(prestashop.themeSelectors.arrowDown).css('opacity', '1'); $(prestashop.themeSelectors.arrowDown).css("opacity", "1");
} else if ( } else if (
$(event.target).hasClass('arrow-down') $(event.target).hasClass("arrow-down") &&
&& $thumbnails.position().top + $thumbnails.height() $thumbnails.position().top + $thumbnails.height() >
> $('.js-qv-mask').height() $(".js-qv-mask").height()
) { ) {
move('down'); move("down");
$(prestashop.themeSelectors.arrowUp).css('opacity', '1'); $(prestashop.themeSelectors.arrowUp).css("opacity", "1");
} }
}); });
} }
@ -112,63 +113,63 @@ $(document).ready(() => {
max: 1000000, max: 1000000,
}); });
$(prestashop.themeSelectors.touchspin).off('touchstart.touchspin'); $(prestashop.themeSelectors.touchspin).off("touchstart.touchspin");
}; };
prestashop.on('clickQuickView', (elm) => { prestashop.on("clickQuickView", (elm) => {
const data = { const data = {
action: 'quickview', action: "quickview",
id_product: elm.dataset.idProduct, id_product: elm.dataset.idProduct,
id_product_attribute: elm.dataset.idProductAttribute, id_product_attribute: elm.dataset.idProductAttribute,
}; };
$.post(prestashop.urls.pages.product, data, null, 'json') $.post(prestashop.urls.pages.product, data, null, "json")
.then((resp) => { .then((resp) => {
$('body').append(resp.quickview_html); $("body").append(resp.quickview_html);
const productModal = $( const productModal = $(
`#quickview-modal-${resp.product.id}-${resp.product.id_product_attribute}`, `#quickview-modal-${resp.product.id}-${resp.product.id_product_attribute}`,
); );
productModal.modal('show'); productModal.modal("show");
productConfig(productModal); productConfig(productModal);
productModal.on('hidden.bs.modal', () => { productModal.on("hidden.bs.modal", () => {
productModal.remove(); productModal.remove();
}); });
}) })
.fail((resp) => { .fail((resp) => {
prestashop.emit('handleError', { prestashop.emit("handleError", {
eventType: 'clickQuickView', eventType: "clickQuickView",
resp, resp,
}); });
}); });
}); });
$('body').on( $("body").on(
'click', "click",
prestashop.themeSelectors.listing.searchFilterToggler, prestashop.themeSelectors.listing.searchFilterToggler,
() => { () => {
$(prestashop.themeSelectors.listing.searchFiltersWrapper).removeClass( $(prestashop.themeSelectors.listing.searchFiltersWrapper).removeClass(
'hidden-sm-down', "hidden-sm-down",
); );
$(prestashop.themeSelectors.contentWrapper).addClass('hidden-sm-down'); $(prestashop.themeSelectors.contentWrapper).addClass("hidden-sm-down");
$(prestashop.themeSelectors.footer).addClass('hidden-sm-down'); $(prestashop.themeSelectors.footer).addClass("hidden-sm-down");
}, },
); );
$( $(
`${prestashop.themeSelectors.listing.searchFilterControls} ${prestashop.themeSelectors.clear}`, `${prestashop.themeSelectors.listing.searchFilterControls} ${prestashop.themeSelectors.clear}`,
).on('click', () => { ).on("click", () => {
$(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass( $(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass(
'hidden-sm-down', "hidden-sm-down",
); );
$(prestashop.themeSelectors.contentWrapper).removeClass('hidden-sm-down'); $(prestashop.themeSelectors.contentWrapper).removeClass("hidden-sm-down");
$(prestashop.themeSelectors.footer).removeClass('hidden-sm-down'); $(prestashop.themeSelectors.footer).removeClass("hidden-sm-down");
}); });
$(`${prestashop.themeSelectors.listing.searchFilterControls} .ok`).on( $(`${prestashop.themeSelectors.listing.searchFilterControls} .ok`).on(
'click', "click",
() => { () => {
$(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass( $(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass(
'hidden-sm-down', "hidden-sm-down",
); );
$(prestashop.themeSelectors.contentWrapper).removeClass('hidden-sm-down'); $(prestashop.themeSelectors.contentWrapper).removeClass("hidden-sm-down");
$(prestashop.themeSelectors.footer).removeClass('hidden-sm-down'); $(prestashop.themeSelectors.footer).removeClass("hidden-sm-down");
}, },
); );
@ -178,7 +179,7 @@ $(document).ready(() => {
} }
if ($(event.target).parent()[0].dataset.searchUrl === undefined) { if ($(event.target).parent()[0].dataset.searchUrl === undefined) {
throw new Error('Can not parse search URL'); throw new Error("Can not parse search URL");
} }
return $(event.target).parent()[0].dataset.searchUrl; return $(event.target).parent()[0].dataset.searchUrl;
@ -201,11 +202,11 @@ $(document).ready(() => {
if (productSelectors.length > 0) { if (productSelectors.length > 0) {
productSelectors productSelectors
.removeClass() .removeClass()
.addClass(productSelectors.first().attr('class')); .addClass(productSelectors.first().attr("class"));
} else { } else {
productSelectors productSelectors
.removeClass() .removeClass()
.addClass(renderedProducts.first().attr('class')); .addClass(renderedProducts.first().attr("class"));
} }
$(prestashop.themeSelectors.listing.list).replaceWith(renderedProducts); $(prestashop.themeSelectors.listing.list).replaceWith(renderedProducts);
@ -223,47 +224,47 @@ $(document).ready(() => {
productMinitature.init(); productMinitature.init();
} }
$('body').on( $("body").on(
'change', "change",
`${prestashop.themeSelectors.listing.searchFilters} input[data-search-url]`, `${prestashop.themeSelectors.listing.searchFilters} input[data-search-url]`,
(event) => { (event) => {
prestashop.emit('updateFacets', parseSearchUrl(event)); prestashop.emit("updateFacets", parseSearchUrl(event));
}, },
); );
$('body').on( $("body").on(
'click', "click",
prestashop.themeSelectors.listing.searchFiltersClearAll, prestashop.themeSelectors.listing.searchFiltersClearAll,
(event) => { (event) => {
prestashop.emit('updateFacets', parseSearchUrl(event)); prestashop.emit("updateFacets", parseSearchUrl(event));
}, },
); );
$('body').on( $("body").on(
'click', "click",
prestashop.themeSelectors.listing.searchLink, prestashop.themeSelectors.listing.searchLink,
(event) => { (event) => {
event.preventDefault(); event.preventDefault();
prestashop.emit('updateFacets', $(event.target).closest('a').get(0).href); prestashop.emit("updateFacets", $(event.target).closest("a").get(0).href);
}, },
); );
window.addEventListener('popstate', (e) => { window.addEventListener("popstate", (e) => {
if (e.state && e.state.current_url) { if (e.state && e.state.current_url) {
window.location.href = e.state.current_url; window.location.href = e.state.current_url;
} }
}); });
$('body').on( $("body").on(
'change', "change",
`${prestashop.themeSelectors.listing.searchFilters} select`, `${prestashop.themeSelectors.listing.searchFilters} select`,
(event) => { (event) => {
const form = $(event.target).closest('form'); const form = $(event.target).closest("form");
prestashop.emit('updateFacets', `?${form.serialize()}`); prestashop.emit("updateFacets", `?${form.serialize()}`);
}, },
); );
prestashop.on('updateProductList', (data) => { prestashop.on("updateProductList", (data) => {
updateProductListDOM(data); updateProductListDOM(data);
window.scrollTo(0, 0); window.scrollTo(0, 0);
}); });

82
assets/css/theme.css
View File

@ -1,5 +1,5 @@
/* /*
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*/ */
/* /*
@ -32,11 +32,9 @@
4. Use the user's configured `sans` font-family by default. 4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default. 5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default. 6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/ */
html, html {
:host {
line-height: 1.5; line-height: 1.5;
/* 1 */ /* 1 */
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
@ -52,8 +50,6 @@ html,
/* 5 */ /* 5 */
font-variation-settings: normal; font-variation-settings: normal;
/* 6 */ /* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
} }
/* /*
@ -125,10 +121,8 @@ strong {
} }
/* /*
1. Use the user's configured `mono` font-family by default. 1. Use the user's configured `mono` font family by default.
2. Use the user's configured `mono` font-feature-settings by default. 2. Correct the odd `em` font sizing in all browsers.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/ */
code, code,
@ -137,12 +131,8 @@ samp,
pre { pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */ /* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em; font-size: 1em;
/* 4 */ /* 2 */
} }
/* /*
@ -211,8 +201,6 @@ textarea {
/* 1 */ /* 1 */
line-height: inherit; line-height: inherit;
/* 1 */ /* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit; color: inherit;
/* 1 */ /* 1 */
margin: 0; margin: 0;
@ -236,9 +224,9 @@ select {
*/ */
button, button,
input:where([type='button']), [type='button'],
input:where([type='reset']), [type='reset'],
input:where([type='submit']) { [type='submit'] {
-webkit-appearance: button; -webkit-appearance: button;
/* 1 */ /* 1 */
background-color: transparent; background-color: transparent;
@ -665,10 +653,6 @@ select {
--tw-backdrop-opacity: ; --tw-backdrop-opacity: ;
--tw-backdrop-saturate: ; --tw-backdrop-saturate: ;
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
} }
::backdrop { ::backdrop {
@ -719,10 +703,6 @@ select {
--tw-backdrop-opacity: ; --tw-backdrop-opacity: ;
--tw-backdrop-saturate: ; --tw-backdrop-saturate: ;
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
} }
.container { .container {
@ -827,10 +807,6 @@ select {
right: 1rem; right: 1rem;
} }
.right-8 {
right: 2rem;
}
.top-0 { .top-0 {
top: 0px; top: 0px;
} }
@ -912,10 +888,6 @@ select {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.mb-24 {
margin-bottom: 6rem;
}
.mb-3 { .mb-3 {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@ -1048,10 +1020,6 @@ select {
height: 100%; height: 100%;
} }
.h-screen {
height: 100vh;
}
.max-h-\[40px\] { .max-h-\[40px\] {
max-height: 40px; max-height: 40px;
} }
@ -1076,6 +1044,10 @@ select {
width: 3.5rem; width: 3.5rem;
} }
.w-16 {
width: 4rem;
}
.w-24 { .w-24 {
width: 6rem; width: 6rem;
} }
@ -1116,10 +1088,6 @@ select {
width: 160px; width: 160px;
} }
.w-\[40\%\] {
width: 40%;
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
@ -1129,10 +1097,6 @@ select {
width: max-content; width: max-content;
} }
.w-16 {
width: 4rem;
}
.max-w-6xl { .max-w-6xl {
max-width: 72rem; max-width: 72rem;
} }
@ -1411,14 +1375,6 @@ select {
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.bg-cover {
background-size: cover;
}
.bg-center {
background-position: center;
}
.stroke-black { .stroke-black {
stroke: #000; stroke: #000;
} }
@ -2201,11 +2157,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
line-height: 1.25rem; line-height: 1.25rem;
} }
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.md\:font-bold { .md\:font-bold {
font-weight: 700; font-weight: 700;
} }
@ -2332,11 +2283,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
line-height: 2.5rem; line-height: 2.5rem;
} }
.lg\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.lg\:text-xl { .lg\:text-xl {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
@ -2346,10 +2292,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
font-weight: 600; font-weight: 600;
} }
.lg\:font-bold {
font-weight: 700;
}
.lg\:shadow-none { .lg\:shadow-none {
--tw-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000; --tw-shadow-colored: 0 0 #0000;

2
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

96
templates/catalog/_partials/facets.tpl
View File

@ -23,6 +23,16 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
{if $facets|count} {if $facets|count}
{block name='facets_clearall_button'}
{if $activeFilters|count}
<div id="_desktop_search_filters_clear_all" class="hidden-sm-down clear-all-wrapper my-4">
<button data-search-url="{$clear_all_link}" class="btn btn-tertiary js-search-filters-clear-all font-medium pl-4">
<!-- <i class="material-icons">&#xE14C;</i> -->
{l s='Clear all' d='Shop.Theme.Actions'}
</button>
</div>
{/if}
{/block}
<div id="search_filters"> <div id="search_filters">
<div class="th-accordion"> <div class="th-accordion">
{foreach from=$facets item="facet"} {foreach from=$facets item="facet"}
@ -73,6 +83,92 @@
</div> </div>
</div> </div>
{/if} {/if}
{if $facet.widgetType !== 'dropdown'}
{block name='facet_item_other'}
<div class="th-accordion-item border-t border-gray-200 px-4 py-4">
<h3 class="-mx-2 -my-3 flow-root">
<!-- Expand/collapse section button -->
<button id="show-filters-{$facet.label}" data-filter-name="{$facet.label}" type="button" class="th-accordion-item-trigger flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
<span class="font-medium text-gray-900">
{$active_found = false}
{foreach from=$facet.filters item="filter"}
{if $filter.active}
{$filter.label}
{$active_found = true}
{/if}
{/foreach}
{if !$active_found}
{$facet.label}
{/if}
</span>
<span class="ml-6 flex items-center">
<!-- Expand icon, show/hide based on section open state. -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 9l6 6l6 -6"></path>
</svg>
</span>
</button>
</h3>
<div class="th-accordion-item-content pt-6 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}">
<div class="flex flex-wrap w-full gap-2 flex-col">
{foreach from=$facet.filters key=filter_key item="filter"}
{if !$filter.displayed}
{continue}
{/if}
<div>
<label class="facet-label{if $filter.active} active {/if} flex items-center gap-2" for="facet_input_{$_expand_id}_{$filter_key}">
{if $facet.multipleSelectionAllowed}
<span class="custom-checkbox">
<input
id="facet_input_{$_expand_id}_{$filter_key}"
data-search-url="{$filter.nextEncodedFacetsURL}"
type="checkbox"
{if $filter.active }checked{/if}
>
<!--
{if isset($filter.properties.texture)}
<span class="color texture" style="background-image:url({$filter.properties.texture})"></span>
{elseif isset($filter.properties.color)}
<span class="color" style="background-color:{$filter.properties.color}"></span>
{else}
<span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
{/if}
-->
</span>
{else}
<span class="custom-radio">
<input
id="facet_input_{$_expand_id}_{$filter_key}"
data-search-url="{$filter.nextEncodedFacetsURL}"
type="radio"
name="filter {$facet.label}"
{if $filter.active }checked{/if}
>
<!-- <span {if !$js_enabled} class="ps-shown-by-js" {/if}></span> -->
</span>
{/if}
<a
href="{$filter.nextEncodedFacetsURL}"
class="_gray-darker search-link js-search-link"
rel="nofollow"
>
{$filter.label}
{if $filter.magnitude}
<span class="magnitude">({$filter.magnitude})</span>
{/if}
</a>
</label>
</div>
{/foreach}
</div>
</div>
</div>
{/block}
{/if}
{/foreach} {/foreach}
</div> </div>
</div> </div>