Magento Design and Development » jquery http://inchoo.net Magento Design and Magento Development Professionals - Inchoo Wed, 16 May 2012 12:17:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Magento mobile theme – imobile http://inchoo.net/ecommerce/magento/magento-mobile-theme-imobile/ http://inchoo.net/ecommerce/magento/magento-mobile-theme-imobile/#comments Mon, 07 May 2012 11:22:43 +0000 Stanislav Mihic http://inchoo.net/?p=14461 Magento meets jQuery mobile (ver 1.1.0), before we start please note this is only experiment, use this theme on your own, this is not (yet) production ready. In a nutshell we have “package” under which we place all edited files. For start we use magento iphone theme and then add some “extra stuff”.

Some of key features:

  • Autodetects the mobile device
  • jQuery mobile (v. 1.1.0)
  • Homepage slider (http://swipejs.com/)
  • Almost all pages styled :-)

Installation is simple, just copy downloaded files, (app, skin) after that go to administration and do some Magento magic. Magento already have browser detection, you only need to create rule. In our case we dropped table support because most of them will display normal desktop view store. Here is rule:

iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini|Fennec

You can add any other browser to this Expression, just point your device to http://whatsmyuseragent.com/ and find out user agent name of device browser. And this is how it looks in administration

Using expressions

We need to mention that theme is independent from main store theme, all files which are edited don’t “break” default Magento markup we are only using power of HTML5 and one of the new cool feature “custom data attributes“.

Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

Short explanation by John Resig

And here is our example for store header:

</pre>
<div data-role="header" data-position="inline" data-theme="c">
<h1><a href="<?php echo $this->getUrl('') ?>" data-icon="home">
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
<!--?php echo $this----->getChildhtml('top-user');?></div>
<pre>

We don’t have any local hosted files regarding to jQuery because it is much easier to edit and place the newest version of js.

					<![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
					<![CDATA[<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>]]>
				<![CDATA[		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />]]>
            skin_jsjs/swipe.js

Ah, if you need more info about jQuery mobile framework go to: http://jquerymobile.com/.

Swipe JS, http://swipejs.com/,

Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic. ;-) .

Ok, we made simple approach, create static block, named Slider with ID slider and place this code

</pre>
<div style="display: block;"><img src="{{media url=" alt="" /></div>
<div style="display: none;"><img src="{{media url=" alt="" /></div>
<div style="display: none;"><img src="{{media url=" alt="" /></div>
<div style="display: none;"><img src="{{media url=" alt="" /></div>
<pre>

If is there no needs for homepage slider just removed it from local.xml (from line 44).

For styling pages, we cover most of them but there is always more space to improve some part of Magento interface.

For demo and download go to our demo store http://imobile.inchoo4u.net with your smartphone, emulate in browser (change user agent), visit @ github, or just scan this QR code.

So if you have any suggestion, issues, trouble just comment below, enjoy

]]> http://inchoo.net/ecommerce/magento/magento-mobile-theme-imobile/feed/ 22 Create simple mobile ready search page http://inchoo.net/mobile-development/create-simple-mobile-ready-search-page/ http://inchoo.net/mobile-development/create-simple-mobile-ready-search-page/#comments Fri, 11 Nov 2011 10:01:35 +0000 Stanislav Mihic http://inchoo.net/?p=11534 Idea is to create one page which will be ready for mobile devices and serve like mobile app. We will use google ajax search API and jQuery to enhance experience. Also we will have script which will notice visitors how to add shorcut for iOs devices and use search like standalone app.

Let’s start with HTML

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<!-- if is screen bigeer than 481px load normal css -->
<link rel="stylesheet" href="css/style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<!-- css for mobile devices, based on screen size -->
<!--<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" />-->
<link rel="stylesheet" type="text/css"  media="only screen and (max-device-width: 480px)" href="css/mobile.css">
<link rel="stylesheet" href="css/mobile.css" media="handheld" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<![endif]-->
<!-- tell iPhone not to shrink mobile website -->
<!-- <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />-->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- enable full-screen mode (only when launched from home screen) -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- iOS 2.0+: tell iOS not to apply any glare effects to the icon -->
<link rel="apple-touch-icon-precomposed" href="images/icon_home.png" />
<!-- iOS 3+: full-screen startup splash screen image (must be 320x460) -->
<link rel="apple-touch-startup-image" href="images/startup.png">

<!-- bookmark popup window, use local storage HTML5 feature -->
<script type="text/javascript" src="js/bubble.js"></script>
<script type="text/javascript" src="js/bookmark.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>Search and you shall find…</title>
</head>

