Autocomplete Search Magento Customer by API Call

Hi, today i’m gonna show you how to add ‘Autocomplete Search for Magento Customer by API Call‘. I assume you already read my first post about calling Magento API ‘Play with Magento API SOAP V1‘. This method using jQuery Autocomplete, here is the link.

As i mention in ‘Play with Magento API SOAP V1‘, first of all you gonna need is to make connection between our application and Magento API. Since post before use indonesian language i’ll repeat again here to make sure you follow correct instruction.

Connection

Setting SOAP Account

We need SOAP account to integrate with system and getting the roles we want.

  1. Login to backend magento
  2. System -> Web Services -> SOAP/XML-RPC – Roles
  3. Add New Role
  4. Resource Access -> All -> Save Role
  5. System -> Web Services -> SOAP/XML-RPC – Users
  6. Add New User
  7. On ‘User Role’ Tab, choose role we’ve made before
  8. Save User

Login with SOAP Account

In your host, create php file (ex. magehost.php) and put script below to login using SOAP account you’ve created.

$config=array();
$config["hostname"] = "namahost.com"; //ini adalah host magento anda
$config["login"] = "apiuser"; //ini adalah user API anda
$config["password"] = "apipassword"; //ini adalah password magento anda

$proxy = new SoapClient('http://'.$config["hostname"].'/index.php/api/soap/?wsdl', array('trace'=>1));
$sessionId = $proxy->login($config["login"], $config["password"]);

Hold it here, then we’re gonna make one file to handle autocomplete processing.

jQuery Autocomplete and API Call

jQuery Autocomplete

After we’ve done download jQuery UI, we need to include it on file processing. On this article, i’ll use “Default Functionality” method to request customer name and ID via API SOAP. You can see the full source example method here.
Remember to put jQuery file before jQuery and add css file.

API Call

To call customer data on magento we use ‘customer.list‘. This will allow you to retrieve all customer list on Magento.

Let’s create one file on host (ex. autocomplete.php) and put the code below.

