Переопределение сложной модели просмотра

Я пытаюсь заменить некоторый текст в поле ввода с помощью JS, но модель представления переопределяет мои команды каждый раз. Это HTML, который я начинаю с:

<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
    <input type="hidden" name="product[variants][][price]" id="product_variants__price" value="25.00" bind="price" data-dirty-trigger="true">
    <input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric" bind-event-focus="onFocus(this)" bind-event-blur="onBlur(this)" bind-event-input="onInput(this)">
</td>

Я запускаю этот JS:

jQuery('#product_variants__price').siblings().removeAttr('bind-event-focus');
jQuery('#product_variants__price').siblings().removeAttr('bind-event-input');
jQuery('#product_variants__price').siblings().removeAttr('bind-event-blur');
jQuery('#product_variants__price').siblings().focus()
jQuery('#product_variants__price').siblings().val("34.00");
jQuery('#product_variants__price').val("34.00");

И я остался со следующим HTML:

<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
    <input type="hidden" name="product[variants][][price]" id="product_variants__price" value="34.00" bind="price" data-dirty-trigger="true">
    <input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric">
</td>

Проблема заключается в том, что каждый раз, когда я нажимаю поле ввода, значение возвращается к тому, что было при загрузке страницы.

Я также попытался запустить команду в родительском td вместе с моим изменением значения, чтобы имитировать редактирование варианта и предотвращать по умолчанию без успеха:

jQuery('#product_variants__price').siblings().bind('input', function (e) {
    e.preventDefault();
    return false;
});
jQuery('#product_variants__price').siblings().bind('focus', function (e) {
    e.preventDefault();
    return false;
});
jQuery('#product_variants__price').siblings().focus()
jQuery('#product_variants__price').siblings().val("£34.00");
jQuery('#product_variants__price').val("£34.00");
jQuery('#product_variants__price').siblings().keydown()

Родительская функция td:

new Shopify.EditVariantPrice(jQuery('#product_variants__price').parent())

Итак, как я могу успешно изменить это значение на входах, а также обновить модель вида "Просмотр"?

Вы можете попробовать это для себя, перейдя сюда:

https://jebus333.myshopify.com/admin/products/2521183043

Войти [email protected] магазин паролей1

EDIT: я попытался найти модель просмотра на странице, но без успеха. Кроме того, нет сетевых вызовов при редактировании значений в полях ввода, что заставляет меня думать, что значения отбрасываются где-то на странице.

Ответ 1

Попробуйте следующее:

var old = Shopify.EditVariantPrice.prototype.onFocus;
Shopify.EditVariantPrice.prototype.onFocus = function(t) { 
  this.price = '50.00'; // Use the price you want here
  old.call(this, t); 
};
jQuery('#product_variants__price').siblings().triggerHandler("focus");
jQuery('#product_variants__price').siblings().triggerHandler("blur");

Если это сработает для вас, возможно, что будет достаточно следующего:

Shopify.EditVariantPrice.prototype.onFocus = function(t) { 
  this.price = '50.00'; // Use the price you want here
};

Ответ 2

Ну, есть своего рода грязное решение...

Прежде всего вам понадобится плагин sendkeys. На самом деле это означает, что вам нужно включить this и this JS-библиотеки (вы можете просто скопировать их в консоль для тестирования). Если вы не хотите использовать первую библиотеку (я лично считаю ее довольно большой для такой маленькой вещи), вы можете извлечь из нее только ключевые вещи и использовать только их.

Следующим шагом будет создание функции, которая будет действовать как настоящий пользователь:

function input(field, desiredValue) {
  // get the currency symbol while value is still pristine
  var currency = field.val()[0];

  // move focus to the input
  field.click().focus();

  // remove all symbols from the input. I took 10, but of course you can use value.length instead
  for (var i = 0; i < 10; i++) field.sendkeys("{backspace}");

  // send the currency key
  field.sendkeys(currency);

  // send the desired value symbol-by-symbol
  for (var i = 0; i < desiredValue.length; i++) field.sendkeys(desiredValue[i]);
}

Затем вы можете просто вызвать его со значением, которое вы хотите назначить:

input($("#product_variants__price").next(), "123.00");

Мне действительно не удалось подделать событие размытия из-за нехватки времени; поэтому я был вынужден прочитать валюту и передать .00 как строку. В любом случае у вас уже есть способ пойти и довольно эффективное решение.

Ответ 3

Похоже, вы пытаетесь автоматизировать редактирование вариантов цен на продукты в панели администратора Shopify.

Вместо того, чтобы играть с DOM страницы Shopify admin, я предлагаю использовать редактор объемного продукта Shopify, который позволяет устанавливать цены всех вариантов на одном экране. Я чувствую, что вам удастся установить варианты цены с помощью JavaScript на странице редактора массового продукта.

Нажав на кнопку "Редактировать продукты", как показано на скриншоте ниже, откроется редактор массового продукта.

Также проверьте, могут ли с вашей помощью использовать макросы для записи на основе браузера, такие как iMacro (вы также можете скопировать макросы с помощью JS в iMacro).