Improved Shopping List Card

[Mindreader]

v1.2.0-BETA-8 has been released

Implemented EAN Code Reader

This feature currently supports EAN-13 barcodes, limited to food products only.
The reason is simple — there is no free global EAN database available, except for the Open Food Facts project:
https://world.openfoodfacts.org

In the future, I might add support for a local EAN list (similar to the local categories or local chips feature).

How to use

The feature is automatically triggered when:

• an EAN-13 barcode is scanned using the camera, or
• an EAN-13 number is entered manually into the input field.

You can test it by entering this example code: 4337256383165

Added ToDo Mode

The new ToDo Mode transforms the Home Assistant ToDo list into a kind of task manager with recurring due date functionality.

Key features include:

• Set recurring due dates and due times for each item.
• Automatic calculation and display of remaining time until due, with intuitive formatting (e.g., days & hours, months & days).
• Flexible options when marking tasks complete, such as removing the due date or scheduling the next due date based on custom intervals.
• Visual indicators for upcoming or overdue tasks with configurable warning thresholds (currently only via YAML, see below).
• Streamlined UI without quantity input or export buttons, optimized specifically for task management.

List View:

Edit Mode:

Acknowledge an item:

Configuration of Warning Thresholds for ToDo Due Dates

In ToDo Mode, you can configure when upcoming tasks are visually marked as “due soon” based on configurable warning thresholds. These thresholds are defined in minutes and differ depending on the type of interval or due date format:

Configuration Parameter	Description	Default Value (Minutes)
todo_yellow_m	Warning threshold for intervals in months	1440 (24 hours)
todo_yellow_d	Warning threshold for intervals in days	120 (2 hours)
todo_yellow_h	Warning threshold for intervals in hours	10 (10 minutes)
todo_yellow_s	Warning threshold for due dates without time	120 (2 hours)

If the remaining time until the due date is within the configured threshold, the task will be highlighted in orange to remind you in time.

Example Configuration

todo_yellow_m: 2880  # 2 days (in minutes) for monthly intervals
todo_yellow_d: 240   # 4 hours for daily intervals
todo_yellow_h: 15    # 15 minutes for hourly intervals
todo_yellow_s: 60    # 1 hour for dates without time

[Mindreader]

v2.0.0 has been released - Final Version

Changes since last BETA

• Added a general category for all items without a category. Now you can also collapse these items.
• In ToDo mode, the number of items shown for each category is now inverted. The number before the ‘/’ only counts entries that are not yet due. (Example: 3/5 means that out of 5 entries, 3 are still pending.) This way, when you see (5/5), you know there are currently no tasks left to do.

For all other changes from v1.0.0 to 2.0.0, please refer to the release notes:

Releases · Nisbo/ha-shopping-list-improved

It’s too much to post here.

[Mindreader]

v2.1.0 has been released

• Added collapsible configuration sections in the Config Editor
  

  

• Added option to set a title for the card
  

  

• Added font size option for the title

• Added icon option for the title

• Clicking on the title now collapses/expands the entire card
  

• Added option to show/hide the exclamation mark (Todo Mode)

• Exclamation mark for due items is now also shown in the title (Todo Mode)

• Warning thresholds for ToDo due dates are now available in the GUI editor
  

  

• Implemented local EAN file support (formats: EAN-8, UPC (12), EAN-13, and GS1-14)
  

  

You might also need to add the www folder (or your specific folder) to the allowlist_external_dirs in your configuration.yaml and restart Home Assistant afterwards:

# Loads default set of integrations. Do not remove.
default_config:

# add your path to the file here
homeassistant:
  allowlist_external_dirs:
    - "/config/www/"

• Added Copy / Paste buttons

If you press the copy button, the current date, time, and interval will be saved to local storage (browser). You can then use the paste button to quickly apply these settings to a new entry or update an existing one.

[Mindreader]

v2.2.0-BETA-1 has been released

Implemented Dynamic Categories

