我有一個由 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> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </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> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </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> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </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的值。
uj5u.com熱心網友回復：
您可以為此使用javascript而不是一種大表單和復雜的 php 代碼。只需將每個鏈接放在包裝器中<input type="number"/>，即可為您的產品添加數量。然后您可以更改URI結帳。我在下面添加了有關如何執行此操作的注釋的作業示例。
希望這會有所幫助！
更新
因為你沒有展示你的代碼，所以很難理解什么對你不利。所以告訴我們你做了什么，讓我們找出問題而不是指出問題;)
我沒有看到使用php呈現模板并將適當變數的值作為 html 屬性值的任何問題。您可以為適當的 sku添加名稱屬性，該屬性可以等于您的數量陣列名稱。例子
<input name="1[qty]" type=number min="1" max="100" value="1" />.
在php 中，它看起來像這樣（同樣，這只是您如何實作結果的一個示例）
<input name="<?="1[qty]={$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> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </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> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </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> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </td>
<td> <a href="https://www.example.com/checkout/?1[sku]=14486XC6&1[qty]=1">Add to cart</a> </td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363682.html