From e7f7436f17b863dd445144e892145f266481ebdf Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Wed, 28 Jun 2023 18:06:22 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Support=20batch=20collect=20(#1137)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🚧 Add UI for batch collect

* 👔 Remove shopping cart entry

* 🚸 Move collect all button to the side

* 🚸 Prevent collect all while loading

* 🚸 Filter WNFT batch collected in portfolio

* 💬 Update text

* 🎨 FIx possible try-catch issue

* 💄 Move insufficient balance label

* 🚸 Prevent closing tx dialog in batch purchase

* 🐛 Fix batch collect message handling

* 💬 Use backpack for shopping cart

---------

Co-authored-by: Edmond Yu <edmond.kcyu@gmail.com>
---
 src/assets/icons/local-mall.svg               |   3 +
 src/components/CardV2.vue                     |  29 +-
 .../EventModal/Collect/MethodButton.vue       |   2 +
 src/components/EventModal/Collect/index.vue   |  96 ++++++-
 src/components/NFTPortfolio/MainView.vue      |   2 +
 .../NFTPortfolio/SubscriptionForm.vue         |   7 +-
 src/components/ShoppingCart/ListRow.vue       | 128 +++++++++
 src/components/ShoppingCart/SiteButton.vue    |  66 +++++
 src/components/SiteHeader.vue                 |  19 +-
 src/constant/index.js                         |   6 +
 src/locales/en.json                           |  26 +-
 src/locales/zh-Hant.json                      |  26 +-
 src/mixins/nft.js                             |  10 +-
 src/nuxt.config.js                            |   1 +
 src/pages/_id/index.vue                       |  85 +++++-
 src/pages/shopping-cart.vue                   | 264 ++++++++++++++++++
 src/plugins/nuxt-client-init.client.js        |   3 +
 src/store/index.js                            |   3 +
 src/store/modules/nft.js                      |  72 ++++-
 src/store/mutation-types.js                   |   4 +
 src/util/shopping-cart.js                     |  21 ++
 21 files changed, 822 insertions(+), 51 deletions(-)
 create mode 100644 src/assets/icons/local-mall.svg
 create mode 100644 src/components/ShoppingCart/ListRow.vue
 create mode 100644 src/components/ShoppingCart/SiteButton.vue
 create mode 100644 src/pages/shopping-cart.vue
 create mode 100644 src/plugins/nuxt-client-init.client.js
 create mode 100644 src/util/shopping-cart.js

diff --git a/src/assets/icons/local-mall.svg b/src/assets/icons/local-mall.svg
new file mode 100644
index 000000000..e684ac95a
--- /dev/null
+++ b/src/assets/icons/local-mall.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+  <path d="M180-80q-24 0-42-18t-18-42v-530q0-24 18-42t42-18h110q0-79 53-134.5T475-920q79 0 137 55.575T670-730h110q24 0 42 18t18 42v530q0 24-18 42t-42 18H180Zm0-60h600v-530H180v530Zm300-290q79 0 137-58t58-137h-60q0 55-40 95t-95 40q-55 0-95-40t-40-95h-60q0 79 58 137t137 58ZM350-730h260q0-55-37.5-92.5T480-860q-55 0-92.5 37.5T350-730ZM180-140v-530 530Z" fill="currentColor" />
+</svg>
diff --git a/src/components/CardV2.vue b/src/components/CardV2.vue
index 023663129..71f334f6f 100644
--- a/src/components/CardV2.vue
+++ b/src/components/CardV2.vue
@@ -25,17 +25,30 @@ export default class Card extends Vue {
   @Prop({ default: false })
   readonly isDark!: boolean;
 
+  @Prop({ default: false })
+  readonly isOutline!: boolean;
+
   get rootClasses() {
-    return [
-      this.isDark
-        ? 'bg-like-green bg-gradient-to-r from-transparent to-like-cyan-translucent'
-        : 'bg-white',
+    const classes = [
       'rounded-[24px]',
-      {
-        'text-like-cyan-pale': this.isDark,
-        'px-[24px] py-[32px]': this.hasPadding,
-      },
+      { 'px-[24px] py-[32px]': this.hasPadding },
     ];
+    if (this.isOutline) {
+      classes.push('border');
+      if (this.isDark) {
+        classes.push('border-like-cyan-pale');
+      } else {
+        classes.push('border-gray-d8');
+      }
+    } else if (this.isDark) {
+      classes.push(
+        'bg-like-green bg-gradient-to-r from-transparent to-like-cyan-translucent',
+        'text-like-cyan-pale'
+      );
+    } else {
+      classes.push('bg-white');
+    }
+    return classes;
   }
 }
 </script>
diff --git a/src/components/EventModal/Collect/MethodButton.vue b/src/components/EventModal/Collect/MethodButton.vue
index 2f7fcf344..bd8b50c0d 100644
--- a/src/components/EventModal/Collect/MethodButton.vue
+++ b/src/components/EventModal/Collect/MethodButton.vue
@@ -7,7 +7,9 @@
     @click="handleClick"
   >
     <template #prepend>
+      <slot v-if="$slots.prepend" name="prepend" />
       <EventModalCollectMethodIcon
+        v-else
         class="w-[24px] h-[24px] text-like-green"
         :type="type"
       />
diff --git a/src/components/EventModal/Collect/index.vue b/src/components/EventModal/Collect/index.vue
index f8e57b8f0..62fe08698 100644
--- a/src/components/EventModal/Collect/index.vue
+++ b/src/components/EventModal/Collect/index.vue
@@ -40,7 +40,12 @@
           />
         </client-only>
       </transition>
-      <template v-if="isCompleted">
+      <Label
+        v-if="isAddedToShoppingCart"
+        preset="p5"
+        align="center"
+      >{{ $t('nft_collect_modal_added_to_shopping_cart_description', { nft: NFTName }) }}</Label>
+      <template v-else-if="isCompleted">
         <Label class="text-medium-gray mt-[12px] flex-nowrap" preset="h6" align="center">
           <i18n
             :path="
@@ -61,7 +66,7 @@
           </i18n>
         </Label>
         <div
-          v-if="!isFollowPromptStateDefault"
+          v-if="!isFollowPromptStateDefault && !isBatchCollect"
           class="flex justify-center items-center mt-[16px] px-[12px] rounded-[48px] border-[1px] border-medium-gray"
         >
           <NFTMessageIdentity
@@ -131,9 +136,20 @@
       #button
     >
       <ButtonV2
+        v-if="isBatchCollect"
+        preset="outline"
+        :text="$t('nft_details_page_button_view_portfolio')"
+        :to="localeLocation({ name: 'id', params: { id: getAddress }, query: { tab: 'collected' } })"
+        @click.native="handleClose"
+      >
+        <template #prepend>
+          <IconEye class="w-[20px]" />
+        </template>
+      </ButtonV2>
+      <ButtonV2
+        v-else
         preset="outline"
         :text="$t('nft_details_page_button_view_details')"
-        class="mr-[12px]"
         @click="goToNFTDetails"
       >
         <template #prepend>
@@ -142,7 +158,20 @@
       </ButtonV2>
     </template>
 
-    <template v-if="!uiTxNFTStatus">
+    <template v-else-if="isAddedToShoppingCart" #button>
+      <ButtonV2
+        preset="secondary"
+        :text="$t('nft_collect_modal_go_to_shopping_cart_button')"
+        :to="localeLocation({ name: 'shopping-cart' })"
+        @click.native="handleClose"
+      >
+        <template #prepend>
+          <LocalMallIcon class="w-[20px]" />
+        </template>
+      </ButtonV2>
+    </template>
+
+    <template v-if="!isAddedToShoppingCart && !uiTxNFTStatus">
       <section
         v-if="paymentMethod === undefined"
         class="flex flex-col items-start mb-[28px]"
@@ -242,6 +271,26 @@
               </a>
             </div>
           </li>
+          <!--
+          <li v-if="isShowAddToShoppingCartButton">
+            <Separator class="mx-auto" />
+            <EventModalCollectMethodButton
+              :title="(
+                hasAddedToShoppingCart
+                  ? $t('nft_collect_modal_added_to_cart')
+                  : $tc('nft_collect_modal_add_to_cart', shoppingCartQuantity, { count: shoppingCartQuantity })
+              )"
+              type="crypto"
+              :price="formattedNFTPriceInLIKE"
+              :is-disabled="hasAddedToShoppingCart"
+              @click="handleAddToCart"
+            >
+              <template #prepend>
+                <LocalMallIcon :class="['w-[24px]', { 'text-like-green': !hasAddedToShoppingCart }]" />
+              </template>
+            </EventModalCollectMethodButton>
+          </li>
+          -->
         </ul>
       </section>
       <section v-else>
@@ -255,6 +304,8 @@
 import { mapActions, mapGetters } from 'vuex';
 
 import modelLoadingImage from '~/assets/images/nft/model-loading.png';
+import LocalMallIcon from '~/assets/icons/local-mall.svg?inline';
+
 import { logTrackerEvent } from '~/util/EventLogger';
 import { formatNumberWithLIKE, oscillate } from '~/util/ui';
 
@@ -271,6 +322,9 @@ export default {
   filters: {
     formatNumberWithLIKE,
   },
+  components: {
+    LocalMallIcon,
+  },
   mixins: [clipboardMixin, nftMixin],
   props: {
     isOpen: {
@@ -317,11 +371,13 @@ export default {
       isFollowPromptUpdating: false,
       modelExposure: 0,
       animationTimer: null,
+      isAddedToShoppingCart: false,
     };
   },
   computed: {
     ...mapGetters([
       'getAddress',
+      'getShoppingCartNFTClassQuantity',
       'walletFollowees',
       'walletIsLoggingIn',
       'walletInteractedCreators',
@@ -332,9 +388,14 @@ export default {
     developerMode() {
       return !!this.$route.query.debug;
     },
+    isBatchCollect() {
+      return Array.isArray(this.uiTxTargetClassId);
+    },
     classId() {
       // Alias for NFT mixin
-      return this.uiTxTargetClassId;
+      return this.isBatchCollect
+        ? this.uiTxTargetClassId[0]
+        : this.uiTxTargetClassId;
     },
     headerText() {
       return this.paymentMethod === undefined ||
@@ -344,7 +405,8 @@ export default {
     },
     isShowCloseButton() {
       return (
-        this.paymentMethod === undefined ||
+        (this.paymentMethod === undefined &&
+          !this.getRouteBaseName(this.$route) === 'shopping-cart') ||
         this.uiTxNFTStatus === 'completed' ||
         this.uiTxNFTStatus === 'processing_non_blocking'
       );
@@ -426,6 +488,15 @@ export default {
     purchaseLIKELink() {
       return 'https://faucet.like.co/purchase';
     },
+    isShowAddToShoppingCartButton() {
+      return this.canPayByLIKE && !this.nftIsUseListingPrice;
+    },
+    shoppingCartQuantity() {
+      return this.getShoppingCartNFTClassQuantity(this.classId);
+    },
+    hasAddedToShoppingCart() {
+      return this.shoppingCartQuantity > 0;
+    },
   },
   watch: {
     isOpen(isOpen) {
@@ -483,6 +554,7 @@ export default {
       'walletFollowCreator',
       'walletAddInteractedCreator',
       'walletUnfollowCreator',
+      'addNFTClassToShoppingCart',
     ]),
     startExposureAnimation(time = performance.now(), lastTime = time) {
       if (this.isProcessing) {
@@ -508,6 +580,7 @@ export default {
       this.paymentMethod = undefined;
       this.justCollectedNFTId = undefined;
       this.memo = '';
+      this.isAddedToShoppingCart = false;
 
       // Mixin
       this.userCollectedCount = undefined;
@@ -564,6 +637,17 @@ export default {
         }
       }
     },
+    handleAddToCart() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'nft_collect_modal_click_add_to_cart',
+        this.classId,
+        1
+      );
+      this.addNFTClassToShoppingCart({ classId: this.classId });
+      this.isAddedToShoppingCart = true;
+    },
     goToNFTDetails() {
       this.$router.push(
         this.localeLocation({
diff --git a/src/components/NFTPortfolio/MainView.vue b/src/components/NFTPortfolio/MainView.vue
index 58f8cd0a1..2291c4b81 100644
--- a/src/components/NFTPortfolio/MainView.vue
+++ b/src/components/NFTPortfolio/MainView.vue
@@ -104,6 +104,8 @@
         </div>
       </div>
 
+      <slot name="before-grid" />
+
       <NFTPagePrimitiveDisclaimer
         v-if="isPortfolioOtherFilterActive"
         class="w-full"
diff --git a/src/components/NFTPortfolio/SubscriptionForm.vue b/src/components/NFTPortfolio/SubscriptionForm.vue
index 236d211eb..faba493b3 100644
--- a/src/components/NFTPortfolio/SubscriptionForm.vue
+++ b/src/components/NFTPortfolio/SubscriptionForm.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col items-center gap-[24px] text-medium-gray bg-shade-gray rounded-[24px] px-[32px] py-[24px]">
+  <CardV2
+    class="flex flex-col items-center gap-[24px] text-medium-gray"
+    :is-outline="true"
+  >
     <Label
       preset="h4"
       align="center"
@@ -88,7 +91,7 @@
       </Label>
       <p class="text-center underline text-[10px] text-medium-gray mt-[32px] cursor-pointer" @click="handleClickResend">{{ $t('portfolio_subscription_verify_sendAgain') }}</p>
     </Dialog>
-  </div>
+  </CardV2>
 </template>
 
 <script>
diff --git a/src/components/ShoppingCart/ListRow.vue b/src/components/ShoppingCart/ListRow.vue
new file mode 100644
index 000000000..e17fcaef4
--- /dev/null
+++ b/src/components/ShoppingCart/ListRow.vue
@@ -0,0 +1,128 @@
+<template>
+  <div
+    :class="[
+      'grid',
+      'grid-cols-12',
+      'gap-[1em]',
+      'sm:pl-[1em]',
+      'sm:pr-[0.5em]',
+      'py-[1.5em]',
+      { 'animate-pulse': isFetching },
+    ]"
+  >
+    <div
+      :class="[
+        'col-span-1 laptop:col-span-2',
+        'flex',
+        'flex-col laptop:flex-row',
+        'items-start',
+        'gap-[.5em]',
+      ]"
+    >
+      <span class="min-w-[2em] text-gray-9b">{{ index }}</span>
+      <NuxtLink class="hidden laptop:block" :to="nftCollectRoute">
+        <NFTCover
+          class="rounded-[4px] overflow-hidden shrink"
+          :src="NFTImageUrl"
+        />
+      </NuxtLink>
+    </div>
+    <!--
+    <div class="col-span-6 laptop:col-span-5">
+    -->
+    <div class="col-span-8 laptop:col-span-7">
+      <NuxtLink class="block laptop:hidden mb-[.75em]" :to="nftCollectRoute">
+        <NFTCover
+          class="rounded-[4px] overflow-hidden shrink"
+          :src="NFTImageUrl"
+        />
+      </NuxtLink>
+      <div class="line-clamp-2 font-[600]">
+        <NuxtLink :to="nftCollectRoute">{{ NFTName }}</NuxtLink>
+      </div>
+      <div class="line-clamp-2 mt-[.5em] text-gray-9b">
+        <NuxtLink :to="nftCollectRoute">{{ NFTDescription }}</NuxtLink>
+      </div>
+      <NuxtLink
+        class="flex items-center group text-like-green mt-[.5rem]"
+        :to="iscnOwner ? localeLocation({ name: 'id', params: { id: iscnOwner }, query: { tab: 'created' }, }) : ''"
+      >
+        <Identity
+          :avatar-url="creatorAvatar"
+          :avatar-size="32"
+          :is-avatar-disabled="true"
+          :is-avatar-outlined="isCreatorCivicLiker"
+          :is-lazy-loaded="true"
+        />
+        <span class="ml-[8px] group-hover:underline font-[600]">{{ creatorDisplayName | ellipsis }}</span>
+      </NuxtLink>
+    </div>
+    <div class="col-span-2 text-center text-like-green font-proxima font-[600]">{{ NFTPrice | formatNumberWithLIKE }}</div>
+    <!--
+    <div class="col-span-2 text-center">{{ quantity }}</div>
+    -->
+    <div class="col-span-1 flex justify-end mt-[-.25em]">
+      <ButtonV2
+        preset="plain"
+        size="mini"
+        :circle="true"
+        @click="handleClickRemoveButton"
+      >
+        <IconClose class="w-[20px] text-gray-4a" />
+      </ButtonV2>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ellipsis, formatNumberWithLIKE } from '~/util/ui';
+
+import nftMixin from '~/mixins/nft';
+
+export default {
+  name: 'ShoppingCartListRow',
+  filters: {
+    ellipsis,
+    formatNumberWithLIKE,
+  },
+  mixins: [nftMixin],
+  props: {
+    classId: {
+      type: String,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+    quantity: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      isFetching: false,
+    };
+  },
+  mounted() {
+    this.fetchInfo();
+  },
+  methods: {
+    async fetchInfo() {
+      try {
+        this.isFetching = true;
+        await Promise.all([
+          this.updateNFTClassMetadata(),
+          this.updateNFTPurchaseInfo(),
+        ]);
+      } finally {
+        this.isFetching = false;
+      }
+    },
+    handleClickRemoveButton() {
+      this.$emit('remove', this.classId);
+    },
+  },
+};
+</script>
diff --git a/src/components/ShoppingCart/SiteButton.vue b/src/components/ShoppingCart/SiteButton.vue
new file mode 100644
index 000000000..dedad6068
--- /dev/null
+++ b/src/components/ShoppingCart/SiteButton.vue
@@ -0,0 +1,66 @@
+<template>
+  <div
+    v-show="shoppingCartNFTClassList.length > 0"
+    class="relative"
+  >
+    <ButtonV2
+      preset="tertiary"
+      :to="localeLocation({ name: 'shopping-cart' })"
+      @click="handleClickCartButton"
+    >
+      <LocalMallIcon class="w-20 h-20 text-like-green" />
+    </ButtonV2>
+    <div
+      :class="[
+        'absolute',
+        'bottom-full',
+        'left-full',
+        'flex',
+        'justify-center',
+        'items-center',
+        'bg-like-green',
+        'rounded-full',
+        'min-w-[20px]',
+        'min-h-[20px]',
+        'ml-[-10px]',
+        'mb-[-10px]',
+        'px-[4px]',
+        'py-[5px]',
+        'pointer-events-none',
+      ]"
+    >
+      <span class="text-like-cyan text-[10px] leading-[1em]">
+        {{ shoppingCartNFTClassList.length }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+import { logTrackerEvent } from '~/util/EventLogger';
+
+import LocalMallIcon from '~/assets/icons/local-mall.svg?inline';
+
+export default {
+  name: 'ShoppingCartSiteButton',
+  components: {
+    LocalMallIcon,
+  },
+  computed: {
+    ...mapGetters(['getAddress', 'shoppingCartNFTClassList']),
+  },
+  methods: {
+    handleClickCartButton() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'shopping_cart_click_site_button',
+        this.getAddress,
+        1
+      );
+    },
+  },
+};
+</script>
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 97b64d2b6..0bb2bb707 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -4,13 +4,11 @@
       'flex',
       'items-center',
       'justify-between',
-      'gap-x-[24px]',
+      'gap-x-[1.5em]',
       'w-full',
-      'pl-[32px]',
-      'pr-[24px]',
-      'py-[40px]',
-      'laptop:pr-[32px]',
-      'laptop:pl-[56px]',
+      'pl-[1em] sm:pl-[3.5em]',
+      'pr-[.75em] sm:pr-[2em]',
+      'py-[2.5em]',
     ]"
   >
     <NuxtLink
@@ -21,11 +19,14 @@
       <Logo class="fill-current" />
     </NuxtLink>
 
-    <div class="relative flex items-center gap-x-[16px] laptop:gap-x-[24px]">
+    <div class="relative flex items-center gap-x-[.75em] sm:gap-x-[1.5em]">
 
-      <div class="relative">
+      <!--
+      <ShoppingCartSiteButton />
+      -->
+
+      <div v-if="loginAddress" class="relative">
         <ButtonV2
-          v-if="loginAddress"
           preset="tertiary"
           :to="localeLocation({ name: 'notifications' })"
         >
diff --git a/src/constant/index.js b/src/constant/index.js
index 7c8d5c458..a56b833c3 100644
--- a/src/constant/index.js
+++ b/src/constant/index.js
@@ -195,7 +195,13 @@ export const NFT_DISPLAY_STATE = {
   DEFAULT: 'default',
 };
 
+// NOTE: Limitation of LikeCoin API for batch collect
+export const BATCH_COLLECT_MAX = 100;
+
 export const EMAIL_REGEX_STRING =
   '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$';
 
 export const NFT_BOOK_PLATFORM_LIKER_LAND = 'liker_land';
+
+export const NFT_LEGACY_DEFAULT_MESSSAGE = 'like.co NFT API';
+export const NFT_BATCH_COLLECT_MESSSAGE = '(multiple purchases)';
diff --git a/src/locales/en.json b/src/locales/en.json
index a481d385c..f9f886b19 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -147,7 +147,6 @@
   "dashboard_tooltips_resales": "The sales revenue and actual earnings from NFTs in the secondary market",
   "dashboard_tooltips_royalty": "The actual earnings as a stakeholder",
   "dashboard_tooltips_sales": "The sales revenue and actual earnings from NFTs",
-
   "edit": "Edit",
   "ERROR": {
     "LOGIN_NEEDED": "Please sign in to view this content",
@@ -294,6 +293,12 @@
   "nft_class_footer_raw": "Raw NFT data",
   "nft_class_footer_widget": "NFT Widget",
   "nft_class_uncollectible": "Uncollectible",
+  "nft_collect_modal_add_to_cart": "Add to backpack | Add to backpack ({count}) | Add to backpack ({count})",
+  "nft_collect_modal_added_to_cart": "Added to backpack",
+  "nft_collect_modal_added_to_shopping_cart_description": "You added \"{nft}\" to backpack",
+  "nft_collect_modal_alert_fail": "Collect {name} fail: {error}",
+  "nft_collect_modal_alert_success": "{name} was collected successfully",
+  "nft_collect_modal_go_to_shopping_cart_button": "View backpack",
   "nft_collect_modal_leave_message": "Leave a signed message to creator",
   "nft_collect_modal_leave_message_to_name": "leave signed message to {name}",
   "nft_collect_modal_method_like": "Pay by LIKE",
@@ -303,8 +308,6 @@
   "nft_collect_modal_subtitle_select_collect_method": "Select a collect method",
   "nft_collect_modal_title_collect": "Collect NFT",
   "nft_collect_modal_title_collecting": "Collecting NFT",
-  "nft_collect_modal_alert_success": "{name} was collected successfully",
-  "nft_collect_modal_alert_fail": "Collect {name} fail: {error}",
   "nft_details_page_activity_list_event": "Event",
   "nft_details_page_activity_list_event_buy_nft": "Purchase",
   "nft_details_page_activity_list_event_collect": "Collect",
@@ -337,6 +340,7 @@
   "nft_details_page_button_view_message": "View {num} messages",
   "nft_details_page_button_view_nft_book": "View Book Info",
   "nft_details_page_button_view_pdf": "Open as PDF",
+  "nft_details_page_button_view_portfolio": "View Portfolio",
   "nft_details_page_button_view_unknown": "View alternative Link",
   "nft_details_page_collected_count_label": "Collected",
   "nft_details_page_description": "This content has been published as Writing NFT. Collect now to build your portfolio.",
@@ -411,8 +415,8 @@
   "nft_portfolio_page_label_created": "Created",
   "nft_portfolio_page_label_featured": "Featured",
   "nft_portfolio_page_label_hidden": "Hidden",
-  "nft_portfolio_page_label_loading_more": "Loading more",
   "nft_portfolio_page_label_loading": "Loading",
+  "nft_portfolio_page_label_loading_more": "Loading more",
   "nft_portfolio_page_label_other": "Other",
   "nft_portfolio_page_label_top_collector": "Top Fans",
   "nft_portfolio_page_label_top_creators": "Favorite Creators",
@@ -452,6 +456,8 @@
   "order_menu_sort_by": "Sort by",
   "order_menu_time": "Time",
   "order_menu_type": "Type",
+  "portfolio_collect_all_button": "Collect All",
+  "portfolio_collect_all_description": "Don't miss out on any of my amazing works! Grab them all with just one click now!",
   "portfolio_collected_tab_no_item": "Collected NFT will be shown here",
   "portfolio_created_tab_no_item": "Created NFT will be shown here",
   "portfolio_description": "I am what I read. Explore my collection.",
@@ -572,6 +578,16 @@
     "language": "Language",
     "title": "Settings"
   },
+  "shopping_cart_checkout_button": "Checkout",
+  "shopping_cart_empty_notice": "Backpack is empty",
+  "shopping_cart_empty_notice_button": "Browse NFT",
+  "shopping_cart_error_insufficient_balance": "Insufficient balance, you only have {balance}",
+  "shopping_cart_list_header_item": "Item",
+  "shopping_cart_list_header_price": "Price",
+  "shopping_cart_list_header_quantity": "Quantity",
+  "shopping_cart_list_total_price": "Total",
+  "shopping_cart_list_wallet_balance": "Balance",
+  "shopping_cart_title": "Backpack",
   "signIn": "Sign in",
   "signInOrSignUp": "Sign up / Sign in",
   "signUp": "Sign up",
@@ -607,8 +623,8 @@
   "transfer_modal_processing_title": "Transferring",
   "tx_modal_button_cancel": "Cancel",
   "tx_modal_button_Close": "Close",
-  "tx_modal_button_retry": "Retry",
   "tx_modal_button_ok": "OK",
+  "tx_modal_button_retry": "Retry",
   "tx_modal_label_nft_id": "NFT ID",
   "tx_modal_label_receiver": "Receiver",
   "tx_modal_quitAlert_confirm": "Cancel",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index ad0bc22bc..e162ee4ad 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -147,7 +147,6 @@
   "dashboard_tooltips_resales": "二手市場 NFT 的銷售額及實際收益",
   "dashboard_tooltips_royalty": "身為 stakeholder 的實際收益",
   "dashboard_tooltips_sales": "NFT 的銷售額及實際收益",
-
   "edit": "編輯",
   "ERROR": {
     "LOGIN_NEEDED": "請登入以觀看內容",
@@ -284,6 +283,12 @@
   "nft_class_footer_raw": "原始數據",
   "nft_class_footer_widget": "NFT 小部件",
   "nft_class_uncollectible": "不能收集",
+  "nft_collect_modal_add_to_cart": "加到背包 | 加到背包 ({count}) | 加到背包 ({count})",
+  "nft_collect_modal_added_to_cart": "已加至背包",
+  "nft_collect_modal_added_to_shopping_cart_description": "你已把《{nft}》加到背包",
+  "nft_collect_modal_alert_fail": "收藏 {name} 失敗： {error}",
+  "nft_collect_modal_alert_success": "{name} 已成功收藏",
+  "nft_collect_modal_go_to_shopping_cart_button": "前往背包",
   "nft_collect_modal_leave_message": "簽署留言給創作者",
   "nft_collect_modal_leave_message_to_name": "簽署留言給 {name}",
   "nft_collect_modal_method_like": "用 LIKE 購買",
@@ -293,8 +298,6 @@
   "nft_collect_modal_subtitle_select_collect_method": "請選擇收藏方法",
   "nft_collect_modal_title_collect": "收藏作品",
   "nft_collect_modal_title_collecting": "正在收藏作品",
-  "nft_collect_modal_alert_success": "{name} 已成功收藏",
-  "nft_collect_modal_alert_fail": "收藏 {name} 失敗： {error}",
   "nft_details_page_activity_list_event": "事件",
   "nft_details_page_activity_list_event_buy_nft": "購買",
   "nft_details_page_activity_list_event_collect": "收集",
@@ -327,6 +330,7 @@
   "nft_details_page_button_view_message": "檢視 {num} 留言",
   "nft_details_page_button_view_nft_book": "瀏覽書訊",
   "nft_details_page_button_view_pdf": "以 PDF 打開",
+  "nft_details_page_button_view_portfolio": "檢視收藏頁",
   "nft_details_page_button_view_unknown": "以其他方式打開",
   "nft_details_page_collected_count_label": "藏品",
   "nft_details_page_description": "此內容以 Writing NFT 方式出版。收集它以建立你的閱讀履歷。",
@@ -401,8 +405,8 @@
   "nft_portfolio_page_label_created": "創作",
   "nft_portfolio_page_label_featured": "精選文章",
   "nft_portfolio_page_label_hidden": "隱藏",
-  "nft_portfolio_page_label_loading_more": "載入更多",
   "nft_portfolio_page_label_loading": "進行中，請稍候⋯⋯",
+  "nft_portfolio_page_label_loading_more": "載入更多",
   "nft_portfolio_page_label_other": "其他",
   "nft_portfolio_page_label_top_collector": "頭號粉絲",
   "nft_portfolio_page_label_top_creators": "最愛作者",
@@ -442,6 +446,8 @@
   "order_menu_sort_by": "排序",
   "order_menu_time": "時間",
   "order_menu_type": "類型",
+  "portfolio_collect_all_button": "一鍵收藏",
+  "portfolio_collect_all_description": "別錯過任何我的作品。點擊一下，立即全部收藏！",
   "portfolio_collected_tab_no_item": "已收藏的作品將在此展示",
   "portfolio_created_tab_no_item": "已創作的作品將在此展示",
   "portfolio_description": "我的閱讀清單，構成我的精神面貌。歡迎以文會友。",
@@ -562,6 +568,16 @@
     "language": "介面語言",
     "title": "設定"
   },
+  "shopping_cart_checkout_button": "結帳",
+  "shopping_cart_empty_notice": "背包是空的",
+  "shopping_cart_empty_notice_button": "瀏覽 NFT",
+  "shopping_cart_error_insufficient_balance": "餘額不足，你只有 {balance}",
+  "shopping_cart_list_header_item": "項目",
+  "shopping_cart_list_header_price": "價值",
+  "shopping_cart_list_header_quantity": "數量",
+  "shopping_cart_list_total_price": "總共",
+  "shopping_cart_list_wallet_balance": "餘額",
+  "shopping_cart_title": "背包",
   "signIn": "登入",
   "signInOrSignUp": "註冊/登入",
   "signUp": "註冊",
@@ -597,8 +613,8 @@
   "transfer_modal_processing_title": "發送中",
   "tx_modal_button_cancel": "取消",
   "tx_modal_button_Close": "關閉",
-  "tx_modal_button_retry": "重試",
   "tx_modal_button_ok": "確認",
+  "tx_modal_button_retry": "重試",
   "tx_modal_label_nft_id": "NFT ID",
   "tx_modal_label_receiver": "接收者",
   "tx_modal_quitAlert_confirm": "取消",
diff --git a/src/mixins/nft.js b/src/mixins/nft.js
index cc37ba5ca..53c51c810 100644
--- a/src/mixins/nft.js
+++ b/src/mixins/nft.js
@@ -9,6 +9,8 @@ import {
   TX_STATUS,
   LIKECOIN_NFT_API_WALLET,
   NFT_DISPLAY_STATE,
+  NFT_BATCH_COLLECT_MESSSAGE,
+  NFT_LEGACY_DEFAULT_MESSSAGE,
 } from '~/constant';
 
 import {
@@ -1013,8 +1015,12 @@ export default {
       );
     },
     normalizeNFTMessage(m) {
-      if (m.memo === 'like.co NFT API') return '';
-      if (m.event === 'mint_nft') return this.nftClassCreatorMessage;
+      if (m.memo === NFT_LEGACY_DEFAULT_MESSSAGE) {
+        return '';
+      }
+      if (m.event === 'mint_nft' || m.memo === NFT_BATCH_COLLECT_MESSSAGE) {
+        return this.nftClassCreatorMessage;
+      }
       return m.memo;
     },
     async fetchRecommendInfo() {
diff --git a/src/nuxt.config.js b/src/nuxt.config.js
index 0c62389aa..699fbafa3 100644
--- a/src/nuxt.config.js
+++ b/src/nuxt.config.js
@@ -229,6 +229,7 @@ const nuxtConfig = {
     { src: '~/plugins/vue-cookie.client.js', ssr: false },
     { src: '~/plugins/crisp.client.js', ssr: false },
     { src: '~/plugins/vue-clipboard2', ssr: false },
+    { src: '~/plugins/nuxt-client-init.client', ssr: false },
   ],
 
   /*
diff --git a/src/pages/_id/index.vue b/src/pages/_id/index.vue
index b6d2e5c81..4ce41b567 100644
--- a/src/pages/_id/index.vue
+++ b/src/pages/_id/index.vue
@@ -84,17 +84,47 @@
             </template>
           </ButtonV2>
         </div>
-        <NFTPortfolioSubscriptionForm
-          v-else
-          id="creator-follow"
-          class="w-full"
-          :creator-wallet-address="wallet"
-          :creator-display-name="userDisplayName"
-          :is-wallet-connected="!!getAddress"
-          :is-wallet-logged-in="walletHasLoggedIn"
-          :is-followed="isFollowed"
-          :is-empty="false"
-        />
+        <template v-else>
+          <CardV2
+            v-show="isCurrentTabCreated"
+            :is-outline="true"
+            :class="[
+              'flex',
+              'flex-col',
+              'items-center',
+              'gap-[1rem]',
+              'w-full',
+              'py-[1rem]',
+              'text-[.875rem]',
+            ]"
+          >
+            <span
+              v-t="'portfolio_collect_all_description'"
+              class="text-center"
+            />
+            <ButtonV2
+              class="shrink-0"
+              :text="$t('portfolio_collect_all_button')"
+              preset="secondary"
+              :is-disabled="isLoading"
+              @click="handleClickCollectAllButton"
+            >
+              <template #prepend>
+                <IconPrice />
+              </template>
+            </ButtonV2>
+          </CardV2>
+          <NFTPortfolioSubscriptionForm
+            id="creator-follow"
+            class="w-full"
+            :creator-wallet-address="wallet"
+            :creator-display-name="userDisplayName"
+            :is-wallet-connected="!!getAddress"
+            :is-wallet-logged-in="walletHasLoggedIn"
+            :is-followed="isFollowed"
+            :is-empty="false"
+          />
+        </template>
       </div>
 
       {{ /* Right Column */ }}
@@ -139,7 +169,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import { getUserMinAPI } from '~/util/api';
 import { convertAddressPrefix, isValidAddress } from '~/util/cosmos';
 import { logTrackerEvent } from '~/util/EventLogger';
@@ -208,7 +238,12 @@ export default {
     return { isOpenFollowersDialog: false };
   },
   computed: {
-    ...mapGetters(['walletHasLoggedIn', 'walletFollowees']),
+    ...mapGetters([
+      'getNFTClassPurchaseInfoById',
+      'getNFTClassOwnerInfoById',
+      'walletHasLoggedIn',
+      'walletFollowees',
+    ]),
     wallet() {
       return this.$route.params.id;
     },
@@ -267,6 +302,7 @@ export default {
     this.loadTopUserListByAddress(this.wallet);
   },
   methods: {
+    ...mapActions(['addNFTClassesToShoppingCart', 'clearShoppingCart']),
     handleTopUserHover(i) {
       const type = this.isCurrentTabCollected ? 'creator' : 'collector';
       logTrackerEvent(
@@ -341,6 +377,29 @@ export default {
       this.exportFollowerList();
       this.alertPromptSuccess(this.$t('portfolio_follower_export_success'));
     },
+    handleClickCollectAllButton() {
+      if (this.isLoading) return;
+
+      logTrackerEvent(
+        this,
+        'portfolio',
+        'portfolio_collect_all_button_click',
+        `${this.wallet}`,
+        1
+      );
+      const classIds = this.nftClassListOfCreatedInOrder
+        .map(n => n.classId)
+        .filter(classId => {
+          const isCollectable =
+            this.getNFTClassPurchaseInfoById(classId)?.totalPrice > 0;
+          const hasCollected =
+            this.wallet &&
+            this.getNFTClassOwnerInfoById(classId)?.[this.wallet];
+          return isCollectable && !hasCollected;
+        });
+      this.addNFTClassesToShoppingCart({ classIds });
+      this.$router.push(this.localeLocation({ name: 'shopping-cart' }));
+    },
   },
 };
 </script>
diff --git a/src/pages/shopping-cart.vue b/src/pages/shopping-cart.vue
new file mode 100644
index 000000000..deadfe1e7
--- /dev/null
+++ b/src/pages/shopping-cart.vue
@@ -0,0 +1,264 @@
+<template>
+  <Page
+    :class="[
+      'w-full',
+      'max-w-[960px]',
+      'mx-auto',
+      'px-[.75em] laptop:px-[2em]',
+      'pb-[8em]',
+      'text-[0.75em] sm:text-[1em]',
+    ]"
+  >
+    <h1
+      :class="[
+        'w-full',
+        'mb-[0.5em]',
+        'text-[#3AB7A2]',
+        'text-[1.5rem] sm:text-[3rem]',
+        'text-left',
+        'font-proxima',
+        'font-[600]',
+      ]"
+    >{{ $t('shopping_cart_title') }}</h1>
+
+    <CardV2
+      v-if="shoppingCartNFTClassList.length"
+      class="w-full laptop:px-[2em]"
+    >
+      <header
+        :class="[
+          'grid',
+          'grid-cols-12',
+          'gap-[1em]',
+          'pl-[1em]',
+          'p-[0.5em]',
+          'border-b-gray-d8',
+          'border-b',
+          'text-gray-9b',
+        ]"
+      >
+        <div class="col-start-1 col-end-8">{{ $t('shopping_cart_list_header_item') }}</div>
+        <!--
+        <div class="col-start-8 col-end-10 text-center">{{ $t('shopping_cart_list_header_price') }}</div>
+        -->
+        <div class="col-start-10 col-end-12 text-center">{{ $t('shopping_cart_list_header_price') }}</div>
+        <!--
+        <div class="col-start-10 col-end-12 text-center">{{ $t('shopping_cart_list_header_quantity') }}</div>
+        -->
+      </header>
+      <ul
+        :class="[
+          'border-b',
+          'border-b-gray-d8',
+        ]"
+      >
+        <li
+          v-for="(item, index) in shoppingCartNFTClassList"
+          :key="item.classId"
+        >
+          <ShoppingCartListRow
+            :index="index + 1"
+            :class-id="item.classId"
+            :quantity="item.quantity"
+            @remove="handleClickRemoveButton"
+          />
+        </li>
+      </ul>
+      <footer class="mt-[1em] text-right">
+        <div class="grid grid-cols-6 items-center gap-[1em]">
+          <div class="col-start-2 sm:col-start-4 sm:col-span-1 text-gray-4a">{{ $t('shopping_cart_list_total_price') }}</div>
+          <div class="col-span-4 sm:col-span-2 text-like-green font-proxima font-[600] leading-1 text-[2em]">{{ totalNFTPrice | formatNumberWithLIKE }}</div>
+        </div>
+      </footer>
+
+      <div class="flex justify-end mt-[2em]">
+        <div class="flex flex-col items-end">
+          <ButtonV2
+            :text="$t('shopping_cart_checkout_button')"
+            preset="secondary"
+            @click="handleClickCheckoutButton"
+          />
+        </div>
+      </div>
+      <i18n
+        v-if="getAddress && isInsufficientAmount"
+        :class="['mt-[1rem]', 'font-proxima', 'text-danger', 'text-right']"
+        tag="div"
+        path="shopping_cart_error_insufficient_balance"
+      >
+        <span class="font-[600]" place="balance">{{ walletLIKEBalance | formatNumberWithLIKE }}</span>
+      </i18n>
+    </CardV2>
+
+    <CardV2
+      v-else
+      :class="[
+        'flex',
+        'flex-col',
+        'justify-center',
+        'items-center',
+        'w-full',
+        'min-h-[20vh]',
+      ]"
+    >
+      <div>{{ $t('shopping_cart_empty_notice') }}</div>
+      <ButtonV2
+        class="mt-[2em]"
+        preset="secondary"
+        :text="$t('shopping_cart_empty_notice_button')"
+        :to="localeLocation({ name: 'index' })"
+        @click="handleClickEmptyNoticeButton"
+      />
+    </CardV2>
+
+  </Page>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { TX_STATUS } from '~/constant';
+
+import { postNFTPurchase } from '~/util/api';
+import { logTrackerEvent } from '~/util/EventLogger';
+import { signGrant, broadcastTx, NFT_TYPE_FILTER_OPTIONS } from '~/util/nft';
+import { formatNumberWithLIKE } from '~/util/ui';
+
+import walletMixin from '~/mixins/wallet';
+import walletLoginMixin from '~/mixins/wallet-login';
+
+export default {
+  name: 'ShoppingCartPage',
+  filters: {
+    formatNumberWithLIKE,
+  },
+  mixins: [walletMixin, walletLoginMixin],
+  computed: {
+    ...mapGetters([
+      'getNFTClassPurchaseInfoById',
+      'getNFTClassListingInfoById',
+      'shoppingCartNFTClassList',
+    ]),
+    classIdList() {
+      return this.shoppingCartNFTClassList.map(item => item.classId);
+    },
+    totalNFTPrice() {
+      return this.shoppingCartNFTClassList.reduce((totalPrice, item) => {
+        const purchaseInfo = this.getNFTClassPurchaseInfoById(item.classId);
+        return totalPrice + purchaseInfo?.price * item.quantity;
+      }, 0);
+    },
+    grantAmount() {
+      return this.shoppingCartNFTClassList.reduce((totalPrice, item) => {
+        const purchaseInfo = this.getNFTClassPurchaseInfoById(item.classId);
+        return totalPrice + purchaseInfo?.totalPrice * item.quantity;
+      }, 0);
+    },
+    isInsufficientAmount() {
+      return (
+        this.walletLIKEBalance && this.walletLIKEBalance < this.grantAmount
+      );
+    },
+  },
+  methods: {
+    ...mapActions([
+      'clearShoppingCart',
+      'removeNFTClassFromShoppingCart',
+      'walletFetchLIKEBalance',
+      'uiSetTxError',
+      'uiSetTxStatus',
+      'uiToggleCollectModal',
+    ]),
+    handleClickRemoveButton(classId) {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'shopping_cart_remove_item',
+        this.getAddress,
+        1
+      );
+      this.removeNFTClassFromShoppingCart({ classId });
+    },
+    async handleClickCheckoutButton() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'shopping_cart_click_checkout_button',
+        this.getAddress,
+        1
+      );
+      try {
+        if (!this.getAddress || !this.getSigner) {
+          const isConnected = await this.connectWallet({
+            shouldSkipLogin: true,
+          });
+          if (!isConnected) return;
+        }
+
+        await this.walletFetchLIKEBalance();
+        if (this.isInsufficientAmount) {
+          this.uiToggleCollectModal({
+            classId: this.classIdList,
+            status: TX_STATUS.INSUFFICIENT,
+          });
+          this.uiSetTxError('INSUFFICIENT_BALANCE');
+          return;
+        }
+
+        this.uiToggleCollectModal({
+          classId: this.classIdList,
+          status: TX_STATUS.SIGN,
+        });
+
+        const signData = await signGrant({
+          senderAddress: this.getAddress,
+          amountInLIKE: this.grantAmount,
+          signer: this.getSigner,
+        });
+
+        this.uiSetTxStatus(TX_STATUS.PROCESSING);
+
+        const { txHash, code } = await broadcastTx(signData, this.getSigner);
+        if (code !== 0) {
+          throw new Error(`TX_FAILED_WITH_CODE_${code}`);
+        }
+        if (!txHash) {
+          throw new Error('TX_FAILED_WITHOUT_TX_HASH');
+        }
+
+        await this.$api.post(
+          postNFTPurchase({
+            txHash,
+            classId: this.classIdList,
+            ts: Date.now(),
+          })
+        );
+
+        this.$router.replace(
+          this.localeLocation({
+            name: 'id',
+            params: { id: this.getAddress },
+            // NOTE: Filter Writing NFTs for users to see the NFTs they just purchased
+            query: { type: NFT_TYPE_FILTER_OPTIONS.WRITING_NFT },
+          })
+        );
+        this.clearShoppingCart();
+        this.uiSetTxStatus(TX_STATUS.COMPLETED);
+      } catch (error) {
+        this.uiSetTxError(error.response?.data || error.toString());
+        this.uiSetTxStatus(TX_STATUS.FAILED);
+      } finally {
+        this.walletFetchLIKEBalance();
+      }
+    },
+    handleClickEmptyNoticeButton() {
+      logTrackerEvent(
+        this,
+        'NFT',
+        'shopping_cart_click_empty_notice_button',
+        this.getAddress,
+        1
+      );
+    },
+  },
+};
+</script>
diff --git a/src/plugins/nuxt-client-init.client.js b/src/plugins/nuxt-client-init.client.js
new file mode 100644
index 000000000..aeb8f2406
--- /dev/null
+++ b/src/plugins/nuxt-client-init.client.js
@@ -0,0 +1,3 @@
+export default async context => {
+  await context.store.dispatch('nuxtClientInit', context);
+};
diff --git a/src/store/index.js b/src/store/index.js
index 8c74f7419..e3ee2829c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -34,6 +34,9 @@ const createStore = () =>
         }
         if (res.timing) res.timing.end('store_init');
       },
