Improved Shopping List Card

[Mindreader]

GitHub - Nisbo/ha-shopping-list-improved: Improved shopping list with alphabetical sorting,...

Improved Shopping List Card

ha-shopping-list-improved

Foreword

How did this add-on come about? Simple: I was looking for a way to manage my shopping list directly through Home Assistant. The built-in list is unfortunately very basic. Then I tried Tandoor – quite nice, but it didn’t offer what I wanted. There was another shopping list add-on, but maintaining it was cumbersome, and you had to create a separate card for every item.

In the end, I had no choice but to develop something myself.
The biggest challenge was: keeping the WAF intact

---

What is the Improved Shopping List Card?

The Improved Shopping List Card is a card for Home Assistant,
which significantly improves the original shopping list and makes it much easier to use.

Note:
This card is based on the original Home Assistant shopping list (shopping_list) and uses its data structure.
All items you add in this card will also appear in the standard shopping list – and vice versa.

---

Kitchen tablet

Mobile view

Config Editor:

---

Features

• Display as a normal card or in panel mode (page with only one card)
• Alphabetical sorting of items
• Ability to hide completed items, move them to the end, or leave them in the order
• Colored marking of completed items
• Change quantity via + and − buttons
• Chips for quickly adding frequently used items
• Support for standard (config) and local (browser) chips
• Highlighting for specific items (e.g., butter, bananas, flour)
• Easy removal of items using the minus button
• Customizable design: colors, font sizes, chip positions, and more

Tip:
Check the screenshots below to see what’s possible!

---

Limitations

• Categories for shops (still figuring out the best way to implement this)
• Delete all items at once (not just completed ones)

[tykeal (Andrew Grimberg)]

Does this create a separate shopping list, or does it work on an already existing one? I’ve got 8 separate To-Do lists that I’m using as shopping lists (including the default one).

[Mindreader]

Hi @tykeal

It uses the original default/standard Home Assistant shopping list (shopping_list). The one you can not delete.

[Hellis81]

One thing I’m missing that is crucial for me/us is grouping.
The shopping list we use has eight groups you can place the items in, so we made eight sections in the store we usually visit.
We have Fruits and vegetables grouped with bread since that is the next aisles that is in the store. Then it’s meat and cheese and so on…

That means I can get the items in the store roughly sorted on where I need to pick them up in the store.

[Mindreader]

@Hellis81

You are talking about categories, it’s already on my TODO but I have no idea how to implement it.

Maybe I can add the category in the item name like:
Apples (1) @fruits@ or @fruits@ Apples (1)

In my card I can remove the @fruit@ but in the original card, you will still see it.

I have to think about it. I am also planning to allow the selection of the TODO list entity.

[Hellis81]

Maybe this can be of inspiration?
This is the app we use currently, you type the item, then click on the category.
In the background you can kind of see the shopping list with the categories and the items below.

[Mindreader]

v1.2.0-BETA-1 has been released

Now you can have multiple Improved Shopping Lists based on the created To-Do Lists.

BREAKING CHANGES

Due to the new system, already created local (Browser) chips will be removed.
Now the local Chips will be created based on the entity of the selected To-Do List.

If you want to test the BETA, in HACS you have to download it manually

After this, make sure your cache is cleard

[Mindreader]

v1.2.0-BETA-2 has been released

→ see above how to use a BETA version in HACS

Popup style optimized

Added categories

Categories are stored in the item name in the format @Category@ Item (2).
The card itself will not display this formatting, but if you use other add-ons or cards for the same To-Do list, you will see it.

You can define categories in the config editor

this has to be done in YAML code e.g.

- name: Fruit
  items:
    - Strawberries
    - Plums
    - Pears
    - Bananas
- name: Vegetables
  items:
    - Avocado
    - Arugula
- name: Household Items
  items:
    - Sponge
    - Dish Soap
- name: Meat
  items:
    - Chicken Breast Fillet
    - Schnitzel
- name: Beverages
  items:
    - Sparkling Wine
    - Beer

If you add an item that belongs to a defined category, it will be automatically assigned to that category.
If you add an item that is not in any defined category, a popup (which can be disabled) will appear allowing you to assign the item to a category.

If you want to change the category later, double-click on the item.

Complete demo code, you only have to change the list

type: custom:ha-shopping-list-improved
quantity: end
acknowledged: end
chip_click: single
show_quantity_box: true
show_quantity_one: false
show_submit_button: true
show_input_mask: true
chips_position: bottom
chips: >-
  Butter, Pepsi, Beer, Plums, Salmon, Olive Oil, Bread Rolls, Cheese, Salami,
  Dish Soap, Toilet Paper, Salad, Frozen Veggies, Ketchup, Arugula, Avocado,
  Cheese Spread, Lime Liqueur, Dry Food, Wet Food, Milk, Toothpaste, Pizza,
  Cream, Sour Cream, Broth, Eggs, Sparkling Wine, Vodka, Minced Meat, Onions,
  Potatoes