<?php
	require_once('magehost.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Autocomplete Customer Magento Call by API</title>
<link href="your_style.css" rel="stylesheet" type="text/css">
<link href="jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
</head>

<body>
	<input type="text" class="input-text" id="fName" name="customerName" />
    <script type="text/javascript">
		$(document).ready(function() {
			var customerName = [
				<?php
					try { 
						$action = "customer.list"; // action for calling customer data
						$customers = $proxy->call($sessionId, $action);
						foreach($customers as $customer) {
							$lastname = str_replace("'", "", $customer['lastname']);
							echo "'".$customer['firstname'].' '.$lastname.' '.$customer['customer_id']."',";
						}
					}
					catch (Exception $e) { //while an error has occured
						echo "==> Error: ".$e->getMessage(); //we print this
						   exit();
					}
				?>
			];
			$( "#fName" ).autocomplete({
				source: customerName
			});
		});
	</script>
</body>
</html>

Explanation

In the code above , at first we will include our host which is magehost.php => require_once(‘magehost.php’).
Then we make textbox with id fName, the ID will use as identifier for jQuery Autocomplete. And we retrieve all customer list using customer.list and make loop for data. Please remember, the acceptable array format for ‘default fuctionality’ autocomplete is like this [“ActionScript”, “AppleScript”, “Asp”]. Other than that your script will show error. Use console log to debug the script. And to handled error from API call we use Exception something like $e->getMessage(). And if you succes all Magento Customer will retrieve on textbox as autocomplete.

Magento Customer Autocomplete

Magento Customer Autocomplete

Noted : This will make your website slower if you have thousands customer list. Use filter to manipulated it. For example you can use :

$filters = array( array('firstname' => array('like'=>'your_input_text%')));
$customers = $proxy->call($sessionId, $action, $filters);

Hope this help 😀

Magento : Implementasi jQuery Supersized Plugin Pada Spesifik CMS Page

Seperti judul, pada post kali ini sy akan menjelaskan bagaimana implementasi jQuery supersized pada halaman CMS. Bagi yg belum tau apa itu jQuery supersized bisa dilihat disini.
Singkatnya, jQuery supersized adalah plugin jQuery yang memungkinkan kita untuk memasang gambar/slider menjadi background sebuah website.

Pertama download plugin disini.
Kemudian extract file dan akan terdapat beberapa file dan folder.
Disini saya menggunakan jQuery Supersized v 3.2.7.

Upload supersized.3.2.7.min.js ke magento anda pada folder js->jquery->supersized.3.2.7.min
Pada skin->frontend->default->theme_anda->css->buat folder dengan nama ‘supersized’ , kemudian Upload kan folder css dan img pada superisized source anda ke folder ‘supersized’ yang sudah dibuat tadi.
Login ke magento backend -> Clear Cache
Buat halaman CMS dengan nama ‘Test Supersized’ (atau terserah anda), pada tab ‘Design’ masukkan script berikut pada kolom ‘Layout Update XML’

<reference name="head">
	<action method="addJs"><script>jquery/supersized.3.2.7.min.js</script></action>
	<action method="addCss"><stylesheet>css/supersized/css/supersized.css</stylesheet></action>
</reference>

Disini saya asumsikan, anda sudah meload jQuery pada Magento anda. Atau jika belum anda bisa download jQuery disini. Kemudian, upload ke magento anda pada folder js->jquery atau untuk lebih jelasnya anda bisa baca pada post berikut : Menggunakan jQuery di Magento

Jika semua jQuery sudah berhasil di load (Cek menggunakan inspect element pada browser), sekarang buat sebuah file gambar (.jpg/.png) dengan ukuran maksimal 1920px x 1080px.
Upload pada halaman CMS yg anda buat tadi (Insert Image -> Insert File).
Kemudian anda akan mendapat link seperti berikut -> {{media url=”wysiwyg/home_bg.jpg”}}
home_bg.jpg adalah file gambar yg sudah dibuat tadi.

Kemudian masukkan script berikut :

<script type="text/javascript">
	jQuery.noConflict();
	jQuery(document).ready(function() {

		jQuery.supersized({
			autoplay : 0,    // set 1 autoplay run
			slides  :  	[ 
				{image : "{{media url="wysiwyg/home_bg.jpg"}}", title : 'Image Credit: Test Shop'}
			]
		});
	});	
</script>

Pada script diatas background hanya 1 gambar, jika anda ingin membuat menjadi sebuah slider anda bisa membuatnya dengan menggunakan script dibawah :

<script type="text/javascript">
	jQuery.noConflict();
	jQuery(document).ready(function() {

		jQuery.supersized({
			autoplay : 0,    // set 1 autoplay run
			slides  :  	[ 
				{image : "{{media url="wysiwyg/home_bg.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg1.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg2.jpg"}}", title : 'Image Credit: Test Shop'},
				{image : "{{media url="wysiwyg/home_bg3.jpg"}}", title : 'Image Credit: Test Shop'}
			]
		});
	});	
</script>

Tapi sebelumnya upload dulu semua gambar yang akan digunakan.

Pada saat test dan jika sukses, gambar akan tampil secara penuh menjadi background website anda. Dan jika anda perhatikan dengan menggunakan inspect element akan muncul sebuah id bernama supersized tepat sebelum tag body berakhir

That’s it! Selamat Mencoba 😀

jQuery Background Animate Color

Bagaimana membuat jQuery Background Animate Color.

Merasa bosan ga seh dengan kemampuan CSS 2 untuk fitur hover color yang kurang smooth? Kalo yang kurang paham maksud saya ini contoh hover dengan CSS. Jadi ketika box di hover (tempatkan cursor diatas box) warnanya dari hitam menjadi biru.

Kurang smooth ya? Bagaimana kalo seperti yg dibawah?

Lebih bagus bukan?
Untuk hover yang smooth seperti contoh ke dua menggunakan jQuery UI.
Penggunaannya adalah sebagai berikut :

1. Include jQuery Library pada head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

2. Include jQuery Background Animate Color pada head

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

3. Buat CSS untuk box

<!-- CSS Box -->
.jQbox {width:150px; height:150px; background-color:#000; margin:20px 0;}

4. Buat HTML untuk Box

<!-- div box -->
<div class="jQbox">
</div>

5. Include script hover pada head atau pada halaman spesifik yang anda inginkan.

<!-- script hover -->
<script type="text/javascript">
	$(document).ready(function(){
		$('.jQbox').hover( //.jQbox adalah nama class box. Ganti dengan nama id atau class anda
			function(){
				$(this).animate({backgroundColor: '#06F'});
			},
			function(){
				$(this).animate({backgroundColor: '#000'});
			}
		); 
	});
</script>

Pada pengaplikasiannya ada banyak metode dan jquery selain jQuery UI untuk membuat animate background seperti diatas.
Jika menggunakan CSS3 maka hanya memerlukan ‘transition’ saja tanpa jQuery.

Semoga membantu 😀

Magento – Menggunakan jQuery di Magento

Secara default Magento menggunakan Prototype untuk library javascriptnya. Namun terkadang kita membutuhkan beberapa hal yang sulit untuk dilakukan prototype, maka kita disini akan mencoba untuk menginstall dan menggunakan jQuery sebagai library tambahan. Oh, ya sempat beberapa waktu lalu ada yang memberi tahu saya bahwa kedepannya magento tidak akan menggunakan prototype lagi dan akan bermigrasi total ke jQuery.

1. Download jQuery kemudian simpan di js -> jQuery -> filejQuery.js
2. Buka file app/design/frontend/default/template_custom/layout/local.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout>
	<default>
		<reference name="head">
			<action method="addJs"><script>jquery/filejQuery.js</script></action>
		</reference>
	</default>
</layout>
 

3. Masuk ke backend, pilih CMS, add new CMS
4. Buat jQuery toggle sederhana seperti berikut :
html :

<p class="trigger"><a>Click here</a>
</p><div class="toggle_container">
<div class="block">
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03</li>
<li>List item 04</li>
</ul></div>
</div>
 

jQuery :

<script type="text/javascript">
 jQuery.noConflict();
 jQuery(document).ready(function(){
	jQuery(".toggle_container").hide();
	 jQuery("p.trigger").click(function(){
	 jQuery(this).toggleClass("active").next().toggle();
	});
});
</script>

5. Lihat hasilnya pada frontend sesuai link CMS page anda. Selesai
6. Semoga membantu 😀