{% doc %}
@prompt
make a heading to show variants with 1 or more in stock., connect dynamic product, show options that have 1 or more in stock, show option values that have 1 or more stock in inventory, make in to a heading and non clickable. Remove the option name., remove all containers. keep only text, add heading to this block, add a spacing between every value
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}
{% style %}
.ai-option-stock-heading-{{ ai_gen_id }} {
color: {{ block.settings.heading_color }};
font-size: {{ block.settings.heading_size }}px;
font-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
font-style: {{ settings.type_header_font.style }};
font-weight: {{ block.settings.heading_weight }};
text-align: {{ block.settings.text_alignment }};
line-height: 1.2;
margin: 0 0 {{ block.settings.heading_spacing }}px 0;
}
.ai-option-stock-text-{{ ai_gen_id }} {
color: {{ block.settings.text_color }};
font-size: {{ block.settings.font_size }}px;
font-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
font-style: {{ settings.type_body_font.style }};
font-weight: {{ block.settings.font_weight }};
text-align: {{ block.settings.text_alignment }};
line-height: 1.4;
}
.ai-option-stock-value-{{ ai_gen_id }} {
display: inline-block;
margin-right: {{ block.settings.value_spacing }}px;
margin-bottom: {{ block.settings.value_spacing }}px;
}
.ai-option-stock-text__empty-{{ ai_gen_id }} {
color: {{ block.settings.empty_state_color }};
font-style: italic;
}
{% endstyle %}
<div {{ block.shopify_attributes }}>
{% if block.settings.heading != blank %}
<h2 class="ai-option-stock-heading-{{ ai_gen_id }}">
{{ block.settings.heading }}
</h2>
{% endif %}
<div class="ai-option-stock-text-{{ ai_gen_id }}">
{% assign selected_product = block.settings.product %}
{% if selected_product == blank and product %}
{% assign selected_product = product %}
{% endif %}
{% if selected_product %}
{% assign has_available_options = false %}
{% for option in selected_product.options_with_values %}
{% for value in option.values %}
{% assign total_stock = 0 %}
{% for variant in selected_product.variants %}
{% if variant.inventory_quantity >= 1 %}
{% case option.position %}
{% when 1 %}
{% if variant.option1 == value %}
{% assign total_stock = total_stock | plus: variant.inventory_quantity %}
{% endif %}
{% when 2 %}
{% if variant.option2 == value %}
{% assign total_stock = total_stock | plus: variant.inventory_quantity %}
{% endif %}
{% when 3 %}
{% if variant.option3 == value %}
{% assign total_stock = total_stock | plus: variant.inventory_quantity %}
{% endif %}
{% endcase %}
{% endif %}
{% endfor %}
{% if total_stock >= 1 %}
{% assign has_available_options = true %}
<span class="ai-option-stock-value-{{ ai_gen_id }}">
{% if block.settings.show_stock_count %}
{{ value }} ({{ total_stock }})
{% else %}
{{ value }}
{% endif %}
</span>
{% endif %}
{% endfor %}
{% endfor %}
{% unless has_available_options %}
{% if block.settings.show_empty_state %}
<span class="ai-option-stock-text__empty-{{ ai_gen_id }}">
{{ block.settings.empty_state_message }}
</span>
{% endif %}
{% endunless %}
{% else %}
{% if block.settings.show_empty_state %}
<span class="ai-option-stock-text__empty-{{ ai_gen_id }}">
Select a product to display its available options
</span>
{% endif %}
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Product options heading",
"tag": null,
"settings": [
{
"type": "header",
"content": "Product"
},
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "header",
"content": "Heading"
},
{
"type": "text",
"id": "heading",
"label": "Heading text",
"default": "Available Options"
},
{
"type": "range",
"id": "heading_size",
"min": 16,
"max": 48,
"step": 2,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "select",
"id": "heading_weight",
"label": "Heading weight",
"options": [
{
"value": "400",
"label": "Normal"
},
{
"value": "600",
"label": "Semi-bold"
},
{
"value": "700",
"label": "Bold"
}
],
"default": "700"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#000000"
},
{
"type": "range",
"id": "heading_spacing",
"min": 0,
"max": 32,
"step": 2,
"unit": "px",
"label": "Space below heading",
"default": 12
},
{
"type": "header",
"content": "Text style"
},
{
"type": "range",
"id": "font_size",
"min": 12,
"max": 32,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "select",
"id": "font_weight",
"label": "Font weight",
"options": [
{
"value": "400",
"label": "Normal"
},
{
"value": "600",
"label": "Semi-bold"
},
{
"value": "700",
"label": "Bold"
}
],
"default": "400"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "header",
"content": "Display options"
},
{
"type": "checkbox",
"id": "show_stock_count",
"label": "Show stock count",
"default": true
},
{
"type": "range",
"id": "value_spacing",
"min": 4,
"max": 24,
"step": 2,
"unit": "px",
"label": "Spacing between values",
"default": 8
},
{
"type": "header",
"content": "Empty state"
},
{
"type": "checkbox",
"id": "show_empty_state",
"label": "Show message when no options in stock",
"default": true
},
{
"type": "text",
"id": "empty_state_message",
"label": "Empty state message",
"default": "No options currently in stock"
},
{
"type": "color",
"id": "empty_state_color",
"label": "Empty state text color",
"default": "#666666"
}
],
"presets": [
{
"name": "Product options heading"
}
]
}
{% endschema %}
this is the block code. Currently it is showing “No options currently in stock” when no values are activated. Can you please help to hide the block completely instead of showing the message. thank you.
