[英]How do i create dynamic product variant options on React
I am creating a ecommerce project to learn react, and i guess thats the best way to learn a language by doing a complex project so that you get to know every aspect of it.我正在创建一个电子商务项目来学习 React,我想这是通过复杂项目学习语言的最佳方式,这样您就可以了解它的各个方面。 but now i am stuck with something that i searched for everywhere but couldnt find.
但现在我被我到处寻找但找不到的东西困住了。
Basically i want to create a section where the person can add product variants like color and sizes to it, like the example below基本上我想创建一个部分,人们可以在其中添加颜色和尺寸等产品变体,如下例所示
it doesnt have to be complicated but if i could add into an object depending on the values the user inputs is what all i need.它不必很复杂,但如果我可以根据用户输入的值添加到 object 中,这就是我所需要的。
if someone could help me that would be great!如果有人可以帮助我,那就太好了! Thank you!!!
谢谢!!!
I think I have done similar project.我想我做过类似的项目。
Flow was as follows:流程如下:
const [words, setWords] = useState([]);
...
function handleWord(e) {
if (e.key === "Enter") {
let temp = words ? words : [];
temp.push(value);
setWords(temp);
setValue("");
}
}
...
<input
type="text"
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleWord}
value={value}
placeholder="Enter one keyword..."
/>
You can modify this depending on how you are constructing object.您可以根据构建 object 的方式来修改它。
Is that what you want?那是你要的吗?
[{id:110, hingeName : "Color", priority: 1 }, {id:220, hingeName: "Size", priority:2}]
productData = {
id:12132,
prodcutImg:'https://abc.img.in',
productPrice:'$24',
prodAttribute:[{id:110, value:'Black'},{id:220, value:"XL"}],
variantMeta:
{
hinges:[
{id:110, hingeName : "Color", priority: 1 },
{id:220, hingeName: "Size", priority:2}
],
hingesValues: [
{110: ["Black","Red","White"]},
{220: ['XS','S','L','XL','XXL']}
],
variantsOfCurrentProducts: [
{variant_id:'12131', attributes: { 110:'Black',220:'S'}},
{variant_id:'12132', attributes: { 110:'Red',220:'XL'}},
{variant_id:'12133', attributes: { 110:'White',220:'XS'}},
{variant_id:'12134', attributes: { 110:'Red',220:'XL'}}
]
}
}]
Color :
Red Black White
Size :
XS S L XL XXL
Color :
Red "Black" White
Size :
XS S L "XL" XXL
NOTE: I have used "double_quote" for showing the attribute of current product.注意:我使用“double_quote”来显示当前产品的属性。 You can render it with different background and colour on UI.
您可以在 UI 上使用不同的背景和颜色渲染它。
Now make sure that hinge at the top most priority should always be enabled so that user can be able to select that at any point of time现在确保始终启用最高优先级的铰链,以便用户可以在任何时间点使用 select
If someone click on the hinge having 2nd highest priority then filter all those variants which have attribute with highest priority and the 2nd highest priority and render them as selectable values and all those variants which don't have these attributes disable them.如果有人单击具有第二高优先级的铰链,则过滤所有具有最高优先级和第二高优先级属性的变体,并将它们呈现为可选值,所有不具有这些属性的变体将禁用它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.