因此，在我们的Miva 9网站上，我想将不可见的Recaptcha v2添加到我们的产品页面，以添加到购物车表单。
这是我的head标签中的内容：
<script type="text/javascript">
var onSubmit = function(response) {
document.getElementById("js-purchase-product").submit(); // send response to your backend service
};
</script>
这是html格式：
<form method="post" action="&mvte:urls:BASK:auto;" name="add" id="js-purchase-product">
<input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
<input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
<input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
<div class="row">
<div class="column whole">
<div id="js-purchase-message" class="message message-warning purchase-message"></div>
</div>
<!-- form fields -->
<div id="js-product-attributes" class="column whole product-attributes mtp1-25 mbm1-25">
<!--[if gte IE 9]><!-->
<script src="&mvte:global:theme_path;/js/jquery-3.4.0.min.js"></script>
<!--<![endif]-->
<mvt:item name="product_attributes" param="product:id" />
</div>
<!-- end form fields -->
<div class="column whole np">
<div class="g-recaptcha" data-sitekey="SITE-KEY-XXXXXXXXXXXX" data-callback="onSubmit" data-badge="inline" data-size="invisible"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
<!-- end invisible recaptcha -->
</div>
<div class="row corners add-to-cart-wrap bg-lt-gray">
<div class="column whole align-center">
<div class="bold">Price Subtotal<br /><span class="small normal">(with options added)</span></div>
<div id="js-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
<br />
</div>
<div class="column whole small-half medium-whole large-two-fifths x-large-three-tenths print-hide">
<div class="row quantity-wrap align-center">
<div class="column whole np">
<span id="js-decrease-quantity" class="bg-gray corners-left decrease-quantity" unselectable="on"
data-rt-icon=""></span>
<input type="tel" name="Quantity" value="1" id="l-quantity" class="align-center" style="font-size:1rem" />
<span id="js-increase-quantity" class="bg-gray corners-right increase-quantity" unselectable="on"
data-rt-icon=""></span>
</div>
</div>
</div>
<div class="column whole small-half medium-whole large-three-fifths x-large-seven-tenths print-hide">
<div class="breaker small-all-hidden medium-all-shown large-all-hidden"></div>
<span onclick="document.forms.add.action = '&mvtj:urls:BASK:auto;'; document.forms.add.elements.Action.value = 'ADPR';">
<input type="submit" value="Add to Cart" data-value="Add to Cart" id="js-add-to-cart" class="button button-block corners uppercase add-to-cart black bg-sky bold" />
</span>
</div>
</div>
</form>
这是AJAX添加到购物车的脚本文件中的
// ---- AJAX Add To Cart ---- //
function addToCart () {
$('#js-add-to-cart').on('click', function (e) {
var purchaseForm = $('#js-purchase-product');
// Check the form is not currently submitting
if (purchaseForm.data('formstatus') !== 'submitting') {
// Set up variables
var form = purchaseForm,
formData = form.serialize(),
randomNo = Math.ceil(Math.random() * 1000000), // IE Hack: Creating random number to refresh ajax call
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMessage = $('#js-purchase-message'),
miniBasket = $('#js-mini-basket-container'),
processingImage = $('#js-processing-purchase'),
purchaseButton = $(this),
purchaseButtonText = purchaseButton.val();
if (/\?/.test(formUrl)) {
formUrl = formUrl + '&v=' + randomNo;
}
else {
formUrl = formUrl + '?v=' + randomNo;
};
// Add status data to form
form.data('formstatus', 'submitting');
// Show processing message
processingImage.show();
purchaseButton.toggleDisabled().val('Processing...');
responseMessage.html('').hide();
// Send data to server for validation
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success: function(data, textStatus, jqXHR) {
if (data.search(/id="js-BASK"/i) != -1) {
$('html, body').animate({scrollTop: '0px'}, 250);
var responseMiniBasket = $(data).find('#js-mini-basket-container'),
miniBasketCount = responseMiniBasket.contents()[1].getAttribute('data-itemcount'),
miniBasketSubtotal = ' ' + responseMiniBasket.contents()[1].getAttribute('data-subtotal'),
miniBasketLinkCount = $('#js-mini-basket-count, #js-mobile-basket-button .notification'),
miniBasketLinkSubtotal = $('#js-mini-basket-subtotal');
miniBasketLinkCount.text(miniBasketCount); // Update basket quantity (display only)
miniBasketLinkSubtotal.text(miniBasketSubtotal); // Update basket subtotal (display only)
miniBasket.html(responseMiniBasket.contents()).addClass('open');
$('.mini-basket-table-wrap').scrollTop($('.mini-basket-table-wrap')[0].scrollHeight);
setTimeout(function () {
miniBasket.removeClass('open');
if ( $( "#family-tree" ).length ) {
$(document).ready(function(){
var url = "/family-tree-hearts-discs.html";
$(location).attr('href',url);
});
};
if ( $( "#wholesale-family-tree" ).length ) {
$(document).ready(function(){
var url = "/wholesale-family-tree-hearts-discs.html";
$(location).attr('href',url);
});
};
}, 3000);
// Re-Initialize Attribute Machine (if it is active)
if (typeof attrMachCall !== 'undefined') {
attrMachCall.Initialize();
};
}
else if(data.search(/id="js-PATR"/i) != -1) {
var missingAttrs = [];
form.find('.required').each(function () {
missingAttrs.push(' ' + $(this).attr('title'));
});
responseMessage.html('All <em class="red">Required</em> options have not been selected.<br />Please review the following options: <span class="red">' + missingAttrs + '</span>.').fadeIn();
$('html, body').animate({scrollTop: ($('#js-purchase-message').offset().top - 100)},500);
}
else if(data.search(/id="js-PLMT"/i) != -1) {
responseMessage.html('We do not have enough of the Size/Color you have selected.<br />Please adjust your quantity.').fadeIn().delay(3000).fadeOut();
$('html, body').animate({scrollTop: ($('#js-inventory-message').offset().top - 100)},500);
}
else if(data.search(/id="js-POUT"/i) != -1) {
responseMessage.html('The Size/Color you have selected is out of stock.<br />Please review your options or check back later.').fadeIn().delay(3000).fadeOut();
$('html, body').animate({scrollTop: ($('#js-inventory-message').offset().top - 100)},500);
}
else {
responseMessage.html('Please review options.').fadeIn().delay(3000).fadeOut();
$('html, body').animate({scrollTop: ($('#js-purchase-message').offset().top - 100)},500);
};
// Hide processing message and reset formstatus
processingImage.hide();
purchaseButton.toggleDisabled().val(purchaseButtonText);
form.data('formstatus', 'idle');
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
};
// Prevent form from submitting
e.stopImmediatePropagation();
e.preventDefault();
});
};
var addToCart = new addToCart;
我遇到的麻烦是：
我在哪里添加grecaptcha.execute（）;？
我想将ajax的功能添加到购物车并进行表单验证。
当用户将购物车添加到购物车时，迷你购物篮滑开并添加产品。它们不会从产品页面上删除。
如果他们没有选择a或填写必填表格字段，则页面会向上滚动并显示错误消息，并且他们会停留在产品页面上。
以下是产品页面的链接，以供参考：https://www.loveisarose.com/ILYR11.html
在此先感谢您的帮助！