目前在shopify liquid中有一个radio button fieldset,点击每一个选项跳转到一个产品页面,但需要默认该值被选中。
代码如下:
请问checked代码如何实现,(第8行的value_selected如何赋值)?
谢谢!
<style>
.custom-radio{margin-top:0; display:flex; gap:5px; flex-wrap:wrap}
.custom-radio div{display:flex;}
.custom-radio label{margin-bottom:0}
</style>
{%- liquid
assign form_id = 'product-form-' | append: section.id
assign value_selected = request.properties[Header]
-%}
{% comment %}
已经尝试了如下赋值都不好用:
assign value_selected = properties[Header]
assign value_selected = query.properties[Header]
assign value_selected = params.properties[Header]
assign value_selected = request.parameters.properties[Header]
assign value_selected = form.properties[Header]
assign value_selected = line_item.properties[Header]
...
{% endcomment %}
<form id="{{ form_id }}" action="#" method="GET">
<fieldset class="js product-form__input product-form__input--pill">
<legend class="form__label">Header</legend>
<div class="custom-radio">
<div>
<input type="radio" id="Header1" name="properties[Header]" form="{{ form_id }}" value="Header1"
{% if value_selected == ‘Header1’ %}checked{% endif %}
onchange="document.getElementById('{{ form_id }}').action='/products/p';
document.getElementById('{{ form_id }}').submit();"
required>
<label class="form__label" for="Header1">Header1</label>
</div>
<div>
<input type="radio" id="Header2" name="properties[Header]" form="{{ form_id }}" value="Header2"
{% if value_selected == ‘Header2’ %}checked{% endif %}
onchange="document.getElementById('{{ form_id }}').action='/products/p';
document.getElementById('{{ form_id }}').submit();"
required>
<label class="form__label" for="Header2">Header2</label>
</div>
<div>
<input type="radio" id="Header3" name="properties[Header]" form="{{ form_id }}" value="Header3"
{% if value_selected == ‘Header3’ %}checked{% endif %}
onchange="document.getElementById('{{ form_id }}').action='/products/h';
document.getElementById('{{ form_id }}').submit();"
required>
required>
<label class="form__label" for="Header3">Header3</label>
</div>
</div>
</fieldset>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
</form>