Replace div with template

Author: w3bdesign

components/Products/ProductsShowAll.vue

@@ -1,22 +1,13 @@
 <template>
-  <div v-if="allCategoryProducts?.productCategory?.products?.nodes">
+  <template v-if="allCategoryProducts?.productCategory?.products?.nodes">
     <section>
       <div id="product-container" class="flex flex-wrap items-center">
-        <template
-          v-for="product in allCategoryProducts.productCategory.products.nodes"
-        >
-          <div
-            v-if="product.slug"
-            :key="product.id"
-            class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4"
-          >
-            <NuxtLink
-              class="text-black cursor-pointer hover:underline"
-              :to="{
-                path: '/product/' + product.slug,
-                query: { id: product.databaseId },
-              }"
-            >
+        <template v-for="product in allCategoryProducts.productCategory.products.nodes">
+          <div v-if="product.slug" :key="product.id" class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4">
+            <NuxtLink class="text-black cursor-pointer hover:underline" :to="{
+              path: '/product/' + product.slug,
+              query: { id: product.databaseId },
+            }">
               <ProductImage :alt="product.name" :src="productImage(product)" />
 
               <div class="flex justify-center pt-3">
@@ -28,14 +19,12 @@
             <div v-if="product.onSale" class="flex justify-center mt-2">
               <div class="text-lg text-gray-900 line-through">
                 <span v-if="product.variations">
-                  {{ filteredVariantPrice(product.price, "right") }}</span
-                >
+                  {{ filteredVariantPrice(product.price, "right") }}</span>
                 <span v-else>{{ product.regularPrice }}</span>
               </div>
               <div class="ml-4 text-xl text-gray-900">
                 <span v-if="product.variations">
-                  {{ filteredVariantPrice(product.price) }}</span
-                >
+                  {{ filteredVariantPrice(product.price) }}</span>
                 <span v-else>{{ product.salePrice }}</span>
               </div>
             </div>
@@ -48,35 +37,24 @@
         </template>
       </div>
     </section>
-  </div>
+  </template>
   <div v-else>
     <section>
       <div id="product-container" class="flex flex-wrap items-center">
         <template v-for="product in allProducts.products.nodes">
-          <div
-            v-if="product.slug"
-            :key="product.id"
-            class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4"
-          >
-            <NuxtLink
-              class="text-black cursor-pointer hover:underline"
-              :to="{
-                path: '/product/' + product.slug,
-                query: { id: product.databaseId },
-              }"
-            >
+          <div v-if="product.slug" :key="product.id" class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4">
+            <NuxtLink class="text-black cursor-pointer hover:underline" :to="{
+              path: '/product/' + product.slug,
+              query: { id: product.databaseId },
+            }">
               <ProductImage :alt="product.name" :src="productImage(product)" />
               <div class="flex justify-center pt-3">
                 <p class="text-2xl font-bold text-center cursor-pointer">
                   {{ product.name }}
                 </p>
               </div>
             </NuxtLink>
-            <ProductPrice
-              :product="product"
-              priceFontSize="normal"
-              :shouldCenterPrice="true"
-            />
+            <ProductPrice :product="product" priceFontSize="normal" :shouldCenterPrice="true" />
           </div>
         </template>
       </div>