May 25, 2013

cm-mini

Magento - Remove the ugly radio buttons from checkout

The onepage checkout in Magento is already quite slow in lots of respects and the last thing you want to do is over complicate it further. What we've done here is replaced the ugly and irritating radio buttons that require you to make a selection and then press continue, with nice instant action buttons. In order to do this, you'll need to do the following;
In template\checkout\onepagelogin.phtml remove the radio buttons and replace with the following.
<ul class="form-list">
<?php if( $this->getQuote()->isAllowedGuestCheckout() ): ?>
<li>
<button type="radio" class="form-button" onclick="checkout.setMethod('guest');");"><span><?php echo $this->__('Continue') ?></span></button>    
<label for="</span><span style="color: #0000bb;">login:guest"><?php echo $this->__('Checkout as Guest') ?></label>
</li>
<?php endif; ?>
<li>
<button type="</span><span style="color: #0000bb;">radio" class="</span><span style="color: #0000bb;">form-button" onclick="</span><span style="color: #0000bb;">checkout.setMethod('register');"><span>Register</span></button>    
<label for="</span><span style="color: #0000bb;">login:register"><?php echo $this->__('Register') ?></label>
</li>
</ul>
In the opcheckout.js file in the skins folder, replace the setmthod function with this one.
setMethod: function(methodtype){
if (methodtype=='guest') {
this.method = 'guest';
var request = new Ajax.Request(
this.saveMethodUrl,
{method: 'post', onFailure: this.ajaxFailure.bind(this), parameters: {method:'guest'}}
);
Element.hide('register-customer-password');
this.gotoSection('billing');
}
else if(methodtype=='register') {
this.method = 'register';
var request = new Ajax.Request(
this.saveMethodUrl,
{method: 'post', onFailure: this.ajaxFailure.bind(this), parameters: {method:'register'}}
);
Element.show('register-customer-password');
this.gotoSection('billing');
}
else{
alert(Translator.translate('Please choose to register or to checkout as a guest'));
return false;
}
},
Now, once that's all in place you should be able to hit the continue button for each selection and it will bring up the related section. You may not think that it makes much of a difference, but what we've seen over time is that removing the number of clicks in the checkout process is always beneficial.

Magento - Wishlist on the cart page

Remember when you're running your e-commerce site that what you want to do is push your products. A function that can be seen on many sites like Amazon for instance, is your wishlist / favourites being offered to you before checking out. Below is a quick and simple solution of how to remind your customers to add products to their cart that they had previously marked into their wishlist.
Create a file in your frontend template wishlist folder called saved-items.phtml and add the following code.
<?php if ($this->helper('wishlist')->isAllow()) : ?>
 <div class="box saved-items">
<div class="head">
<h4><?php echo $this->__('Saved Items') ?></h4>
</div>
<?php if($this->helper('wishlist')->getItemCount()>0): ?>
<ol id="list">
<?php foreach($this->getWishlistItems() as $_item): ?>
<li class="element">
<div class="product-actions">
<p>Item added at <br /><?php echo $_item->getAddedAt(); ?></p>
<?php if($_item->isSaleable()): ?>
<p>
<a href="<?php echo $this->helper('wishlist')->getAddToCartUrlBase64($_item) ?>" class="link-cart">
<?php echo $this->__('Add to Cart') ?></a></p>
<?php endif; ?>
<p>
<a href="<?php echo $this->helper('wishlist')->getRemoveUrl($_item) ?>" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the wishlist?') ?>');" class="widget-btn">
<img src="<?php echo $this->getSkinUrl('images/list_remove_btn.gif') ?>" alt="<?php echo $this->__('Remove Item') ?>" />
</a>
</p>
</div>

<div class="product-images">
<a href="<?php echo $_item->getProductUrl() ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(50); ?>" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" width="50" height="50" />
</a>
</div>

<div class="product-details">
<a href="<?php echo $_item->getProductUrl() ?>"> <?php echo $this->htmlEscape($_item->getName()) ?></a> --
<span><?php echo $this->htmlEscape($_item->getShortDescription()) ?></span>

</div>
<div class="product-price">
<?php echo $this->getPriceHtml($_item) ?>
</div>
</li>
<?php endforeach; ?>
</ol>
<?php else: ?>
<div class="content"><p><?php echo $this->__('You have no saved items.') ?></p></div>
<?php endif ?>
<div class="actions"><a href="<?php echo $this->helper('wishlist')->getListUrl() ?>">
<?php echo $this->__('Go to Wishlist') ?></a></div>
</div>
<?php endif ?>
To finish off add the following to your checkout.xml
Look for <checkout_cart_index> in your xml file and place the following within <reference name="content">.
<block type="wishlist/customer_sidebar" name="wishlist_saved" template="wishlist/saved_items.phtml"/>
Create your own CSS styling to finish off and your done.

