Creating Color Switcher in Magento

Magento comes packed with a lot of options. But, no matter how many options you put into some product, you can never cover all of them. One of such options (for now) is a color switcher in Magento. To be more precise, an image switcher based on color selection. Firstly, you need to upload some images to your product.

Here are the steps:

• Login to you Magento admin panel.
• Add New Product with Images & give them some meaningful names like Red,Green,Blue,White depending on your product color.
• When I say give them name, I mean label values.check the below Screenshot: 

• Similarly you have to do it in Custom options.Choose Custom options tab from the list.
• Click on the Add new Option tab in the right Corner.
• Enter the Title as Color.Select input type as drop-down & create the same amount of drop-down options as you have images, giving them the same name Red, Green, Blue,white etc. Here are some images for you to see what I’m talking about:

• After this is done, we go to the code part.
• You need to modify your /template/page/html/head.phtml file to include the jQuery script (or any other if you can code the same logic into it) and write down few lines of JavaScript to do the switching (you can download my version of file) i.e. head.phtml.
•  After that, modify your /template/catalog/product/view/media.phtml to include all of the product images and dump them into some div. Here is the media file: media.phtml.
• Clear the Cache & go to front end to check you product .you'll see something like this:

10 low-code tools for building mobile apps fast

1) Alpha AnyWhere

-> A low-code, rapid, wizard-driven, end-to-end builder with a Windows-based IDE, Alpha Anywhere supports many databases and targets Web, mobile (iOS, Android, and Windows Phone), and desktop applications. HTML apps can be built using a component-based designer and responsively adapt to screen sizes from 4 inches to 4 feet. Alpha Anywhere integrates with PhoneGap and Adobe PhoneGap Build, allowing the easy creation of hybrid mobile apps without requiring the developer to install multiple native development environments or purchase a Mac. The company is currently testing a unique solution for occasionally connected mobile apps that rely on remote databases. 

2)App Press

->App Press is a Web-based no-code app creator that targets iPhone, iPad, and Android applications. Geared for designers, App Press uses a Photoshop-like user interface for assembling screens from visual assets using layers. On the back end, App Press is an Amazon cloud-based service and platform. The company claims that designers can produce their first app in one day, that with experience designers can create five apps a day, and that experienced designers can train new designers on the platform.

3) App Architect

-> AppArchitect is a Web-based, no-code, drag-and-drop builder and platform for native iPhone and iPad apps, which can be previewed in the AppArchitect Preview App, downloadable from the iTunes App Store, and finished binaries can be downloaded to submit to the App Store. It assembles plug-in building blocks that are written in Objective-C, and an AppArchitect SDK will be available to extend the product's capabilities. The company plans to expand the product to generate Android and mobile Web apps in the future, and it plans to charge $40 to $100 per month once the product is released. 

4)  Form.com

-> Form.com is a Web-based enterprise platform for Web and mobile form solutions with a drag-and-drop forms builder and flexible back-end technology. The builder can create new forms or replicate existing paper forms, set up process-specific workflow and API integration, embed logical transitions, allow the capture of images within the forms, capture digital signatures, and enable form field autofill. Finished mobile forms can collect information when disconnected and transfer it when connection has been restored. 

5) iBuildApp

-> iBuildApp is a Web builder that offers customizable templates for iPhone, iPad, and Android apps and promises that you can create an app in five minutes. Your app can be free if you accept iBuildApp branding and very tight limits to the number of users and site visits, unlimited-user white-labeled tablet apps cost $299 a month, and there are several plans in between the extremes. For common app types, template-based systems like iBuildApp can sometimes produce usable results, as long as the selection of widgets includes the functionality you need. 

6) QuickBase

-> QuickBase is an online builder and platform for Web and mobile Web database applications. It offers more than 300 customizable application templates, including the Complete Project Manager shown in the slide. Users can build applications "from scratch" starting with a data design, and all QuickBase websites can also be viewed as mobile websites. While Mobile QuickBase is not currently available in app form, the mobile website is eminently usable. 

7) Salesforce1