Dynamic categories make it possible to assign items to categories that are not predefined, even from outside the card (e.g., through automations in the format: @Category@ Item). Additionally, new categories can be created when adding items through the card. These categories remain available until the last item in the category has been removed.

Due to the implementation of dynamic categories, the category merge mode has been reworked. There are many new options available to choose how local, global, and dynamic categories should be merged. 'local_only' shows only the locally defined categories, 'global_only' shows only the global categories, and 'dynamic_only' shows only the dynamic categories. All other options combine two or all three types in different ways.

The priority in which categories are merged follows the order in which they appear, from left to right. At first, it may look overloaded and some options might seem duplicated, but in the background this only happens if you don’t have overlapping categories.

For example, if you have the category “Vegetables” both in the local and global categories, the merge order matters. If “Vegetables” is red in the local category and green in the global category, then in the mode Local → Global the color will be red, while in Global → Local it will be green.

Additionally, there are different options to sort the merged categories. You can sort each block (global/local/dynamic) by name, or you can sort all categories together. And of course, there is also an option without sorting, meaning that the categories will be displayed as defined in the config editor, the text file for the global categories, and as detected in the items for dynamic categories.

Dont forget to enable dynamic categories AND change the merge mode for categories to use this feature.

Add an item to a dynamic category

Here you can see the dynamic category

If you add another item, you have to option to chose the earlier created dynamic category

New Options for ToDo Mode

• Option to show/hide the title info about the next due item
  Displays the next due date of all items from all categories under the title when in ToDo mode, provided a title is set.
  Expired items are not shown here; they are indicated by an exclamation mark to the right of the name.

• Option to show/hide the title info icon
  Displays a calendar icon before the due date as a visual highlight.

• Option to show the next due date inside a category
  If this option is enabled, the next due date will be displayed under the category name in ToDo mode.
  This allows you to see at a glance when the next item in that category is due.

• Option to show/hide the title exclamation mark (ToDo only)

New Options for Chips

• option to hide the chips
  

  

• option to show chips in the color of the category (the item must be part of a defined local or global category)
  If a chip is assigned as an ‘item’ to a category and that category has a defined color, the chip will be displayed in that color.
  The color priority order is: Highlight → Category → Global → Standard → Browser.

General Options

• option to show the input mask at top / bottom
• clear all button now also works in ToDo mode

General Category Options

• option to show the category icon larger (approx. 2x)
  If the next due date is displayed, this option allows enlarging the icon so that it fits visually better.

New Options Overview

Parameter	Type	Description	Default
show_title_info	Boolean	Option to show the next due date info under the title in ToDo mode	true
show_title_info_icon	Boolean	Displays a calendar icon before the due date as a visual highlight	true
show_title_exclamation_mark	Boolean	Shows an exclamation mark next to the title for due items (ToDo mode only)	true
input_row_position	String	Position of the input mask (top or bottom)	"top"
chips_with_cat_color	Boolean	Shows chips in the color of the assigned category	true
show_cat_next_due	Boolean	Shows the next due date below the category name in ToDo mode	true
cat_double_sized_icon	Boolean	Enlarges the icon when the next due date is displayed to better fit visually	true
show_cat_exclamation_mark	Boolean	Shows an exclamation mark on the category for due items	true
allow_dynamic_categories	Boolean	Allows the use of dynamic categories	false
category_merge_mode	String	Defines how local, global, and dynamic categories are merged	"local_only"

---

category_merge_mode Options

