Magento – Magento hide / show coupon field in cart page

javascriptmagento-1.7PHP

I'm using Magento 1.7 and I need a solution or at least some directions in order to solve the following issue:

I want to hide the coupon field in the cart page and replace it with a link that says "Have a coupon? Click here to use it". When the link is clicked, the coupon form should appear and the customer can enter his code. I've searched everywhere and I can't find a solution, which seems really weird since everybody is recommending that the coupon field should not be prominent in the cart page.
Any help will be greatly appreciated.

Thanks in advance.

Best Answer

You can do this simply with some javascript. The javascript implementation can be done in a few ways. This is but one.

The quickest would be to copy the core template to your theme 

/app/design/frontend/base/default/template/checkout/cart/coupon.phtml

and then set the coupon element to display:none with some in-line css (or you can adjust the carts stylesheet if you do not want to use in-line css, which is better)

Then all you have to do is place your 'click here' element to have a click event to toggle the coupon display and hide the click element.

Have not tested this code for 100% correctiveness

<form id="discount-coupon-form" action="<?php echo $this->getUrl('checkout/cart/couponPost') ?>" method="post">
    <a class="show-coupon-box" href="#">Have a coupon? Click to enter</a>
    <div class="discount" style="display:none">
        <h2><?php echo $this->__('Discount Codes') ?></h2>
        <div class="discount-form">
            <label for="coupon_code"><?php echo $this->__('Enter your coupon code if you have one.') ?></label>
            <input type="hidden" name="remove" id="remove-coupone" value="0" />
            <div class="input-box">
                <input class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $this->escapeHtml($this->getCouponCode()) ?>" />
            </div>
            <div class="buttons-set">
                <button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="discountForm.submit(false)" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>
                <?php if(strlen($this->getCouponCode())): ?>
                    &nbsp; <button type="button" title="<?php echo $this->__('Cancel Coupon') ?>" class="button" onclick="discountForm.submit(true)" value="<?php echo $this->__('Cancel Coupon') ?>"><span><span><?php echo $this->__('Cancel Coupon') ?></span></span></button>
                <?php endif;?>
            </div>
        </div>
    </div>
</form>

and some javascript to deal with the click

$$('.show-coupon-box')[0].observe('click', function(e){
   $$('.discount')[0].toggle(); $$('.show-coupon-box')[0].toggle(); 
   e.stop();
});
Related Topic