Question

我想更改网站上的add to cart按钮。目前，我必须转到特定的项目页面，将实际项目添加到购物车。

我在一个项目的类别页面上有一个add to cart按钮，但点击后会将用户重定向到购物篮。

一个。我可以将其更改为仅添加一个项目而不是重定向吗？

B中。我可以轻松集成数量框，以便将指定的项目数量添加到购物车中。目前我无法使用按钮单击数量框

      <div class="action">
          <input type="button" value="[category_buyitlink]" onclick="window.location ='add_cart.asp?quick=1&amp;item_id=[catalogid]'" class="btn" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" />
          <input type="text" size="3" name="qty-0" value="0" class="txtBoxStyle"> <!--Quantity box-->
       </div>

Answer 1

如果在您访问add_cart.asp时将元素自动添加到购物车并将其传递给参数，您只需对该资源使用GET请求，而不是在那里导航客户端：

所以不要使用

<input type="button" value="[category_buyitlink]" onclick="window.location ='add_cart.asp?quick=1&amp;item_id=[catalogid]'" ...

您将创建一个函数，在单击按钮时执行GET请求，如下所示：

function get(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

然后像这样使用它：

<input type="button" value="[category_buyitlink]" onclick="get('add_cart.asp?quick=1&amp;item_id=[catalogid]', res => console.log(res));" ...

要将数量添加到请求中，您可以稍微修改函数get以接受附加到URL的第三个名为quantity的参数，您需要弄清楚如何在你的后端处理这个：

function get(theUrl, quantity, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl+`&quantity=${quantity}`, true); // true for asynchronous 
  xmlHttp.send(null);
}

现在，这是将数量作为网址参数传递，就像quick=1和item_id=[catalog_id]一样。您可以在按钮上使用它，如下所示：

<input type="button" value="[category_buyitlink]" onclick="get('add_cart.asp?quick=1&amp;item_id=[catalogid]', document.querySelector('input[name=qty-0').value , res => console.log(res));" ...

对get函数的调用现在看起来像这样：

get('add_cart.asp?quick=1&amp;item_id=[catalogid]', document.querySelector('input[name=qty-0').value , res => console.log(res);

如何停止添加到购物车按钮重定向用户

1 个答案: