I see i did miss out some things, below my full code (i did edit the names but get it working first, translation is easy after )
This is my full page of the raw editor, i had to reverse engineer a bit because i messed up lol, luckly with all the information on this page i fixed it again
button_card_templates:
shopping_list_card:
entity: null
variables:
category: Dairy
name: Milk
quantity: ''
unit: ''
show_icon: false
show_name: true
name: '[[[return variables.name]]]'
icon: mdi:cart
aspect_ratio: 4/3
entity_picture: >-
[[[return "/local/images/shopping-list/" +
variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
show_entity_picture: true
tap_action:
action: call-service
service: shopping_list.add_item
data:
name: >-
[[[return variables.category + " - " + variables.name +
variables.quantity + variables.unit ]]]
shopping_list_category_card:
entity: null
variables:
name: Fruits & Vegetables
show_icon: false
show_name: true
aspect_ratio: 4/3
name: '[[[return variables.name]]]'
icon: mdi:cart
entity_picture: >-
[[[return "/local/images/shopping-list/" +
variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
show_entity_picture: true
style:
- padding: 0%
styles:
entity_picture:
- width: 60%
views:
- title: Shopping
path: shopping
icon: mdi:cart-outline
panel: true
badges: []
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-template-rows: auto
cards:
- type: shopping-list
title: Shopping List
- type: custom:auto-entities
filter:
template: >
{% set ns = namespace(result = [], categories = {}, items = [])
%}
{% set ns.categories =
{
"Zuivel": ["Melk", "Eieren", "Yoghurt", "BakBoter", "SmeerBoter", "Kaas"],
"Groente & Fruit": ["Appels", "Bananen", "Aardbeien", "Uien"],
"Drinken": ["Cola", "Fanta", "Bier", "Koffie", "KoffieMelk", "Zoetjes"],
"Brood & Bakkerij": ["WitBrood", "BruinBrood", "Bolletjes"],
"Vlees & Vis": ["Hamburgers", "Slavinken", "Boomstammetjes", "Vissticks"],
"Beleg": ["SmeerleverWorst", "Leverworst", "Ham", "Kipfilet"],
"Snacks": ["Chips", "Snoep", "Koekjes", "Chocolade"],
"Blik & Pot": ["Boontjes"],
"Kruiden & Kast": ["Suiker", "Olijf Oil", "Zonnebloem Olie", "Zout"],
"Bakken": ["Bloem"],
"Huishouden & Schoonmaak": ["Allesreiniger", "Zip Zakjes", "Wc Papier", "Vuilniszakken", "Plasticzakken", "Dreft"],
"Gezondheids Producten": ["Paracetamol", "Tandpasta"],
}
%}
{% for cat in ns.categories %}
{% set ns.items = [] %}
{% for item in ns.categories[cat] %}
{% set ns.items = ns.items + [
{
"type": "custom:button-card",
"template": "shopping_list_card",
"variables":
{
"category": cat,
"name": item,
},
}
]%}
{%endfor%}
{% set ns.result = ns.result + [
{
"type": "custom:button-card",
"template": "shopping_list_category_card",
"variables":{
"name": cat,
},
"tap_action":
{
"action": "fire-dom-event",
"browser_mod":
{
"service": "browser_mod.popup",
"data":
{
"title": cat,
"content":
{
"type": "custom:layout-card",
"layout_type": "grid",
"layout":
{
"grid-template-columns": "25% 25% 25% 25%",
"grid-template-rows": "auto",
},
"cards": ns.items
},
},
},
},
}
]%}
{% endfor %}
{{ns.result}}
card_param: cards
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 33% 33% 33%
grid-template-rows: auto