Creating a Shopping Cart with the Data Store Component

[Teodor]

As I explained earlier - use the upsert functionality and update the quantity.
Everything is already explained in the tutorial.

[Moustapha]

I am following the tutorial and I am using the upsert. Trust me on that

Quantity is just not updated at all. And the value is displayed correctly only if I use quantity + 1 (without the backticks).

And also, I have noticed that when trying to edit the upsert I have to add it again before it can be editable. (that’s another topic)

[otavionestares]

The shopping cart is working very well, but how to record the data from shopping cart to my database?
I created a form with a repeat, using the Data Store as expression, but on Server Connect, the repeat is not imported as an array and I can’t use multi insert query… I’m stuck on it! HELP!

[max_gb]

Are you using a hidden form input?

[otavionestares]

Hey Max! Thanks! Yes!!

<div id="record" is="dmx-repeat" dmx-bind:repeat="cart.data">
		<input id="txtProductId" name="product_id" type="hidden" dmx-bind:value="product_id">
		<input id="txtProductName" name="product_name" type="hidden" dmx-bind:value="product_name">
		<input id="txtPrice" name="price" type="hidden" dmx-bind:value="price">
		<input id="txtQuantity_cart" name="quantity" type="hidden" dmx-bind:value="quantity">
   </div>

[max_gb]

I’ve just replied to your thread

[Victor_Stadnichenko]

Hello Teodor,
you don’t show the demo of your shopping cart - do you?

[ben]

Hi and welcome, have a look at

Creating a Shopping Cart with the Data Store Component

The Data Store component allows you to store and edit local data in a simple local storage driven database. You can use this component to create a shopping cart, favorite products list, task lists etc. In this tutorial we will show you how to add a shopping cart functionality to your site. Local Storage vs Session Storage You can select between storing your data in the browser local storage or session storage. What are differences? Local Storage The Local Storage stores data with no expirati…

[dmbe11]

I followed the tutorial and created a checkout page that works just fine. When I to insert the records from my checkout page into the database the first record in the array is duplicated and the rest of the information is lost. I’m sure I have done something silly but I cant seem to figure it out. Anybody got an idea that I could try?

thank you

[ben]

Maybe this will help:

[dmbe11]

Not sure, it does not look anything like my code. Here is mine perhaps that will give a clue

I am not sure if I am placing the datastore values in the correct place versus the values to be inserted into the table I call

[ben]

You have not supplied a value for all of the input fields. The value is obtained from the cart.data repeat and should look similar to dmx-bind:value="quantity"

[dmbe11]

Thank you Ben. I’ll give it a go today.

Daniel Bell, PhD
CMoN Gourmet Treats
Founder and CEO

[brad]

So, I am going to bed now but it is my mission to tackle this tutorial again in the morning. One issue I can see popping up is that using local storage it is possible that items that should no longer be available because the date of the show has passed.

So I think this is where I need to compare the cart to the database? How is that done?

[sitestreet]

Also keep in mind that it’s easy for the visitor to edit the values in their local storage so you should never take those values as accurate. They could change the price, for example.

What I do is pass just the product ID and the quantity to my checkout script. I then do another query using those IDs to get the prices and do the calculation again with the quantities. So even if the local storage says a product is 99p, my checkout will look it up and use the real value of £99 (for example). It would also mean that if a product is no longer available, it won’t be in the query and so the checkout won’t proceed with it.

The other values in the local storage I generally ignore. They are just used to populate the cart every time it’s viewed.

Hope that helps.

[brad]

Thanks for the input, guys. I am about to embark on this scary journey. My next question is that should I be able to get a working cart using this tutorial will it then be still compatible with the tutorial that @max_gb put out on Stripe Checkout integration?

Stripe Checkout Tutorial

The easiest way to integrate with Stripe is to use their hosted Checkout. It’s SCA compliant and regularly update with new features. It supports Apple and Google pay for compatible browsers. 1. Create Checkout Session For one time payments we need to create a checkout session. To do this create a server action folder called stripe and then a new action file within called checkout. This will assume that you already have a way setup to insert details of the order to the database. (For example …

[max_gb]

Yes, that Stripe tutorial was based on this data store tutorial. Check the comments section on how to get the data into your server action.

[sitestreet]

And @max_gb’s Stripe tutorial is excellent. It’s what I used for the cart I built recently

[brad]

Do you have a link to yours, @sitestreet? Would love to see it in action.

[sitestreet]

Yep, it’s in the showcases - ukpaint.co.uk. Select a category, then a product, then choose a colour and size so you can add it to the cart. The cart count updates in the top-right automatically.