TLDR;
With the help of a little CSS, and the right workflow, Joplin can very efficiently replace a full featured shopping list app. There's still margin for improvement though.
Intro
I just wanted to share my thoughts and trials on how I use Joplin as a shopping list app. Comments, ideas, suggestions and critics are welcome. I wonder if there are other folks out there using Joplin for shopping, and how they do it.
The same logic applies to other type of lists, like travel lists.
What do I expect from a shopping list app ?
First of all, when we talk about shopping lists, we talk mostly about mobile apps. Usually you don't take your laptop with you when you go grocery shopping. So, no plugins have to be used, as Joplin's mobile app doesn't support plugins.
Second, what do I expect from a shopping app ? Well, I tested many of them, and until now I used Out of Milk, because it's one of the only shopping apps out there that :
- Works on a dual list principle (you pick your items to shop in an item or pantry list, and they go in a shopping list). That's a must have for me : having a list with all the items I usually buy (the pantry list), and being able to pick items from that list to build a shopping list.
- And has a desktop app. Well, sort of, it has a webapp, but that's good enough for me.
However, there are some serious limitations :
- First, it only works in the US and Canada. Meaning it's not available in Play Store, and declines all connections on the webapp from outside US and Canada. I still managed to use it from Europe, by installing the mobile app manually, and using a VPN when accessing the webapp. But it's cumbersome.
- And it lacks some functionalities, like the possibility to add a picture to an item.
Using Joplin as a shopping list app
Having started to use Joplin as a note taking app a few months ago, I was wondering if it could replace my favorite shopping app. My main concern was my wish for a dual list system (item list → shopping list). Obviously, with Joplin, there's no way that checking an item in a note copies it into another note.
My first idea was to have an "items" note, and copy/paste the individual items into a "shopping note" when I decide that I need to buy those items on my next shopping session. Cumbersome and time consuming...
Another idea is to use a "shopping" notebook, with to-dos inside it (each item being a to-do). See #post_6. Too basic IMO. No dual list (item list → shopping list), no way to categorize items, ...
How I ended up doing it : a single note + custom CSS
I ended up using only 1 note, with custom CSS styles, and inverting the checkbox logic :
<style>
input[type=checkbox]:checked {
width: 17px;
height: 17px;
}
input[type=checkbox]:checked + label {
font-weight: bold;
font-size: 1.1em;
opacity: 1;
}
/*
input[type=checkbox]:not(:checked) {
display: none;
}
input[type=checkbox]:not(:checked) + label {
display: none;
}
*/
</style>
# Fruits
- [ ] Apples
- [ ] Oranges
# Dairy products
- [ ] Milk
- [ ] Cheese
Notice the CSS block partially commented out (\*...*\), more on that later.
If I decide I need apples and milk next time I go shopping, I just check those 2 items. Contrary to the default appearance, which decreases a checked item's opacity and makes it less visible, my CSS ensures the checked items are made more visible, by increasing their size, and using a bold font. Checked items are items I want to buy next time I go shopping.
When I finally go shopping, I un-comment the following CSS code, which hides unchecked items (e.g., items I don't want to buy during this shopping session) :
input[type=checkbox]:not(:checked) {
display: none;
}
input[type=checkbox]:not(:checked) + label {
display: none;
}
All I have left in my note are the items I want to buy, the other items are all hidden. And every time I buy an item, I uncheck it, and it becomes hidden too. At the end of the shopping session my list is empty, once all the items have been bought.
All that remains to do then is to comment out again the CSS code, to display again all items, checked or not.
Closing thoughts
So, it's not perfect either, because having to comment out / uncomment some CSS codes during the shopping process is not ideal. And unchecking an item when buying it, instead of checking it, is a little counterintuitive. But nevertheless it does the job, and Joplin has indeed become my new shopping list app (and also my travel list app, which is similar in principle).
However, it's not for everyone. A non-tech user wouldn't probably understand the concept of commenting out / decommenting CSS code. My opinion however is that Joplin is very close to be natively a nice shopping list app. Some Joplin developers could maybe look into it, how to improve it in order to make it usable as a shopping list app without having to play with CSS. I think there's a market out there for that, real shopping apps are not that common in the Play Store (or Apple store). By real shopping apps I mean shopping apps following the dual list principle, being able to handle pictures, and with a desktop app. Basic list apps are plenty, but more elaborate ones are scarce.
