🎨 Add tags to modify sorting display

likecoin · Nov 26, 2024 · 8171451 · 8171451
1 parent 23ac5df
commit 8171451
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 30 deletions.
diff --git a/src/constant/store.js b/src/constant/store.js
@@ -1,5 +1,6 @@
 export const SORTING_OPTIONS = {
   RECOMMEND: 'recommend',
+  DEFAULT: 'default',
   LATEST: 'latest',
   LOWER_PRICE: 'lower_price',
   HIGHER_PRICE: 'higher_price',

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -470,6 +470,7 @@
   "listing_page_header_homePage": "Home",
   "listing_page_header_listingPage": "Bookstore",
   "listing_page_header_sort": "Sort: {sort}",
+  "listing_page_header_sort_default": "Default",
   "listing_page_header_sort_higher_price": "Price: High to Low",
   "listing_page_header_sort_latest": "Latest",
   "listing_page_header_sort_lower_price": "Price: Low to High",
@@ -1030,6 +1031,8 @@
     "Stake your LikeCoin to gain extra reward, and participate in community governance."
   ],
   "tag_all_title": "All",
+  "tag_all_featured": "Featured",
+  "tag_all_latest": "Latest Arrivals",
   "tooltip_coming_soon": "Coming Soon",
   "tooltip_no_nft": "No owned NFTs to transfer",
   "tooltip_share": "Copy URL",

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -470,8 +470,9 @@
   "listing_page_header_homePage": "主頁",
   "listing_page_header_listingPage": "書店",
   "listing_page_header_sort": "排序：{sort}",
+  "listing_page_header_sort_default": "預設",
   "listing_page_header_sort_higher_price": "價錢高至低",
-  "listing_page_header_sort_latest": "最新上架",
+  "listing_page_header_sort_latest": "上架日期",
   "listing_page_header_sort_lower_price": "價錢低至高",
   "listing_page_header_sort_recommend": "推薦",
   "listing_page_header_total_books": "共 {num} 本書",
@@ -1030,6 +1031,8 @@
     "委託 LikeCoin 獲得額外回報，同時參與社群決策"
   ],
   "tag_all_title": "全部",
+  "tag_all_featured": "精選",
+  "tag_all_latest": "最新上架",
   "tooltip_coming_soon": "快將推出",
   "tooltip_no_nft": "沒有可發送的 NFT",
   "tooltip_share": "複製網址",

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
@@ -79,7 +79,7 @@
                   <ButtonV2
                     :preset="
                       tag.id === selectedTagId ||
-                      (!selectedTagId && tag.id === 'all')
+                      (!selectedTagId && tag.id === 'featured')
                         ? 'secondary'
                         : 'outline'
                     "
