Add ability to add a product in a product relation field

src/fields/Products.php

@@ -8,10 +8,15 @@
 namespace craft\commerce\fields;
 
 use Craft;
+use craft\base\ElementInterface;
 use craft\commerce\elements\Product;
 use craft\commerce\gql\arguments\elements\Product as ProductArguments;
 use craft\commerce\gql\interfaces\elements\Product as ProductInterface;
 use craft\commerce\gql\resolvers\elements\Product as ProductResolver;
+use craft\commerce\Plugin;
+use craft\commerce\web\assets\commercecp\CommerceCpAsset;
+use craft\commerce\web\assets\productindex\ProductIndexAsset;
+use craft\elements\db\ElementQueryInterface;
 use craft\fields\BaseRelationField;
 use craft\helpers\Gql as GqlHelper;
 use craft\services\Gql as GqlService;
@@ -27,6 +32,11 @@
  */
 class Products extends BaseRelationField
 {
+    /**
+     * @inheritdoc
+     */
+    protected ?string $inputJsClass = 'Craft.Commerce.ProductSelectInput';
+
     public function __construct(array $config = [])
     {
         // Never needed and allows us to instantiate the field while ignoring old setting until the Product field migration has run.
@@ -58,6 +68,28 @@ public static function defaultSelectionLabel(): string
         return Craft::t('commerce', 'Add a product');
     }
 
+    /**
+     * @inheritdoc
+     */
+    protected function inputTemplateVariables(array|ElementQueryInterface $value = null, ?ElementInterface $element = null): array
+    {
+        Craft::$app->getView()->registerAssetBundle(CommerceCpAsset::class);
+        Craft::$app->getView()->registerAssetBundle(ProductIndexAsset::class);
+
+        $variables = parent::inputTemplateVariables($value, $element);
+
+        /** @var string[] $sources */
+        $sources = $this->getInputSources($element);
+        if (preg_match('/^productType:(.+)$/', reset($sources), $matches)) {
+            $productType = Plugin::getInstance()->getProductTypes()->getProductTypeByUid($matches[1]);
+            if ($productType) {
+                $variables['jsSettings']['productTypeId'] = (int)$productType->id;
+            }
+        }
+
+        return $variables;
+    }
+
     /**
      * @inheritdoc
      * @since 3.1.4

src/web/assets/commercecp/CommerceCpAsset.php

@@ -116,7 +116,7 @@ private function _commerceData(): array
 
         return [
             'editableProductTypes' => array_map(fn(ProductType $productType) => [
-                'id' => $productType->id,
+                'id' => (int)$productType->id,
                 'uid' => $productType->uid,
                 'name' => Craft::t('site', $productType->name),
                 'handle' => $productType->handle,

src/web/assets/commercecp/dist/commercecp.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

src/web/assets/commercecp/src/commercecp.js

@@ -14,6 +14,7 @@ import './js/CommerceOrderEdit';
 import './js/CommerceOrderIndex';
 import './js/CommercePaymentModal';
 import './js/CommerceProductSalesModal';
+import './js/CommerceProductSelectInput';
 import './js/CommerceSubscriptionIndex';
 import './js/CommerceUpdateOrderStatusModal';
 import './js/DownloadOrderPdf';

src/web/assets/commercecp/src/js/CommerceProductSelectInput.js

@@ -0,0 +1,77 @@
+if (typeof Craft.Commerce === typeof undefined) {
+  Craft.Commerce = {};
+}
+
+/**
+ * Product Select Input
+ *
+ * Extends BaseElementSelectInput to enable inline product creation
+ */
+Craft.Commerce.ProductSelectInput = Craft.BaseElementSelectInput.extend({
+  get productType() {
+    if (!this.settings.productTypeId) {
+      return null;
+    }
+
+    return Craft.Commerce.editableProductTypes.find(
+      (productType) => productType.id === this.settings.productTypeId
+    );
+  },
+
+  canCreateElements() {
+    return !!this.productType;
+  },
+
+  async createElement(title) {
+    const response = await Craft.sendActionRequest(
+      'POST',
+      'commerce/products/create',
+      {
+        data: {
+          siteId: this.settings.criteria.siteId,
+          productType: this.productType.handle,
+          title: title,
+        },
+      }
+    );
+
+    const product = response.data.product;
+
+    try {
+      await this.showElementEditor(product);
+    } catch {
+      return null;
+    }
+
+    return product.id;
+  },
+
+  showElementEditor(product) {
+    return new Promise((resolve, reject) => {
+      const slideout = Craft.createElementEditor(
+        'craft\\commerce\\elements\\Product',
+        {
+          siteId: this.settings.criteria.siteId,
+          elementId: product.id,
+          draftId: product.draftId,
+          params: {
+            fresh: 1,
+          },
+        }
+      );
+
+      let submitted = false;
+
+      slideout.on('submit', () => {
+        submitted = true;
+        resolve();
+      });
+
+      slideout.on('close', () => {
+        if (!submitted) {
+          reject();
+        }
+      });
+    });
+  },
+});