javascript - 使用 Woocommerce 中的 jQuery 计算价格更新购物车价格

Question

我正在使用以下 Javascript/JQuery 代码根据用户输入的测量值计算价格：

var linearM2was = ".002";
var linear2M2was = ".004";
var linear3M2was = ".006";


var linearM2 = ".001";
var linear2M2 = ".002";
var linear3M2 = ".003";


function calculateAreaMultipleDesktopLin() {
ga('send', 'event', 'instantPrice', 'gotInstantPrice', 'gotInstantPriceDayNightDesktop');
 var width = +document.getElementById("widthD").value;
    document.cookie = "blindWidth="+width+"; path=/";
 var height = +document.getElementById("heightD").value;
    document.cookie = "blindHeight="+height+"; path=/";
 if(document.getElementById("LMMD").checked) {
    if(width < "200"){document.getElementById("sizeCorrectionWidth").innerHTML = "min width 200mm";return false;}
    else if (width > "2400"){document.getElementById("sizeCorrectionWidth").innerHTML = "max width 2400mm";return false;}
    if(height < "600"){document.getElementById("sizeCorrectionHeight").innerHTML = "min height 600mm";return false;}
    else if (height > "3000"){document.getElementById("sizeCorrectionHeight").innerHTML = "max height 3000mm";return false;}
    var mmDevidetoM = "77";
    var mmWidth = width / mmDevidetoM;
    var mmHeight = height;
    var m2 = mmWidth * mmHeight;
     var measurmentType = "MM"; 
    document.cookie = "blindMeasurement=mm; path=/"; 
 }
 else if(document.getElementById("LCMD").checked) {
    if(width < "20"){document.getElementById("sizeCorrectionWidth").innerHTML = "min width 20cm";return false;}
    else if (width > "240"){document.getElementById("sizeCorrectionWidth").innerHTML = "max width 240cm";return false;}
    if(height < "60"){document.getElementById("sizeCorrectionHeight").innerHTML = "min height 60cm";return false;}
    else if (height > "300"){document.getElementById("sizeCorrectionHeight").innerHTML = "max height 300cm";return false;}
    var cmDevidetoM = ".77";
    var cmWidth = width / cmDevidetoM;
    var cmHeight = height;
    var m2 = cmWidth * cmHeight;
    var measurmentType = "CM"; 
    document.cookie = "blindMeasurement=cm; path=/"; 
 }
 else if(document.getElementById("LINCHESD").checked) {
    if(width < "7.87402"){document.getElementById("sizeCorrectionWidth").innerHTML = "min width 7.87inches";return false;}
    else if (width > "94.48819"){document.getElementById("sizeCorrectionWidth").innerHTML = "max width 94.48inches";return false;}
    if(height < "23.622"){document.getElementById("sizeCorrectionHeight").innerHTML = "min height 23.62inches";return false;}
    else if (height > "118.1102"){document.getElementById("sizeCorrectionHeight").innerHTML = "max height 118.11inches";return false;}
    var inDevidetoM = "3.0315";
    var inWidth = width / inDevidetoM;
    var inHeight = height / inDevidetoM;
    var m2 = inWidth * inHeight;
    var measurmentType = "INCHES"; 
    document.cookie = "blindMeasurement=in; path=/"; 
 }



 var priceTotal = m2 * linearM2;
 var priceTotal2 = m2 * linear2M2;
 var priceTotal3 = m2 * linear3M2;


 var priceTotalWas = m2 * linearM2was;
 var priceTotal2was = m2 * linear2M2was;
 var priceTotal3was = m2 * linear3M2was;


 var priceTotalMSupply = priceTotal - (priceTotal * 0.2);
 var priceTotal2ndTierMSupply = priceTotal2 - (priceTotal2 * 0.2);
 var priceTotal3rdTierMSupply = priceTotal3 - (priceTotal3 * 0.2);


 var priceTotalWasMSupply = priceTotalWas - (priceTotalWas * 0.2);
 var priceTotal2ndTierWasSupply = priceTotal2was - (priceTotal2was * 0.2);
 var priceTotal3rdTierWasSupply = priceTotal3was - (priceTotal3was * 0.2);


document.getElementById("priceCheckButtonDesktopLin").innerHTML = "GET ANOTHER INSTANT PRICE";
document.getElementById("resultMultipleDesktop").style.display = "block";
document.getElementById("widthD").value = "";
document.getElementById("heightD").value = "";

var mybr = "<span class='vc_col-sm-12' id='resultMultipleDesktop4' style='text-align: left;'><span class='vc_col-sm-4 pCheckHeader1'>PREMIER COLLECTION</span><span class='vc_col-sm-4 pCheckHeader2'>FULLY FITTED PRICE <span>£" + priceTotal.toFixed(2) + "</span></span><span class='vc_col-sm-4 pCheckHeader3'>DIRECT PRICE <span>£" + priceTotalMSupply.toFixed(2) + "</span></span></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Premier-View-Black-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotalWas.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotalWasMSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT <span class='priceCheckColour'> £" + priceTotalMSupply.toFixed(2) + "<a href='/product/premier-day-and-night-blind-black/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Premier-View-Porcelain-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotalWas.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotalWasMSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT<span class='priceCheckColour'> £" + priceTotalMSupply.toFixed(2) + "<a href='/product/premier-day-and-night-blind-porcelain/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Premier-View-Silver-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotalWas.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotalWasMSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT <span class='priceCheckColour'> £" + priceTotalMSupply.toFixed(2) + "<a href='/product/premier-day-and-night-blind-silver/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Premier-View-White-HERO-1-600x340.jpg' width='350px'>From<strike><span> £" + priceTotalWas.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotalWasMSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT<span class='priceCheckColour'> £" + priceTotalMSupply.toFixed(2) + "<a href='/product/premier-day-and-night-blind-white/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><br><span class='vc_col-sm-12' id='resultMultipleDesktop4' style='text-align: left;'><span class='vc_col-sm-4 pCheckHeader1'>SIGNATURE COLLECTION</span><span class='vc_col-sm-4 pCheckHeader2'>FULLY FITTED PRICE <span>£" + priceTotal2.toFixed(2) + "</span></span><span class='vc_col-sm-4 pCheckHeader3'>DIRECT PRICE <span>£" + priceTotal2ndTierMSupply.toFixed(2) + "</span></span></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Seasons-Antractitic-Hero-600x340.jpg' width='350px'>From<strike><span style='color:#000;'> £" + priceTotal2was.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal2.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><hr>From<strike><span> £" + priceTotal2ndTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT<span class='priceCheckColour'> £" + priceTotal2ndTierMSupply.toFixed(2) + "<a href='/product/seasons-day-and-night-blind-antractic/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Seasons-Grey-Hero-600x340.jpg' width='350px'>From<strike><span> £" + priceTotal2was.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal2.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><hr>From<strike><span> £" + priceTotal2ndTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT <span class='priceCheckColour'> £" + priceTotal2ndTierMSupply.toFixed(2) + "<a href='/product/seasons-day-and-night-blind-grey/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Seasons-Ice-White-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotal2was.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal2.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><hr>From<strike><span> £" + priceTotal2ndTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT<span class='priceCheckColour'> £" + priceTotal2ndTierMSupply.toFixed(2) + "<a href='/product/seasons-day-and-night-blind-ice-white/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Seasons-Ivory-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotal2was.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal2.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><hr>From<strike><span> £" + priceTotal2ndTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT<span class='priceCheckColour'> £" + priceTotal2ndTierMSupply.toFixed(2) + "<a href='/product/seasons-day-and-night-blind-ivory/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><br><span class='vc_col-sm-12' id='resultMultipleDesktop4' style='text-align: left;'><span class='vc_col-sm-4 pCheckHeader1'>DESIGNER COLLECTION</span><span class='vc_col-sm-4 pCheckHeader2'>FULLY FITTED PRICE <span>£" + priceTotal3.toFixed(2) + "</span></span><span class='vc_col-sm-4 pCheckHeader3'>DIRECT PRICE <span>£" + priceTotal3rdTierMSupply.toFixed(2) + "</span></span></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Dixie-Grey-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotal3was.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal3.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotal3rdTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT<span class='priceCheckColour'> £" + priceTotal3rdTierMSupply.toFixed(2) + "<a href='/product/dixie-day-and-night-blind-grey/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Dixie-Ice-White-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotal3was.toFixed(2) + "</span> </strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal3.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotal3rdTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT <span class='priceCheckColour'> £" + priceTotal3rdTierMSupply.toFixed(2) + "<a href='/product/dixie-day-and-night-blind-ice-white/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Dixie-Light-Grey-HERO-600x340.jpg' width='350px'>From<strike><span> £" + priceTotal3was.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal3.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotal3rdTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT<span class='priceCheckColour'> £" + priceTotal3rdTierMSupply.toFixed(2) + "<a href='/product/dixie-day-and-night-blind-light-grey/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><span class='vc_col-sm-3' id='resultMultipleDesktop1'><span class='priceBackContainer'><span class='priceBack'><img class='imagePaddingLookup' src='/wp-content/uploads/2018/12/Dixie-Ivory-HERO-600x340.jpg' width='350px'>From<strike><span> £"+ priceTotal3was.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>FULLY FITTED <span class='priceCheckColour'> £" + priceTotal3.toFixed(2) + "<a href='/home/'><span class='viewHereStyle'>book here</span></a></span></span></span><br><hr>From<strike><span> £" + priceTotal3rdTierWasSupply.toFixed(2) + "</span></strike> <span class='paddingWayFitSup'><br>SHADES DIRECT <span class='priceCheckColour'> £" + priceTotal3rdTierMSupply.toFixed(2) + "<a href='/product/dixie-day-and-night-blind-ivory/'><span class='buyNowStyle'>buy now</span></a></span></span></span><br></span><br><br><br>"; 
 (function($){
   $('#resultMultipleDesktop').html(mybr);
   $('html, body').animate({
        scrollTop: $("#resultMultipleDesktop").offset().top
    }, 2000);
 }(jQuery));    
 }

问题是 Javscript/JQuery 显示计算出的价格，然后用户可以选择一个按钮将它们带到产品页面，但计算出的价格并没有传递到实际产品，因为它有自己的价格......</p>

我希望能够接受自定义价格，并使产品能够以自定义价格而不是默认价格添加到购物车中，可以这样做吗？

（例如输入宽度和高度 100，然后点击获取即时价格按钮，然后点击立即购买按钮，您将看到问题）

页面的链接。

标签： javascriptjquerywordpresswoocommercecart