-> Salesforce1 gives you the ability to accelerate the development and deployment of HTML5, iOS, and Android mobile apps, as well as Web apps. In the simplest model, you use a mobile website or downloadable generic Salesforce viewer app to work with your Force.com Web application. One step up from that is to create a jQuery Mobile (shown in the slide), Angular.js, Backbone.js, or Knockout HTML5 mobile app using a Salesforce Mobile Pack. At the most complicated level, you can create native or hybrid apps for iOS and Android using the Salesforce Mobile SDK for your mobile platform combined with the Native SDK tools. These apps all communicate with the back end through a Connected App in Salesforce. 

8) ViziApps

-> ViziApps combines an online visual designer and customizable sample apps with code generation for mobile Web, as well as iOS and Android native apps. The ViziApps designer has form fields and charts, 60 backgrounds, and 4,000 stock images. It supports maps, video, audio, navigation bars, and navigation panels, and it has lots of customizations and JavaScript extensions. Template apps show how fields, actions, and data interfaces are used. 

9) Mobile Chrome Development Kit

-> The Mobile Chrome Development Kit, recently released as a Developer Preview tool chain based on Apache Cordova, takes a hybrid app strategy. A single project targets iOS, Android, and Chrome apps. As you can see in the slide, the user interface is standard HTML and CSS, which is integrated into Android (shown) and iOS native toolkits. While this is definitely not a no-code tool, you can do a lot using any visual HTML page designer. Once you need to add mobile code, you have Chrome APIs and Cordova APIs at your disposal, from JavaScript to enhance the app without having to drop down to the platform-dependent native code level.

10) Appcelerator

-> Appcelerator combines an IDE, SDK, multiple frameworks, and back-end cloud services into an enterprise-level system for mobile development. The Titanium SDK lets you develop native, hybrid, and mobile Web applications from a single codebase.

Titanium Studio is an extensible, Eclipse-based IDE for building Titanium and Web apps, and Appcelerator Cloud Services provide an array of automatically scaled network features and data objects for your app. The Alloy framework is an Appcelerator framework designed to rapidly develop Titanium applications, based on the MVC architecture and containing built-in support for Backbone.js and Underscore.js. While Appcelerator is not a no-code solution, it provides JavaScript-based tooling for iOS, Android, Tizen, BlackBerry, and mobile Web applications in one place.

Appcelerator, free to develop; Appcelerator Platform priced at enterprise levels

Fast and flashy: Famo.us JavaScript framework revealed

Famo.us's product to bring complex 3D graphics, realistic motion to stock Web browsers and ordinary Web developers.

The biggest problem with most HTML5 apps is that they're slow. Not because JavaScript runs slowly, but because the overhead involved in manipulating your browser's DOM (Document Object Model) to do the kinds of useful things people expect from a modern app brings everything to a grinding crawl.

Back in October, InfoWorld's Eric Knorr wrote about a little San Francisco startup calledFamo.us. Its product, which has attracted some 70,000 developers for a private beta, is a framework for creating Web and mobile JavaScript applications that break the performance bottleneck without plug-ins or native code.

Today, Famo.us is announcing that it will be offering its framework under an open source Mozilla Public License Version 2.0 (MPLv2) license and is unveiling demonstration code on the Codepencode-sharing site. It is also partnering with Firebase, a database as a service for mobile and Web apps.

Why so much fuss over another JavaScript framework? Mainly because it is unlike any other framework out there: Famo.us replaces the browser's rendering engine with its own, which is written entirely in JavaScript, and fuels it with the GPU acceleration provided by CSS's 3D transformation functions. Most any device these days that can run a modern browser -- even a modest smartphone -- has some kind of GPU supporting it, so why not leverage that? Armed with Famo.us, developers can maintain a single code base that performs well across many platforms.

This isn't a hack, either. It's all industry-standard CSS3, and the library itself is pure JavaScript with no binaries or other add-ons.

Laying the groundwork
One sign of how Famo.us might be onto something is that it's managed to snag none other than David Fetterman, the former mobile engineering manager for Facebook. He originally pooh-poohed HTML5 for not performing well enough. And when he met with the folks at Famo.us for the first time, he was a skeptic. "I was going to tell them it was a bad idea [to build pure HTML5 apps]," he tells InfoWorld. "But I came in, learned how it worked, and got excited about it." He's now a full-time team member.

