如何将用户输入字段添加到 URL

Question

我有一个PHP生成的产品链接列表，点击后，会将产品添加到购物车中。 目前，链接中有一定数量的"1"硬编码，例如

<a href="/shop/checkout?1[sku]=$sku&1[qty]=1"> Add To Cart </a>

我想为列表中的每件商品添加一个数量字段，以便客户可以将他们想要的数量添加到购物车。

此列表不使用表单，那么如何引入用户输入数量字段并在每个链接中使用它？ 我的搜索一无所获，所以我认为它不能按照我现在设置的方式完成。 无论我如何更改此列表，我都需要将数组传递给/shop/checkout PHP 脚本。

我可能以错误的方式看待这个问题，所以任何指示将不胜感激。

谢谢！

编辑

它一定与我的产品列表在表格中这一事实有关。 当我将您的示例更改为使用表而不是div 时，它会中断。 下面是一个示例：

<table class="products_list">
<tr class="product_list--item">
<td> 12486XC4 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
<td> <a href="https://www.example.com/checkout/?1[sku]=12486XC4&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
<td> 13486XC5 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
<td> <a href="https://www.example.com/checkout/?1[sku]=13486XC5&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
<td> 14486XC6 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
<td> <a href="https://www.example.com/checkout/?1[sku]=14486XC6&1[qty]=1">Add to cart</a> </td>
</tr>
</table>

此外，链接中的1[sku]和1[qty]是不变的。 它们用于此页面上每个产品的目标 PHP 脚本中。唯一因产品而异的是 SKU 的值。

Answer 1

你可以使用javascript来代替一个大的形式和复杂的php代码。只需将每个链接放在包装器中，并<input type="number"/>就可以为您的产品增加数量。然后，您可以更改结帐URI。我在下面添加了有关如何执行此操作的评论的工作示例。

希望这会有所帮助！

更新

因为你没有展示你的代码，所以很难理解什么对你不起作用。因此，向我们展示您做了什么，让我们找出问题，而不是将问题指向;)

我认为使用php渲染模板并将正确变量的值作为 html 属性的值没有任何问题。 您可以添加名称属性，该属性可以等于您的数量数组名称以获得正确的 SKU。例

<input name="1[qty]" class="item_qty" type=number min="1" max="100" value="1" />.

在php中，它看起来像这样(同样，这只是如何实现结果的一个例子)

<input name="<?="1[qty]={$qty}";?>" class="item_qty" type=number min="<?=$qty;?>" max="100" value="1" />

<?=?>是一个回显标记。您可以替换为<?php ?>

稍后，您只需使用JS获取属性的值并更新每个相应的结帐链接即可。此外，您的情况不起作用，因为在 RegExp 符号中，例如[和]应该转义 ->[和].

function addSlashes(string, vowels) {
let length = vowels.length;
let finalString = "";
let startOffset = 0;
let endOffset = 0;
for (let i = 0; i < length; i++) {
if ((endOffset = string.indexOf(vowels[i])) !== -1) {
finalString += string.substring(startOffset, endOffset) + "\";
if (endOffset === string.length - 1) {
finalString += string[string.length - 1];
}
startOffset = endOffset;
}
}
return finalString;
}
function updateQueryStringParameter(uri, key, value) {
let escapedKey = addSlashes(key, ["[", "]"]);
let re = new RegExp("([?&])" + escapedKey + "=.*?(&|$)", "i");
let separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
return uri + separator + key + "=" + value;
}
}
function displayQuantityForProduct(element, text = "") {
element.textContent = text;
}
const inputs = document.querySelectorAll(".product_list--item .item_qty");
const length = inputs.length;
for (let i = 0; i < length; i++) {
inputs[i].addEventListener("input", function() {
// also add check whenever input value is not an empty string and its an integer which is bigger or equal to 1
if (this.value && parseInt(this.value) >= 1) {
// selfName 
let selfName = "1[qty]";
let children = this.closest(".product_list--item").children;
// children will consist of td elements from each tr with class product_list--item in your table
// [0] first element of the array is sku (1) <td> 12486XC4 </td>
// [1] second element of the array is amount with span (2)
// [2] is input with qty (3)
// [3] is Add to cart link (4) and so on...
let displayQty = children[1].firstElementChild;
let addToCartLink = children[3].firstElementChild;
let newUri = updateQueryStringParameter(
addToCartLink.getAttribute("href"),
selfName,
this.value
);
displayQuantityForProduct(displayQty, this.value);
addToCartLink.setAttribute("href", newUri);
}
});
}

<table class="products_list">
<tr class="product_list--item">
<td> 12486XC4 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
<td> <a href="https://www.example.com/checkout/?1[sku]=12486XC4&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
<td> 13486XC5 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
<td> <a href="https://www.example.com/checkout/?1[sku]=13486XC5&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
<td> 14486XC6 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
<td> <a href="https://www.example.com/checkout/?1[sku]=14486XC6&1[qty]=1">Add to cart</a> </td>
</tr>
</table>