highlight_words: Butter, Eggs, Wet Food, Dry Food
chip_merge: combined
chips_width: 300
list_font_size: 16
chip_font_size: 12
local_chips: true
chip_color: rgba(100,100,100,0.3)
highlight_color: "#D9534F"
chip_color_default: rgba(100,100,255,0.3)
sub_text: "Hint: Use chips to quickly add items again."
entity: todo.english_demo_shopping_list
categories:
  - name: Fruit
    items:
      - Strawberries
      - Plums
      - Pears
      - Bananas
  - name: Vegetables
    items:
      - Avocado
      - Arugula
  - name: Household Items
    items:
      - Sponge
      - Dish Soap
  - name: Meat
    items:
      - Chicken Breast Fillet
      - Schnitzel
  - name: Beverages
    items:
      - Sparkling Wine
      - Beer
cat_font_size: 21
show_cat_popup: true

[Hellis81]

Ok… You got my attention now.
I will for sure give this a try.

Love the idea with the predefined item to category link.
Is this hard coded so banana is one and bananas would not match? Or does it have a wildcard search both from category and item?

[Mindreader]

Currently bananas would not match, this is because some items has other words inside like strawberry shampoo in this case it would assign the berry to the house hold category.

If you want to use banana and bananas, you have to assign both words to the category. But normally (at least me) always uses the plural for an item on my shopping list.

[Mindreader]

v1.2.0-BETA-3 has been released

• added color and icons to the categories

Schema:

- name: Vegetables
  icon: mdi:apple
  bgcolor: "#247645"
  items:
    - Avocado
    - Arugula

• added option to move an item to another category (double click on the name for edit mode)
  → This works as long as the item has not been deleted. If you delete the item and create a new one, it will be assigned to the configured category, or to Uncategorized if no matching configuration exists.

• Added an option to export the list as an HTML file.
  This allows you to use your shopping list offline (e.g., when you don’t have network access in the supermarket).
  If you wish, you can assign a long-lived access token to your profile to enable the sync function.
  The sync function allows you to easily (push the button in the offline export) synchronize your offline list to Home Assistant (note: synchronization only works one way — from the offline list to Home Assistant).
  How it works: Click the export button, open the saved HTML file in your browser, check your items, and when you’re back at home (or within network range when using an external URL), click the sync button. If your browser clears the cache when you close it, syncing may not work correctly. Warning: Treat the token confidentially as it grants (full) access to your system. Also note that if HTTP is used instead of HTTPS, the token is transmitted unencrypted and is therefore insecure.

Config:

Export Button

Offline List

Using the html export file on an iPhone

Shortly after finishing this version, I realized that there is no official way to open a locally stored HTML file on my iPhone (shame on you, Apple). You need an additional app such as HTML Viewer Q:

‎HTML Viewer Q

There might be other options, like using Firefox or Edge, but it does not work with Chrome or Safari.

[Hellis81]

I’m a bit confused.
I have got to this point:

But when I use the chips and/or the “item…” line up top it doesn’t do anything.
I added “Makaroner” but that got to chips, not to the shopping list.
Perhaps I need to clear my shopping list first from old stuff before using this?

And where is the configuration menus you have images of.
I’m really lost here.

[Mindreader]

For the Config menue, go to the dash board edit mode (pencil icon on the top right) afterwards you can edit the card and should see all the options.

I assume you are using the latest BETA (v1.2.0-BETA-3)

But why do you have this format:
Gurka (x1)
this should be:
Gurka (1)
or
1x Gurka
at least if you use the + or - buttons to change the quantity.

[Hellis81]

I got it working now.
It was probably due to the old shopping list had some error.
I created a new and changed the target shopping list to the new one and it seems to work now.

Just need to set things up now and see how this works

[Hellis81]

It seems amazing.
One thing I could see myself using is a collapse feature.

So at this stage

There is no more Fruit and vegs, if I could click on the category to hide the already picked items in that group then it would be great (and possibly display a (2/2) on the category line also).
But that is not a must.
Generally I would probably go from top to bottom anyways and it shouldn’t be needed.

[Mindreader]

Good idea with the collapse function, I will put it on my TODO.
2/2 is also a good idea, thx for the input.

PS: you can already hide a category if you use the hide acknoledged items option.

[Hellis81]

Yes that is true that you can hide by deleting.

Another thing I recently found out.
There is a discrepancy about the order of the categories.
When you add things in the category yaml part then the shopping list preserves this order, that is awesome!
However, if I add an item that is not in a category I get the category picker which does not preserve the order, here it is in alphabetical order.
I understand that some might want it alphabetically, but for me I find it easier to visualize where in the store this item is and by that judge where to look for in the list.
Perhaps it could be something you can choose, either alphabetically or category’s order.

Great job with this!
This is exactly what I have searched for years after.
I started with grocy some time ago but it was so much more work.
This is more manageable and it doesn’t feel like you’re doing things just because it has to be done.
It has the sweet mix of you can add things you want but also not add sunscreen since it’s only once or twice a year you add then to the cart.

[Mindreader]

Regarding the order, looks like I have to add an option ^^

[Hellis81]

If it’s too much of work then don’t.
I’ll get by without.
And I can name the categories with numbers first

[Mindreader]

v1.2.0-BETA 4 has been released

• Added optional item count display for categories (e.g. “Vegetables (2/12)”)
• Categories in the edit popup now respect the same sorting order as in the list
• Categories are now collapsible (click on category name to expand/collapse)

• Added PDF export option
  Generate and download the list as a PDF document with checkboxes. You can check/uncheck items within the PDF, but currently there is no synchronization option with Home Assistant.