Skip to main content
Inspiring
June 6, 2016
Question

Clear Cart button on Shopping Cart Page

  • June 6, 2016
  • 1 reply
  • 1344 views

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 NOT StructKeyExists(session,'ElastomerCart')>

  <cfset Session.ElastomerCart = StructNew()>

    <cfset Session.ElastomerCart.First_Name = "">

    <cfset Session.ElastomerCart.Last_Name = "">

    <cfset Session.ElastomerCart.Title = "">

    <cfset Session.ElastomerCart.Company = "">

    <cfset Session.ElastomerCart.Address1 = "">

    <cfset Session.ElastomerCart.Address2 = "">

    <cfset Session.ElastomerCart.City = "">

    <cfset Session.ElastomerCart.State = "">

    <cfset Session.ElastomerCart.Zip = "">

    <cfset Session.ElastomerCart.Country = "">

    <cfset Session.ElastomerCart.Phone = "">

    <cfset Session.ElastomerCart.Fax = "">

    <cfset Session.ElastomerCart.Email = "">

    <cfset Session.ElastomerCart.Products = ArrayNew(2)>

</cfif>

<cfif StructKeyExists(session,'ElastomerCart')>

<form action="ElastomerCart.cfm" method="post">

<cfset StructDelete(session,'ElastomerCart')>

<input type="submit" class="submit" value="Clear Cart">

</form>

</cfif>

Thanks.

Andy

This topic has been closed for replies.

1 reply

WolfShade
Legend
June 7, 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,

^_^

Inspiring
June 9, 2016

WolfShade,

     I put this on my cart page:

<form action="../elastomer.cfm" method="post">

<input type="submit" class="submit" name="ClearCart" value="Clear Cart">

</form>

And this back on my beginning elastomer.cfm page:

<cfif StructKeyExists(form,'ClearCart')>

      <cfset StructDelete(session,'ElastomerCart')>

</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

WolfShade
Legend
June 9, 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,

^_^