At its core, the Famo.us library consists of four elements: a rendering engine, a physics engine, a gesture engine for input, and an output engine -- again, all written entirely in JavaScript. The rendering engine uses CSS3's transform: matrix3d() and transform-style: preserve-3D() functions to do the heavy lifting, which allow CSS elements to be treated like 3D objects -- scaled, rotated, transformed, and so on. Right now, Internet Explorer has a couple of bugs withpreserve-3D, but Famo.us and Microsoft are working together to get that fixed.

The Famo.us rendering engine preprocesses everything, the results of which can be sent through DOM or WebGL -- the latter enabling much more finely rendered applications or graphical objects. WebGL isn't turned on by default in some browsers, but Famo.us is being written to anticipate that happening -- much the same way JavaScript was not at first on by default but now is. Famo.us CEO Steve Newcomb believes that when developers use frameworks like his to access the power of WebGL across the board, the Web will get a "facelift," with much richer applications and graphics becoming the default.

A new power tool
An easy criticism of Famo.us is that 3D on the Web is nothing new, but Fetterman argues that the larger point of Famo.us is not to reinvent the wheel. "We're not inventing 3D on the Web, nor are we inventing WebGL. Famo.us is just an integration of a lot of these technologies to make it easy for someone to build this stuff. It's hard to achieve the sort of level of sophistication and performance you see in a native iOS, Objective-C app by way of a Web technology."

The strategy, as he put it, is to "build beautiful things," get as many people as possible using them, "then have everyone else catch up -- which is better than having us boil ourselves down to the least common denominator."

The framework, along with a pack of templates to get people up and running with it quickly, is being released as an open source project under the Mozilla Public License Version 2.0. Famo.us is planning to make money from its work by offering a cloud-hosted analytics system, which app developers can hook into if they so choose -- it's not mandatory.

"When you build something in JavaScript," Fetterman says, "you make it by necessity open source and sharable and reusable. I'm excited that nothing is going to get in the way of our core goodness as a platform. ... What we're able to do at the core of Famo.us is build a really a screaming-fast rendering engine in JavaScript, apply a physics engine to that, and apply some bells and whistles and refined principles that mean you can build beautiful things using Web technology across a multitude of devices. Putting things in the way of that makes me unhappy," he says.

Related products, Up-sells, Cross-sells in Magento

In Magento there are three types of product relations: Up-sells, Related Products, and Cross-sell Products. Two of them appear while viewing a product, and one usually appears in the shopping cart.

Up-sells for a product are items that you would like your customer to buy instead of the product that he is viewing, and they are pricey, better quality, etc. Related products also appear in the product info page, but they are products that are meant to be purchased in addition to the one that the customer is viewing. Cross-sell items can appear both in the product page and in the shopping cart but they are a bit like an impulse buy – similar to items at the cash registers in grocery stores.

Up-sells

As it’s already mentioned, up-sells are meant to get customers to spend more money buying a model of the same type of product that is more expensive, to add some features to it, etc.
This is an example of the Up-sell created in Magento demo store. Situation in which customer wanted to buy cheaper monitor so you suggested him some more expensive ones.

Related products

This product recommendation is based on the product your customer is currently viewing and it intends to make customer buy more products including the one that he wanted in the first place.
In this case, products usually come with checkbox to make it even more easier for customer to add items in the cart. Of course, if the product is configurable, checkbox cannot be used because the configurable attributes must be defined first.
Here is an example of related products (source: clickableautomotive.com.au):

Cross-sells

Cross-sells are usually displayed in the shopping cart page, ie. after a product has been added to the cart but sometimes that’s not the case. This functionality is intended to make customers buy items they didn’t had in mind when they came to your site. It’s really similar to all those items you see at the cash register in stores that make you to buy something impulsively.
Cross-sells looks like this (source: www.scoutbags.com):

What does all this mean?

To sum up, main difference between up-sells, cross-sells and related products is that up-sells point out products that are improved versions of the one your customer wanted to buy (ie. more expensive) and the other two are there to make customer buy more products including the one he came to buy. Related products through items that are related to the product he wants to buy and cross-sells with products that aren’t actually related to the item but it’s likely that customer will be interested in them (based on the one he wants to buy).

