Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)
Pada tutorial sebelumnya pada seri ini, kita sudah mulai memodifikasi bagian header dari home page. Dalam tutorial ini, kita akan melanjutkan yang sebelumnya dengan improvement pada bagian header, dan kemudian kita akan membuat CMS block slider baru dan memanggilnya dari file template kita. Seperti yang sudah kita bicarakan dalam artikel ini, mari kita mulai tanpa menunggu lebih lama.
Karena kita telah memperbaiki sebagian top header, satu hal yang perlu diperbaiki adalah bagian top cart. Untuk menyesuaikan header cart, pertama kita akan mencoba mencari tahu file template mana yang bertanggung jawab untuk merender bagian tersebut. Untuk menganalisanya, pertama mari kita tambahkan beberapa produk ke dalam cart (keranjang belanja), sehingga kita bisa menyelidiki sepenuhnya.
Saat kita mengaktifkan template hints, kita dapat melihat bahwa bagian luar container dari header cart berasal dari file template ini: frontend/rwd/default/template/checkout/cart/minicart.phtml. Kemudian saat diklik, bagian yang diperluas dirender melalui file ini: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Akhirnya, setiap item pada cart dirender lewat file ini: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Kita akan mengimport semua file ini ke dalam theme yang baru kita buat, lalu mulai memodifikasinya.
Mari kita mulai proses modifikasi dari file terluar minicart.phtml. berikut adalah kode dari file ini:
<?php
$_cartQty = $this->getSummaryCount();
if(empty($_cartQty)) {
$_cartQty = 0;
}
?>
<a href="<?php echo $this->helper('checkout/cart')->getCartUrl(); ?>" data-target-element="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
<span class="icon"></span>
<span class="label"><?php echo $this->__('Cart'); ?></span>
<span class="count"><?php echo $_cartQty; ?></span>
</a>
<div id="header-cart" class="block block-cart skip-content">
<?php echo $this->getChildHtml('minicart_content');?>
</div>
Sekarang sebelum kita mulai memodifikasi apa-apa yang ada di dalamnya, mari periksa kode dari header cart kita di file HTML original kita. Kode di sana terlihat seperti ini:
<ul class="option">
<li class="option-cart"><a href="#" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a>
<ul class="option-cart-item">
<li>
<div class="cart-item">
<div class="image"><img src="images/products/thum/products-01.png" alt=""></div>
<div class="item-description">
<p class="name">Lincoln chair</p>
<p>Size: <span class="light-red">One size</span><br>
Quantity: <span class="light-red">01</span></p>
</div>
<div class="right">
<p class="price">$30.00</p>
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
</div>
</li>
<li>
<div class="cart-item">
<div class="image"><img src="images/products/thum/products-02.png" alt=""></div>
<div class="item-description">
<p class="name">Lincoln chair</p>
<p>Size: <span class="light-red">One size</span><br>
Quantity: <span class="light-red">01</span></p>
</div>
<div class="right">
<p class="price">$30.00</p>
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
</div>
</li>
<li><span class="total">Total <strong>$60.00</strong></span>
<button class="checkout" onClick="location.href='checkout.html'">CheckOut</button>
</li>
</ul>
</li>
</ul>
Jadi, kita akan mulai memodifikasi kode file PHP-nya agar mirip dengan kode HTML kita. Kita hanya akan menggunakan tag anchor di sini untuk me-wrap (membungkus) icon cart, dan setelah itu kita akan menampilkan minicart content. Karenannya kode kita akan terlihat seperti ini:
<a href="<?php echo $this->helper('checkout/cart')->getCartUrl(); ?>" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a>
<?php echo $this->getChildHtml('minicart_content');?>
Di sini kita telah mengganti wrapper terluar dari top cart, tapi sekarang kita perlu mengedit wrapper pada bagian drop-down. Seperti yang telah kita lihat, wrapper-nya berasal dari frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Mari kita cek kode terakhir dari file ini:
<?php
$_cartQty = $this->getSummaryCount();
if(empty($_cartQty)) {
$_cartQty = 0;
}
?>
<div id="minicart-error-message" class="minicart-message"></div>
<div id="minicart-success-message" class="minicart-message"></div>
<div class="minicart-wrapper">
<p class="block-subtitle">
<?php echo $this->__('Recently added item(s)') ?>
<a class="close skip-link-close" href="#" title="<?php echo $this->__('Close'); ?>">×</a>
</p>
<?php $_items = $this->getRecentItems() ?>
<?php $countItems = count($_items); ?>
<?php if($countItems): ?>
<div>
<ul id="cart-sidebar" class="mini-products-list">
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
</ul>
</div>
<script type="text/javascript">
truncateOptions();
decorateList('cart-sidebar', 'none-recursive');
$j('document').ready(function() {
var minicartOptions = {
formKey: "<?php echo $this->getFormKey();?>"
}
var Mini = new Minicart(minicartOptions);
Mini.init();
});
</script>
<div id="minicart-widgets">
<?php echo $this->getChildHtml('cart_promotion') ?>
</div>
<div class="block-content">
<p class="subtotal">
<?php if ($this->canApplyMsrp()): ?>
<span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span>
<?php else: ?>
<span class="label"><?php echo $this->__('Cart Subtotal:') ?></span> <?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?>
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
<br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
<?php endif; ?>
<?php endif; ?>
</p>
</div>
<div class="minicart-actions">
<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
<ul class="checkout-types minicart">
<?php echo $this->getChildHtml('extra_actions') ?>
<li>
<a title="<?php echo $this->__('Checkout') ?>" class="button checkout-button" href="<?php echo $this->getCheckoutUrl() ?>">
<?php echo $this->__('Checkout') ?>
</a>
</li>
</ul>
<?php endif ?>
<a class="cart-link" href="<?php echo $this->getUrl('checkout/cart'); ?>">
<?php echo $this->__('View Shopping Cart'); ?>
</a>
</div>
<?php else: ?>
<p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p>
<?php endif ?>
</div>
Ketika kita membandingkannya dengan template HTML kita, ada beberapa hal yang perlu kita lakukan. Pertama-tama, di dalam div minicart-wrapper, kita akan mulai menerapkan ul kita, dan untuk setiap item yang akan kita meng-iterate (pengulangan) menggunakan tag li. Pada akhirnya, kita akan memperlihatkan total cart, atau menunjukkan bahwa tidak ada item di cart. Kode akhir kita untuk file ini akan terlihat seperti berikut:
<?php
$_cartQty = $this->getSummaryCount();
if(empty($_cartQty)) {
$_cartQty = 0;
}
?>
<div id="minicart-error-message" class="minicart-message"></div>
<div id="minicart-success-message" class="minicart-message"></div>
<?php $_items = $this->getRecentItems() ?>
<?php $countItems = count($_items); ?>
<div class="minicart-wrapper">
<ul class="option-cart-item">
<?php if($countItems): ?>
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
<li>
<span class="total">
<?php if ($this->canApplyMsrp()): ?>
<span class="map-cart-sidebar-total"><?php echo $this->__('ORDER TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span>
<?php else: ?>
<?php echo $this->__('Cart Subtotal:') ?> <strong></strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?>
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
<br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
<?php endif; ?>
<?php endif; ?>
</span>
<button class="checkout" onClick="location.href='<?php echo $this->getCheckoutUrl() ?>'">CheckOut</button>
</li>
<?php else: ?>
<p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p>
<?php endif ?>
</ul>
</div>
Sekarang bagian terakhir yang tersisa adalah memberikan style pada item cart list itu sendiri. Seperti yang sudah kita ketahui, file yang bertanggung jawab untuk bagian itu adalah: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.
Saat ini kode dari file tersebut terlihat cukup panjang dan sulit dimengerti, tapi tak perlu takut. Kita tidak perlu mengedit ini semua, karena bagian utama dari kode file ini hanya menghitung harga yang tepat, dan option untuk produk lainnya. Sekali lagi, kita akan mengecek kode HTML kita, memasukkannya ke dalam file ini, dan mulai mengganti static text (teks statis) dengan dynamic value (nilai dinamis). Ini adalah kode untuk setiap item cart di HTML kita:
<li>
<div class="cart-item">
<div class="image"><img src="images/products/thum/products-01.png" alt=""></div>
<div class="item-description">
<p class="name">Lincoln chair</p>
<p>Size: <span class="light-red">One size</span><br>
Quantity: <span class="light-red">01</span></p>
</div>
<div class="right">
<p class="price">$30.00</p>
<a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
</div>
</li>
Kita akan mengganti tag img dengan yang ini:
<img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>">
Selanjutnya, kita akan mengganti name dengan dynamic code (kode dinamis):
<?php if ($this->hasProductUrl()): ?><a href="<?php echo $this->getProductUrl() ?>"><?php endif; ?><?php echo $this->escapeHtml($this->getProductName()) ?><?php if ($this->hasProductUrl()): ?></a><?php endif; ?>
Untuk menampilkan product options, kita akan menggunakan dynamic code ini:
<?php if ($_options = $this->getOptionList()):?>
<?php foreach ($_options as $_option) : ?>
<?php echo $this->escapeHtml($_option['label']) ?>:
<span class="light-red">
<?php if (is_array($_option['value'])): ?>
<?php echo nl2br(implode("\n", $_option['value'])) ?>
<?php else: ?>
<?php echo $_option['value'] ?>
<?php endif; ?>
</span>
<?php endforeach; ?><br>
<?php endif; ?>
Kemudian kita akan menentukan dan memperlihatkan quantity (jumlahnya) dengan menggunakan kode berikut:
<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span>
Untuk price calculation (perhitungan harga), kita akan memasukkan kode ini di tempat static price:
<?php if ($canApplyMsrp): ?>
<span class="map-cart-sidebar-item"><?php echo $this->__('See price before order confirmation.'); ?></span>
<?php else: ?>
<?php if ($this->helper('tax')->displayCartPriceExclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
<?php if ($this->helper('tax')->displayCartBothPrices()): ?>
<?php echo $this->__('Excl. Tax'); ?>:
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?>
<?php else: ?>
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()) ?>
<?php endif; ?>
<?php if (Mage::helper('weee')->getApplied($_item)): ?>
<br />
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span>
<?php endforeach; ?>
</small>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span><br />
<?php endforeach; ?>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
<?php endforeach; ?>
</small>
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<span class="nobr"><?php echo Mage::helper('weee')->__('Total'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?></span>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php if ($this->helper('tax')->displayCartPriceInclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
<?php $_incl = $this->helper('checkout')->getPriceInclTax($_item); ?>
<?php if ($this->helper('tax')->displayCartBothPrices()): ?>
<br /><?php echo $this->__('Incl. Tax'); ?>:
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
<?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?>
<?php else: ?>
<?php echo $this->helper('checkout')->formatPrice($_incl-$_item->getWeeeTaxDisposition()) ?>
<?php endif; ?>
<?php if (Mage::helper('weee')->getApplied($_item)): ?>
<br />
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span><br />
<?php endforeach; ?>
</small>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span>
<?php endforeach; ?>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
<?php endforeach; ?>
</small>
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<span class="nobr"><?php echo Mage::helper('weee')->__('Total incl. tax'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?></span>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php endif; //Can apply MSRP ?>
Dan sebagai langkah terakhir, kita akan mengganti href untuk menghapus URL sebelumnya dengan yang ini:
<?php echo $this->getAjaxDeleteUrl() ?>
Saya telah menemukan semua kode ini dari default.phtml yang sebenarnya. Anda tidak perlu memikirkan semua logika dan kode anda sendiri, tapi jika anda melihat dari dekat anda dapat menemukannya di file yang ingin anda ubah.
Jadi, kode akhir dari file default.phtml kita terlihat seperti ini:
<?php
$_item = $this->getItem();
$isVisibleProduct = $_item->getProduct()->isVisibleInSiteVisibility();
$canApplyMsrp = Mage::helper('catalog')->canApplyMsrp($_item->getProduct(), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type::TYPE_BEFORE_ORDER_CONFIRM);
?>
<li>
<div class="cart-item">
<div class="image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->escapeHtml($this->getProductName()) ?>"></div>
<div class="item-description">
<p class="name"><?php if ($this->hasProductUrl()): ?><a href="<?php echo $this->getProductUrl() ?>"><?php endif; ?><?php echo $this->escapeHtml($this->getProductName()) ?><?php if ($this->hasProductUrl()): ?></a><?php endif; ?></p>
<p>
<?php if ($_options = $this->getOptionList()):?>
<?php foreach ($_options as $_option) : ?>
<?php echo $this->escapeHtml($_option['label']) ?>:
<span class="light-red">
<?php if (is_array($_option['value'])): ?>
<?php echo nl2br(implode("\n", $_option['value'])) ?>
<?php else: ?>
<?php echo $_option['value'] ?>
<?php endif; ?>
</span>
<?php endforeach; ?><br>
<?php endif; ?>
<?php echo $this->__('Qty:'); ?> <span class="light-red"><?php echo $this->getQty()?></span>
</p>
</div>
<div class="right">
<p class="price">
<?php if ($canApplyMsrp): ?>
<span class="map-cart-sidebar-item"><?php echo $this->__('See price before order confirmation.'); ?></span>
<?php else: ?>
<?php if ($this->helper('tax')->displayCartPriceExclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
<?php if ($this->helper('tax')->displayCartBothPrices()): ?>
<?php echo $this->__('Excl. Tax'); ?>:
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?>
<?php else: ?>
<?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()) ?>
<?php endif; ?>
<?php if (Mage::helper('weee')->getApplied($_item)): ?>
<br />
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span>
<?php endforeach; ?>
</small>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span><br />
<?php endforeach; ?>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
<?php endforeach; ?>
</small>
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<span class="nobr"><?php echo Mage::helper('weee')->__('Total'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_item->getCalculationPrice()+$_item->getWeeeTaxAppliedAmount()+$_item->getWeeeTaxDisposition()); ?></span>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php if ($this->helper('tax')->displayCartPriceInclTax() || $this->helper('tax')->displayCartBothPrices()): ?>
<?php $_incl = $this->helper('checkout')->getPriceInclTax($_item); ?>
<?php if ($this->helper('tax')->displayCartBothPrices()): ?>
<br /><?php echo $this->__('Incl. Tax'); ?>:
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, array(0, 1, 4), 'sales')): ?>
<?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?>
<?php else: ?>
<?php echo $this->helper('checkout')->formatPrice($_incl-$_item->getWeeeTaxDisposition()) ?>
<?php endif; ?>
<?php if (Mage::helper('weee')->getApplied($_item)): ?>
<br />
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 1, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount'],true,true); ?></span><br />
<?php endforeach; ?>
</small>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><small><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></small></span>
<?php endforeach; ?>
<?php elseif (Mage::helper('weee')->typeOfDisplay($_item, 4, 'sales')): ?>
<small>
<?php foreach (Mage::helper('weee')->getApplied($_item) as $tax): ?>
<span class="nobr"><?php echo $tax['title']; ?>: <?php echo Mage::helper('checkout')->formatPrice($tax['amount_incl_tax'],true,true); ?></span><br />
<?php endforeach; ?>
</small>
<?php endif; ?>
<?php if (Mage::helper('weee')->typeOfDisplay($_item, 2, 'sales')): ?>
<span class="nobr"><?php echo Mage::helper('weee')->__('Total incl. tax'); ?>:<br /> <?php echo $this->helper('checkout')->formatPrice($_incl + Mage::helper('weee')->getWeeeTaxInclTax($_item)); ?></span>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php endif; //Can apply MSRP ?>
</p>
<a href="<?php echo $this->getAjaxDeleteUrl() ?>" class="remove"><img src="<?php echo $this->getSkinUrl('images/remove.png'); ?>" alt="remove"></a></div>
</div>
</li>
Sekarang jika anda save semua file ini, dan me-reload homepage, seharusnya anda melihat sesuatu seperti berikut:
Kita memiliki beberapa masalah dengan style, tapi rendering HTML-nya hampir mendekati dengan desain HTML yang kita butuhkan. Sekarang setelah kita menyelesaikan bagian top header, selanjutnya adalah bagian logo. Untungnya tidak banyak yang bisa dilakukan di sana kecuali bagian styling (untuk membuat logo center sejajar) yang akan kita lakukan di artikel styling. Item menu kita juga terlihat hampir mendekati dengan apa yang kita harapkan, jadi kita hanya perlu memodifikasi search bar, lalu main slider.
Untuk memodifikasi search bar kita, mari aktifkan template hints, dan lihat bagian mana yang bertanggung jawab untuk merender kode ini: ffrontend/rwd/default/template/catalogsearch/form.mini.phtml.
Saat ini file ini terlihat seperti berikut:
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<div class="input-box">
<label for="search"><?php echo $this->__('Search:') ?></label>
<input id="search" type="search" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text required-entry" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->__('Search entire store here...') ?>" />
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button search-button"><span><span><?php echo $this->__('Search') ?></span></span></button>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
//]]>
</script>
</form>
If we look at the HTML of the search bar in our HTML design file, it looks like this:
<div class="col-md-3 col-sm-2">
<div class="search">
<input type="text" value="Searching here...">
<button type="button"></button>
</div>
</div>
Jadi, kita akan menggunakan div bagian luar dari HTML, dan mengganti inner content (inti konten) dengan dynamic content (konten dinamis). File form.mini.phtml baru kita akan terlihat seperti berikut:
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<div class="searchContainer">
<input id="search" type="search" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text required-entry" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->__('Search here...') ?>">
<button type="submit" class="button search-button"></button>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
//]]>
</script>
</form>
Di bagian akhir artikel ini, kita akan mengedit main slider (slider utama). Untuk itu, kita akan membuat static block yang baru, dengan masuk ke CMS > Static Blocks > Add New Block. Kita akan memberi nama Block ini 'Homepage Slider', dan kita akan memasukkan Identifier-nya sebagai 'home-slider'-begitulah kodenya akan bisa menemukan block ini.
Sekarang kita akan memasukkan kode slider dari HTML kita.
<div align="center" class="shadowImg"><img src="{{skin url='images/menuShdow.png'}}" alt=""></div>
<div class="clearfix"></div>
<div class="hom-slider">
<div class="container">
<div id="sequence">
<div class="sequence-prev"><i class="fa fa-angle-left"></i></div>
<div class="sequence-next"><i class="fa fa-angle-right"></i></div>
<ul class="sequence-canvas">
<li class="animate-in">
<div class="flat-image formBottom delay200" data-bottom="true"><img src="{{skin url='images/slider-image-02.png'}}" alt=""></div>
<div class=" formLeft delay300 text-center bannerText" >
<h1>Ray of light</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#" class="more">Shop Now</a>
</div>
</li>
<li class="animate-in">
<div class=" formLeft delay300 text-center bannerText float-right secondSlideText" >
<h1>Ray of light</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#" class="more">Shop Now</a>
</div>
<div class="flat-image formBottom delay200 secondSlideImg" data-bottom="true"><img src="{{skin url='images/slider-image-01.png'}}" alt=""></div>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
Perhatikan bahwa kita telah mengganti image source relative ke direktori skin dengan menggunakan tag skin_url seperti ini:
<img src="{{skin url='images/slider-image-01.png'}}" alt="">
Sekarang kita akan menambahkan baris-baris ini di dalam file header.phtml yang kita buat di artikel terakhir, tepat di atas baris terakhir <?php echo $this->getChildHtml('topContainer'); ?>.
<?php if($this->getIsHomePage()): ?>
<?php echo $this->getLayout()
->createBlock('csms/block')
->setBlockId('home-slider')->toHtml(); ?>
<?php endif; ?>
Langkah terakhir adalah menghapus slider saat ini. Untuk melakukan itu, buka CMS-Pages > Madison Island, dan dari bagian Content, hapus semua kode hingga awal bagian style.
Save semuanya dan reolad home page, dan sekarang anda seharusnya melihat semua berjalan dengan sangat baik. Beberapa style tidak aktif, tapi kita akan membahasnya pada tutorial styling yang terpisah. Untuk saat ini kita hanya perlu mengurus bagian konten pada home page, di mana kita akan menampilkan carousel dari produk terbaru, lalu kita akan menyesuaikan bagian footer. Kita akan melakukan semua ini di tutorial berikutnya, jadi nantikan terus!
