\r\n
\r\n \r\n );\r\n}\r\n\r\nconst PromoRibbon = ({ item }) => {\r\n if (item.RibbonText || item.OnSaleLabel) {\r\n if (item.OnSaleLabel) {\r\n const onSale = item.OnSaleLabel.toUpperCase().trim();\r\n if (onSale == \"ON SALE\" || onSale == \"SALE\") {\r\n item.OnSaleLabel = \"SALE\";\r\n }\r\n }\r\n var labelText = item.RibbonText ? item.RibbonText : item.OnSaleLabel;\r\n if (labelText.toLowerCase() == \"new version!\") labelText = \"New Version\";\r\n\r\n return (\r\n \r\n Manufacturers use sponsored listings to help you discover and purchase their listing right where you'll be sure to see them.\r\n
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst ProductImage = ({ item, productSlug }) => {\r\n if (item.ImageName == null || String(item.ImageName).trim() == '') {\r\n item.ImageName = \"item-image-unavailable.jpg\";\r\n }\r\n return (\r\n {labelText}
\r\n window.location.href = \"/products/details/\" + item.ItemGroupRecNo + \"/\" + productSlug + \"/\"}>\r\n ![{item.ImageAltText}]({\"/Content/ProductImages/300x225/\" "{item.Heading}")
\r\n
\r\n );\r\n}\r\n\r\nconst SponsoredLabel = ({ item }) => {\r\n if (item.SponsoredLabel == \"Y\") {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst ProductDetails = ({ item, productSlug }) => {\r\n var bestPrice = item.LowestPrice ? Number(item.LowestPrice).toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : \"N/A\";\r\n\r\n return (\r\n \r\n Sponsored\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n {item.OnSaleUntilDate != null && (\r\n \r\n )}\r\n\r\n
\r\n );\r\n}\r\n\r\nconst StockStatus = ({ item, productSlug }) => {\r\n if (item.Status == \"IN STOCK\") {\r\n return (\r\n \r\n \r\n \r\n {item.Heading}\r\n \r\n \r\n
\r\n {!!item.LowestPrice && (\r\n \r\n {(!item.IsSingleItem ? \"from $\" : \"$\") + bestPrice}\r\n
\r\n )}\r\n \r\n \r\n {item.Status}\r\n
\r\n );\r\n }\r\n else if (item.Status == \"BACKORDER\" || item.Status == \"DIRECTSHIP\") {\r\n return (\r\n \r\n \r\n \r\n View Options\r\n \r\n
\r\n );\r\n }\r\n}","import { ProductPagination } from \"./ProductPagination\";\r\nimport { ProductList } from \"./ProductList\";\r\nimport React, { memo, useEffect } from \"react\";\r\n\r\nexport const ProductContainer = memo(({ itemGroups, pagedItemGroups, setPagedItemGroups, isLoading }) => {\r\n\r\n useEffect(() => {\r\n $('.sponsored-label').each(function (index, element) {\r\n $(element).find('a').popover({\r\n html: true,\r\n placement: 'top',\r\n trigger: 'hover',\r\n content: function () {\r\n return $('#sponsored-popover-content').html();\r\n }\r\n });\r\n });\r\n });\r\n\r\n return (\r\n \r\n
\r\n );\r\n})","import React, { useEffect, useState } from \"react\";\r\nimport { getSortedItemGroups } from './HelperFunctions'\r\n\r\nexport const ProductSorting = ({ itemGroups, setItemGroups }) => {\r\n const [sortingID, setsortingID] = useState(() => {\r\n const storageSortingID = sessionStorage.getItem('sortingID');\r\n return storageSortingID ? parseInt(storageSortingID) : model.SortingModel.InitialSortingMethod;\r\n });\r\n\r\n useEffect(() => {\r\n model.itemGroupModel = getSortedItemGroups(model.itemGroupModel, sortingID);\r\n setItemGroups([...getSortedItemGroups(itemGroups, sortingID)]);\r\n sessionStorage.setItem('sortingID', sortingID);\r\n }, [sortingID]);\r\n\r\n\r\n if (itemGroups.length < 1) return \r\n else {\r\n const sortingMethods = [];\r\n for (const method of model.SortingModel.SortingMethods) {\r\n sortingMethods.push(\r\n \r\n {pagedItemGroups.length < 1 && (\r\n
\r\n {isLoading &&\r\n \r\n No items found. Please try reloading this page.\r\n
\r\n )}\r\n \r\n
\r\n }\r\n \r\n \r\n
\r\n { setsortingID(e.target.dataset['id']) }}\r\n data-id={method.SortingID}>\r\n {method.SortingName}\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n function sortClick() {\r\n $(\"#sort-svg\").toggleClass('spin-arrow');\r\n $(\"#sorting-menu\").fadeToggle(270);\r\n }\r\n\r\n function sortBlur() {\r\n if ($(\"#sort-svg\").hasClass('spin-arrow')) {\r\n $(\"#sort-svg\").toggleClass('spin-arrow');\r\n $(\"#sorting-menu\").fadeToggle(270);\r\n }\r\n }\r\n}","import React, { useState } from \"react\";\r\nimport { FilterContainer } from \"./FilterContainer\";\r\nimport { ProductContainer } from \"./ProductContainer\";\r\nimport { ProductSorting } from \"./ProductSorting\";\r\nimport { toggleFilterPanel } from \"./HelperFunctions\";\r\nimport { perfEntries } from './Constants'\r\n\r\nexport const CategoryContainer = () => {\r\n var [isLoading, setItemsLoading] = useState(false);\r\n const [itemGroups, setItemGroups] = useState(model.itemGroupModel);\r\n const [pagedItemGroups, setPagedItemGroups] = useState(itemGroups);\r\n\r\n const mobileFilteringOn = $(window).innerWidth() < 768 && model.filterReponseInfo.TotalFiltersCount > 0;\r\n const isSearch = model.SectionTitle.substring(0, 7) == \"Search \";\r\n\r\n return (\r\n <>\r\n 0 ? \"tw-mt-[19px] tw-mb-[11px] md:tw-mt-0 md:tw-mb-0 md:tw-mr-[15px] tw-w-full tw-absolute\" : \"tw-mr-[15px]\")}>\r\n {itemGroups.length}{' item' + (itemGroups.length > 1 ? 's' : '')}\r\n
\r\n\r\n 0 ? \"tw-w-full\" : \"tw-w-[214px]\")}>\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n Sort By: \r\n {$(\"#sorting-menu\").find(`[data-id='${sortingID}']`).text()}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nif (!(perfEntries[0].type === 'back_forward') && !window.location.href.includes('products/details')) {\r\n sessionStorage.clear();\r\n}","import { UrlSegments } from '../app/Helpers';\r\nimport { WaitForElementToDisplay } from '../app/Helpers/WaitForElementToDisplay';\r\nimport { SearchResultsEvent } from '../app/Services/DataLayer';\r\nimport { AjaxPost } from \"../app/Services/index\";\r\nimport { SDAnswer, SDFAQPage, SDPerson, SDQuestion, StructuredDataModelFactory } from '../app/Services/StrucuredData';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom/client';\r\nimport { CategoryContainer } from '../app/Components/Product/CategoryContainer';\r\n\r\nlet root = UrlSegments(0);\r\n\r\ninterface QAEntries {\r\n A_from: string;\r\n Answer: string;\r\n Q_from: string;\r\n Question: string;\r\n}\r\n\r\nexport const ProductRoutes = new Promise(() => {\r\n\r\n let isSearchParams = window.location.pathname === \"/Search\";\r\n\r\n if (root === \"products\" && UrlSegments(1) !== \"details\" && UrlSegments().length === 3\r\n || root === \"products\" && UrlSegments().length === 1) {\r\n import('../app/ViewModels/Products/Sections' /* webpackChunkName: \"product-sections\" */).then(() => {\r\n WaitForElementToDisplay(\".image-rows\", 300, () => {\r\n document.querySelector('.image-rows').removeAttribute('hidden');\r\n });\r\n });\r\n }\r\n\r\n if (!UrlSegments(0) || !UrlSegments(1)) {\r\n if (!isSearchParams) {\r\n console.debug(\"Not a product route\");\r\n return;\r\n }\r\n }\r\n\r\n let section = \"\";\r\n\r\n if (UrlSegments(1)) {\r\n section = UrlSegments(1).toString();\r\n }\r\n\r\n let isDetails = false;\r\n let isCategory = false;\r\n let isSection = false;\r\n let isSearchResults = root === \"Search\";\r\n\r\n if (isSearchParams) {\r\n isSearchResults = true;\r\n }\r\n\r\n // Check what kind of product page we're on \r\n if (root === \"products\" && UrlSegments().length >= 2) {\r\n\r\n if (UrlSegments(1) === \"details\") {\r\n isDetails = true;\r\n }\r\n\r\n //sections have this path: products/{section-slug}/{id}/\r\n if (UrlSegments().length == 3) {\r\n isSection = true;\r\n }\r\n\r\n //categories have this path:products/{section-slug}/{category-slug}/{id}/\r\n if (!isDetails && !isSection) {\r\n\r\n let tail = UrlSegments(2);\r\n if (isNaN(+tail)) {\r\n isCategory = true;\r\n }\r\n }\r\n }\r\n\r\n let promoCategory = [\r\n \"on-sale\",\r\n \"new-products\"\r\n ];\r\n\r\n let isPromo = promoCategory.indexOf(section) != -1;\r\n\r\n console.debug(\"Product route values: \", { isDetails, isCategory, isPromo, isSearchResults, isSection });\r\n\r\n //search, categories and promotion view pages are the same file\r\n if (isCategory || isPromo || isSearchResults) {\r\n import('../app/ViewModels/Products/CategoryGroup' /* webpackChunkName: \"category-group\" */).then((viewModel) => {\r\n //document.querySelector('.image-rows').removeAttribute('hidden');\r\n WaitForElementToDisplay(\".image-rows\", 300, () => {\r\n document.querySelector('.image-rows').removeAttribute('hidden');\r\n });\r\n WaitForElementToDisplay(\"#category-items-loop\", 300, () => {\r\n const root = ReactDOM.createRoot(document.querySelector(\"#category-items-loop\"));\r\n root.render(\r\n
\r\n \r\n {model.SectionTitle}\r\n
\r\n\r\n {mobileFilteringOn && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n\r\n \r\n Filters\r\n
\r\n \r\n
\r\n