Adding eCommerce to a Wappler Site

Don’t know if it is something you need, I mean you might have already implemented it. This is how add a product into the cart

<button dmx-on:click="cookies1.set('mc_cart','<?php echo $cook;?>',{expires: 30})" type="submit" class="btn icon-btn-md btn-theme icon-btn-round lh-1"  dmx-show="!cookies1.data.mc_cart"><i class="ei ei-shopping-basket">CookieME</i></button>
<button type="submit" dmx-hide="!cookies1.data.mc_cart" class="btn icon-btn-md btn-theme icon-btn-round lh-1"><i class="ei ei-shopping-basket"></i></button>

I am using two buttons. One is showed when no cookie is set. When clicked it creates the cookie and adds the product.

Second button is showing when cookie is already set and it only adds the product to cart using the same cookie value

Again don’t know if this is the information you need. If yes can describe more.

Thank you

Thanks @George. Hey @Teodor, any chance of getting a link to that tutorial?

Hey Armen,
I am afraid no such a tutorial is available - just a couple of guideline posts in DMXzone forums.
I will try to setup a step by step guide in the how to section about creating a shopping cart, storing the users session IDs in a cookie and filtering the database table using it.

2 Likes

Hi Teodor

I think this would be very useful - not just to demonstrate an extremely common website feature (a shopping cart), but I would imagine it would also cover several techniques which may be puzzling to someone new to Wappler. It could be a very good example to show off Wappler’s power.

I had decided there were too many features missing - at least from the DMX extensions - to create a shopping cart, and decided it was simpler just to use PHP. I would prefer to use Wappler if possible.

The main problem was the it seemed not to be possible to use sessions or cookies to store the cart information. I don’t know if this possible in Wappler. I see ‘Add Array’ and ‘Add Object’ options in Wappler - do these work? I would really appreciate some information on adding/removing elements to/from sessions/cookies if it’s now possible. When we discussed this some time ago, you suggested using a database table as an alternative.

The other problem was that it didn’t seem possible to send order confirmation emails etc. - because dynamic content can’t be included using the mail feature (I think this is still the case in Wappler). If you can suggest an alternative approach, that would be very helpful (or perhaps this extension will be improved). I realise this is not directly related to shopping carts but it’s something someone developing one will probably need - and might be surprised to discover wasn’t possible (if it’s not).

Hi, it is possible to sotre cart details using a cookie value. I am already building a shopping cart using AppConnect. My issue is that I am still working on it and can not send link to this website.

Okay i will try to explain the logic here, so you can get the idea.

First you need a session cookie and a session which we use to identify the users (no matter if they are logged in or not).
This can be done using the following code, placed on top of your page:

<?php
	session_set_cookie_params(86400,"/");
	session_start();
	$randNumber = mt_rand();
	if(!isset($_SESSION['cart_session'])) {
			$_SESSION['cart_session'] = + $randNumber;
	}
?>

What this code does is to set a session cookie for 86400 seconds - i.e. it will keep the cookie for 1 day. Change this to whatever you like it to be. This is what keeps the products in the cart when the users enter the site after a certain amount of time.
Then it sets a session called “cart_session” which gets a random (unique value) for each user.

Then you define this session under globals in every server action related to the cart - in add, update, delete actions and in the cart contents action:
Screenshot_36

Create a table which stores cart content. It will store the content for all the users carts. Then we filter it by this cart_session value.

So in add products to cart server action you insert the product ID and use cart_session in the database:
Screenshot_37

And when displaying the cart content you use the same cart_session for the cart content action to filter the cart content table.

Same for update and delete actions - filter by the cart_session value. Then on successful checkout, you just remove everything related to this cart_session value from the cart content table.

These are the basics required for basic shopping cart functionality. Of course, you can extend it to check if a product exists in the cart content table for this user on add product - run database update instead of insert.

You can extend it to use coupon codes etc. but for basic shopping cart/wish list functionality the above is functioning perfectly.

5 Likes

Thanks Teodor - this looks really helpful.

I think the interest in this topic shows there is a need for some sort of eCommerce Extension in Wappler sooner rather than later.

2 Likes

I am following your demo but am lost as to how you got form the cart_session under &_SESSION to the table columns shown below it.

52%20PM

You must define it under globals.
Then you use it to filter the query.

OK Thanks. I’ll continue trying to get this to work for me.

Just a suggestion… When you select a Connection Name from the Properties/Connection dropdown, can this not pre-populate the Database Connections screen with data initially entered for recurring selections of the same Connetection Name? Would save having to type it in everytime you add an insert/update/upload/delete action step.

Unrelated to this topic line but after you add more fields to the MySQL dB, how do you refresh the Database Query Builder to recognize the additional fields when you select the dB from the + dropdown?

I am not sure I understand this?

Open the database connection step and just click OK.

Yeah I figured this would be unclear… I’ll send a demo vid of what I mean in a few minutes.

Here is a short vid of what I was talking about earlier…

dBConnection vid.mp4 (11.6 MB)

And the next vid shows what I mean about refreshing after a dB field(s) are added…

Refresh dB.mp4 (8.4 MB)

I am not sure I understand what are you showing with your video exactly. Can you please explain it more detailed?

The opening frames in the vid show a connection data already filled in from a previous step. Then as I add another server action and add another dB connection, the Connection Options will not let me go any further unless I fill in the connection data again. If I select the connection name under Connection Properties, can the Option screen be populated with the info I already entered earlier?

Why don’t you just select the connection from the dropdown instead of creating a new one?

Ohhhh… closet light just went on. I was skipping right to the Options button first before selecting the connection name. You’re always way ahead of me :confused:

Thanks

I agree… having this extension would indeed be very useful and enticing for purchasing Wappler since the demands for online sales is spiking.

After following this thread, I was going to wait until an e-commerce extension was made available. But I thought trying to build one would be good experience learning how to use sessions and understanding better how to xfer dynamic info from one page to another. So…

Per Teodor’s note above, I added a session variable to my server connection:

Then I set up the query conditions:

Then I added Teodor’s session code to the top of the involved pages:

Then I opened my gallery catalog page with repeating data rows and looked for a way to have the catalog item info set in session state and be carried over to the orderform. But here’s where I hit a dead end. The button, as shown in the capture, captures the Item Number OK (which I’m using as my unique identifier) and appends it to the URL as it opens the orderform page.

Now what needs to happen, and where I need a lot of direction, is how to get the related data fields in the orderform be populated with the user-selected catalog item info so it can be inserted into a MySQL dB -AND- send an order email notice to the site owner.

Any suggestions or help to chip away at this challenge would be greatly appreciated.
My test site is available for review at: http://statecollegedev.com

1 Like