WIZNAV : Menu Tab Bar website store Prestashop

Menu Tab Bar di website store Prestashop

Pertamakali punya  blog (website) atau toko online, Anda harus pikirkan "Bagaimana pengunjung akan pergi dari HOMEPAGE ke halaman lain berisi content lebih spesifik? atau sebaliknya, bagaimana navigasi cepat dari content spesifik (INNER-PAGE) untuk kembali ke Homepage?

Navigasi website sangat penting agar pengunjung cepat menemukan content yang diinginkan. Pada saat yang sama juga membantu Search Engine memahami content apa yang menjadikan Webmaster Tools (Google) berpikir dan menganggapnya penting. Tamu biasa mengandalkan Menu-Tab-Bar diletakkan secara horizontal di bagian atas webpage, dan diujung kiri adalah link HOME. 

Homepage situs merupakan halaman paling Utama (halaman root). Sebagai link untuk navigasi tamu HOMEPAGE ditaruh di urutan pertama paling kiri menu tab dengan judul HOME (Beranda) lalu diikuti daftar bagian lebih spesifik ke kanan dan seterusnya. Bentuk navigasi selain Menu Tab Bar adalah Label, Headline, Post Populer atau link-link lain tersebar di halaman website.

Blok Top Menu atau Wiznav Bar - arsip website

Blok top menu ialah Menu Tab Bar bawaan   Prestashop. Tampilan sebenarnya tidak mengecewakan, tetapi boleh jadi kita ingin alternatif menu tab bar lain, misalnya WIZNAV BAR. Untuk memasangnya sangat rumit. Saya berhasil setelah berkali-kali gagal.

Jika berminat ikuti panduan ini :

1. Download modul di
   http://www.ziddu.com/download/20901149/WIZNAV2.1.3.zip.html 
2. Open file zip hasil download, Extract To >> Lokasi simpan (e.g My Document)
3. Anda akan mendapati folder WIZNAV2.1.3 >> UPLOAD >> modules >> wiznav
4. Upload pakai FTP (e.g. FileZilla) ke public_html/modules pada root server
5. Buka Back Office >> Modules. Ketik wiznav di kotak search, klik modul Wiznav
6. Klik “Install” dan silahkan atur setting.

Apakah sudah selesai? BELUM tampilan menu tab Bar belum tampak. Masalah nan rumit baru dimulai seperti cuplikan dari Forum Prestashop berikut :

I recently downloaded and installed Wiznav.  However the instructions for assigning it to a hook tell me to amend the 'header.php'.

To quote the instructions, open your header.php file and edit the following :

$smarty->assign(array(
'HOOK_HEADER' => Module::hookExec('header'),
'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
'HOOK_TOP' => Module::hookExec('top'),
'static_token' => Tools::getToken(false),
'token' => Tools::getToken(),
'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
'content_only' => intval(Tools::getValue('content_only'))
));

Edit it to the following :

$smarty->assign(array(
'HOOK_HEADER' => Module::hookExec('header'),
'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
'HOOK_WIZNAV' => Module::hookExec('wiznav'),
'HOOK_TOP' => Module::hookExec('top'),
'static_token' => Tools::getToken(false),
'token' => Tools::getToken(),
'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
'content_only' => intval(Tools::getValue('content_only'))
));

Ketika saya buka file  header.php, sayang sekali keseluruhan isi file hanya seperti di bawah ini.

Berhari-hari saya mencoba memahami apa yang terjadi, bagian mana yang salah (apakah instruksinya salah atau memang isi file php ini memang tidak familiar dengan modul WIZNAV 2.1.3).

if (isset(Context::getContext()->controller))
$controller = Context::getContext()->controller;
else
{
$controller = new FrontController();
$controller->init();
}
Tools::displayFileAsDeprecated();
$controller->displayHeader();

Atau disini - http://www.prestashop.com/forums/user/358599-yusufzulkarnain/.  Dalam forum tersebut saya sampaikan inisiatif copy paste  snippet kedua diatas tepat di bagian snippet bawah ini :

Tools::displayFileAsDeprecated();
$controller->displayHeader();

Sementara masalahnya saya biarkan, saya ikuti instruksi selanjutnya :

Then open public_html/classes/controller/FrontController.php and edit this (I find it at line of 448) :

'HOOK_HEADER' => Hook::exec('displayHeader'),
'HOOK_TOP' => Hook::exec('displayTop'),

Add 'HOOK_WIZNAV' => Module::hookExec('wiznav'), Finally you see like this :

'HOOK_HEADER' => Hook::exec('displayHeader'),
'HOOK_WIZNAV' => Module::hookExec('wiznav'),
'HOOK_TOP' => Hook::exec('displayTop'),

Terakhir buka public_html/themes/default/header.tpl (default nama template bawaan Prestashop 1.5.2.0 yang boleh jadi sudah Anda ganti dengan nama lain (misalnya Prestanesia atau nama lain).

        <!-- Header -->
        <div id="header" class="grid_9 alpha omega">
         <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
                    <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
                </a>
                <div id="header_right" class="grid_6 omega">
                    {$HOOK_TOP}
                </div>
            </div>
            <div id="columns" class="grid_9 alpha omega clearfix">
                <!-- Left -->
                <div id="left_column" class="column grid_2 alpha">
                    {$HOOK_LEFT_COLUMN}
                </div>
                <!-- Center -->
            <div id="center_column" class=" grid_5">
    {/if}

Sisipkan ini dibawah

<div>
 {$HOOK_TOP}
</div>

Sehingga menjadi ini :

        <!-- Header --> 
        <div id="header" class="grid_9 alpha omega"> 
        <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
                    <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
                </a>
                <div id="header_right" class="grid_6 omega">
                    {$HOOK_TOP}
                </div>
            </div>
                <div>
                {$HOOK_WIZNAV}
                </div>             <div id="columns" class="grid_9 alpha omega clearfix">
                <!-- Left -->
                <div id="left_column" class="column grid_2 alpha">
                    {$HOOK_LEFT_COLUMN}
                </div>
                <!-- Center -->
            <div id="center_column" class=" grid_5">
    {/if}

Terakhir SIMPAN. Selamat mencoba.

---

That's all we know - Happy blog blogger - semoga bermanfaat

---

SITEMAP

PETA WEBSITE DESIGN

THANK YOU for your continued liking 'n sharing. If you haven't liked this post yet, you may do that by hitting the buttons just BELOW. Please drop your comment and questions ……

Anda sedang membaca WIZNAV : Menu Tab Bar website store Prestashop

Posted in: PrestaShop,Script-code,Tutorial-Prestashop,Website-engineering