From 136021ce328232c83c0a8ace79fe0ae800a06a40 Mon Sep 17 00:00:00 2001
From: Oleksii Savchuk <savchukoleksii@gmail.com>
Date: Tue, 9 Feb 2021 20:08:05 +0200
Subject: [PATCH 1/2] Update id selector logic. Add custom selectors option

---
 .../theme-product-form/theme-product-form.js  | 71 ++++++++++++-------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/packages/theme-product-form/theme-product-form.js b/packages/theme-product-form/theme-product-form.js
index 3b92ab9..53d669a 100644
--- a/packages/theme-product-form/theme-product-form.js
+++ b/packages/theme-product-form/theme-product-form.js
@@ -46,27 +46,47 @@ export function ProductForm(element, product, options) {
 
   options = options || {};
 
-  this._listeners = new Listeners();
-  this._listeners.add(
-    this.element,
-    'submit',
-    this._onSubmit.bind(this, options)
-  );
+  if(options.selectors) {
+    selectors = {
+      idInput: options.selectors.idInput || selectors.idInput,
+      optionInput: options.selectors.optionInput || selectors.optionInput,
+      quantityInput: options.selectors.quantityInput || selectors.quantityInput,
+      propertyInput: options.selectors.propertyInput || selectors.propertyInput
+    };
+  }
 
+  this._idInput = this.element.querySelector(selectors.idInput);
+  if(!this._idInput) {
+    throw new Error("element must contain id input");
+  }
+
+  this._listeners = new Listeners();
   this.optionInputs = this._initInputs(
     selectors.optionInput,
-    options.onOptionChange
+    this._onOptionChange.bind(this, options)
   );
 
-  this.quantityInputs = this._initInputs(
-    selectors.quantityInput,
-    options.onQuantityChange
-  );
+  if(options.onFormSubmit) {
+    this._listeners.add(
+      this.element,
+      'submit',
+      this._onSubmit.bind(this, options)
+    );
+  }
 
-  this.propertyInputs = this._initInputs(
-    selectors.propertyInput,
-    options.onPropertyChange
-  );
+  if (options.onQuantityChange) {
+    this.quantityInputs = this._initInputs(
+      selectors.quantityInput,
+      options.onQuantityChange
+    );
+  }
+
+  if (options.onPropertyChange) {
+    this.propertyInputs = this._initInputs(
+      selectors.propertyInput,
+      options.onPropertyChange
+    );
+  }
 }
 
 /**
@@ -132,17 +152,20 @@ ProductForm.prototype.quantity = function() {
 
 // Private Methods
 // -----------------------------------------------------------------------------
-ProductForm.prototype._setIdInputValue = function(value) {
-  var idInputElement = this.element.querySelector(selectors.idInput);
-
-  if (!idInputElement) {
-    idInputElement = document.createElement('input');
-    idInputElement.type = 'hidden';
-    idInputElement.name = 'id';
-    this.element.appendChild(idInputElement);
+ProductForm.prototype._setIdInputValue = function (value) {
+  this._idInput.value = value.toString();
+};
+
+ProductForm.prototype._onOptionChange = function (options, event) {
+  event.dataset = this._getProductFormEventData();
+
+  if (event.dataset.variant) {
+    this._setIdInputValue(event.dataset.variant.id);
   }
 
-  idInputElement.value = value.toString();
+  if (options.onOptionChange) {
+    options.onOptionChange(event);
+  }
 };
 
 ProductForm.prototype._onSubmit = function(options, event) {

From ed66366a6e0e38452f26cecafd3ae4e57da315c5 Mon Sep 17 00:00:00 2001
From: Oleksii Savchuk <savchukoleksii@gmail.com>
Date: Tue, 9 Feb 2021 22:43:26 +0200
Subject: [PATCH 2/2] Fix tests

---
 packages/theme-product-form/__tests__/theme-product-form.test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/theme-product-form/__tests__/theme-product-form.test.js b/packages/theme-product-form/__tests__/theme-product-form.test.js
index 4c414de..5d6c065 100644
--- a/packages/theme-product-form/__tests__/theme-product-form.test.js
+++ b/packages/theme-product-form/__tests__/theme-product-form.test.js
@@ -42,6 +42,7 @@ beforeEach(() => {
       <option value="110 Volts">110 Volts</option>
     </select>
 
+    <input type="text" name="id" value="20230103745" />
     <input type="radio" name="options[Size]" value="Small" checked />
     <input type="radio" name="options[Size]" value="Large" />