Mode	Description
local_only	Show only locally defined categories
standard_only	(old) Only standard categories
global_only	Show only global categories
dynamic_only	Show only dynamic categories
local_only_sorted	Local categories, sorted alphabetically
global_only_sorted	Global categories, sorted alphabetically
dynamic_only_sorted	Dynamic categories, sorted alphabetically
local_global	Combine local + global categories (order matters)
local_first	(old) Local first, then global
local_dynamic	Combine local + dynamic categories
global_dynamic	Combine global + dynamic categories
global_local	Combine global + local categories (order matters)
global_first	(old) Global first, then local
dynamic_local	Combine dynamic + local categories
dynamic_global	Combine dynamic + global categories
local_global_sorted	Local + global categories, sorted alphabetically
local_dynamic_sorted	Local + dynamic categories, sorted alphabetically
global_dynamic_sorted	Global + dynamic categories, sorted alphabetically
global_local_sorted	Global + local categories, sorted alphabetically
dynamic_local_sorted	Dynamic + local categories, sorted alphabetically
dynamic_global_sorted	Dynamic + global categories, sorted alphabetically
local_global_sorted_total	Local + global categories, alphabetically sorted and merged
global_combined	(old) Global categories merged
local_dynamic_sorted_total	Local + dynamic categories, alphabetically sorted and merged
global_dynamic_sorted_total	Global + dynamic categories, alphabetically sorted and merged
global_local_sorted_total	Global + local categories, alphabetically sorted and merged
dynamic_local_sorted_total	Dynamic + local categories, alphabetically sorted and merged
dynamic_global_sorted_total	Dynamic + global categories, alphabetically sorted and merged
local_global_dynamic	Combine local + global + dynamic categories
local_dynamic_global	Combine local + dynamic + global categories
global_local_dynamic	Combine global + local + dynamic categories
global_dynamic_local	Combine global + dynamic + local categories
dynamic_local_global	Combine dynamic + local + global categories
dynamic_global_local	Combine dynamic + global + local categories
local_global_dynamic_sorted	Combine local + global + dynamic categories, sorted alphabetically
local_dynamic_global_sorted	Combine local + dynamic + global categories, sorted alphabetically
global_local_dynamic_sorted	Combine global + local + dynamic categories, sorted alphabetically
global_dynamic_local_sorted	Combine global + dynamic + local categories, sorted alphabetically
dynamic_local_global_sorted	Combine dynamic + local + global categories, sorted alphabetically
dynamic_global_local_sorted	Combine dynamic + global + local categories, sorted alphabetically
local_global_dynamic_sorted_total	Combine local + global + dynamic categories, sorted and merged
local_dynamic_global_sorted_total	Combine local + dynamic + global categories, sorted and merged
global_local_dynamic_sorted_total	Combine global + local + dynamic categories, sorted and merged
global_dynamic_local_sorted_total	Combine global + dynamic + local categories, sorted and merged
dynamic_local_global_sorted_total	Combine dynamic + local + global categories, sorted and merged
dynamic_global_local_sorted_total	Combine dynamic + global + local categories, sorted and merged

[Mindreader]

v2.2.0-BETA-2 has been released

Implemented Admin Options

With this new option, you can easily copy changes from your list to the configuration section.
Simply click the Copy button to transfer the content of the text area to your clipboard.
Inside the configuration editor, use your device’s paste function to insert the content into the configuration field.

Position of the Admin Button

Option in the Config Editor

Admin Options

---

Dynamic Categories – Include Items

If you check this checkbox, the assigned items of the dynamic category will also be included in the generated text area.
Use this function to copy the new categories—including their items—to your clipboard, then paste them into the defined local categories within the configuration editor.

---

Manual Assigned Items – Include Already Configured Items

If you check this checkbox, all items already assigned to a category (not only the changes) will be included in the generated text area.
Use this function to copy the complete updated configuration to your clipboard and replace the content of the categories section inside the configuration editor.

[yngve]

This seems very nice, but since being a noob, how do I implement this Improved shopping list? I have installed it, but where do I go now?

[yngve]

Never mind, forgot to restart HA. Now it shows up Thanks!

[yngve]

Is it possible to have my default chips or global chips with categories, so I won’t have to enter the category each time I push a chip?

[Hellis81]

Add the items in a category and it will get sorted by itself

[yngve]

Do you mean in the yaml code of the card or in a txt file with global chips?

[Hellis81]

Like this:

So I guess yaml code of the card.

[yngve]

