如何删除默认变体选项并具有空单选按钮答案

【问题标题】：How to Remove Default Variant Option and Have Empty Radio Buttons如何删除默认变体选项并具有空单选按钮
【发布时间】：2020-02-06 20:58:39
【问题描述】：

我提前道歉，因为我无法获得尽可能少的代码，但我目前正在使用 Shopify 网站（我没有构建）并且我不想选择默认变体。例如，如果您转到此页面https://thriveworkwear.com/products/carpenter-work-pants-5300-pro，您会看到默认选项是颜色：山核桃腰围：30W 内接缝：30L。

有没有办法禁用默认变体功能？这意味着没有选择任何变体，用户必须手动选择它们。

我尝试按照本指南 https://help.shopify.com/en/themes/customization/products/variants/how-to-add-a-pick-an-option-to-drop-downs 和本指南进行操作，但它们不起作用。

我也试过添加这个：

document.querySelector('input[name="name0"]:checked').checked = false;
document.querySelector('input[name="name1"]:checked').checked = false;
document.querySelector('input[name="name2"]:checked').checked = false;

到theme.js 文件，但它不起作用。如果我通过控制台选项卡添加它似乎可以工作，但当我在网站上添加它时却不行。

感谢任何帮助。

【问题讨论】：

标签： javascript shopify

【解决方案1】：

看来选项是从以下APP生成的：https://apps.shopify.com/best-custom-product-options

这意味着所有内容都是使用 Javascript 生成的，您可能无法控制。

如果应用程序中有一个选项可以禁用默认选择的选项，或者当应用程序应用选项时您可以收听一个事件，您将必须显示该应用程序。

最后一行是使用 Mutation Observer 并等待表单中的 HTML 修改来触发您的代码，但如果没有其他方法，这是最后的方法。

【讨论】：

太棒了@drip！非常感谢。这绝对是导致它的应用程序，我能够做出我需要的改变。话虽如此。我很好奇为什么我添加的以单选按钮为目标的 javascript 在页面加载之前不起作用。 setTimeout(function(){document.querySelector('input[name="name0"]:checked').checked = false;}, 3000);
@Efrain Lemus 应用程序在依赖 ScriptTag API 时通常需要更多时间在前端加载，尤其是在它们发出收集信息的请求时。因此它们不会在 DOM 就绪时加载，有时甚至不会在窗口加载时加载。因此，在这种情况下，您将不得不寻找一个在他们的代码完成后触发的钩子（如果有的话），否则您将不得不考虑其他事情。如果您知道 setTimeout 不会超过 3000 毫秒，那么它是可以的，但通常突变观察者或 setInterval（如果编写得当）可能会更好。