Improved Shopping List

Share your Projects! Dashboards & Frontend
4

Hi manunited10,
how do you exactly created the templates? Im running into the following error when Im using your code:

Log Details (ERROR)
Logger: homeassistant.config
Source: config.py:978
First occurred: 1:06:48 PM (4 occurrences)
Last logged: 1:19:06 PM

Invalid config for [template]: [shopping_list_card] is an invalid option for [template]. Check: template->shopping_list_card. (See /config/template.yaml, line 46).
Invalid config for [template]: [shopping_list_category_card] is an invalid option for [template]. Check: template->shopping_list_category_card. (See /config/template.yaml, line 67).
5

Please take a look at the link below. Basically templates are for avoiding repeating a button-card and reuse them. We put them in a yaml file, and include them in the dashboard.

1 Like
6

Hi manuited10,
sorry for this really stupid newbie questions, but I really dont understand how to handle this. I followed your link and read the complete article. I understand that im using the managed lovelace ui and I have to add the templates to the raw editor. I added the following complete code into it:

button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'
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%

I was trying to add this code to the bottom, to the top and between the shopping cart dashboard and the rest. It ends always in “missing template card”:

image
image1026×646 39.1 KB

Do you know what Im doing wrong?
Thanks a lot!

7

OK no problem at all. You’re on the right track.
First that header: and header_red are some examples that you could get rid of if you are not using them.
Second, you just need to add space (indent) to shopping_list_card: and the other one. So it should look like:

button_card_templates:
  shopping_list_card:
    entity: 
    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 ]]]'
        # ToDo: above string concatenation needs space in between (if quantity is not '')

  shopping_list_category_card:
    entity: 
    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%
8

This helps alot. Thank you @manunited10 ! Its working perfectly and my wife is also happy . :slight_smile:

We are using home assistant mostly from our mobile phones and therefore I switched the dashboard to a vertical layout card. I used a conditional card to show and hide the items:

image
image639×638 13.6 KB

image
image630×1252 93.9 KB

Now Im just have to fill all products with pictures :slight_smile:
Thanks again!

1 Like
9

Looks great. I’m happy it worked for you.
Does the automation also work for you?

Next I will do some digging to find a way to tell google assistant and/or alexa to add items to this list. I saw some examples like this and this here and there but not exactly what I wanted.

1 Like
10

I didn’t tried it yet. Our home assistant is public reachable and we normally open the app to check in the products we had put into the cart. I don’t think we’ll need the automation.

There’s another interesting project from a German dude. He build a custom barcode scanner and used an public available api to scan any product he like and put them to the shopping list. :grinning:

3 Likes
11

Ok, that’s pretty awesome, and a bit of a pain to maintain at first until you eventually add in the few hundred items you would normally purchase. I still think, however, that the biggest weakness of the shopping list is still there though. Once you have everything you want to buy listed, there may be 40+ items which are a pain to keep sorted since they will not autosort, and a pain to track visually since the shopping list has just one single solitary column. It would be better if that shopping list contained multiple columns, namely Qty (0 = checked off), Class (dairy, drinks, flesh, fresh, grain, frozen, etc), Supplier (grocery, costco, walmart, homedepot, pharmacy, etc), product (jarlsberg, pelegrino, etc), Pkg (block, jug, tub, flat, pack, bag, each, jar, can, bottle, kg, etc), detail (“make sure it’s pre-washed”, etc), and link (maybe an url pointer to an image or a specific product).

I looked at grocy for some of this, but grocy is built more like an ERP system. It’s great, but a huge overhead to maintain, i just need a shopping list that isn’t volatile and that doesn’t have a sort button that delete everything that is checked off so i’m left scratching my head on what i had on that list next time i want to replenish my stock.

Your solution is a great way to stabilize the shopping list against the weekly accidental deletion (glad i have backups), but it still presumes you shop at only one store and that you have only a few items at a time that fit on one screen and won’t need some secondary organization. I think the shopping list is useable for other purposes (it’s my to-do list for my server, i wish i could name it that way though) but as a shopping list i’m still waiting for it to evolve a bit.

-z

1 Like
12

Yeah agreed. The shopping list in home assistant is pretty basic and we can’t have more than one.
Maybe someone gives a bit of attention to it one day and adds more features.

13

Thank you for sharing this! Got it working quickly and will start to dive into creating categories and assigning pictures. I haven’t got to the automation side of it it but I have already setup the Alexa/todoist integration with shopping list and it all works perfectly together.

1 Like
14

Did you get it working to add custom items to a list from Google Assistant?

1 Like
15

Hi manunited10!

Good to know that more people are working on the same project :slight_smile:

I also have my improved shopping list. I just want to share it with you, since you may want to get some new funcionalities. I will get your categories section to add products, nice!!

1 Like
16

No not yet. looks like the new update on home assistant has some good features and added some interesting feature as well as google sync. I’ll look into it.

17

Great :+1:

18

I am sorry, I am a newbi here… I try again and again but when I press the category image nothing happens…could some one provide any help ?
Thanks.

19

Solved!!!

1 Like
20

The Shopping List feature is the primary reason we have kept Amazon Echos in our home.

With Home Assistant’s “Year of the Voice” is it possible to add items and hear (or view) the list?

———————————-

I would love to have a method of tracking the prices of items, since we shop at four to five stores every other week. A gallon of milk can vary from $3 to $7 depending on the store or sales. Many other items we find ourselves calculating the price per unit in the store while cross referencing others.

It would be amazing to have a shopping list that calculates the price per a unit for an item across stores then display the shopping list with the items grouped by store with details such as brand and quantity. #AskingForTooMuch

After some searching: There is an app called Flipp that apparently does a lot of this…but doesn’t offer a method for adding items via voice.

21

Hello,
I’ve managed to install the shopping list.
Great job!

1 Like
22

Hey guys,
Thanks to Home Assistant’s recent updates to the shopping list feature, which now supports multiple to-do lists, I’ve added a couple of to-do lists to my dashboard. I’ll update my original post above in a couple of days.

23

Hi All.
I really like the above solution. Though I am stuck and need more guidance as i am totally new to this.
I have addded the 2 button templates in a file called templates.yaml. And referred to this in the configuration.yaml file.

Then i take the dashboard code and paste into a blank dashboard. Nothing happen. I have tried to paste it into the shopping list and still nothing.

Can someone guide with a step by step for dummies on how to achieve the above.

Would really appreciate it.
Thanks