+      nuxtClientInit({ dispatch }) {
+        dispatch('loadShoppingCart');
+      },
     },
     modules: {
       ui,
diff --git a/src/store/modules/nft.js b/src/store/modules/nft.js
index d459b4d2e..92c0e12f1 100644
--- a/src/store/modules/nft.js
+++ b/src/store/modules/nft.js
@@ -17,8 +17,16 @@ import {
   formatNFTClassInfo,
 } from '~/util/nft';
 import { catchAxiosError } from '~/util/misc';
+import {
+  loadShoppingCartFromStorage,
+  saveShoppingCartToStorage,
+} from '~/util/shopping-cart';
 import { getGemLevelBySoldCount } from '~/util/writing-nft';
-import { LIKECOIN_NFT_HIDDEN_ITEMS, NFT_DISPLAY_STATE } from '~/constant';
+import {
+  BATCH_COLLECT_MAX,
+  LIKECOIN_NFT_HIDDEN_ITEMS,
+  NFT_DISPLAY_STATE,
+} from '~/constant';
 import * as TYPES from '../mutation-types';
 
 const typeOrder = {
@@ -39,6 +47,7 @@ const state = () => ({
   userNFTClassDisplayStateSetsMap: {},
   userLastCollectedTimestampMap: {},
   nftBookStorePricesByClassIdMap: {},
+  shoppingCartNFTClassByIdMap: {},
 });
 
 const mutations = {
@@ -99,6 +108,27 @@ const mutations = {
   ) {
     Vue.set(state.nftBookStorePricesByClassIdMap, classId, prices);
   },
+  [TYPES.SHOPPING_CART_ADD_NFT_CLASS](state, { classId }) {
+    let item = state.shoppingCartNFTClassByIdMap[classId];
+    if (!item) {
+      item = {
+        timestamp: Date.now(),
+        quantity: 1,
+      };
+    } else {
+      item = {
+        ...item,
+        quantity: item.quantity + 1,
+      };
+    }
+    Vue.set(state.shoppingCartNFTClassByIdMap, classId, item);
+  },
+  [TYPES.SHOPPING_CART_REMOVE_NFT_CLASS](state, { classId }) {
+    Vue.delete(state.shoppingCartNFTClassByIdMap, classId);
+  },
+  [TYPES.SHOPPING_CART_REPLACE_ALL_NFT_CLASS](state, map) {
+    state.shoppingCartNFTClassByIdMap = map;
+  },
 };
 
 function compareNFTByFeatured(getters, address, classIdA, classIdB) {
@@ -317,6 +347,15 @@ const getters = {
         if (!aIsWritingNFT && bIsWritingNFT) return 1;
         return b.timestamp - a.timestamp;
       }),
+  shoppingCartNFTClassList: state => {
+    const list = [...Object.entries(state.shoppingCartNFTClassByIdMap)].map(
+      ([classId, data]) => ({ classId, ...data })
+    );
+    list.sort((a, b) => a.timestamp - b.timestamp);
+    return list;
+  },
+  getShoppingCartNFTClassQuantity: state => classId =>
+    state.shoppingCartNFTClassByIdMap[classId]?.quantity || 0,
 };
 
 const actions = {
@@ -641,6 +680,37 @@ const actions = {
       prices: data.prices,
     });
   },