@@ -556,7 +556,7 @@ export default {
   name: 'ListingPage',
   mixins: [crispMixin],
   layout: 'default',
-  defaultSorting: SORTING_OPTIONS.RECOMMEND,
+  defaultSorting: SORTING_OPTIONS.DEFAULT,
   defaultPrice: PRICE_OPTIONS.ALL,
   defaultLanguage: LANGUAGE_OPTIONS.ALL,
   async asyncData({
@@ -578,30 +578,42 @@ export default {
       const fetches = [
         $api.$get(fetchBookstoreCMSTags({ limit: 100 })),
         ...getCMSTagIdsForRecommendedBookstoreItemsByLocale(i18n.locale).map(
-          tagId => store.dispatch('lazyFetchBookstoreCMSProductsByTagId', tagId)
+          tagId =>
+            store
+              .dispatch('lazyFetchBookstoreCMSProductsByTagId', tagId)
+              .catch(() => ({ records: [] }))
         ),
         store.dispatch('fetchBookstoreLatestItems'),
       ];
+
       if (route.query.tag) {
         fetches.push(
-          store.dispatch(
-            'lazyFetchBookstoreCMSProductsByTagId',
-            route.query.tag
-          )
+          store
+            .dispatch('lazyFetchBookstoreCMSProductsByTagId', route.query.tag)
+            .catch(err => {
+              if (err.response?.data === 'TAG_NOT_FOUND') {
+                if (
+                  route.query.tag !== 'latest' &&
+                  route.query.tag !== 'featured'
+                ) {
+                  throw error({
+                    statusCode: 404,
+                    message: i18n.t('listing_page_tag_not_found'),
+                  });
+                } else {
+                  return { records: [] };
+                }
+              }
+              throw err;
+            })
         );
       }
+
       const [tagsResult] = await Promise.all(fetches);
-      bookstoreCMSTags = tagsResult.records;
+      bookstoreCMSTags = tagsResult?.records || [];
     } catch (err) {
-      if (err.response?.data === 'TAG_NOT_FOUND') {
-        error({
-          statusCode: 404,
-          message: i18n.t('listing_page_tag_not_found'),
-        });
-        return {};
-      }
       // eslint-disable-next-line no-console
-      console.error(error);
+      console.error(err);
     }
     return { bookstoreCMSTags };
   },
@@ -812,10 +824,17 @@ export default {
     availableSorting() {
       const options = [];
 
-      options.push({
-        text: this.$t('listing_page_header_sort_recommend'),
-        value: SORTING_OPTIONS.RECOMMEND,
-      });
+      if (this.selectedTagId === 'featured' || !this.selectedTagId) {
+        options.push({
+          text: this.$t('listing_page_header_sort_default'),
+          value: SORTING_OPTIONS.DEFAULT,
+        });
+      } else if (this.selectedTagId !== 'latest') {
+        options.push({
+          text: this.$t('listing_page_header_sort_recommend'),
+          value: SORTING_OPTIONS.RECOMMEND,
+        });
+      }
 
       options.push({
         text: this.$t('listing_page_header_sort_latest'),
@@ -866,7 +885,11 @@ export default {
     },
 
     bookstoreItems() {
-      if (this.selectedTagId) {
+      if (
+        this.selectedTagId &&
+        this.selectedTagId !== 'latest' &&
+        this.selectedTagId !== 'featured'
+      ) {
         // Return books with particular tag from CMS
         return this.nftGetBookstoreCMSProductsByTagId(this.selectedTagId);
       }
@@ -935,6 +958,7 @@ export default {
 
       items.sort((a, b) => {
         switch (this.selectedSorting) {
+          case SORTING_OPTIONS.DEFAULT:
           case SORTING_OPTIONS.RECOMMEND:
             if (a.order && b.order) {
               return a.order - b.order;
@@ -1005,12 +1029,22 @@ export default {
     bookstoreTagButtons() {
       return [
         {
-          id: 'all',
-          name: this.$t('tag_all_title'),
+          id: 'featured',
+          name: this.$t('tag_all_featured'),
+          route: this.localeLocation({
+            query: {
+              ...this.$route.query,
+              tag: 'featured',
+            },
+          }),
+        },
+        {
+          id: 'latest',
+          name: this.$t('tag_all_latest'),
           route: this.localeLocation({
             query: {
               ...this.$route.query,
-              tag: undefined,
+              tag: 'latest',
             },
           }),
         },
@@ -1301,12 +1335,21 @@ export default {
     },
     async handleTagClick(tag) {
       logTrackerEvent(this, 'listing', 'tag_click', tag.id, 1);
-      try {
-        await this.lazyFetchBookstoreCMSProductsByTagId(tag.id);
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error(error);
+      if (tag.id === 'latest' || tag.id === 'featured') {
+        if (tag.id === 'featured') {
+          this.selectedSorting = SORTING_OPTIONS.DEFAULT;
+        } else {
+          this.selectedSorting = SORTING_OPTIONS.LATEST;
+        }
+      } else {
+        try {
+          await this.lazyFetchBookstoreCMSProductsByTagId(tag.id);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        }
       }
+
       logPurchaseFlowEvent(this, 'view_item_list', {
         item_list_id: tag.id,
         item_list_name: tag.name,