I know this has been asked many times, but I still cannot figure it out after reading all of the support posts and the tutorials. I cannot get my line item properties to show in my cart. It is a multiple check box option. Any help at all would be very very appreciated!
Here is the code on the product page:
<h1 class="product-single__title">{{ product.title }}</h1>
<script>window.performance.mark('debut:product:title_visible');</script>
<div class="product__price">
{% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
</div>
<div class="product-single__description rte">
{{ product.description }}
</div>
<form><p class="line-item-property__field">
<label>Cheeses (Choose Four)</label><br>
<input type="checkbox" id="Aged-Cheddar" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Aged Cheddar"><label for="Aged-Cheddar">Aged Cheddar</label><br>
<input type="checkbox" id="Aged-Gouda" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Aged Gouda"><label for="Aged-Gouda">Aged Gouda</label><br>
<input type="checkbox" id="Belgioioso-Sharp Provolone" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Belgioioso Sharp Provolone"><label for="Belgioioso-Sharp Provolone">Belgioioso Sharp Provolone</label><br>
<input type="checkbox" id="Brie" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Brie"><label for="Brie">Brie</label><br>
<input type="checkbox" id="Ghost-Pepper Monterey Jack" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Ghost Pepper Monterey Jack"><label for="Ghost-Pepper Monterey Jack">Ghost Pepper Monterey Jack</label><br>
<input type="checkbox" id="Havarti" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Havarti"><label for="Havarti">Havarti</label><br>
<input type="checkbox" id="Jarlsberg-Swiss" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Jarlsberg Swiss"><label for="Jarlsberg-Swiss">Jarlsberg Swiss</label><br>
<input type="checkbox" id="Sharp-Provolone" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Sharp Provolone"><label for="Sharp-Provolone">Sharp Provolone</label><br>
<input type="checkbox" id="Sicilian-Pepato" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Sicilian Pepato"><label for="Sicilian-Pepato">Sicilian Pepato</label><br>
<input type="checkbox" id="Stella-Blue Cheese" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Stella Blue Cheese"><label for="Stella-Blue Cheese">Stella Blue Cheese</label><br>
<input type="checkbox" id="Stella-Fontinella" hidden-data="Cheeses-(Choose Four)" onchange="fillHidden('Cheeses-(Choose Four)')" value="Stella Fontinella"><label for="Stella-Fontinella">Stella Fontinella</label><br>
<input type="hidden" id="Cheeses-(Choose Four)" name="properties[Cheeses (Choose Four)]">
<script>
function fillHidden(hiddenname) {
var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
var hiddenfield = document.getElementById(hiddenname);
hiddenfield.value = ""
var i;
for (i = 0; i < checkboxes.length; i++) {
var x = checkboxes[i];
if(x.checked){
if(hiddenfield.value==""){
hiddenfield.value = x.value;
}else{
hiddenfield.value = hiddenfield.value + ", " + x.value;
}
}
}
}
</script>
</p></form>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte" data-product-policies>
Here is the code in may cart:
<a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
{{ item.product.title }}
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
</a>
</div>
{%- assign variant_options = 'template ' | split: ' ' -%}
{%- if item.product.has_only_default_variant != true -%}
{%- assign variant_options = item.options_with_values -%}
{%- endif -%}
{%- assign property_size = item.properties | size -%}
