Improved Shopping List

@mquhob

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 :slight_smile: )

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 :slight_smile:

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

What i also found out is that if you use the todo list instead of the shopping list intergration that this system is more reliable, i had some problems that the categories did load but the left list sometimes didnt load, well it did but after some page switching.

i changed this:

          - type: shopping-list
            title: Shopping List

to this:

  - type: todo-list
    entity: todo.shopping_list

@ricardo026 && @manunited10 Thanks guys i am nearly there with your both helping me out. Though a few things are still not working. 1 : I am not able to click on the categories to drill down to the actual items. 2: The items are not added to my shopping list on click.

button_card_templates:
  shopping_list_card:
    entity: null
    variables:
      category: ''
      name: ''
      quantity: ''
      unit: ''
    show_icon: false
    show_name: true
    name: '[[[return variables.name]]]'
    icon: mdi:cart
    aspect_ratio: 4/3
    entity_picture: >-
      [[[return "/local/images/shoppinglist/" +
      variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
    show_entity_picture: true
    tap_action:
      action: call-service
      service: todo.add_item
      data:
        name: >-
          [[[return variables.category + " - " + variables.name +
          variables.quantity + variables.unit ]]]
  shopping_list_category_card:
    entity: null
    variables:
      name: ''
    show_icon: false
    show_name: true
    aspect_ratio: 4/3
    name: '[[[return variables.name]]]'
    icon: mdi:cart
    entity_picture: >-
      [[[return "/local/images/shoppinglist/" +
      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: todo-list
            entity: todo.shopping_list
          - type: custom:auto-entities
            filter:
              template: >
                {% set ns = namespace(result = [], categories = {}, items = [])
                %}

                {% set ns.categories = 
                  {
                    "Bread": ["bread1"],  
                    "Dairy": ["dairy1"],
                  }
                %}

                {% 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

@ricardo026 && @manunited10 would appreciate much if you can bring me over the last missing pieces :smiley:

Hey, I was able to successfully set this up using the todo.shopping_list. Love it. However, I track a separate list for my Costco order. I am having trouble having it add the items to a non-default shopping list. There is no error, but nothing gets added to the list.

Is there anything that jumps out as to why?

button_card_templates:
  costco_list_card:
    entity: null
    variables:
      category: ''
      name: ''
      quantity: ''
      unit: ''
    show_icon: false
    show_name: true
    name: '[[[return variables.name]]]'
    icon: mdi:cart
    aspect_ratio: 4/3
    entity_picture: >-
      [[[return "/local/images/costco-list/" +
      variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
    show_entity_picture: true
    tap_action:
      action: todo.add_item
      data:
        item: '[[[return variables.category + " - " + variables.name]]]'
      target:
        entity: todo.costco_warehouse_list
  costco_list_category_card:
    entity: null
    variables:
      name: ''
    show_icon: false
    show_name: true
    aspect_ratio: 4/3
    name: '[[[return variables.name]]]'
    icon: mdi:cart
    entity_picture: >-
      [[[return "/local/images/costco-list/" +
      variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
    show_entity_picture: true
    style:
      - padding: 0%
    styles:
      entity_picture:
        - width: 60%
views:
  - title: Costco
    path: costco
    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: todo-list
            entity: todo.costco_warehouse_list
          - type: custom:auto-entities
            filter:
              template: >
                {% set ns = namespace(result = [], categories = {}, items = [])
                %}

                {% set ns.categories = 
                  {
                    "Beverages & Water": ["Spindrift"],
                  }
                %}

                {% for cat in ns.categories %} 
                  {% set ns.items = [] %}
                  {% for item in ns.categories[cat] %}
                      {% set ns.items = ns.items + [
                        {
                            "type": "custom:button-card",
                            "template": "costco_list_card",
                            "variables":
                            {
                              "category": cat,
                              "name": item,
                            },
                        }
                      ]%}
                  {%endfor%}
                {% set ns.result = ns.result + [
                  {
                    "type": "custom:button-card",
                    "template": "costco_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

I figured out my own problem. If using a list that is not the default shopping list. Here is the button press logic

    tap_action:
      action: call-service
      service: todo.add_item
      target:
        entity_id: todo.costco_warehouse_list
      data:
        item: >-
          [[[return variables.category + " - " + variables.name +
          variables.quantity + variables.unit ]]]

Anyone have idea for this one . Why the sub items not showing as popups?