Question

我正在尝试使用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())

那么如何在输入中成功编辑此值并更新Shopify视图模型？

你可以自己试试这个：

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

登录jebus333@mailinator.com   密码shop1

编辑：我试图在页面上找到视图模型，但没有成功。另外，在编辑输入字段中的值时没有网络调用，这让我相信这些值正在从页面上的某个位置撤回。

Answer 1

嗯，有一种肮脏的解决方案......

首先，您需要一个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作为字符串传递的原因。无论如何，你已经有了一个方法，一个非常有效的解决方案。

Answer 2

试试这个：

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 个答案: