Clear Cart button on Shopping Cart Page

Report · Jun 06, 2016

Hi. I have some session variables for a shopping cart page. I want to set up a button for the user to click to clear the cart. How do I do this? I tried using the StructDelete function, inside a form with a button, but even if I don't click on this and I just click on the Checkout page button instead, it clears the cart before the info. can be inserted into the database on the confirmation page. How do I set this up so that the cart only gets cleared if the button is clicked? Here is what I have:

</cfif>

</form>

</cfif>

Thanks.

Andy

Report · Jun 07, 2016

If this code is all on one page, then, yes, you are clearing the session immediately after creating it. Follow your logic:

1. IF session.ElastomerCart doesn't exist, create it and set default values.

2. IF session.ElastomerCart DOES exist, load a form that contains the StructDelete() tag that will kill it.

And I'm not understanding why you are using a form submit button with a value of "Clear Cart". The button will submit the empty form.

If you are familiar with AJaX, create a CF function to clear the session.ElastomerCart struct and place it in a CFC in a /components folder. Then, write a JavaScript function that will call that CF function, and tie it to an event on a standard button.

<form name="foo" id="foo" action="/path/to/formprocessing.cfm" method="post">
..  ..  blah blah blah  ..  ..
<input type="button" name="bar" id="bar" value="Clear Cart" />
</form>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
function clearMyCart(){
    $.ajax(
        // I don't have time to write this all out for you - 
        );
    }
    $('#bar').on('click',function(){
    clearMyCart();
    });
</script>

HTH,

^_^

Report · Jun 09, 2016

WolfShade,

I put this on my cart page:

</form>

And this back on my beginning elastomer.cfm page:

</cfif>

This works to clear the cart, but still allows me to enter the info. into the database.

If I wanted to pass the Products variable into an email to display the product info. that gets sent to our company and the customer letting each of us know what they ordered, how do I do that? I've only passed info. from a form into an email before, but not session variables. Is there a way to have my css styles also work in an email?

Andy

Report · Jun 09, 2016

As far as clearing the cart, what you have in place will work, but it will redirect the whole page to another page for processing. What I am suggesting will clear the session without redirect or refresh/reload. But if you want the page to go back to the elastomer.cfm page, then you've got it.

If you want to add products to session.elastomercart.products, you can use a submit form to add (which redirects/reloads the current page, which is kind of inefficient and 20th century), or you can use AJaX to submit the product ID and push that to the array that is in session.elastomercart.products while staying on the same page (the way most sites do it, today.) Then, when the order is submitted and the email(s) generated, you can simply make the email a type="html" and add <CFDUMP var="#session.elastomercart.products#" /> to the body of the email - this will give you a dump of all the product IDs as part of the email.

If you want something better formatted, you can always loop through the array (within the body of the email) and output the IDs, that way.

CSS styles will work within an email, as long as the email type is HTML, but the <style></style> has to be part of the body of the email.

HTH,

^_^

Report · Jun 09, 2016

Wolfshade,

I was able to put the products in hidden fields in a form on my checkout page like this:

</cfloop>

</cfoutput>

I don't know how to use AJaX.

Then when this form gets submitted to the Confirmation page, I output the product info. into a cfsavecontent tag like this: <cfsavecontent variable="mvar">. I found this online before I noticed you wrote me back. Then I output this into the cfmail tag like this: #mvar#. Is this not a very efficient way of doing this?

I also put the css styles inside of the cfmail tag and that works. The only thing that doesn't work in the email is the rounded corners I have on my table. It does work if I email it to my yahoo email, but they don't work in Outlook. I found this: HTML email buttons that work · GitHub , but I wasn't exactly sure how to incorporate this into my code to get the rounded corners on the table. I also wasn't sure if the code that is grayed out was only for Outlook. Do you know of another way to make a table have rounded corners inside of cmail?

Andy

Report · Jun 09, 2016

If it works, for you, it works. I would do it differently, but everyone has their 'style' of doing things. If it ain't broke..

As far as the rounded corners issue - that's just the way it is. It will work in some browsers (usually FIreFox) and not in others (usually Internet Exploder). Your email will be viewed differently in each environment (browsers like FireFox and Internet Explorer; and each email client will not conform to the same standards - if you view HTML in an email in Thunderbird, it may or may not look just like that in, say, Eudora, or some other email client.)

V/r,

^_^

Report · Jun 09, 2016

Thanks!. I appreciate the help. I love how you referred to Explorer as Exploder! That's so true.

Report · Jun 09, 2016

Glad I could be of assistance.

Yeah, I've never been a fan of IE - the fact that Microsoft has the audacity to try to force the world to do things its way, instead of following DOM standards, hasn't helped. And then the team responsible for how IE works just gradually adding compliance to IE over several iterations, forcing developers to write more and more hackish code to get it to work.. yeah, it's no wonder I dislike IE, so much.

V/r,

^_^

Report · Jun 13, 2016

I'm guessing your styling problem has less to do with IE and more to do with Outlook -- Outlook sucks harder than IE! Outlook barely supports styles and only if used inline and it does not support styling of div tags. This means everything has to be formatted with tables and inline styles -- ick! But that is the way of Microsoft and Outlook is pretty popular.

Outlook uses an IE like rendering engine and as far as I can tell I'm being very generous with using "like". I'm not sure if it's just old and neglected or if it's intentional to prevent malware propagation via the email viewing. Either way it's a pain.

Adobe Community

Clear Cart button on Shopping Cart Page