Pop-up message (item to cart, shipping selection)

Question

Hi BC Product Managers and whoever may care,
I have had my BC website for a few years now (http://www.itsaperfectday.com). One thing that irks the hell out of me is why BC has a little pop up dialog that says "item added to cart" and "xyz shipping option selected". I know there is an option to disable this - which I have btw, but that means my shopping cart no longer shows validation errors (such as when the customer has not chosen a shipping state).
Why on earth does BC have these pop up dialogues? Which major e-commerce  sites do you see this with? I don't see this on Amazon.com or any other major retailer. Nor do I see this with Shopify, BigCommerce, Magento based sites.
In this day and age and for a company such as Adobe - this seems so backwards. Sorry for the rant. But I have been waiting for years to see if BC would turn this off but this just has not happened so far. 
And while I am on a rant - same goes with poplets. The next and prev links on the poplets are not even aligned pixel perfectly. For heaven's sake you are Adobe and you sell software that helps create the most pixel perfect and elegant stuff out there. Your poplets looks very sad in comparison to what a proper poplet can look like. And also give us an option to turn off poplets and just change the big image as one clicks on the small poplet image. I know some have found a workaroud using JQuery but this should be made easy for a user to do.
I hope someone pays attention and has these relatively minor items fixed.
Thanks for reading through the rant.
Satya

Answer 1

Actually, I think the problem is two parts.  My bad. 
First off, yes.  The #catshopbuy element in your case is a link and setting the attribute "disabled='disabled'" on a link does nothing.  They can still click it.  I'm assuming it's a link so that there's a fallback HREF in case they don't have javascript running. 
So, in order to use this method to make the checkout button unclickable you'll need to use an <input type="submit" /> element instead for your checkout button.  So your current checkout button should become <input id="catshopbuy" type="submit" value="Checkout" disabled="disabled" />
You might need to update your CSS references on screen.css around on lines 301 and 303 from "a#catshopbuy" to "#catshopbuy" since we are changing the element and your CSS is looking for an A element with that ID to style.  Also change line 299 from ".cart-form .cart-summary p.checkout a" to ".cart-form .cart-summary p.checkout #catshopbuy" That should fix your styling of the checkout button when you make it an <input/> element.
Edit: Since your Checkout button is generated by a BC tag the above won't work.  The strategy has changes from disabling/enabling a checkout button to manually adding a fake checkout button and showing/hiding each of those based on the state of the select boxes.  See my posts below about the fake and real cart buttons.
The reason it isn't working is because we already have javascript "onChange" events hooked up manually (inline) to your select elements. The existing onChange event is hardcoded into the html and is overriding our change function. To fix this, just change this:
    $("select").change(function() {
        checkSelectStates();
To this:
checkSelectStates();
Doing this will run the script once on pageload instead of on the select changing.  We'll manually add in the javascript next to our select elements so that the script runs on changing your select options.
Once you remove that code, you'll need to adjust the markup manually in your Cart layout.  Find the two SELECT boxes for shipping options and state.  You should find a onchange="Some javascript here" on those elements.  Basically, we just want to call our function we made so using the shipping options select box, your html is:
<select onchange="UpdateShipping(this.value,5442892,0);" class="shippingDropDown" id="ShippingOptions" name="ShippingOptions"><option value="-1">Choose Shipping Option</option><option value="126709">USPS Priority Mail (Free Shipping) $0.00</option></select>
After editing the onchange attribute it should look like:
<select onchange="UpdateShipping(this.value,5442892,0);checkSelectStates();" class="shippingDropDown" id="ShippingOptions" name="ShippingOptions"><option value="-1">Choose Shipping Option</option><option value="126709">USPS Priority Mail (Free Shipping) $0.00</option></select>
Important: Add the javascript in red above to BOTH of your SELECT boxes.  Just add it on after the ";" in the onchange attribute.
The caveat to this whole solution is you lose the javscript fallback url that your current Checkout button (a link) links to if they don't have javascript but in my opinion, all modern phones and browsers have it and BC uses javascript a lot so if you can't lose the fallback HREF you probably can't use this solution.