+  addNFTClassToShoppingCart({ commit, dispatch, getters }, { classId }) {
+    if (getters.shoppingCartNFTClassList.length >= BATCH_COLLECT_MAX) {
+      return;
+    }
+    commit(TYPES.SHOPPING_CART_ADD_NFT_CLASS, { classId });
+    dispatch('saveShoppingCart');
+  },
+  addNFTClassesToShoppingCart({ commit, dispatch }, { classIds }) {
+    commit(TYPES.SHOPPING_CART_REPLACE_ALL_NFT_CLASS, {});
+    classIds.slice(0, BATCH_COLLECT_MAX).forEach(classId => {
+      commit(TYPES.SHOPPING_CART_ADD_NFT_CLASS, { classId });
+    });
+    dispatch('saveShoppingCart');
+  },
+  removeNFTClassFromShoppingCart({ commit, dispatch }, { classId }) {
+    commit(TYPES.SHOPPING_CART_REMOVE_NFT_CLASS, { classId });
+    dispatch('saveShoppingCart');
+  },
+  clearShoppingCart({ commit, dispatch }) {
+    commit(TYPES.SHOPPING_CART_REPLACE_ALL_NFT_CLASS, {});
+    dispatch('saveShoppingCart');
+  },
+  saveShoppingCart({ state }) {
+    saveShoppingCartToStorage(state.shoppingCartNFTClassByIdMap);
+  },
+  loadShoppingCart({ commit }) {
+    commit(
+      TYPES.SHOPPING_CART_REPLACE_ALL_NFT_CLASS,
+      loadShoppingCartFromStorage()
+    );
+  },
 };
 
 export default {
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 6437a73a3..5c1673601 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -14,6 +14,10 @@ export const NFT_SET_USER_LAST_COLLECTED_TIMESTAMP_MAP =
   'NFT_SET_USER_LAST_COLLECTED_TIMESTAMP_MAP';
 export const NFT_BOOK_STORE_PRICES_BY_CLASS_ID_MAP_SET =
   'NFT_BOOK_STORE_PRICES_BY_CLASS_ID_MAP_SET';
+export const SHOPPING_CART_ADD_NFT_CLASS = 'SHOPPING_CART_ADD_NFT_CLASS';
+export const SHOPPING_CART_REMOVE_NFT_CLASS = 'SHOPPING_CART_REMOVE_NFT_CLASS';
+export const SHOPPING_CART_REPLACE_ALL_NFT_CLASS =
+  'SHOPPING_CART_REPLACE_ALL_NFT_CLASS';
 
 export const STATIC_SET_USER_INFO = 'STATIC_SET_USER_INFO';
 export const STATIC_SET_USER_INFO_FETCHING = 'STATIC_SET_USER_INFO_FETCHING';
diff --git a/src/util/shopping-cart.js b/src/util/shopping-cart.js
new file mode 100644
index 000000000..7e3cd4476
--- /dev/null
+++ b/src/util/shopping-cart.js
@@ -0,0 +1,21 @@
+const STORAGE_KEY = 'liker_land_shopping-cart';
+
+export function saveShoppingCartToStorage(items) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to save shopping cart to local storage', e);
+  }
+}
+
+export function loadShoppingCartFromStorage() {
+  let cart;
+  try {
+    cart = JSON.parse(localStorage.getItem(STORAGE_KEY));
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to load shopping cart from local storage', e);
+  }
+  return cart || {};
+}