[SHARE] Cara bikin Galery + fancybox di CMS PS1.4/1.5

Andr3Ace · April 30, 2014

Article ini disadur dari mypresta.eu yang dibuat oleh mpu Vekia (moderator forum USA).
Ane cm nyimpulin & nerjemahin & share. sapa tau ada yg butuh. kl ada yg bs bantu nerjemahin lebih bagus, tlg masukannya ya.
jadi smua kredit ke Vekia

idenya sederhana: cuma buat menampilkan script fancybox di cms page yg notabane cm ada di product page. Daripada beli module fancybox yang muahalll T_T
gampang nya liat gambar aja: atau liat demo langsung di sini
nah kalo tertarik silakan ikutin step by step.

STEP 0 BACKUP BACKUP BACKUP & DO IT WITH YOUR OWN RISK

STEP 1 link 1
Persiapan pertama adalah meng extend default tinyMCE di cms editor.
Default TinyMCE editor cm menampilkan bbrp tools editor di page nya.
Tujuan step ini: menambahkan tools baru di CMS editor yg bisa support smua HTML tags + javascript.
hal ini PENTING, karena by default simple editor ga mengijinkan penggunaan javascript + bbrp html tags padahal akan kita gunakan di step slanjutnya.

cari file file: direktori admin/themes/default/template/helpers/form/form.tpl

$(document).ready(function(){
        {block name="autoload_tinyMCE"}
            tinySetup({
                editor_selector :"autoload_rte"
            });
        {/block}
    });

BACKUP FIRST!!!

lalu tambahkan code tool yg disebut di atas di dlm fungsi tinySetup({ }) shg brubah menjadi

$(document).ready(function(){
        {block name="autoload_tinyMCE"}
            tinySetup({
                editor_selector :"autoload_rte",
                                  theme_advanced_buttons1 : "save,newdocument,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect, fontselect,fontsizeselect",
                                  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,search,replace,bullist,numlist,outdent,indent,blockquote,undo,redo,link,unlink,anchor,image,cleanup,help,codemagic,insertdate,inserttime,preview,forecolor,backcolor",
                                  theme_advanced_buttons3 : "code,tablecontrols,hr,removeformat,visualaid,sub,sup,charmap,emotions,iespell,media,advhr,print,ltr,rtl,fullscreen",
                                  theme_advanced_buttons4 : "styleprops,cite,abbr,acronym,del,ins,attribs,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
                                  theme_advanced_toolbar_location : "top",
                                  theme_advanced_toolbar_align : "left",
                                  theme_advanced_statusbar_location : "bottom",
                                  theme_advanced_resizing : false,
                                                    extended_valid_elements: 'pre[*],script[*],style[*]',
                                                    valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
                                                    valid_elements : '*[*]',
                                                    force_p_newlines : false,
                                                    cleanup: false,
                                                    forced_root_block : false,
                                                    force_br_newlines : true
            });
        {/block}
    });

code tambahan akan mengextend default tinyMCE editor + memungkinkan pemakaian javascript & html tags tambahan.

step 1 selesai & jangan lupa SAVE!!!

STEP 2 link 2

Mengvalidasi validate.php (/classes/Validate.php file). Ingat BACKUP FIRST!!!

PS1.5.5+

- cari dan tambahkan kode comment out di line di bawah ini

//if (preg_match('/<[ \t\n]*script/ims', $html) || preg_match('/('.$events.')[ \t\n]*=/ims', $html) || preg_match('/.*script\:/ims', $html))
//return false;

PS1.5.6+ punya tambahan param: $allow_iframe = false yg berfungsi!! dan harus di modif sedikit

public static function isCleanHtml($html, $allow_iframe = false)

menjadi

public static function isCleanHtml($html, $allow_iframe = false){
    return true;
}

PS1.5.5 ke bawah hrs mengubah

public static function isCleanHtml($html)
{
    $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange';
    $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend';
    $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove';
    $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel';
    $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart';
    $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange';
    $events .= '|onselectstart|onstart|onstop';
    return (!preg_match('/<[ \t\n]*script/ims', $html) && !preg_match('/('.$events.')[ \t\n]*=/ims', $html) && !preg_match('/.*script\:/ims', $html));
}

menjadi

