feat: Add support for external products

woonuxt_base/app/pages/product/[slug].vue

@@ -21,6 +21,7 @@ const indexOfTypeAny = ref<number[]>([]);
 const attrValues = ref();
 const isSimpleProduct = computed<boolean>(() => product.value?.type === ProductTypesEnum.SIMPLE);
 const isVariableProduct = computed<boolean>(() => product.value?.type === ProductTypesEnum.VARIABLE);
+const isExternalProduct = computed<boolean>(() => product.value?.type === ProductTypesEnum.EXTERNAL);
 
 const type = computed(() => activeVariation.value || product.value);
 const selectProductInput = computed<any>(() => ({ productId: type.value?.databaseId, quantity: quantity.value })) as ComputedRef<AddToCartInput>;
@@ -103,12 +104,12 @@ const disabledAddToCart = computed(() => {
             <ProductPrice class="text-xl" :sale-price="type.salePrice" :regular-price="type.regularPrice" />
           </div>
 
-          <div class="grid gap-2 my-8 text-sm">
-            <div class="flex items-center gap-2">
+          <div class="grid gap-2 my-8 text-sm empty:hidden">
+            <div v-if="!isExternalProduct" class="flex items-center gap-2">
               <span class="text-gray-400">{{ $t('messages.shop.availability') }}: </span>
               <StockStatus :stockStatus @updated="mergeLiveStockStatus" />
             </div>
-            <div class="flex items-center gap-2" v-if="storeSettings.showSKU">
+            <div class="flex items-center gap-2" v-if="storeSettings.showSKU && product.sku">
               <span class="text-gray-400">{{ $t('messages.shop.sku') }}: </span>
               <span>{{ product.sku || 'N/A' }}</span>
             </div>
@@ -120,13 +121,15 @@ const disabledAddToCart = computed(() => {
 
           <form @submit.prevent="addToCart(selectProductInput)">
             <AttributeSelections
-              v-if="product.type == 'VARIABLE' && product.attributes && product.variations"
+              v-if="isVariableProduct && product.attributes && product.variations"
               class="mt-4 mb-8"
               :attributes="product.attributes.nodes"
               :defaultAttributes="product.defaultAttributes"
               :variations="product.variations.nodes"
               @attrs-changed="updateSelectedVariations" />
-            <div class="fixed bottom-0 left-0 z-10 flex items-center w-full gap-4 p-4 mt-12 bg-white md:static md:bg-transparent bg-opacity-90 md:p-0">
+            <div
+              v-if="isVariableProduct || isSimpleProduct"
+              class="fixed bottom-0 left-0 z-10 flex items-center w-full gap-4 p-4 mt-12 bg-white md:static md:bg-transparent bg-opacity-90 md:p-0">
               <input
                 v-model="quantity"
                 type="number"
@@ -135,6 +138,13 @@ const disabledAddToCart = computed(() => {
                 class="bg-white border rounded-lg flex text-left p-2.5 w-20 gap-4 items-center justify-center focus:outline-none" />
               <AddToCartButton class="flex-1 w-full md:max-w-xs" :disabled="disabledAddToCart" :class="{ loading: isUpdatingCart }" />
             </div>
+            <a
+              v-if="isExternalProduct && product.externalUrl"
+              :href="product.externalUrl"
+              target="_blank"
+              class="rounded-lg flex font-bold bg-gray-800 text-white text-center min-w-[150px] p-2.5 gap-4 items-center justify-center focus:outline-none">
+              {{ product?.buttonText || 'View product' }}
+            </a>
           </form>
 
           <div v-if="storeSettings.showProductCategoriesOnSingleProduct && product.productCategories">

woonuxt_base/app/queries/fragments/CartFragment.gql

@@ -36,6 +36,7 @@ fragment Cart on Cart {
           type
           ...SimpleProduct
           ...VariableProduct
+          ...ExternalProduct
         }
       }
       variation {

woonuxt_base/app/queries/fragments/ExternalProduct.gql

@@ -0,0 +1,4 @@
+fragment ExternalProduct on ExternalProduct {
+  externalUrl
+  buttonText
+}

woonuxt_base/app/queries/getProduct.gql

@@ -34,10 +34,12 @@ query getProduct($slug: ID!) {
     ...Terms
     ...SimpleProduct
     ...VariableProduct
+    ...ExternalProduct
     related(first: 5) {
       nodes {
         ...SimpleProduct
         ...VariableProduct
+        ...ExternalProduct
       }
     }
     reviews {

woonuxt_base/app/queries/getProducts.gql

@@ -2,7 +2,7 @@ query getProducts($after: String, $slug: [String], $first: Int = 9999, $orderby:
   products(
     first: $first
     after: $after
-    where: { categoryIn: $slug, typeNotIn: EXTERNAL, visibility: VISIBLE, minPrice: 0, orderby: { field: $orderby, order: DESC }, status: "publish" }
+    where: { categoryIn: $slug, visibility: VISIBLE, minPrice: 0, orderby: { field: $orderby, order: DESC }, status: "publish" }
   ) {
     pageInfo {
       hasNextPage
@@ -20,6 +20,7 @@ query getProducts($after: String, $slug: [String], $first: Int = 9999, $orderby:
       ...ProductCategories
       ...SimpleProduct
       ...VariableProduct
+      ...ExternalProduct
     }
   }
 }

woonuxt_base/app/types/index.d.ts

@@ -6,9 +6,10 @@ type Order = import('#gql').OrderFragmentFragment;
 type ProductBase = import('#gql').GetProductQuery['product'];
 type SimpleProduct = import('#gql').SimpleProductFragment;
 type VariableProduct = import('#gql').VariableProductFragment;
+type ExternalProduct = import('#gql').ExternalProductFragment;
 type DownloadableItem = import('#gql').DownloadableItemFragment;
 type ProductCategory = import('#gql').ProductCategoryFragment;
-type Product = ProductBase & SimpleProduct & VariableProduct;
+type Product = ProductBase & SimpleProduct & VariableProduct & ExternalProduct;
 type Address = import('#gql').AddressFragment;
 type Terms = import('#gql').TermsFragment;
 type VariationAttribute = import('#gql').VariationAttributeFragment;