Usually, product recommendations are combined and sometimes up-sells and cross-sells are actually “hidden” within related items. But, on the other side, they can be divided with labels as: “Want to Upgrade?” for up-sells and “More Recommendations” for related/cross-sells. This will also allow you to track what types of suggestions are more effective.

How are you going to present all those recommendations to your customers is really up to you. Some common labels are: “You may also be interested in the following product(s)”, “Complete the look”, “May we suggest…”, etc.
Combined product recommendations (source:www.freshpurple.com):

It’s recommended to use labels that clearly communicate why are products being recommended (eg. “People like you liked this”, “These are top then sellers in this category”) than to use just “We recommend”.

Ten must -have Open Source Tools for System Administrators

1) Nmon

-> In general, systems administrators use top, sar (system activity reports) and other such commands to monitor the performance of various Linux sub-systems (CPU, memory, I/O, etc), and these commands are available in most Linux distributions. Why do we need to use so many commands, when one command can give a huge amount of information about a system’s performance? Yes, Nmon is an open source utility that provides system performance data on a single screen. Nmon stands for Nigel's performance monitor. It provides the data in two ways: 1) on-screen data that gets updated once every two seconds, and 2) exports the data to a CSV (Comma Separated Values) file for later analysis and plotting of graphs.

2) Rsyslog

->Rsyslog is a replacement for Syslog, and it offers many benefits over the other log servers (Syslog and Syslog-ng). Rsyslog collects and forwards the logs to a centralised server. It is the default log server for the latest versions of Red Hat Enterprise Linux, as well as many other Linux distributions. Maintaining a centralised log server is one of the primary requirements for most IT organisations and systems administrators. Log management helps to meet IT security audit and compliance requirements. Inadequate logging is also one of the areas of failure for the Payment Card Industry’s (PCI) Data Security Standard (DSS).

3) Logstash

->Logstash is an open source tool for managing events and logs. It acts as a log analyser and runs on top of the centralised log management server. You may enable logging to track each and every system activity, especially on production servers, and you may do the same on all the production servers deployed in your infrastructure. So a huge amount of logs are generated and all are forwarded to the log server based on your configuration.
Within the generated logs, tracing a particular event is a very tedious job for a systems admin. Logstash makes the systems admin's job a lot easier by parsing logs based on a requirement and generating a report. You can send logs from Rsyslog, Syslog and Syslog-ng server to the Logstash server for analysis. I would like to mention another log analyser tool called Octopussy, which is also an open source tool and worth a try.

4) Git

->Git is an open source distributed version control system for small and large projects. This tool is used by both systems administrators and developers. Git has received a lot of attention in the open source world and I just want to make sure the tool is added to my list.

5) Puppet

->Puppet is an open source configuration management tool. Most of the systems admin's tasks are repetitive and
boring. So automating these is the only way to accomplish them quickly. Automation also helps in avoiding manual
configuration errors. As I mentioned earlier, configuration is the most important task for systems administrators. I have selected Puppet among all other configuration management tools as it is one of the best adopted by many IT organisations and cloud solution providers. It helps systems administrators to deploy the custom configuration in a number of systems and maintain it throughout the life cycle.

6) OCS Inventory NG

-> OCS Inventory NG, which stands for Open Computers and Software Inventory Next Generation, is an open source solution for managing IT assets. Most of the time systems administrators run around to collect IT asset information reports when there is an IT audit. This tool helps them to discover all the devices connected to the network and to collect the inventory of software and hardware components installed on a system. It is also capable of deploying software and configuration scripts on a system.

7) RackTables

-> RackTables is an open source tool that is used as a data centre asset management system. Usually, data centre assets are tracked in spread sheets by the systems admin or management team. Maintaining all the assets in a spread sheet and generating a report based on needs is a cumbersome task. RackTables is a tool that is handy when creating the data centre rack layout and for document network devices, servers and other components installed in a rack. It also helps to track IP address space. By looking at the rack layout, you can easily make out the remaining space left on it and generate reports.

