Question

我有两个功能可以执行以下操作： myFunction（）将变量发送到结帐 myFunction2（）将产品添加到购物车，然后继续购物车。该框架要求将产品添加到购物车，然后再进行结帐。我正在努力让这两个功能通过一次onclick依次添加。

有三种可能的输入（用于测试），即 “添加到购物车”-使用href将产品添加到购物车（正确提交） “提交表单”-如果产品已经添加到购物车，它将变量发送到结帐，但是由于“添加到购物车”已经进入购物车页面，因此您必须返回到表单以运行。（正确提交，以上述为准） “点击”-试图将这两种功能结合起来？，路由到购物车页面并且说购物车中没有物品-因此无法按预期工作。

<!DOCTYPE html>
<html>

<body>

    <h2>HTML Forms</h2>

<?php $postvalue = array (12,2,3,"7 days"); ?>

    <form id="myForm" action="index.php?route=checkout/checkout" method="post">
        First name:
        <br>
        <input type="text" name="product_id" value="30">
        <?php 
            foreach($postvalue as $onx)
        {
            echo '<input type="hidden" name="onx[]" value="'. $onx . '">';
        } ?>
            <br>

            <input type="button" onclick="myFunction()" value="Submit form">
    </form>

</body>

<!-- THIS FUNCTION WORKS TO ADD A PRODUCT TO Cart -->
<a href='index.php?route=checkout/cart/addToCart&product_id=30' id="addtocart" onclick="myFunction2();">Add to Cart</a>
<br />

<script>
function myFunction2() {
    document.getElementById("addtocart");
}

function myFunction() {
    document.getElementById("myForm").submit();
}
</script>

</html>

我希望能够将产品添加到购物车，并能够按正确的顺序将变量发布到结帐处，以进一步执行代码。

Answer 1

您可以使用AJAX发出异步请求并在停留在同一页面的同时添加产品，而不是通过访问URL添加产品。因此请删除href属性。（我使用return false;来防止对onclick事件进行默认事件处理）

<a href="#" id="addtocart" onclick="myFunction2(); return false;">Add to Cart</a>

并在点击处理程序中添加代码以执行请求。请求成功返回后，您可以将一个类添加到表单中，这样您就可以知道已经添加了产品。（在示例中，我使用jQuery进行AJAX调用）。

function myFunction2() {

    $.get( "index.php?route=checkout/cart/addToCart&product_id=30", function( data ) {
    $( "#myForm" ).addClass( "product-added" ); 
   });

}

在提交表单之前，只需检查产品是否已添加到购物车

function myFunction() {

    if($( "#myForm" ).hasClass( "product-added" )){
    document.getElementById("myForm").submit();
    }

}

一次onclick依次执行两个功能-添加到购物车并传递变量

1 个答案: