Making an eshop cart

help
1

Hello all, I’ve started web development some months ago and jumped right into Meteor which I found awesome. Right now, I’m working on a small project and I would like to ask you guys something.

Let’s have an eshop and a customer, who is not registered and of course not signed in. I would like for this customer to have a choice to add items to cart and whenever he comes back to the eshop (still unregistered/not logged in), the items are still there in teh cart. So let’s say that he added 3 items to the cart and left the page without registering.

After few hours he came back, saw the items and decided to register. So I create an account and cut + paste items from the cart and put them into the newly created cart of this new account.

Let’s say he then logs out. Now the cart should be empty because all of those items are moved to his account cart.

So… the question is, how do I make this?

My idea was to create a “temporary” account on connection to the site via Meteor.onConnection with clientAddress as key and field for cart items. If customer created an account while having some items in cart, those items would just be put into a newly created cart for this account and deleted from the previous cart.

Is this a good solution? How would you make it better?

Thanks,
Jakub

2

You could take a look at artwells:accounts-guest, which gives visitors a userId. After registration, details (cart) could then be moved over.

3

This would be pretty easy to do using regular Web and Meteor API’s. You want to look into localStorage and Tracker.

Tracker.autorun(function() {
  if (Meteor.user()) {
    if (localStorage.getItem('shoppingCart') {
      ShoppingCart.insert({..})
    }
  }

The example is incomplete, but the pieces are there

1 Like
4

Thanks for the advice.

1 Like
5

Take a look at https://github.com/nate-strauser/meteor-cart/

This package is not suitable for production use in its current form, but I’ve successfully used this pattern for 2 meteor apps with cart functionality. My latest meteor cart is a react/apollo version, but the principal is the same.

You’ll want to drop UUID, deviceId, into local storage for each device/browser.

Then you can easily have an anonymous cart that can be converted/merged into a known user’s cart.

Once the user logs out, they subscriptions will update as they are done by userId or deviceId and the cart will become empty again. When you merged the anonymous cart into the known user’s cart, the deviceId no longer has an order associated with it.

Essentially you want to give yourself a way to identify devices/browsers as well as users. You still store all the cart/order data on your server, you just drop a UUID into localstorage that you can use to uniquely identify the anonymous user.

6

I have an ecommerce store and am using the session package as well as the u2622:persistent-session package. While the user is not logged in, any items in the cart are stored in the persistent session object. Once they login or register for an account, the cart session object is saved to the user’s document on the server/db and the session object is cleared. Not sure if this is the best way but it works for my needs.

The session object is persistent across multiple tabs/windows but is not reactive.

7

thats pretty close to what i’m doing - just not directly working with local
storage/amplify - the persistent session package does use amplify under the
hood - the main difference is that it sounds like you are storing the
cart/order data on the client whereas i just store a UUID on the client, so
you can’t really run analysis/metrics on the client side only data - that
might not matter to you though