8) Clonezilla

-> Clonezilla is open source software for disk imaging and cloning. This tool helps systems administrators in system deployment, bare metal backup and recovery. Cloning is one of the easiest ways to take backups of a particular partition or an entire disk, and it also helps to restore it. Two flavours of Clonezilla are available—Clonezilla Live and Clonezilla SE (server edition). Clonezilla Live is suitable for a single machine backup and restore. Clonezilla SE is for massive deployment. Clonezilla supports Linux, Windows and other operating systems, and a wide variety of file systems.

9) SystemRescueCD

-> Nowadays the bootable CD/DVD ISO of most Linux distributions has an option to boot the system into recovery/
rescue mode in case of system failure. Though we have a rescue option available in CD/DVD ISO, SystemRescueCD brings more valuable tools to repair the corrupted system. SystemRescueCD is a Linux system rescue disk available as a bootable CD-ROM and USB stick. It’s for administering or repairing your system and restoring data after a crash.

10) Ntopng

->An important routine task of a systems admin is monitoring network traffic and keeping it controlled. Ntopng provides network traffic data of the active hosts and sorts the traffic according to different protocols. It is an open source tool and the next generation version of the original Ntop. It provides a nice Web interface to navigate all the information.

Why It Is Beneficial To Opt For Customized Drupal Website

Drupal customization acts as the right impetus that brings various opportunities for you at the right point of time. If you are planning to take your online business to the next level to meet the market challenges, then you need to have a strong online presence that can withstand the latest trends. Being a powerful open source content management system, Drupal can offer you a highly-dynamic website that will give your business an extra edge over your competitors. Custom Drupal development allows the users to modify the site as per their specific requirements.

What Makes Drupal The Best Platform To Build Custom

 Designed Websites!

Numerous Features: Drupal CMS comes with a wide range of features, like RSS feeds, user account registration, maintenance, page layout & system administration customization, menu management and even more. These excellent features help you create all sorts of websites including single & multi-user blogs, simple sites, forums, brochure-ware, community websites, etc.

Related: Responsive Design for Your Business Website

Administrator Control: Drupal has an advanced administrator control with the options to set up new user accounts as well as user permissions. It provides easier administration with greater controls. The permissions can be designated in accordance with the role or group. Also, it offers fine-tooth comb-style that helps users in creating the content.

Organized Content: The ability to organize the content for recall or later use is one of the difficult parts for the various content management systems. Drupal software allows its users to categorize the content via path urls, build custom lists, link the content and create defaults.

Related: A Step By Step Guideline To Create Your Own Website

Advanced Tools/Templates: This robust CMS offers the elemental building of websites in the form of modules, where rules and content can be created quickly. It offers a numerous themes and templates to help you create simple to even more complex sites, eliminating the need to start from scratch. These pre-defined configurations or features help you create fairly complex sites quickly, allowing you to utilize your time in building extra features.

Enabling Users To Collaborate With You: Along with the user-friendly interface, Drupal has a great ability to publish socially. Drupal-based websites engage its users to contribute, while providing the administrator the ability to view, create, administer publish as well as control the social content, published on the site.

The Benefits That You Can Expect From Drupal Customization

If you want to own feature-rich website with complete flexibility and want to have a full control over your site, then Drupal customization is the best and the decisive choice. It allows you to create a highly-scalable and adaptable website that is satiated to meet your unique requirements. You can keep track of your site visitors and even restrict the unauthorized access to your website.

Unlike regular HTML websites, Drupal sites are comparatively easy to manage. You can easily maintain various Drupal features without technical expertise. 

It allows you to be upgrade Drupal-based site to the higher version easily and keeps you updated about the latest changes in the Drupal CMS.

Drupal customization offers incredible modules that you would like to incorporate in your website.

The custom sites involve high-quality JavaScript and CSS codes that ensure better performance of sites on the popular search engines resulting in better online visibility, improved traffic rates and thus, increased Return On Investment.

Customizing the Appearance of a Specific Node in Drupal 7

The customization we will be performing on the node in question is that it should only display its content and links to authenticated users. In other words, anonymous users will only be able to see its title but not content.

Here are the Steps to be Followed:

• navigate to your Drupal root folder.
• Go to sites --> all --> themes --> your theme folder. Here in my case, it is myzen.
• Search for node.tpl.php in templates folder. if you are using myzen theme, you'll not find node.tpl.php file inside templates folder. You have copy from zen (theme)--> templates folder to your theme's template folder.
• Next,open node.tpl.php file in you favorite editor.
• search for the code as shown in below screenshot:

• What we want to do is wrap the above code inside an if statement so that the resulting block looks something like the following:

• Now clear the cache and rebuild registry.
• To see if it's working or not , just log out from admin panel & visit the site.
• you will see only title of a node & you're done.

How to show POP UP on Page Load In Magento

A client recently requested a popup on the home page. So, I decided to implement this functionality using FancyBox, which I have been using quite a bit lately.

The first step is to add the css and Jquery to your head.phtml file which is located at app --> design --> frontend -->  default --> metro-blue(this is my theme folder) --> template -->page -->html . and then upload the  Jquery Files and css files into the appropriate folders.

Add following files to the head.phtml file as shown below:

• <link rel="stylesheet" type="text/css" href="<?php echo $this>getSkinUrl('fancybox/jquery.fancybox-1.3.4.css');?>" media="screen" />
• <script type="text/javascript" src="<?php echo $this->getSkinUrl('fancybox/jquery.fancybox-1.3.4.js');?>"></script>
• <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
• <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
• <link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('bootstrap/jquery-ui.css');?>" media="screen" />

Once you have done that, load your home page and check in source code (right click view source) that you can actually click thru the links in source code to the jquery.min.js, jquery.fancybox-1.3.4.js, and jquery.fancybox-1.3.4.css files. If you cannot click thru to the actual file, take a look at where you are uploading the jquery and css files.

Please note use of jQuery, which is using no-conflict mode (required in Magento).To check this,open head.phtml and go to the end of document & you'll see code like this:

<script type="text/javascript">

  jQuery.noConflict();

  // Code that uses other library's $ can follow here.

</script>

if such code not found in head.phtml then just add to it.

Once you are sure that  these files are loading, you want to enter the following in your home page content, above everything else, shown here:

• Login to Magento admin panel.
• Navigate to CMS -> Pages-> home .
• Click on content part on left side. On right side, click on html link as shown in below screenshot.

• add the below code using editor on home page.Here,i m showing jquery tabs on page load.

<script type="text/javascript">// <![CDATA[

jQuery(document).ready(function () {

           jQuery.fancybox({

            'width': '800px',

            'height': '700px',

            'transitionIn': 'fade',

            'transitionOut': 'fade',

            content: '<div id="tabs"><ul><li><a href="#tabs-1">EXECUTIVE</a></li><li><a href="#tabs-2">DELUX</a></li><li><a href="#tabs-3">SUPER-DELUX</a></li><li><a href="#tabs-4">CREAM-CLUB</a></li></ul><div id="tabs-1"><p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.<br>For more Information <a href="http://www.lolo24.com/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSB1cmw9J2V4ZWN1dGl2ZS5odG1sJ319/key/25a2c64d0f7833bc5f613208227d29f8/"><b>CLICK HERE</b></a></p></div><div id="tabs-2"><p>All our products in deluxe category are awesome, Precious, making our offers a true.</p><a href="http://www.lolo24.com/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSB1cmw9J2RlbHV4ZS5odG1sJ319/key/25a2c64d0f7833bc5f613208227d29f8/"><img src="http://www.lolo24.com/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvaW5mb3J0aXMvdWx0aW1vL2N1c3RvbS9VbnRpdGxlZC00LmpwZyJ9fQ,,/key/25a2c64d0f7833bc5f613208227d29f8/" alt="" /></a></div><div id="tabs-3"><p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. bia nostra, per inceptos himenaeos. </p></div><div id="tabs-4"><p>HEllo. </p></div></div>'

           });

jQuery( "#tabs" ).tabs();

});

// ]]></script>

• If you clear your browser cache and go to your homepage, you should now see a popup on home page as shown below.This is what your popup should look like on page load…

How cool is that???