@sledge-app/react-instant-search 1.0.54 → 1.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/SearchResultWidget/SearchResultWidget.d.ts.map +1 -1
- package/dist/sledge-react-instant-search.cjs +1 -1
- package/dist/sledge-react-instant-search.cjs.map +1 -1
- package/dist/sledge-react-instant-search.js +126 -49
- package/dist/sledge-react-instant-search.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -2526,13 +2526,21 @@ const ProductCard = (props) => {
|
|
|
2526
2526
|
} = setting || {};
|
|
2527
2527
|
const { product, variants } = item || {};
|
|
2528
2528
|
const { id, title, image, url, vendor = "", currency, handle } = product || {};
|
|
2529
|
-
const {
|
|
2529
|
+
const {
|
|
2530
|
+
id: variant_id = "",
|
|
2531
|
+
admin_graphql_api_id: variant_admin_graphql_api_id = "",
|
|
2532
|
+
title: variant_title = "",
|
|
2533
|
+
price = "",
|
|
2534
|
+
compare_at_price = "",
|
|
2535
|
+
sku = ""
|
|
2536
|
+
} = (variants == null ? void 0 : variants.length) ? variants[0] : {};
|
|
2530
2537
|
const defaultSelectedVariantId = variant_admin_graphql_api_id ? variant_admin_graphql_api_id : "";
|
|
2531
2538
|
const defaultSelectedVariantStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? variants[0].inventory_quantity : 0;
|
|
2532
2539
|
const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
|
|
2533
2540
|
const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
|
|
2534
2541
|
let isLoadingAddToCart = clickedAddToCartId == selectedVariantId;
|
|
2535
2542
|
let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !Number(selectedVariantStock) && showOptionOutOfStock : false;
|
|
2543
|
+
let isOnSale = parseFloat(String(compare_at_price)) ? parseFloat(String(compare_at_price)) > parseFloat(String(price)) : false;
|
|
2536
2544
|
let component = null;
|
|
2537
2545
|
if (CardsComponent) {
|
|
2538
2546
|
const CardsProps = {
|
|
@@ -2653,6 +2661,7 @@ const ProductCard = (props) => {
|
|
|
2653
2661
|
},
|
|
2654
2662
|
className: "sledge__product-grid-card-image-link",
|
|
2655
2663
|
children: [
|
|
2664
|
+
isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-badge-on-sale", children: "ON SALE" }),
|
|
2656
2665
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2657
2666
|
Trigger,
|
|
2658
2667
|
{
|
|
@@ -2710,10 +2719,16 @@ const ProductCard = (props) => {
|
|
|
2710
2719
|
] }),
|
|
2711
2720
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
|
|
2712
2721
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
|
|
2713
|
-
show_price ? /* @__PURE__ */ jsxRuntimeExports.
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
|
|
2722
|
+
show_price ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-price", children: [
|
|
2723
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: display_price_style, children: [
|
|
2724
|
+
currency,
|
|
2725
|
+
price
|
|
2726
|
+
] }),
|
|
2727
|
+
isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "sledge__product-grid-card-compare-at-price", children: [
|
|
2728
|
+
currency,
|
|
2729
|
+
compare_at_price
|
|
2730
|
+
] })
|
|
2731
|
+
] }) : null,
|
|
2717
2732
|
show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", title: vendor, children: [
|
|
2718
2733
|
"Vendor: ",
|
|
2719
2734
|
vendor
|
|
@@ -2774,16 +2789,21 @@ const ProductCard = (props) => {
|
|
|
2774
2789
|
const optionValues = option[1];
|
|
2775
2790
|
let selectedOption = optionValues[0];
|
|
2776
2791
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: optionValues[0] !== "Default Title" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-variant-size-swatch-flex options-button-${stringToSlug(optionName)}`, children: optionValues.map((item2, index) => {
|
|
2792
|
+
var _a2;
|
|
2777
2793
|
const defaultOptionClass = `
|
|
2778
2794
|
${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""} sledge__product-variant-size-swatch`;
|
|
2779
2795
|
const colorOptionClass = `${selectedOption === item2 ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
|
|
2796
|
+
const colorDataSettings = ((_a2 = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING))) == null ? void 0 : _a2.colors) || [];
|
|
2797
|
+
const getColorSwatch = (colorDataSettings == null ? void 0 : colorDataSettings.filter(({ name }) => name === item2)[0]) || {};
|
|
2798
|
+
const colorSwatch = (getColorSwatch == null ? void 0 : getColorSwatch.image) ? `url(${getColorSwatch == null ? void 0 : getColorSwatch.image})` : (getColorSwatch == null ? void 0 : getColorSwatch.rgb) || item2;
|
|
2780
2799
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
2781
2800
|
"button",
|
|
2782
2801
|
{
|
|
2783
2802
|
type: "button",
|
|
2784
2803
|
className: optionName === "Color" ? colorOptionClass : defaultOptionClass,
|
|
2785
2804
|
style: {
|
|
2786
|
-
|
|
2805
|
+
background: optionName === "Color" ? colorSwatch : null,
|
|
2806
|
+
backgroundSize: "contain"
|
|
2787
2807
|
},
|
|
2788
2808
|
onClick: (el) => {
|
|
2789
2809
|
setSelectedVariant(el, item2, optionParentIndex + 1);
|
|
@@ -3392,6 +3412,29 @@ const DotButton = (props) => {
|
|
|
3392
3412
|
const { children, ...restProps } = props;
|
|
3393
3413
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", ...restProps, children });
|
|
3394
3414
|
};
|
|
3415
|
+
const FlyoutSidebar$1 = "";
|
|
3416
|
+
const FlyoutSidebar = ({ title, content, open, setOpen }) => {
|
|
3417
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
3418
|
+
"div",
|
|
3419
|
+
{
|
|
3420
|
+
className: "sledge-instant-search__filter-flyout-mobile",
|
|
3421
|
+
style: open ? {
|
|
3422
|
+
opacity: "1",
|
|
3423
|
+
visibility: "visible"
|
|
3424
|
+
} : {},
|
|
3425
|
+
children: [
|
|
3426
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__filter-flyout-overlay", onClick: () => setOpen(false) }),
|
|
3427
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__filter-flyout-mobile-wrapper", style: open ? { left: 0 } : {}, children: [
|
|
3428
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__filter-flyout-header", children: [
|
|
3429
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__filter-flyout-mobile-title", children: title }),
|
|
3430
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__clear-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__clear-field", type: "button", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) })
|
|
3431
|
+
] }),
|
|
3432
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__filter-flyout-mobile-content", children: content })
|
|
3433
|
+
] })
|
|
3434
|
+
]
|
|
3435
|
+
}
|
|
3436
|
+
);
|
|
3437
|
+
};
|
|
3395
3438
|
const SearchIconWidget = (props) => {
|
|
3396
3439
|
const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
|
|
3397
3440
|
const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
|
|
@@ -4539,7 +4582,7 @@ const SearchResultWidget = (props) => {
|
|
|
4539
4582
|
] });
|
|
4540
4583
|
};
|
|
4541
4584
|
const ResultProduct = (props) => {
|
|
4542
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
|
|
4585
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
|
|
4543
4586
|
const {
|
|
4544
4587
|
layoutType,
|
|
4545
4588
|
keyword,
|
|
@@ -4606,6 +4649,7 @@ const ResultProduct = (props) => {
|
|
|
4606
4649
|
const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
|
|
4607
4650
|
const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
|
|
4608
4651
|
const [isLoadingButtonLoadMore, setIsLoadingButtonLoadMore] = React__default.useState(false);
|
|
4652
|
+
const [openFilterFlyoutMobile, setOpenFilterFlyoutMobile] = React__default.useState(false);
|
|
4609
4653
|
const {
|
|
4610
4654
|
sort_by: language_sort_by,
|
|
4611
4655
|
result: language_result,
|
|
@@ -5279,9 +5323,26 @@ const ResultProduct = (props) => {
|
|
|
5279
5323
|
let isLastIndex = allowedFilter.length - 1 === indexFilter;
|
|
5280
5324
|
return { isActive, isRender, classesUlElement, getFacetComponent, isLastIndex };
|
|
5281
5325
|
};
|
|
5326
|
+
const filterVerticalSelected = Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
|
|
5327
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
|
|
5328
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: language_filter || "Filter" }),
|
|
5329
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: language_clear_filter || "Clear All" })
|
|
5330
|
+
] }),
|
|
5331
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-item-refine-selected-flex", children: dataClickedFacets.map((itemClickedFacet, index) => {
|
|
5332
|
+
const { label, name, value } = itemClickedFacet;
|
|
5333
|
+
return facetBlockSelected({
|
|
5334
|
+
label,
|
|
5335
|
+
name,
|
|
5336
|
+
value,
|
|
5337
|
+
index
|
|
5338
|
+
});
|
|
5339
|
+
}) })
|
|
5340
|
+
] }) : null;
|
|
5282
5341
|
const filterVerticalComponents = allowedFilter.map((filter, indexFilter) => {
|
|
5283
5342
|
const { value, label } = filter;
|
|
5284
5343
|
const { isRender, classesUlElement, getFacetComponent } = filterSettings(filter);
|
|
5344
|
+
if ((allowedFilter == null ? void 0 : allowedFilter.length) === 1)
|
|
5345
|
+
classesUlElement == null ? void 0 : classesUlElement.push("sledge-instant-search__result-filter-item-list-just-one");
|
|
5285
5346
|
return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
|
|
5286
5347
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
|
|
5287
5348
|
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
|
|
@@ -5329,7 +5390,7 @@ const ResultProduct = (props) => {
|
|
|
5329
5390
|
}
|
|
5330
5391
|
},
|
|
5331
5392
|
text: isLoadingButtonLoadMore ? button_loading || "Loading..." : button_load_more || "Load More",
|
|
5332
|
-
isInfiniteScroll: ((
|
|
5393
|
+
isInfiniteScroll: ((_l = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _l.pagination_type) === "infinite_scroll",
|
|
5333
5394
|
currentPage,
|
|
5334
5395
|
totalPage,
|
|
5335
5396
|
totalResult: totalSearchResult,
|
|
@@ -5337,9 +5398,9 @@ const ResultProduct = (props) => {
|
|
|
5337
5398
|
isVisibleLoadMore
|
|
5338
5399
|
}
|
|
5339
5400
|
) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
|
|
5340
|
-
const filterHorizontalBlockComponent = ((
|
|
5401
|
+
const filterHorizontalBlockComponent = ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.enable_on_search) && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
|
|
5341
5402
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal sledge-instant-search__result-filter-horizontal-component", children: filterHorizontalComponents }),
|
|
5342
|
-
Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((
|
|
5403
|
+
Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
|
|
5343
5404
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
5344
5405
|
"div",
|
|
5345
5406
|
{
|
|
@@ -5359,31 +5420,59 @@ const ResultProduct = (props) => {
|
|
|
5359
5420
|
})
|
|
5360
5421
|
] }) : null
|
|
5361
5422
|
] }) }) }) : null;
|
|
5423
|
+
const searchInputFieldComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
5424
|
+
SearchInputField,
|
|
5425
|
+
{
|
|
5426
|
+
type: "text",
|
|
5427
|
+
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
|
|
5428
|
+
placeholder: (language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product) || "Search products...",
|
|
5429
|
+
value: keyword,
|
|
5430
|
+
onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
|
|
5431
|
+
onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
|
|
5432
|
+
className: "sledge-instant-search__result-data-keyword-form",
|
|
5433
|
+
withClearField: true
|
|
5434
|
+
}
|
|
5435
|
+
);
|
|
5436
|
+
const FilterLayoutOnMobile = () => {
|
|
5437
|
+
var _a2;
|
|
5438
|
+
switch ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.mobile_layout) {
|
|
5439
|
+
case "flyout":
|
|
5440
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-search-field-flex", children: [
|
|
5441
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", className: "sledge-instant-search__trigger-filter-flyout", onClick: () => setOpenFilterFlyoutMobile(true), children: language_filter || "Filter" }),
|
|
5442
|
+
searchInputFieldComponent
|
|
5443
|
+
] });
|
|
5444
|
+
case "standard":
|
|
5445
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5446
|
+
searchInputFieldComponent,
|
|
5447
|
+
filterHorizontalBlockComponent
|
|
5448
|
+
] });
|
|
5449
|
+
default:
|
|
5450
|
+
return null;
|
|
5451
|
+
}
|
|
5452
|
+
};
|
|
5362
5453
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5363
|
-
((
|
|
5364
|
-
|
|
5365
|
-
|
|
5366
|
-
|
|
5367
|
-
|
|
5368
|
-
|
|
5369
|
-
|
|
5370
|
-
|
|
5371
|
-
|
|
5372
|
-
|
|
5373
|
-
|
|
5374
|
-
|
|
5375
|
-
|
|
5376
|
-
|
|
5377
|
-
|
|
5378
|
-
|
|
5379
|
-
}) })
|
|
5380
|
-
] }) : null,
|
|
5454
|
+
((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.mobile_layout) === "flyout" && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
5455
|
+
FlyoutSidebar,
|
|
5456
|
+
{
|
|
5457
|
+
title: language_filter || "Filter",
|
|
5458
|
+
content: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5459
|
+
filterVerticalSelected,
|
|
5460
|
+
filterVerticalComponents
|
|
5461
|
+
] }),
|
|
5462
|
+
open: openFilterFlyoutMobile,
|
|
5463
|
+
setOpen: setOpenFilterFlyoutMobile
|
|
5464
|
+
}
|
|
5465
|
+
),
|
|
5466
|
+
((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.enable_on_search) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "horizontal" && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent }) : null,
|
|
5467
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5468
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.enable_on_search) && ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.layout) === "vertical" && allowedFilter.length ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5469
|
+
filterVerticalSelected,
|
|
5381
5470
|
filterVerticalComponents
|
|
5382
5471
|
] }) }) : null }),
|
|
5383
5472
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
|
|
5384
5473
|
isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5385
5474
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
|
|
5386
|
-
((
|
|
5475
|
+
((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.show_total_products) ? summaryTextSkeleton : null,
|
|
5387
5476
|
searchFieldSkeletonComponent,
|
|
5388
5477
|
filterHorizontalSkeletonComponent,
|
|
5389
5478
|
selectOptionSkeletonComponent
|
|
@@ -5393,24 +5482,12 @@ const ResultProduct = (props) => {
|
|
|
5393
5482
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
5394
5483
|
"div",
|
|
5395
5484
|
{
|
|
5396
|
-
className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((
|
|
5485
|
+
className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_v = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _v.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
|
|
5397
5486
|
children: summaryText
|
|
5398
5487
|
}
|
|
5399
5488
|
),
|
|
5400
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
5401
|
-
|
|
5402
|
-
{
|
|
5403
|
-
type: "text",
|
|
5404
|
-
icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
|
|
5405
|
-
placeholder: (language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product) || "Search products...",
|
|
5406
|
-
value: keyword,
|
|
5407
|
-
onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
|
|
5408
|
-
onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
|
|
5409
|
-
className: "sledge-instant-search__result-data-keyword-form",
|
|
5410
|
-
withClearField: true
|
|
5411
|
-
}
|
|
5412
|
-
),
|
|
5413
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg sledge-instant-search__filter-horizontal-block-mobile", children: filterHorizontalBlockComponent }),
|
|
5489
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile sledge-instant-search__search-field-lg", children: searchInputFieldComponent }),
|
|
5490
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg sledge-instant-search__filter-horizontal-block-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FilterLayoutOnMobile, {}) }),
|
|
5414
5491
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-item sledge-instant-search__result-data-summary-select-field", children: [
|
|
5415
5492
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: [
|
|
5416
5493
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-select-field-sort", children: [
|
|
@@ -5445,7 +5522,7 @@ const ResultProduct = (props) => {
|
|
|
5445
5522
|
language_limit || "Limit",
|
|
5446
5523
|
":"
|
|
5447
5524
|
] }),
|
|
5448
|
-
((
|
|
5525
|
+
((_w = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _w.allowed_limit) && Boolean((_y = (_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.allowed_limit) == null ? void 0 : _y.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
5449
5526
|
SelectField,
|
|
5450
5527
|
{
|
|
5451
5528
|
align: "end",
|
|
@@ -5466,7 +5543,7 @@ const ResultProduct = (props) => {
|
|
|
5466
5543
|
productGridSkeleton,
|
|
5467
5544
|
(searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
|
|
5468
5545
|
] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5469
|
-
((
|
|
5546
|
+
((_z = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _z.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }) }),
|
|
5470
5547
|
(searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
5471
5548
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
5472
5549
|
ProductGrid,
|
|
@@ -5481,9 +5558,9 @@ const ResultProduct = (props) => {
|
|
|
5481
5558
|
};
|
|
5482
5559
|
}),
|
|
5483
5560
|
setting: {
|
|
5484
|
-
show_vendor: (
|
|
5485
|
-
show_sku: (
|
|
5486
|
-
show_price: (
|
|
5561
|
+
show_vendor: (_A = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _A.show_vendor,
|
|
5562
|
+
show_sku: (_B = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _B.show_sku,
|
|
5563
|
+
show_price: (_C = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _C.show_price,
|
|
5487
5564
|
language_button_add_to_cart: language_add_to_cart,
|
|
5488
5565
|
language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
|
|
5489
5566
|
},
|