Skip to content
This repository was archived by the owner on Oct 20, 2023. It is now read-only.

Add custom selectors option. Fix theme-product-form logic #148

Open
savchukoleksii wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add custom selectors option. Fix theme-product-form logic #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
136021c
Update id selector logic. Add custom selectors option
savchukoleksii Feb 9, 2021
ed66366
Fix tests
savchukoleksii Feb 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/theme-product-form/__tests__/theme-product-form.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand Down
71 changes: 47 additions & 24 deletions packages/theme-product-form/theme-product-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}
}

/**
Expand Down Expand Up @@ -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) {
Expand Down