कठिन दृश्य मॉडल ओवरराइड करना

Question

मैं जेएस का उपयोग कर इनपुट फ़ील्ड में कुछ पाठ को प्रतिस्थापित करने की कोशिश कर रहा हूं लेकिन दृश्य मॉडल प्रत्येक बार मेरे आदेशों को ओवरराइड करता है। यह 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> 

मैं इस जेएस चलाएँ:

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> 

समस्या हर बार है मैं इनपुट फ़ील्ड पर क्लिक करता हूं, जब पृष्ठ लोड होता है तो उस मूल्य को वापस कर दिया जाता है।

मैं अपने मूल्य परिवर्तन के साथ ही माता-पिता टीडी में आदेश चलाकर, एक प्रकार का संपादन अनुकरण करने के लिए और कोई सफलता के साथ डिफ़ॉल्ट को रोकने की कोशिश की है:

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() 

जनक टीडी समारोह:

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

तो मैं इनपुट में इस मान को सफलतापूर्वक कैसे संपादित कर सकता हूं और Shopify व्यू मॉडल को भी अपडेट कर सकता हूं?

आप यहाँ जा रहा द्वारा खुद के लिए यह कोशिश कर सकते हैं:

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

लॉगिन jebus333@mailinator.com पासवर्ड shop1

संपादित करें: मैं खोजने के लिए कोशिश की है पृष्ठ पर मॉडल देखें लेकिन बिना किसी सफलता के। इसके अलावा, इनपुट फ़ील्ड्स में मानों को संपादित करते समय कोई नेटवर्क कॉल नहीं होती है, जिससे मुझे विश्वास होता है कि पृष्ठ पर कहीं से मूल्यों को वापस खींच लिया जा रहा है।

Answer 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 
}; 

Answer 2

ठीक है, वहाँ एक गंदा समाधान का एक प्रकार है ...

सबसे पहले आप एक sendkeys प्लगइन की आवश्यकता होगी। वास्तव में इसका मतलब है कि आपको this और this जेएस पुस्तकालयों को शामिल करने की आवश्यकता होगी (आप उन्हें कंसोल में कॉपी करने के लिए प्रतिलिपि बना सकते हैं)। यदि आप पहली लाइब्रेरी का उपयोग नहीं करना चाहते हैं (मुझे व्यक्तिगत रूप से इस तरह की छोटी चीज़ के लिए काफी बड़ा लगता है) तो आप केवल मुख्य चीजों को निकाल सकते हैं और केवल उनका उपयोग कर सकते हैं।

अगले कदम समारोह है जो एक वास्तविक उपयोगकर्ता की तरह काम करने के लिए जा रहा है पैदा कर रही है:

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

मैं:

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]); 
} 

तो फिर तुम बस मूल्य के साथ यह कॉल कर सकते हैं, जिन्हें आप निर्दिष्ट करना चाहते हैं समय की कमी के कारण वास्तव में नकली धुंध घटना का प्रबंधन नहीं किया था; यही कारण है कि मुझे मुद्रा को पढ़ने और .00 को स्ट्रिंग के रूप में पास करने के लिए मजबूर होना पड़ा। वैसे भी आपके पास पहले से ही जाने का एक तरीका है और एक काफी कामकाजी समाधान है।

Answer 3

ऐसा लगता है आप उत्पादों के संस्करण की कीमतों के संपादन स्वचालित करने के लिए कोशिश कर रहे हैं Shopify के व्यवस्थापक पैनल में।

Shopify के व्यवस्थापक पृष्ठ के DOM के साथ खेलने के बजाए, मैं Shopify के थोक उत्पाद संपादक का उपयोग करने का सुझाव दूंगा जो आपको एक ही स्क्रीन में सभी प्रकार की कीमतों को सेट करने देता है। मुझे लगता है कि थोक उत्पाद संपादक पृष्ठ पर जावास्क्रिप्ट का उपयोग करके वेरिएंट कीमतों को सेट करने के लिए आपको बेहतर भाग्य मिलेगा।

नीचे दिए गए स्क्रीनशॉट में दिखाए गए 'उत्पाद संपादित करें' बटन पर क्लिक करने से थोक उत्पाद संपादक खुल जाएगा।

यह भी जांच iMacro की तरह ब्राउज़र आधारित मैक्रो रिकॉर्डिंग प्लगइन्स आपकी मदद की हो सकती है यदि (आप कर सकते हैं iMacro में जे एस के साथ भी कोड मैक्रो)।