Customize Magento 1.9 Responsive Web Design Template Like a Boss

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>

<!-- added this part -->
<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";
?>

Many Thanks To

This Tech Tidbit was brought to you by your friends at Eleven Dimensions Computer Technologies.
See our new 11D website at:

Our Partner Websites:

Bare Wire Networks:     http://www.barewirenetworks.com
CTI Solutions:   http://www.cti-solutions.com

Many Thanks to Our Partner companies

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thank you for sharing this information

    Magento development company

    ReplyDelete
  3. Thank you for the most valuable information....You must have done good research for the work, I appreciate your efforts.
    website design in india
    low cost web design services

    ReplyDelete
  4. A great guide for Magento 1.x users

    I have found another great guide for Magento 2: Magento 2 attributes

    I believe it will help your readers.

    ReplyDelete
  5. We are one of the best and leading towing company in Portland and our services are available in various location of Oregon. Call us to get more information about charges, services and more.
    Towing Services in Portland
    Tow Truck Company in Beaverton
    Towing Services in Tigard
    Towing Company in Vancouver
    Flatbed Towing in Vancouver
    Towing Company in Clackamas

    ReplyDelete
  6. Hi, I am John Smith I am Web Developer, It is an amazing blog thanks for the sharing the blog. Frantic infotech provide the Android Chat App Development such as an information about software development for costumer service. Frantic infotech also provide the mobile app development. Theve delopment of advanced web applications is Orient Software’s specialty and we will successfully fulfill all your web application development requirements, from small-sized to wider-ranged projects.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Event technology developed rapidly throughout the Covid pandemic. However, as platforms pivoted to virtual quickly, event manager data architecture decisions were rushed and often not carefully considered. This lack of coordinated output and the substantial increase in data from virtual events resulted in vast amounts of siloed data. define debrief, how much does wedding liability insurance cost, event management tools, swag bag ideas, what is nft, speaker biography examples, vendor events near me 2021, thank you email after meeting and how to invite someone for business lunch

    ReplyDelete
  9. Physical therapy can relieve pain, improve range of motion, and accelerate recovery from injury or surgery. Learn more about onsite recovery in Westford.

    ReplyDelete
  10. Web developers at web design Dubai agency are the programmers with the coding skills needed to add functionality to a website

    ReplyDelete
  11. The following process of customization can serve different purposes. This information is technically quite credible. Wordpress website optimization

    ReplyDelete
  12. Customizing the look and feel of your Magento store with professionally designed, responsive eCommerce website templates & themes can make a huge difference. Cisco Distributor Saudi Arabia

    ReplyDelete
  13. Professionally created, responsive eCommerce website templates and themes can significantly improve the look and feel of your website. cyber security companies in Saudi Arabia

    ReplyDelete

Post a Comment

Popular posts from this blog

Microsoft Visio 2010 Premium Product Keys

Mercedes Benz Diesel CDI EGR Emulator Circuit Diagrams

Fix: The Diagnostic Service Host service failed to start due to the following error. [ solved, no kidding ]