@riosst100/pwa-marketplace 2.3.6 → 2.3.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.3.6",
+  "version": "2.3.8",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/SetsData/setsData.js

@@ -14,6 +14,7 @@ import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySea
 import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
 import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
 import { useLocation } from 'react-router-dom';
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 const SetsData = props => {
     const { categoryId } = props
@@ -127,17 +128,27 @@ const SetsData = props => {
         
         if (sets.length) {
             sets.map((set, index) => {
-                const { set_name, option_id, release_year } = set;
+                const { products_count, set_name, option_id, release_year } = set;
+
+                console.log(products_count)
 
                 const categoryUrl = resourceUrl(
                     `/${category?.url_path}${categoryUrlSuffix || ''}${filterSearch || ''}&${attributeCode}[filter]=${set_name},${option_id}`
                 );
 
-                setsResult.push(<li className='list-none'>
-                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
-                        {set_name}
-                    </Link>
+                if (parseInt(products_count) > 0) {
+                    setsResult.push(<li className='list-none'>
+                        <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-0">
+                            {set_name} <span className='text-[12px]'>({products_count})</span>
+                        </Link>
+                    </li>)
+                } else {
+                    setsResult.push(<li className='list-none'>
+                    <span className="text-[#8f8f8f] w-full block text-[14px] py-[2px] px-0">
+                        {set_name} <span className='text-[12px]'>({products_count})</span>
+                    </span>
                 </li>)
+                }
             })
         }
 
@@ -222,10 +233,37 @@ const SetsData = props => {
         setSearchQuery('')
     }
 
+    const activeFilters = [];
+    
+    const allActiveFilters = getFiltersFromSearch(search);
+
+    if (allActiveFilters && allActiveFilters.size > 0) {
+        allActiveFilters.forEach((value, key) => {
+            value.forEach((value) => {
+                const filterArr = value.split(',');
+                
+                const label = filterArr[0];
+                const optionId = filterArr[1];
+                if (label == "Singles") {
+                    isSingles = true;
+                }
+                if (key == "card_game" || key == "product_line" && urlKey == "brands" || key == "product_line" && urlKey == "franchise" || key == "franchise" && urlKey == "brands" || key == "franchise" && urlKey == "franchise" || key == "brands" && urlKey == "franchise" || key == "brands" && urlKey == "brands" || virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
+                    activeFilters.push(
+                        {
+                            'label': label,
+                            'code': key,
+                            'option_id': optionId
+                        }
+                    )
+                }
+            })
+        });
+    }
+
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={shopby == "singles" ? "Mini-Figures" : title} />
+            <Breadcrumbs categoryId={categoryId} currentFilter={activeFilters} customPage={shopby == "singles" ? "Mini-Figures" : title} />
             {/* <ul className={classes.nav}>
                 <li className={classes.nav_item}>
                     <button

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -199,14 +199,19 @@ const CategoryContent = props => {
         <ProductListTabShimmer />
     ) : null;
 
+    const formatNumber = (num) => {
+        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
     const categoryResultsHeading =
     galleryItems.length > 0 ? (
             <FormattedMessage
-                id={'categoryContent.resultCount'}
+                id={'categoryContent.resultAndTotalCount'}
                 values={{
-                    count: galleryItems.length
+                    count: galleryItems.length,
+                    total_count: formatNumber(totalCount)
                 }}
-                defaultMessage={'{count} Results'}
+                defaultMessage={"Showing {count} of {total_count} products"}
             />
         ) : isLoading ? (
             <Shimmer width={5} />

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { string } from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -78,6 +78,35 @@ const Breadcrumbs = props => {
 
     const lastIndex = currentFilter ? currentFilter.length - 1 : 0;
     // const filterpath = ;
+
+    const { search } = useLocation();
+
+    // const previousSearch = useRef(search);
+
+    console.log('search')
+    console.log(search)
+
+    const removeShopbyParam = (url) => {
+        const urlParts = url.split("?"); // Pisahkan URL sebelum dan sesudah tanda tanya
+        if (urlParts.length < 2) return url; // Jika tidak ada query string, kembalikan URL asli
+
+        const baseUrl = urlParts[0]; // Bagian URL sebelum query string
+        const queryString = urlParts[1]; // Bagian query string
+
+        // Pisahkan parameter menjadi array
+        const params = queryString.split("&").filter(param => !param.startsWith("shopby="));
+
+        // Gabungkan kembali parameter tanpa "shopby"
+        const newQueryString = params.join("&");
+
+        // Gabungkan URL dasar dengan query string yang telah dimodifikasi
+        return newQueryString ? `${baseUrl}?${newQueryString}` : baseUrl;
+    }
+
+    const params = removeShopbyParam(search);
+
+    console.log("paramsparamsparams")
+    console.log(params)
     
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
         currentProduct ? (
@@ -102,7 +131,7 @@ const Breadcrumbs = props => {
                     <Link
                         key={index}
                         className={classes.link}
-                        to={resourceUrl('/'+currentCategoryPath)}
+                        to={resourceUrl('/'+currentCategoryPath+params)}
                         onClick={handleClick}
                     >
                         {filter.label}
@@ -119,7 +148,7 @@ const Breadcrumbs = props => {
                     <Link
                         key={index}
                         className={classes.link}
-                        to={resourceUrl('/'+currentCategoryPath+'?' + filter.code + '[filter]=' + filter.label + ',' + filter.option_id)}
+                        to={resourceUrl('/'+currentCategoryPath+params)}
                         onClick={handleClick}
                     >
                         {filter.label}

package/src/talons/SetsData/setsData.gql.js

@@ -27,6 +27,7 @@ export const GET_SETS_DATA_QUERY = gql`
                 group
                 release_year
                 sets {
+                    products_count
                     set_name
                     option_id
                     release_year