website toko online Prestashop : navigasi footer – Bagian 2

7:49 PM | Labels: Navigation, PrestaShop, Script code, Tip membangun webstore

Bagian ini adalah kelanjutan bagian I modifikasi menu navigasi footer halaman website toko online Prestashop. Pada bagian pertama membicarakan pemahaman dasar bagaimana mengubah footer dan file website mana yang harus diubah.

Kita tahu sistem navigasi website sangat vital bagi kenyamanan pengunjung. Navigasi baik akan memudahkan mereka mencari dan menelusuri content website. Menu-menu navigasi horizontal bisa ditempatkan di bagian header, menu navigasi horizontal bisa ditempatkan dalam kolom kiri dan lebih banyak lagi yang lebih suka ditempatkan pada kolom kanan.

Default footer bar Prestashop

Untuk edit footer silahkan buka file public_html/modules/blockcms/blockcms.tpl di Control Panel Anda seperti dibawah ini :

=============================================================

{if $block == 1}
    
    {foreach from=$cms_titles key=cms_key item=cms_title}
        <div id="informations_block_left_{$cms_key}" class="block informations_block_left">
            <h4><a href="{$cms_title.category_link}">{if !empty($cms_title.name)}{$cms_title.name}{else}{$cms_title.category_name}{/if}</a></h4>
            <ul class="block_content">
                {foreach from=$cms_title.categories item=cms_page}
                    {if isset($cms_page.link)}<li class="bullet"><b style="margin-left:2em;">
                    <a href="{$cms_page.link}" title="{$cms_page.name|escape:html:'UTF-8'}">{$cms_page.name|escape:html:'UTF-8'}</a>
                    </b></li>{/if}
                {/foreach}
                {foreach from=$cms_title.cms item=cms_page}
                    {if isset($cms_page.link)}<li><a href="{$cms_page.link}" title="{$cms_page.meta_title|escape:html:'UTF-8'}">{$cms_page.meta_title|escape:html:'UTF-8'}</a></li>{/if}
                {/foreach}
                {if $cms_title.display_store}<li><a href="{$link->getPageLink('stores.php')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}
            </ul>
        </div>
    {/foreach}
    
{else}
    
    <ul class="block_various_links" id="block_various_links_footer">
        <li class="first_item"><a href="http://website-download.blogspot.com/2012/06/webdesign-services-layanan-pembuatan.html " title="webdesign"><img src="{$img_lang_dir}6.jpg" alt="webdesign" width="16" height="11" /></a>           </li>
        {if !$PS_CATALOG_MODE}<li class="first_item"><a href="{$link->getPageLink('prices-drop.php')}" title="{l s='Specials' mod='blockcms'}">{l s='Specials' mod='blockcms'}</a></li>{/if}
        <li class="{if $PS_CATALOG_MODE}first_{/if}item"><a href="{$link->getPageLink('new-products.php')}" title="{l s='New products' mod='blockcms'}">{l s='New products' mod='blockcms'}</a></li>
        {if !$PS_CATALOG_MODE}<li class="item"><a href="{$link->getPageLink('best-sales.php')}" title="{l s='Top sellers' mod='blockcms'}">{l s='Top sellers' mod='blockcms'}</a></li>{/if}
        {if $display_stores_footer}<li class="item"><a href="{$link->getPageLink('stores.php')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}
        <li class="item"><a href="{$link->getPageLink('contact-form.php', true)}" title="{l s='Contact us' mod='blockcms'}">{l s='Contact us' mod='blockcms'}</a></li>
        {foreach from=$cmslinks item=cmslink}
            {if $cmslink.meta_title != ''}
                <li class="item"><a href="{$cmslink.link|addslashes}" title="{$cmslink.meta_title|escape:'htmlall':'UTF-8'}">{$cmslink.meta_title|escape:'htmlall':'UTF-8'}</a></li>
            {/if}
        {/foreach}
        <li class="last_item">{l s='Powered by' mod='blockcms'} <a href="http://www.prestashop.com">PrestaShop</a>™</li>
    </ul>
    
{/if}

=============================================================

Membuat menu navigasi sendiri di footer bar

Prestashop memberi keleluasaan untuk membuat modifikasi footer bar sendiri dan Anda pun dapat melakukannya. Berikut ini contoh toko online pesanan client saya www.bajuditoko.com

Untuk membuat menu navigasi footer milik Anda sendiri – bagian mana yang harus dimodifikasi? Untuk membuat menu footer bar Anda bisa melakukan perubahan snippet diantara ini.
<!-- MODULE Block footer –> dan <!-- /MODULE Block footer –>
Langsung saja praktek, saya membuat menu footer bar untuk toko online bajuditoko.com seperti ini :

Saya ubah kode html diantara <!-- MODULE Block footer –> dan <!-- /MODULE Block footer –>
menjadi seperti dibawah ini :

=============================================================

            
<table style="margin: 0 0px auto" cellspacing="0" cellpadding="0" align="center" width="980px">
    <tbody>
        <tr>
                <table cellspacing="0" cellpadding="0" bgcolor="#0072ab" align="center" width="980px">
                    <tbody>
                    <tr>
                        <td background="#0072ab" height="41" width="980px" align="center">
                                <ul class="block_various_links" id="block_various_links_footer" >
<li class="first-item"><a href="http://website-download.blogspot.com/2012/06/webdesign-services-layanan-pembuatan.html " title="Prestanesia"><font color="white"><strong>WebDesign</a>™</strong></font></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=4" title="Tentang kami" title="About us"><font color="white"><strong>Tentang kami</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/contact-form.php" title="Hubungi kami"><font color="white"><strong>Kontak</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/new-products.php" title="Produk baru"><font color="white"><strong>Produk Baru</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=8 " title="How To Order"><font color="white"><strong>Cara Berbelanja</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=1" title="Delivery"><font color="white"><strong>Pengiriman</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/prices-drop.php" title="Spesial"><font color="white"><strong>Spesial Discount</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=9 title="faq"><font color="white"><strong>F.A.Q</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/sitemap.php" title="sitemap"><font color="white"><strong>Sitemap</strong></font></a></li>
<li class="item"><a href="#" title="Legal Notice"><font color="white"><strong>Legal Notice</strong></font></a></li>
<li class="last"><a href="http://bajuditoko.com"><font color="white"><strong>HOME</font></strong></a></li>
<li class="last-item"><a href="http://website-download.blogspot.com/2012/06/webdesign-services-layanan-pembuatan.html "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxVOOoG2aMbeYByArrOeNJG0LujjujB-V_VuZ64haU00Wbp9rO_oLM6vgbLUGwsz37CVRZZMkxvt5kfT3FHIU62O5vTPU-wG9QLQK948IlCRca-iEdKnwpvW28VRhLWzrCYprvN4mHHDE/s0/favorites.png"/></a></li>
                                </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
    
{/if}

=============================================================
Gambar dari snippet kodenya seperti ini:

Bagaimana cara mendapatkan URL suatu CMS?

Silahkan ke TOOLS>>CMS kemudian menuju ke CMS <<Tentang Kami>> pada kolom AKSI klik "tombol <<View>> Maka akan terbuka halaman webpage CMS “Tentang Kami” Silahkan masukkan ke:
<li class="item"><a href="disini” title="Tentang kami" title="About us"><font color="white"><strong>Tentang kami</strong></font></a></li>

Lakukan dengan cara yang sama untuk mendapatkan URL CMS lain.

Catatan :
{/if} jangan sampai lupa karena sebagai penutup snippet