public static function isCleanHtml($html){
/*
        $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange';
        $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend';
        $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove';
        $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel';
        $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart';
        $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange';
        $events .= '|onselectstart|onstart|onstop';
        return (!preg_match('/<[ \t\n]*script/ims', $html) && !preg_match('/('.$events.')[ \t\n]*=/ims', $html) && !preg_match('/.*script\:/ims', $html));
*/
return $html;
    }

~ SAVE ~

STEP 3 link 3

Sekarang kita perlu menambahkan fancybox script & CSS file ke tiap CMS page.

Buka /controllers/front/CMSController.php & cari function public function setMedia() spt ini

public function setMedia(){
    parent::setMedia();
    if ($this->assignCase == 1)
        $this->addJS(_THEME_JS_DIR_.'cms.js');
        $this->addCSS(_THEME_CSS_DIR_.'product.css');
        $this->addCSS(_THEME_CSS_DIR_.'cms.css');
}

tambahkan script & css fancybox di dalam function setmedia tsb shg menjadi

public function setMedia(){
    parent::setMedia();
    if ($this->assignCase == 1)
        $this->addJS(_THEME_JS_DIR_.'cms.js');
        $this->addCSS(_THEME_CSS_DIR_.'product.css');
        $this->addCSS(_THEME_CSS_DIR_.'cms.css');
        $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
        $this->addJqueryPlugin('fancybox');
}

Nah langkah2 persiapan sudah selesai. Skr cms page kita sudah mempunyai library & tools yg akan di gunakan di langkah penggunaan fancybox di cms page.

GALLERY-FANCYBOX DI CMS PAGE

Login ke BO & masuk ke preferences > CMS tab. Buat page baru atawa edit page yg uda ada. Misalnya kita bikin page baru "Gallery"

Lalu tambahkan script ini untuk menjalankan script fancybox

<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>

dengan mengklik tombol html warna biru spt di gambar

letakkan di halaman teratas dan update

nah insert pics dg mengambil html address nya dari web kamu. caranya bisa mengambil pics yg sudah ada di product page atau upload manual via ftp dan letakkan di mana saja. tp sebaiknya di tempat yg kamu ingat mis root/img/[folder baru]

karena kita akan memakai 2 ukuran untuk 1 gambar (thumbnail dan ukuran besar) maka untuk upload manual hrs membuat ukuran thumb & ukuran besar. yang memakai gambar yg sudah ad tinggal mengkopi alamat html bt thumb (mis domain.com/4-home_default/produk.jpg) dan gambar besarnya (domain.com/44-thickbox_default/produk.jpg)

Langsung praktek aja gan dan sy akan mengambil contoh langsung dari web mypresta.eu

klik tombol insert image
untuk thumb ambil dari http://demo.mypresta.eu/15-home_default/ipod-nano.jpg, paste alamatnya di kotak "Image URL"
klik tambol insert

selanjut nya kita membuat link large image di thumb barusan

tambahkan link ke gambar thumb yg barusan kita masukan dengan mengklik kanan thumb tsb
add hyperlink
di kolom Link URL tambahkan link large image dari http://demo.mypresta.eu/15-large_default/ipod-nano.jpg atawa bs juga pake image thickbox (lebih besar)

sekarang tinggal menambahkan class fancybox ke large image tadi

pindah ke tab ADVANCED tab
di kolom classes ketik (case sensitive) "fancybox" trs update

SELESAI. kamu bs memasukan gambar sebanyak2 nya di galery tsb & edit2 tampilan smau mu misalnya dengan menambahkan class "success" dll sehingga di gbr thumb nya ada frame dll

berhasil di jalankan di ps1.5.6.1 prestanasia, 1.5.4.1 (link)

Kalau ada pertanyaan tolong jangan nanya ane karena ane ga ngerti php code dll .

artikel ini ada karena ane cm mo share lantaran dulu sempet berhari-hari nyari & baca2 forum & ngumpulin data & copy paste aj bt bikin fancybox di halaman pembayaran web ane. soalnya module fancybox itu mahal dah makanya nyari yg gratisan

mungkin momods di sini bs bantuin ntinya. tengkyu

Edited April 30, 2014 by Andr3Ace (see edit history)

Sign In

[SHARE] Cara bikin Galery + fancybox di CMS PS1.4/1.5

Recommended Posts

Andr3Ace

Link to comment

Share on other sites

Browse

Activity

Go back to prestashop.com