<body>
<header>
  <h1>My mobile search</h1>
  <h3>Search for</h3>
  <ul class="icons">
    <li class="web" title="Web Search" data-searchType="web">Web</li>
    <li class="images" title="Image Search" data-searchType="images">Images</li>
    <li class="news" title="News Search" data-searchType="news">News</li>
    <li class="videos" title="Video Search" data-searchType="video">Videos</li>
  </ul>
  <form id="searchForm" method="post">
    <fieldset>
      <input id="s" type="text"  />
      <input type="submit" value="Submit" id="submitButton" />
      <div id="searchInContainer">
        <input type="radio" name="check" value="site" id="searchSite" checked />
        <label for="searchSite" id="siteNameLabel"></label>
        <input type="radio" name="check" value="web" id="searchWeb" />
        <label for="searchWeb">Search The Web</label>
      </div>
    </fieldset>
  </form>
</header>
<section>
  <div id="resultsDiv"> </div>
</section>
<footer>
  <div class="meta"> <span class="alignleft"><a href="#">Normal web</a></span> <span class="alignright"><a id='top' onclick='$(document).scrollTo(0,500);'>Back to top</a></span> </div>
</footer>
<!-- loading js files, moved to bottom, firs browser load html, css files then at the end js -->

<!-- loading jQuery from google CDN network -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!-- loading jQuery from google CDN network end -->

<!-- loading jQuery live serach and settings for search -->
<script type="text/javascript" src="js/search.js"></script>
<!-- loading jQuery live serach and settings for search end-->

<!-- loading jQuery from back to top effect -->
<script type="text/javascript" src="js/scroll.js"></script>
<!-- loading jQuery from back to top effect end-->

<!-- jQuery js settings, etc -->
<script type="text/javascript" src="js/control.js"></script>
<!-- jQuery js settings, etc end -->

<!-- loading js files, end -->

</body>
</html>

We will use CSS media query to detect screen size and adapt, add full-screen loading image with icon then load js for bubble notice and use HTML5 local storage to show only to new visitor bubble. At the end we are load jQuery scripts.

You need to edit search.js to add desired web address which will be included in search.

	var config = {
		siteURL		: 'inchoo.net',	// Change this to your site
		searchSite	: true,
		type		: 'web',
		append		: false,
		perPage		: 8,			// A maximum of 8 is allowed by Google
		page		: 0				// The start page
	}

Now this is basic information how to get started with our little web app and customize to your needs. Use your smartphones to test demo page.

Live preview: msearch.veselistudio.com

Download: Custom mobile web search

]]> http://inchoo.net/mobile-development/create-simple-mobile-ready-search-page/feed/ 0 jQuery greater than ever http://inchoo.net/tools-frameworks/jquery-greater-than-ever/ http://inchoo.net/tools-frameworks/jquery-greater-than-ever/#comments Mon, 19 Jan 2009 08:37:13 +0000 Ivan Weiler http://inchoo.net/?p=684 I’m a big fan of John Resig‘s work. For those who doesn’t know he is the man behind jQuery JavaScript library, Firebug developer, Mozilla Corporation programmer and a man who made me laugh more than once.

I would also like to mentione his Learning Advanced JavaScript as a starting point for anyone who is, well, learning advanced JavaScript ;)

Few days ago jQuery celebrated 3 years with a announcment of 1.3 version which brings us number of major changes and some new features to play with.

Sizzle: brand new CSS selector engine
Live events: events that can be bound to all current AND FUTURE elements (now that’s a great idea!)
Event object: some serious refactoring of the jQuery event system
HTML injection rewrite: lightning-fast HTML appending
Offset rewrite: super-quick position calculation
No more browser sniffing: technique called feature detection

New Zend Framework 1.7 also introduces ZendX_JQuery component which integrates jQuery as an alternative to the already existing Dojo library. I didn’t tried it yet, but be sure i will. Maybe now Magento team would consider to use jQuery as their main library. I know it’s lot of work, but for some future versions, who knows.

I wish jQuery all the best and to last for many more years to come.

jquery_rockstar

]]> http://inchoo.net/tools-frameworks/jquery-greater-than-ever/feed/ 1 FancyBox – Fancy image zooming tool http://inchoo.net/tools-frameworks/fancybox-fancy-image-zooming-tool/ http://inchoo.net/tools-frameworks/fancybox-fancy-image-zooming-tool/#comments Wed, 04 Jun 2008 19:50:25 +0000 Tomislav Bilic http://inchoo.net/?p=7 There are many Lightbox clones this days. Some are fancier, some are lighter, some use jQuery, some do not. In this wast set of options, I found one I think I will prefer from today: FancyBox – fancy image zooming tool

It is based on jQuery and is a cool alternative to existing solutions. Here are some features:

  • Automatically scales large images to fit in window
  • Adds a nice drop shadow under the zoomed item
  • Groups related items and adds navigation through them (uses preloading)
  • Can display images, inline and iframed content
  • Customizable through settings and CSS

Other Lightbox alternatives I found are:

]]> http://inchoo.net/tools-frameworks/fancybox-fancy-image-zooming-tool/feed/ 8