Refactor

w3bdesign · Jul 9, 2023 · 27c97dc · 27c97dc
1 parent 551850d
commit 27c97dc
Showing 1 changed file with 37 additions and 39 deletions.
diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
@@ -1,43 +1,41 @@
 <template>
-  <div>
-    <div v-if="data.cart?.contents?.nodes?.length">
-      <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
-      <section class="mt-10">
-        <div
-          v-for="products in data.cart.contents.nodes"
-          :key="products.id"
-          class="container mx-auto mt-4 flex-container"
-        >
-          <div class="item">
-            <span class="block mt-2 font-extrabold">Remove: <br /></span>
-            <span class="item-content">
-              <nuxt-img
-                class="mt-2 ml-4 cursor-pointer"
-                :class="{ removing: isRemoving }"
-                alt="Remove icon"
-                aria-label="Remove"
-                src="/svg/Remove.svg"
-                @click="handleRemoveProduct(products)"
-              />
-            </span>
-          </div>
-          <div class="item">
-            <span class="block mt-2 font-extrabold">Name: <br /></span>
-            <span class="item-content">{{ products.product.node.name }}</span>
-          </div>
-          <div class="item">
-            <span class="block mt-2 font-extrabold">Quantity: <br /> </span>
-            <span class="item-content">
-              {{ products.quantity }}
-            </span>
-          </div>
-          <div class="item">
-            <span class="block mt-2 font-extrabold">Subtotal: <br /></span>
-            <span class="item-content"> {{ products.total }} </span>
-          </div>
+  <template v-if="data.cart?.contents?.nodes?.length">
+    <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
+    <section class="mt-10">
+      <div
+        v-for="products in data.cart.contents.nodes"
+        :key="products.id"
+        class="container mx-auto mt-4 flex-container"
+      >
+        <div class="item">
+          <span class="block mt-2 font-extrabold">Remove: <br /></span>
+          <span class="item-content">
+            <nuxt-img
+              class="mt-2 ml-4 cursor-pointer"
+              :class="{ removing: isRemoving }"
+              alt="Remove icon"
+              aria-label="Remove"
+              src="/svg/Remove.svg"
+              @click="handleRemoveProduct(products)"
+            />
+          </span>
         </div>
-      </section>
-    </div>
+        <div class="item">
+          <span class="block mt-2 font-extrabold">Name: <br /></span>
+          <span class="item-content">{{ products.product.node.name }}</span>
+        </div>
+        <div class="item">
+          <span class="block mt-2 font-extrabold">Quantity: <br /> </span>
+          <span class="item-content">
+            {{ products.quantity }}
+          </span>
+        </div>
+        <div class="item">
+          <span class="block mt-2 font-extrabold">Subtotal: <br /></span>
+          <span class="item-content"> {{ products.total }} </span>
+        </div>
+      </div>
+    </section>
     <h2
       v-if="!data.cart?.contents?.nodes?.length"
       class="mt-64 text-3xl text-center"
@@ -50,7 +48,7 @@
       center-button
       >CHECKOUT</CommonButton
     >
-  </div>
+  </template>
 </template>
 
 <script setup>