覆盖困难的视图模型

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

login jebus333@mailinator.com password shop1

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

Answer 1

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

首先您需要一个 sendkeys plugin. In fact that means you'll need to include this and 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
};

Answer 3

看起来您正在尝试在 Shopify 的管理面板中自动编辑产品的变体价格。

我建议不要使用 Shopify 管理页面的 DOM，而是使用 Shopify 的批量产品编辑器，它可以让您在一个屏幕中设置所有变体的价格。我觉得您最好在批量产品编辑器页面上使用 JavaScript 设置变体价格。

单击下面屏幕截图中显示的 'Edit Products' 按钮将打开批量产品编辑器。

同时检查是否有像iMacro这样的基于浏览器的宏录制插件可以为您提供帮助（您也可以在 iMacro 中使用 JS 编写宏）。

覆盖困难的视图模型

Overriding difficult view model

html

javascript

jquery

shopify