Thanks a lot!

[GrizzlY (Anton)]

A great addition! I wish the author success.
If the project is still being supported, the following ideas may be useful:

1. Add “auto-completion” of words (for example, filtering chips when entering the first letters).
2. Color the chips by color according to the categories.
3. Sometimes need to add grams instead of a quantity, a drop-down menu and a counter are not convenient in this case.

[Hellis81]

Regarding 3) we usually add them as item (500).
Not convenient but it works OK.
If you add these items as dishes or chips then it is easier. So you could have item (500) and item (1000) as two chips.
But we are using dishes for a lot of items. It has really made things easier.

Regarding 1 and 2. Sure. I agree with you.

And I recently noticed the card makes difference between tomatoes and Tomatoes and one of them goes in the uncategorized bin.
Perhaps add a |capitalize first word function-thingy?

[GrizzlY (Anton)]

I didn’t notice it right away, but the “Color the chips according to the categories” feature is implemented in v2.2.0-BETA-1

[Mindreader]

v2.2.0-BETA-6 has been released

there were some more BETA versions released not mentioned here, you can see the changelog here:

Releases · Nisbo/ha-shopping-list-improved

Bugfixes

• In shopping list mode, check after 5 seconds if items are available; if not, trigger a refresh.
• Fixed a bug with local chips where new chips were created if a chip already existed with different casing (e.g., “Tomatos” vs. “tomatos”).

@GrizzlY
2. and 3. were already answered by @Hellis81

Regarding 1.

Add “auto-completion” of words (for example, filtering chips when entering the first letters).

Nice idea, let me think about this. Maybe this function will not be optimal on a mobile phone.

[Mindreader]

v2.2.0-BETA-8 released

Notification Functions implemented

This feature allows sending the shopping list or updates via notifications using configured notify entities in Home Assistant. Currently tested: Telegram, Email (via SMTP)

• The message button lets users send the current list via the configured notify entity.
• The notify entity must support HTML formatting for better readability.
• SMTP notifications are handled separately via the SMTP notify platform name (notify_entity_smtp), not as a notify entity.
• Notifications can be triggered automatically whenever items are added, edited, or removed.
• You can choose to send either just the changed item or the entire list with each notification.
• A delay timer can be configured to avoid notification flooding.

Button in the card:

General settings:

Notifications:

Parameter

Option	Type	Description
show_message_button	Boolean	Displays a message button in Shopping List mode to send the list via email, Telegram or similar.
notify_entity	String	The notify entity used when the message button is pressed. Must support HTML formatting. SMTP is not included here.
notify_on_change	Boolean	Enables automatic notification sending when an item is added, edited, or removed from the list.
notify_on_change_all	Boolean	Sends the entire list with each notification instead of just the changed item.
notify_on_change_time	Integer (sec)	Delays sending the notification by the specified number of seconds to avoid flooding notifications during rapid changes. Use 0 to disable the delay.
notify_entity_smtp	String	Name of the SMTP notify platform (from configuration.yaml) used for sending HTML email notifications (e.g., email_notification). Only the platform name, not the full entity like notify.email_notification.

[GrizzlY (Anton)]

I encountered the following problem and honestly spent the whole evening trying to solve it. Every time I refresh the page, all tasks with categories disappear.
Including in different browsers and on a mobile application
I tried:

• different releases from 2.1.0 - 2.2.0 Beta 8
• change category_merge_mode
• сlearing the cache
• turned on developer mode and read the debug log.
• and, of course, restarting Home Assistant

in configuration.yaml

homeassistant:
  allowlist_external_dirs:
    - "/config/www/"

in lovelace

title: shops
icon: mdi:store
path: shops
panel: true

