我在大型卡特尔上有一家在线商店，某些产品可能需要一个可选字段，用户可以在其中输入他/她的措施，以便可以专门为他/她设计产品。尽管我熟悉如何实现前端部分，但我不太确定如何让供应商轻松地将这些额外信息附加到每个产品上，以便在他们可视化订单时，所有这些额外信息都是立即附上它。
我最好的情况是这样的：
用户选择产品并在尺寸下拉选项中选择“自定义”选项。此时会出现一个小表格，他们可以填写他们需要的所有自定义尺寸。现在，我不想将字符串“自定义”附加到购物车中的产品摘要，而是希望将他们键入的任何内容附加到它，以便在购物车中它看起来像：
[产品图片]：产品名称-用户输入的尺寸
这将使供应商更容易了解用户想要什么，并允许用户购买具有自定义尺寸的商品，而不是可能不适合他/她的标准商品（XS、S、M、L、XL ）。
现在，处理尺寸选择并提交到购物车的代码部分如下所示：
<form id="product-form" method="post" action="/cart">
{% if product.has_default_option %}
{{ product.option | hidden_option_input }}
{% else %}
<div id="product-options" class="options">
<span>{{ Product_Options_Title }}</span>
{{ product.options_in_stock | options_select }}
</div>
{% endif %}
<button id="product-addtocart" name="submit" type="submit"><span>{{ Add_to_Cart_Text }}</span></button>
</form>
我认为这是我不太熟悉的 Angular。但是我认为这里是我应该做任何改变的地方，我对大卡特尔框架也不是很熟悉，这就是为什么我可以使用一些指针。
所以我的问题是，我如何编辑代码以便用户可以输入自定义尺寸，然后将他们输入的内容作为他们订购的尺寸附加到购物车中的产品？
我知道我的问题可能不是很清楚，因此请随时发表评论以进行澄清。还要记住，我知道如何实现前端部分，但我不知道如何与后端交互以使我描述的事情发生。提前致谢。