Magento : Static Block di Halaman CMS

Hi, pertama2 saya ingin mengucapkan selamat tahun baru 2014 untuk semua. Wish you had a great night new year!!
Semoga 2014 menjadi tahun yang membuat kita menjadi lebih baik, lebih fokus, dan lebih bisa menghasilkan ‘Good Product’ dari tahun sebelumnya.
Post ini terasa spesial karena menjadi post pertama di blog AW Bali Web di tahun 2014 ini. Walaupun post nya hanya berupa code snippet tentunya 🙂

Berikut adalah cara untuk memanggil static block pada CMS page.

1. Buat halaman CMS page
2. Buat static block yang ingin kita pasang. Misalnya kita buat static block dengan Block Title ‘Test Block’ dan identifier ‘test_block’
3. Buka halaman CMS dan pasang kode berikut untuk memanggil static block ‘Test Block’

{{block type="cms/block" block_id="test_block" template="cms/content.phtml"}}

Untuk penggunaan static block di .phtml file bisa dilihat disini.

Selesai. Semoga membantu 😀

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 😀

Harga Slicing Photoshop File

Ada kalanya anda sudah mempunya desain website dalam bentuk gambar (PSD), tetapi bingung bagaimana mengimplementasikannya menjadi sebuah website. Slicing disini kami maksudkan adalah mengkonversi desain gambar anda menjadi baris-baris kode(HTML/CMS Engine) yang dapat dibaca oleh web browser sehingga menjadi sebuah website. Kami menawarkan beberapa paket slicing basic untuk mengembangkan desain website anda.

 

  1. Slicing PSD to HTML – Start from IDR 250.00 per page
  • Simple Layout file
  • Grid 960
  • Tidak responsive
  • 1 Slider jQuery Plugin

 

  1. Slicing PSD to WordPress – Start from IDR 400.00 per page
  • Simple Layout file
  • Grid 960
  • Tidak responsive
  • 1 Slider jQuery Plugin
  • Slider file hardcode

 

  1. Slicing PSD to Magento – Start from IDR 500.00 per page
  • Simple Layout file
  • Grid 960
  • Tidak responsive
  • 1 Slider jQuery Plugin
  • Slider file hardcode

 

Kami juga menawarkan slicing template yang lebih bervariasi dalam penggunaan slider kreatif dan responsive themes. Untuk harga silakan konsultasikan dengan kami, hubungi kami via email di info@adisthana.com.

Jika anda belum menemukan apa yang anda cari atau masih bingung dengan paket yang kami tawarkan, silakan langsung menghubungi disini atau 087887990222/08179701224 untuk konsultasi.

Semua harga bisa dinegosiasikan.

Klik disini untuk melihat harga paket website

Magento – menggunakan phtml di CMS page

Ada kalanya ketika kita harus menggunakan phtml file di CMS page. Misalnya saja kita ingin membuat sebuah inputan form atau keperluan lain.

Langkah-langkahnya sangat mudah.

1. Buat CMS page baru CMS->page->Add new page

2. Buat sebuah file phtml di ../template/catalog/navigation/test_adis.phtml (jika sudah punya file phtmlnya langsung ke langkah 4)

3. Masukkan kode berikut di test_adis.phtml

<?php echo 'Menggunakan PHTML di CMS Page';?>

4. Masukkan kode berikut di Content pada CMS page

 {{block type="core/template" template="catalog/navigation/test_adis.phtml"}}

5. Karena saya membuat contohnya di catalog->navigation, jadi pada template saya panggil dengan template=”catalog/navigation/test_adis.phtml. Jika anda membuat di path lain , silakan ganti dengan path tempat phtml file anda.

 

Peace.

Semoga membantu 😀

Magento – Static Block di phtml

Berikut adalah cara untuk menggunakan static block di phtml.
Misal kita mempunyai sebuah static block dengan identifier ‘block_adis’ dan kita ingin menggunakannya di header.phtml.

1. Buka file header.phtml

2. Pastekan code berikut pada bagian header yang anda inginkan

<!-- static block stylist -->
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('block_adis')->toHtml() ?>
<!-- static block stylist -->

Selesai, 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 😀

Newer posts