Magento - Special Prices Date (More Control)

So this next blog is going to be about what is featured in the Enterprise edition of Magento and how you can attain this in your current version of Magento. One big flaw in the special prices is that they are controlled by the day, so you can't really do very exciting promotional sales on your website in the CE version of Magento, however in the Enterprise edition you can implement a special price countdown til sale ends, as well as control product special prices by the hour and minute. Today you'll be briefly guided through how you can achieve this in your CE version of Magento.

Magento - New/Special Price Stickers on Images

In the extension world of Magento there are plenty of little addons out there that will do this job for you, but at a cost. Whilst trauling through the Magento German forums last year, we came across an exceptional post that still merits mentioning today and its complete FREE!

So here is our adaptation of how this could be implemented.

In your frontend template, if you open up your list.phtml file located in the catalog/product folder locate in grid view <div class="product-image"> and add the following.</p> <div class="codeblock"> <?php 
$_now = time();
$specialToDate = strtotime($_product->getspecial_to_date())+(60*60*24);
$specialFromDate = strtotime($_product->getspecial_from_date());
$newsToDate = strtotime($_product->getnews_to_date())+(60*60*24);
$newsFromDate = strtotime($_product->getnews_from_date());

if ((($newsFromDate <= $_now) && ($newsToDate > $_now)) || (($_product->getSpecialPrice()) && ($specialFromDate <= $_now) && ($specialToDate > $_now))): ?>
<div class="teaser">
<?php if (($_product->getSpecialPrice()) && ($specialFromDate <= $_now) && ($specialToDate > $_now)): ?>
<div class="new-sign"</span><span style="color: #007700;">></div>
<?php endif; ?>
<?php if (($newsFromDate <= $_now) && ($newsToDate > $_now)): ?>
<div class="onsale"></span><span style="color: #007700;"></div>
<?php endif; ?>
</div>
<?php endif; ?>

and add the following to your CSS *Adjust as needed*
.new-sign {padding:10px 0; width:127px; height:67px;color:#ffffff; text-align:center; background:url(../images/new.png) no-repeat; font-family:Impact; font-size:1.5em; letter-spacing:0.05em; }
.onsale {padding:10px 0; width:113px; height:40px; background: url('/../images/reduced.png') no-repeat;  }
You can now create your own reduced.png and new.png image and place them into your skin images directory.

Magento - UK Postcode Validation

We came across a problem recently, which was related to exporting orders to parcel force and how the UK postcode format is required to have a space between that seperates the district code and the inward code.

Many people these days assume that there is little or no reason to have a space in their postcode and seem to take a more continental approach towards this. However, this creates problems when transporting your orders to distribution firms such as ParcelForce and they WILL NOT recognise the postcode without a space. To prevent this from happening you can add the following into your name.phtml file in the customer folder of your frontend templates.

<script type="text/javascript">
var shippingForm = new VarienForm('co-shipping-form');
Validation.addAllThese(
[
['validate-zip-international', 'Please enter a valid uk zip code.E.G. GB1 6LY', function(v) {
var country_id = 'GB'
var country = $('billing:country_id');
var element = $('billing:postcode');
if (element && ('' != element.value) && (country_id == country.value)) {
if (!element.value.match(/(^[A-Za-z]{1,2}[0-9]{1,2}[A-Z]?[\s][0-9][A-Za-z]{2}$)/ )) {
return false;
}
}
return true;
}]
]
);
</script>
Once you'ved added this to name.phtml you can now locate the postcode inputs in billing.phtml and shipping.phtml and replace the input with the following
<input type="text" title="<?php echo $this->__('Zip/Postal Code') ?>" name="billing[postcode]" id="billing:postcode" value="<?php echo $this->htmlEscape($this->getAddress()->getPostcode()) ?>" class="validate-postcode required-entry input-text" />
This will now give you nice clean postcodes for all of your UK postcodes only and mean that there will be less complications for users checking out when it comes to payment processing and order exporting to distributors.

More Articles...

  1. Magento - Low Stock Notifications
  2. Magento - Site Speed & Performance
  3. Magento - Flushing Tables
  4. Magento - The Importance of Cronjob

Page 3 of 4