Thank you. My store isn’t live so I can’t share the page - however I just created a template from the standard page and added the AI generated block.
Here is the code, I asked it to filter and display the reference (product reference) but it doesn’t show any for “reference”
I’ve also attached a screenshot. It’s linking the supply keys *name, category, url) fine, but the bit I’m having trouble with is the product reference. It’s not listed under the supply metaobject, but you can see it’s linked to the product under the reference field in the entry.
Hope you can help!
{% doc %}
@prompt
Create single line list of metaobject "supply", Show "name" field, "reference", add a button named "buy" with a clickable link showing the "url field". Accordion Group by category field. Filter by reference field and search all fields.
{% enddoc %}
{% assign ai_gen_id = block.id | replace: ‘_’, ‘’ | downcase %}
{% style %}
.ai-supply-list-{{ ai_gen_id }} {
display: block;
width: 100%;
padding: 20px;
background-color: {{ block.settings.background_color }};
}
.ai-supply-list__filters-{{ ai_gen_id }} {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.ai-supply-list__search-{{ ai_gen_id }} {
flex: 1;
min-width: 200px;
padding: 10px 14px;
border: 1px solid {{ block.settings.border_color }};
border-radius: 8px;
font-size: 14px;
}
.ai-supply-list__filter-{{ ai_gen_id }} {
padding: 10px 14px;
border: 1px solid {{ block.settings.border_color }};
border-radius: 8px;
font-size: 14px;
background-color: #ffffff;
cursor: pointer;
}
.ai-supply-list__accordion-{{ ai_gen_id }} {
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-supply-list__category-{{ ai_gen_id }} {
border: 1px solid {{ block.settings.border_color }};
border-radius: 8px;
overflow: hidden;
background-color: #ffffff;
}
.ai-supply-list__category-header-{{ ai_gen_id }} {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background-color: {{ block.settings.header_background }};
cursor: pointer;
transition: background-color 0.2s ease;
}
.ai-supply-list__category-header-{{ ai_gen_id }}:hover {
background-color: {{ block.settings.header_hover_background }};
}
.ai-supply-list__category-title-{{ ai_gen_id }} {
font-size: {{ block.settings.category_font_size }}px;
font-weight: 600;
color: {{ block.settings.text_color }};
margin: 0;
}
.ai-supply-list__category-icon-{{ ai_gen_id }} {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
color: {{ block.settings.text_color }};
}
.ai-supply-list__category-header-{{ ai_gen_id }}.active .ai-supply-list__category-icon-{{ ai_gen_id }} {
transform: rotate(180deg);
}
.ai-supply-list__category-content-{{ ai_gen_id }} {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.ai-supply-list__category-content-{{ ai_gen_id }}.active {
max-height: 2000px;
}
.ai-supply-list__items-{{ ai_gen_id }} {
padding: 0;
margin: 0;
list-style: none;
}
.ai-supply-list__item-{{ ai_gen_id }} {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-top: 1px solid {{ block.settings.border_color }};
}
.ai-supply-list__item-info-{{ ai_gen_id }} {
display: flex;
gap: 12px;
align-items: center;
flex: 1;
}
.ai-supply-list__item-name-{{ ai_gen_id }} {
font-size: {{ block.settings.item_font_size }}px;
color: {{ block.settings.text_color }};
font-weight: 500;
}
.ai-supply-list__item-reference-{{ ai_gen_id }} {
font-size: {{ block.settings.reference_font_size }}px;
color: {{ block.settings.reference_color }};
font-family: monospace;
}
.ai-supply-list__buy-button-{{ ai_gen_id }} {
padding: 8px 16px;
background-color: {{ block.settings.button_background }};
color: {{ block.settings.button_text_color }};
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease;
}
.ai-supply-list__buy-button-{{ ai_gen_id }}:hover {
background-color: {{ block.settings.button_hover_background }};
}
.ai-supply-list__empty-{{ ai_gen_id }} {
padding: 40px;
text-align: center;
color: {{ block.settings.reference_color }};
font-size: 16px;
}
.ai-supply-list__no-results-{{ ai_gen_id }} {
padding: 40px;
text-align: center;
color: {{ block.settings.reference_color }};
font-size: 16px;
}
@media screen and (max-width: 749px) {
.ai-supply-list__item-{{ ai_gen_id }} {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.ai-supply-list__buy-button-{{ ai_gen_id }} {
width: 100%;
text-align: center;
}
}
{% endstyle %}
<supply-list-{{ ai_gen_id }} class=“ai-supply-list-{{ ai_gen_id }}” {{ block.shopify_attributes }}>
<input
type="text"
class="ai-supply-list__search-{{ ai_gen_id }}"
placeholder="Search supplies..."
data-search-input
>
<select class="ai-supply-list__filter-{{ ai_gen_id }}" data-reference-filter>
<option value="">All references</option>
</select>
{% assign all_supplies = shop.metaobjects.supply.values %}
{% if all_supplies.size == 0 %}
<div class="ai-supply-list__empty-{{ ai_gen_id }}">
No supplies found. Add supply metaobjects to display them here.
</div>
{% else %}
{% assign categories = all_supplies | map: 'category' | uniq | sort %}
{% for category in categories %}
{% assign category_supplies = all_supplies | where: 'category', category %}
<div class="ai-supply-list__category-{{ ai_gen_id }}" data-category="{{ category.value | default: 'Uncategorized' }}">
<div class="ai-supply-list__category-header-{{ ai_gen_id }}" data-category-header>
<h3 class="ai-supply-list__category-title-{{ ai_gen_id }}">
{{ category.value | default: 'Uncategorized' }}
</h3>
<svg class="ai-supply-list__category-icon-{{ ai_gen_id }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="ai-supply-list__category-content-{{ ai_gen_id }}" data-category-content>
<ul class="ai-supply-list__items-{{ ai_gen_id }}">
{% for supply in category_supplies %}
<li
class="ai-supply-list__item-{{ ai_gen_id }}"
data-supply-item
data-name="{{ supply.name.value | downcase }}"
data-reference="{{ supply.reference.value | downcase }}"
data-category="{{ category.value | default: 'Uncategorized' | downcase }}"
data-url="{{ supply.url.value }}"
>
<div class="ai-supply-list__item-info-{{ ai_gen_id }}">
<span class="ai-supply-list__item-name-{{ ai_gen_id }}">{{ supply.name.value }}</span>
<span class="ai-supply-list__item-reference-{{ ai_gen_id }}">{{ product.metafields.product.supply.name }}</span>
</div>
{% if supply.url.value != blank %}
<a
href="{{ supply.url.value }}"
class="ai-supply-list__buy-button-{{ ai_gen_id }}"
target="\_blank"
rel="noopener"
>
{{ block.settings.button_text }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
{% endif %}
No supplies match your search criteria.
</supply-list-{{ ai_gen_id }}>
{% schema %}
{
“name”: “Supply list”,
“tag”: null,
“settings”: [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Buy"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "background_color",
"label": "Background",
"default": "#f5f5f5"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#455268"
},
{
"type": "color",
"id": "reference_color",
"label": "Reference text",
"default": "#697a96"
},
{
"type": "color",
"id": "border_color",
"label": "Border",
"default": "#e6e6e6"
},
{
"type": "color",
"id": "header_background",
"label": "Category header background",
"default": "#f7aed5"
},
{
"type": "color",
"id": "header_hover_background",
"label": "Category header hover",
"default": "#f7aed5"
},
{
"type": "color",
"id": "button_background",
"label": "Button background",
"default": "#f7aed5"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text",
"default": "#455268"
},
{
"type": "color",
"id": "button_hover_background",
"label": "Button hover background",
"default": "#697a96"
},
{
"type": "header",
"content": "Typography"
},
{
"type": "range",
"id": "category_font_size",
"min": 14,
"max": 24,
"step": 1,
"unit": "px",
"label": "Category font size",
"default": 18
},
{
"type": "range",
"id": "item_font_size",
"min": 12,
"max": 20,
"step": 1,
"unit": "px",
"label": "Item font size",
"default": 16
},
{
"type": "range",
"id": "reference_font_size",
"min": 10,
"max": 16,
"step": 1,
"unit": "px",
"label": "Reference font size",
"default": 12
},
{
"type": "range",
"id": "desktop_width_percent",
"label": "Desktop width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
}
],
“presets”: [
{
"name": "Supply list"
}
]
}
{% endschema %}