cards:
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:ha-shopping-list-improved
            entity: todo.shopping_list
            category_file: /local/categories.txt
            category_merge_mode: global_combined
            # chips_position: bottom
            # quantity: end
            # acknowledged: end
            # mode: shopping
            # chip_click: single
            # chip_merge: global_combined
            # title: Список покупок
            # title_icon: mdi:store
            # show_plus_minus: true
            # #show_quantity_one: true
            # chips_width: 300
            # chip_file: /local/chips.txt
            # chips_with_cat_color: true
            # show_admin_button: true
            # list_reload_time: 30

      - type: vertical-stack
        cards:
          - type: todo-list
            entity: todo.shopping_list

in .\www\categories.txt

[Фрукты]
icon = mdi:apple
bgcolor = #28A745
items = Бананы, Яблоки, Груши, Апельсины, Мандарины

[Овощи]
icon = mdi:carrot
bgcolor = #20C997
items = Картошка, Кабачок, Морковь, Помидоры, Огурцы, Лук, Чеснок, Капуста, Свекла, Грибы, Шампиньоны

[Напитки]
icon = mdi:bottle-soda-outline
bgcolor = #FFC107
items = Сок, Соки, Кола

[Хозяйственные товары]
icon = mdi:cleaning
bgcolor = #6C757D
items = Салфетки, Полотенце бумажные, Средства для посуды, Моющие средства

[Мясо]
icon = mdi:food-steak
bgcolor = #DC3545
items = Свинина, Курица, Фарш, Ветчина, Колбаса, Сосиски

[Молочные продукты]
icon = mdi:milk
bgcolor = #17A2B8
items = Молоко, Молоко для йогурта, Йогурт, Сметана, Масло сливочное, Яйца куриные, Сыр, Творог

[Консервы и соусы]
icon = mdi:food-variant
bgcolor = #FD7E14
items = Кетчуп, Майонез, Горошек консервированный, Кукуруза консервированная, Солёные огурцы, Томатная паста

[Кот]
icon = mdi:cat
bgcolor = #495057
items = Корм коту, Наполнитель

[Бакалея]
icon = mdi:rice
bgcolor = #D4A017
items = Хлеб, Масло растительное, Сахар, Гречка, Рис, Макароны, Мука, Соль, Чай, Кофе, NAN 3

[Сладости и снеки]
icon = mdi:candy-outline
bgcolor = #E83E8C
items = Печенье детское, Вафли, Шоколад

Every сard refresh causes elements to disappear. If no elements are visible, switching to the native shopping list and back also helps.

GIF

Please help me with some advice on where to look.

[Mindreader]

@GrizzlY

Is there some output in the browser debug console (not in the Home Assistant log) below the version number ? And is the version v2.2.0-BETA-8 ?

For me it looks like that you are loosing your websocket connection for some reasons. I assume addblocker and all other blocking browser addons are disabled.

Normally, if you are forcing a reload of the page, it takes some seconds to load the list. If the list is not available on the first try, the card will check again in 10 seconds. During this time you should see a message instead of the items that the card is trying to load the list. (since BETA 7 or 8)

Lets try to localize the problem

Does it also happen if:

• you only use local categories instead of the global categories (remove the path to the categories.txt and switch to local category only merge mode
• you use the shoppinglist card without the horizontal and vertical stack card ?

Your animated gif is a bit hard to watch, at least for me
Can you upload a video ? (With your mobile phone, no need for a complete screen capture) or at least a “slower” gif if video is not possible.

[Mindreader]

v2.2.0 Release

The year is coming to an end, and this is the perfect time to release v2.2.0

There have been a lot of changes between v2.1.0 and v2.2.0 — too many to list them all in these release notes.

For full details, please read through the v2.2.0 BETA release notes:

Releases · Nisbo/ha-shopping-list-improved

---

Additional Features (not mentioned in the BETA notes)

Added Category Chips

Automatically generates chips based on items assigned to a category.
Each category is displayed as a collapsible chip, as long as the category contains at least one item.

Settings → Chips

---

Added Filter and Capitalize-First-Letter Option

Allows filtering of list items directly via the input field.
If enabled, the first letter entered in the input field is automatically capitalized.

Thanks to @creoludifico for these great ideas