Customize Magento 1.9 Responsive Web Design Template Like a Boss

October 25, 2017

Customize Magento 1.9 Responsive Web Design Template Like a Boss

Introduction

Eleven Dimensions Technologies has many years of experience building and maintaining Magento shopping carts and building custom templates. In this short technical note we will explain how the responsive design template works. The built-in Responsive Web Design (RWD) Template is a great place to start customizing your own Magento shop. It already has the so called "responsive" sections in the styles.css file for small screens. in styles.css you will see code such as this:

...

@media only screen and (max-width: 770px) {
(various css here...)
}

This blog will show you all of my tricks. First you need to start with Magento ver. 1.9.3.3.

Add Tabs to the RWD Product View

The First trick is to add a new tab to the RWD product view page:
edit this file:
./app/design/frontend/rwd/default/layout/catalog.xml

in this section add a few lines to increase the tabs:

...
<block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
<action method="addToParentGroup"><group>detailed_info</group></action>
<action method="setTitle" translate="value"><value>Description</value></action>
</block>

<block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml">
<action method="addToParentGroup"><group>detailed_info</group></action>
<action method="setTitle" translate="value"><value>Additional Information</value></action>
</block>


<block type="catalog/product_view_media" name="product.info.moreviews" as="moreviews" template="catalog/product/view/moreviews.phtml">
<action method="addToParentGroup"><group>detailed_info</group></action>
<action method="setTitle" translate="value"><value>More Views</value></action>
</block>
...

Customize the ZoomLens in product view.

ZoomLens allows your customers to view a zoomed in image of your product. Simply edit this file:
./skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevatezoom.js
if you use minimized js code then edit this file:
./skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js
Change the zoom size, enable/disable the zoom lens entirely if you desire.

Magento Connect - Access is locked. Please try again in a few minutes

If you see this when trying to use Magento Connect, then edit this file ./var/brute-force.ini
Change the value in Line 1 to 0, optionally you can delete the last 2 lines to turn off this feature.
brute-force-bad-attempts-count = 0
brute-force-diff-time-to-attempt = 180
brute-force-attempts-count = 5
brute-force-last-bad-time = 1509709870

Get a Free SSL Certificate for your Magento Site

https://www.sslforfree.com/certificates

Define Custom Attributes for Products and Use Them in Backend Code

Suppose you want to show a palette of color swatches for your multicolor selectable product in your Magento Shop. You can define a custom catalog product attribute that you can set a text value into and then query that attribute in your customized RWD template and then use it to query the contents of a CMS Block. First of all, logon to the Magento Admin Panel, then use the menus to define attributes. Catalog->Attributes->Manage Attributes then Add New Attribute button to make a new one. Define a new one called swatch_cms_block. The so called "Attribute Code" is where this name goes. Scope is Store View, type is Text Field. The Title will just be Swatch. Apply to All product Types. Default value should be just "None".
Now you need to go up one menu level to "Manage Attribute Sets" , Choose "Default" and assign this attribute to the General category of your product.
Finally, in your RWD view.phtml code you will need to add this code somewhere:

CODE

<?php
$swatch=$_product->getMetaTitle();

$attribute = $_product->getResource()->getAttribute('swatch_cms_block');
if ($attribute) {
$attribute_value = $attribute->getFrontend()->getValue($_product);
} else {
$attribute_value = "Undefined Attribute";
echo "<H1>Please Define the swatch_cms_block attribute first</H1>\n";
}
if ($attribute_value == "") $attribute_value = "NONE";
echo $this->getLayout()->createBlock('cms/block')->setBlockId($attribute_value)->toHtml();
?>

Finally, you will need to define a CMS Static Block called "NONE" to serve as the default CMS block. Finally, you will need to define define CMS blocks to serve a swatches for your products. The result is that the CMS block will appear in your custom product now.

Crop and Resize Images in Catalog Grid View

Use the Varian_Image library like a boss to crop and resize images.

<?php
$_imgSize = 350;
$tempimg = $this->helper('catalog/image')->init($_product, 'small_image')
->constrainOnly(false)
->keepAspectRatio(true)
->keepFrame(true)
->keepTransparency(true)
->backgroundColor(array(255,255,255))
->resize(350, 350);

$image = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(350, 350);
$imageUrl = $image->__toString();
$newFile = str_replace(
array(Mage::getBaseUrl('media'), '/'),
array(Mage::getBaseDir('media').DS, DS),
$imageUrl
);
$imageObj = new Varien_Image($newFile);
$width = $imageObj->getOriginalWidth();
$height = $imageObj->getOriginalHeight();
$imageObj->crop(25,25,25,25);
$imageObj->save($newFile);
echo "<H1>".$width." x ".$height."</H1>\n";
?>