Magento ตอนนี้ก็ออกเวอร์ชั่น 1.4 มาสักพักแล้วครับแต่พอดีผมพึ่งจะได้ลองเล่นและทดสอบอะไรหลายๆอย่างที่เปลี่ยนไปจาก 1.3 ซึ่งหลังจากทดสอบและลองเล่นได้ประมาณเกือบ 4 ชั่วโมงของผมนั้น ส่วนตัวชอบมากครับถือว่าประทับใจเลยทีเดียว

เนื่องจากถ้าใครได้อ่านบทความ magento ของผมที่เขียนไว้ก่อนๆหน้านี้ magento จะเป็นอะไรที่ใช้งานยากกว่า E-commerce ตัวอื่นๆเลยทีเดียวเช่น virtuemart, prestashop เป็นต้น เพราะเนื่องจากถ้าเราจะปรับแต่งอะไรแล้วก็ต้องแกะโค็ดเพิ่มเติมเอง ซึ่งทำให้การใช้งานยากขึ้นแถมไม่เป็นมิตรต่อผู้ใช้ทั่วๆไปซะเท่าไร

แต่ในเวอร์ชั่น 1.4 ได้เพิ่มฟังชั่นและแก้ไขข้อผิดพลาดของระบบต่างๆมามากพอสมควร สิ่งที่เพิ่มเติมเข้ามาใน 1.4 เท่าที่ผมลองเล่นดูนะครับ

• ระบบเตือนลูกค้าเมื่อสินค้าที่หมด stock แล้วมีสินค้ากลับมาใหม่
• มีระบบ widget คล้ายๆของ wordpress ขอบอกว่าทำให้ magento เรามีลูกเล่นเยอะขึ้นเลยทีเดียว…ว่าไปนั่น
• มี WYSIWYG Editor ติดตั้งมาให้พร้อมใช้งานเลย
  
• เปลี่ยนระบบจัดการ Cache ใหม่
  
• อัพโหลดรูปภาพใส่ในเนื้อหาต่างๆได้ผ่าน WYSIWYG Editor
  

เพิ่มเติมสามารถอ่านได้จาก http://www.magentocommerce.com/download/release_notes

ในส่วนการใช้งานพวก widget และระบบใหม่ๆที่เพิ่มเข้ามาคราวหน้าผมจะมาบอกวิธีการใช้งานแบบเรียงตัวกันไปเลย แต่ตอนนี้ขอตัวไปปล้ำกับ Magento 1.4 ต่อก่อนครับ ส่วนใครสนใจอยากใช้งาน magento ทำร้านขายของออนไลน์ ผมแนะนำ Magento hosting ของทางฮาวโฮสเราเลยครับ สมัครเสร็จพร้อมใช้งานทันที…

ทดลองใช้งาน magento 1.4 ได้ที่ http://www.magentocommerce.com/demo

วิธีติดตั้งก็ง่ายๆให้เราโหลด JoomlaCK Editor มาทำการติดตั้งตามปกติ จากนั้นไปที่ Extensions > Plugins manager เพื่อการใช้งานของ JoomlaCK Editor

จากนั้นไปที่ Site > Global Configuration ไปเปลี่ยน Default WYSIWYG Editor ให้เป็นของ JoomlaCK

จากนั้นเราก็จะได้ Ckeditor มาใช้งานแล้วครับ

download : http://extensions.joomla.org/extensions/edition/editors/90

วิธีทำก็ไม่ยากให้โหลดไฟล์มาจาก http://www.prestashop.com/forums/viewthread/25836 ก่อน เจ้าของไฟล์ดันเรียกเป็น module ผมว่ามันไม่ใช่ module นะเพราะเราต้องเข้าไปแก้ไขโค็ดเอง

หลังจากโหลดมาแล้วทำการแตกซิบไฟล์ออกมา ให้เข้าไปที่โฟลเดอร์ root/ แล้วก็อปปี้โฟลเดอร์ js/ ออกมาใส่ไว้ที่ตัวเว็บของ prestashop

จากนั้นทำการแก้ไขไฟล์ admin/tabs/AdminCMS.php โดยหาคำว่า

plugins : "safari,pagebreak,style,layer,table,advimage,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",

แก้เป็น

plugins : "safari,pagebreak,style,layer,table,advimage,images,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",

และหาคำว่า

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",

แก้ไขเป็น

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,images,cleanup,help,code,,|,forecolor,backcolor",

จากนั้นทำการบันทึกเพียงเท่านี้เมื่อเราเข้าไปที่ CMS และใช้งานในส่วนของ WYSIWYG editor ที่เขาเอามาให้แล้วใช้ไอคอนดังรูป ก็จะสามารถอัพโหลดรูปขึ้น server เราได้แล้วครับ…

มาคราวนี้ผมจะแนะนำใหม่อีกสักรอบเพราะให้เราใช้งาน ckeditor ได้อย่างสมบูรณ์แบบโดยเราจะใช้งานร่วมกับ ckfinder ในการ browse รูปภาพกันครับ

ขั้นตอนการติดตั้ง
1. โหลด module ckeditor มาก่อน http://drupal.org/project/ckeditor
2. โหลด ckeditor มา http://ckeditor.com/download
3. โหลด ckfinder มา http://ckfinder.com/download
4. จากนั้นทำการติดตั้ง module ckeditor จากข้อ 1. ก่อนครับลงใน drupal ของเรา
5. แตกไฟล์ ckeditor ที่ได้มากจากข้อ 2. ลงในตัว module ckeditor โดยไว้ที่ modules/ckeditor/ckeditor ซึ่งไฟล์ข้างในจะมีบอกว่า COPY_HERE.txt

6. แตกไฟล์ ckfinder ในข้อ 3. ลงใน modules/ckeditor/

7. ทำการแก้ไขไฟล์ modules/ckeditor/ckfinder/config.php แล้วลบโค็ดด้านล่างออก

function CheckAuthentication()

{

	// WARNING : DO NOT simply return "true". By doing so, you are allowing

	// "anyone" to upload and list the files in your server. You must implement

	// some kind of session validation here. Even something very simple as...

	// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

	// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the

	// user logs in your system.

	// To be able to use session variables don't forget to add session_start().

	return false;

}

จากนั้นหา

$baseUrl = '/ckfinder/userfiles/';

แก้ให้เป็นตาม path ของ server ที่ใช้งายจริงเช่น

$baseUrl = '/var/www/html/sites/default/module/ckeditor/ckfinder/userfiles/';

และเพิ่ม

require_once '../../../../includes/filemanager.config.php';

ในบรรทัดถัดไปจาก

$baseDir = resolveUrl($baseUrl);

เสร็จแล้วทำการบันทึกครับ modules/ckeditor/ckfinder/config.php

8. ต่อมาให้ทำการแก้ไขไฟล์ sites/default/settings.php โดยเอา # ออกและใส่ url เว็บไซต์เราลงไป

$cookie_domain = 'www.drupal.com';

9. เปิดการใช้งาน module

10. จากนั้นไปที่ User management > Permissions เปิดสิทธิ์การใช้งาน upload

11. จากนั้นไปการตั้งค่า Ckeditor ทำการแก้ไข profile และดูในส่วนของ File browser settings ให้เราเลือก File browser type เป็น Ckfinder

12. เพียงเท่านี้ ckeditor เราก็สามารถใช้งาน browse รูปได้แล้วครับ

thank : snappytux.com

วิธีติดตั้ง CKeditor ใน drupal นั้นไม่อยากเท่าไรเราต้องใช้งานร่วมกับ module Wysiwyg โดยให้เราทำการติดตั้งโมดูล Wysiwyg กันก่อนจากนั้นเปิดใช้งาน

จากนั้โหลด CKeditor มาทำการแตกไฟล์ออกมา จากนั้นทำการสร้างโฟลเดอร์ชื่อว่า libraries ไว้ที่ sites/all/ และนำโฟลเดอร์ของ CKEeditor ที่แตกออกมาได้ใส่เข้าไปใน sites/all/libraries ก็จะเป็นsites/all/libraries

แล้วทำการโหลดไฟล์มาจาก http://drupal.org/node/462146#comment-2005574 เมื่อแตกออกมาข้างในจะมีสองไฟล์คือ ckeditor.inc กับ ckeditor-3.0.js ให้นำ ckeditor.inc ไปใส่ไว้ที่ sites/all/modules/wysiwyg/editors และ ckeditor-3.0.js ใส่ไว้ที่ sites/all/modules/wysiwyg/editors/js

จากนั้นกลับไปที่เมนู Site configuration > Wysiwyg เราจะพบกับ CKeditor ที่เพิ่มเข้ามา

เลื่อนขึ้นมาด้านบนปรับการใช้งานของ input format ให้ใช้งานกับ CKeditor และทำการ Save

สามารถ edite CKeitor ในการใช้งานของแต่ละ Input format ได้

ลองไปใช้งานกันดูน่ะครับกับ CKeditor ใน drupal แล้วคุณจะชอบมันเหมือนผม…

ขั้นตอนการติดตั้ง
1. ให้แตกไฟล์ module FCKeditor ไว้ที่ sites/all/modules
2. จากนั้นโหลดไฟล์เพิ่มมาจาก http://www.fckeditor.net/download และแตกไฟล์ไว้ที่ sites/all/modules/fckeditor/fckeditor
3. enable module fckeditor บน drupal ของเรา
4. กำหนดสิทธิ์การใช้งาน fckeditor ใน Administer >> User Management >> Permissions

5. เราสามารถปรับแต่งการใช้งานของ fckeditor ได้ที่ Administer >> Site configuration >> FCKeditor

เพียงเท่านี้เราก็จะได้ fckeditor มาใช้งานแล้วครับ

อันนี้หน้าตา FCKeditor

อันนี้หน้าตา Tiny MCE

อะไรจะง่ายแบบนี้ ^ ^

TinyMCE คือ WYSIWYG Editor ซึ่งมันก็คือตัวช่วยในการเขียนเนื้อหาที่ถูกนำไปใช้งานกับหลายๆ cms ด้วยกัน ซึ่งมันมีประโยชน์เหมือนกับการเขียนบน word อะไรยังงั้นเลย ก็ตามชื่ออะครับ WYSIWYG (What You See Is What You Get) เห็นอะไรได้อย่างงั้น ซึ่งถ้าใครใช้งาน magento อยู่ก็คงรู้ดีว่ามันมีแต่ช่อง Text area ให้มาเปล่าๆ ให้เราใส่ code หรือเขียนข้อความลงไปเอง ซึ่งถ้าไม่มีพื้นฐาน HTML ก็คงจะรำบากกันหน่อย แต่ TinyMCE ช่วยท่านได้ครับ

วิธีการติดตั้ง Tiny MCE บน magento คงจะไม่ง่ายเหมือนบน CMS ตัวอื่นหรอกครับแต่ก็ไม่ยากจนเกินไป เรามาเริ่มทำกันเลยดีกว่า ก่อนอื่นให้ดาวโหลดตัว Tiny MCE มาก่อน http://tinymce.moxiecode.com/download.php เลือกตัว Main package น่ะครับ จากนั้นให้ทำการแตกไฟล์ออกมาจะได้ folder ชื่อ tinymce ให้เราทำการอัพไฟล์ขึ้นไปวางไว้ที่ /js/tiny_mce (folder นี้ให้สร้างเอง)/tinymce (folder นี้คือตัวที่เราอัพโหลดขึ้นมา)

จากนั้นให้ทำการเพิ่ม script ด้านล่างลงไป ที่บรรทัด 54 (บรรทัด 49 ในเวอร์ชั่น 1.1.1) ในไฟล์ app/design/adminhtml/defaut/default/template/catalog/product/edit.phtml

<script language="javascript" type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tinymce/jscripts/tiny_mce/tiny_mce.js') ?>"></script>
<script language="javascript" type="text/javascript">
Event.observe(window, 'load', function() {
    tinyMCE.init({
        mode : "exact",
        theme : "advanced",
        strict_loading_mode : true,
        elements : "description,short_description",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_path_location : "bottom",
        extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        theme_advanced_resize_horizontal : "true",
        theme_advanced_resizing : "true",
        apply_source_formatting : "true",
        convert_urls : "false",
        force_br_newlines : "true",
        doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
    });
});

</script>

จากนั้นมาต่อด้วยแก้ไข function getElementHtml() ที่บรรทัด 51 จากไฟล์ lib/Varien/Data/Form/Element/Editor.php ให้ทำการ upadate น่ะครับหรือทับ code ตัวเก่าของมันทิ้งไปเลย

public function getElementHtml()
    {
        if( $this->getWysiwyg() === true )
        {
            $element = ($this->getState() == 'html') ? '' : $this->getHtmlId();

            $html = '
                <textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
        <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
        <script language="javascript" type="text/javascript">
        Event.observe(window, "load", function() {
            tinyMCE.init({
                mode : "exact",
                theme : "advanced",
                strict_loading_mode : true,
                elements : "'.$this->getHtmlId().'",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_path_location : "bottom",
                extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                theme_advanced_resize_horizontal : "true",
                theme_advanced_resizing : "true",
                apply_source_formatting : "true",
                convert_urls : "false",
                force_br_newlines : "true",
                doctype : "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"
            });
        });

        </script>';

            $html.= $this->getAfterElementHtml();
            return $html;
        }
        else
        {
            return parent::getElementHtml();
        }
    }

ต่อมาให้แก้ไขไฟล์จากบรรทัดที่ 101 /magento/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php จากเดิม

$fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'height:36em;',
            'wysiwyg'   => false,
            'required'  => true,
        ));

เป็น

 $fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'width:98%; height:600px;',
            'wysiwyg'   => true,
            'required'  => true,
        ));

จากนั้นลองเข้าหน้า admin ของ magento ดูครับแล้วไปที่ Catalog >> Manage Product แล้วทำการสร้างสินค้าดูครับ

แต่ในส่วนที่แก้ไขยังคงใช้ tinymce ได้เพียงแค่หน้าสร้างสินค้าเท่านั้นถ้าเราต้องการใช้งานในส่วนอื่นๆเพิ่มเติมต้องติดตั้ง Extension ที่ชื่อว่า Fontis WYSIWYG Editor ครับ เมื่อทำการติดตั้งแล้วให้เรามาแก้ไขค่ามันที่เมนู System >> Configuration >>Admin แล้วดูที่แท็บ WYSIWYG Editor ให้เลือก Editor Type เ็ป็น Tiny MCE ตามรูป หลังจากนั้นเราก็จะสามารถใช้งานในส่วนของ

• Product Description
• Product Short Description
• CMS Page Content
• Static Block Content
• Category Description
• Newsletter Template

อ้างอิง : http://www.magentocommerce.com/wiki/wysiwyg/a_how-to#introduction
ปล. code ที่ผมนำมาอาจจะไม่เหมือนในเว็บไซต์อ้างอิง เพราะผมได้ทำการแก้ไขในส่วนของ path ที่ลิงค์ไปยัง tiny_mce.js ซึ่งถ้าทำตามผมได้อย่างถูกต้อง สามารถนำไปใช้งานได้แน่นอนครับ

ซึ่งการปรับแต่งค่า global configuration นั้นจะแย่งด้วยกัน 3 ส่วนคือ 1.Site 2.System 3.Server ซึ่งผมจะมาพูดถึง Site กันครับ เพราะในส่วนอื่นๆ ใช้ระบบพื้นฐานมันก็เพียงพอแล้ว

ซึ่งแท็บ Site ก็แบ่งออกอีก 3 ค่าก็คือ Site Settings , Metadata Settings , SEO Settings เรามาดูในส่วนแรกกันก่อนครับ Site Settings

1. สำหรับส่วนนี้คือการตั้งให้เว็บเรากำหนดเป็น offline ของเว็บซึ่งหมายถึงการปิดเว็บไซค์ ถ้ามีผู้เข้าชมเว็บขณะที่กำลัง offline เว็บอยู่ ผู้เข้าชมเว็บเราก็ไจะได้เห็นข้อความที่อยู่ในช่อง ” Offline Message ” ปกติแล้วการ offline เว็บจะทำก็ต่อเมื่อ มีการปรับปรุงเว็บไซค์ที่ต้องใช้เวลาในการดำเนินการมาก หรือการติดตั้งโปรแกรมเสริมให้กับเว็บเรา ซึ่งมีผลต่อคุณสมบัติหรือหน้าตาเว็บไซค์ จึงต้องมีการ offline ไว้ก่อน
2. ข้อความที่อยู่ในช่องนี้ จะถูกนำไปแสดงบนหน้าเว็บไซค์ เมื่อเว็บไซค์นั้นอยู่ในสถานะ Offline ซึ่งสามารถใส่ Tag HTML ได้ด้วย
3. ชื่อเว็บเรา
4. เป้นตัวเลือกคู่มือการเขียนบทความ หรือเนื้อหาในส่วนต่างๆของ  joomla มี 2 ตัวเลือกด้วยกัน คือ No Editor หมายถึง เป็นเครื่องมือเขียนบทความที่ผู้ใช้งานจะต้องเขียน Tag HTML ด้วยตัวเอง Tiny MCE2.0 เป็นเครื่องมือแบบ WYSIWYG (what you see is what you get)
5. กำหนดค่าจำนวนของรายการข้อมูลค่างๆ ที่จะให้แสดงในแต่ละหน้าของเว็บไซค์
6. กำหนดจำนวนหน้าของเนื้อหาที่จะให้นำไปแสดงใน feed

Metadata Settings

1. ค่านี้ใส่เพื่อบอกรายละเอียดย่อยๆ หรือเป็นสโลแกนของเว็บเรา ข้อมูล meta ตัวนี้จะถูกอ่านโดย search engine เช่น Google และนำไปเป็นผลลัพธ์ในหน้าค้นหาเว็บไซค์ของเรา ซึ่งจะทำให้ผู้ที่ค้นหาเว็บไซค์ที่ต้องการข้อมูลของเว็บไซค์ของเรานำเสนออยู่ คลิกเข้ามายังเว็บของเรามากขึ้น
2. เป็นค่าคำสำคัญหรือ keyword ของเว็บไซค์ ที่จะนำมาใช้แทรกในเนื้อหาของเว็บไซค์
3. กำหนดว่าใ จะให้แสดงชื่อไตเติลของหน้าเว็บ ในแท็ก meta ของเว็บไซค์เมื่อเปิดหน้าเว็บนั้นอ่านด้วยหรือไม่
4. กำหนดว่า จะให้แสดงชื่อผู้เขียนบทความไว้ในแท็ก meta ของเว็บไซค์ เมื่อเปิดหน้าเว็บเพจของบทความนั้นขึ้นอ่านหรือไม่

SEO Settings

1. กำหนดว่า จะเปลียน URL ของหน้าเว็บเพจต่างๆ ไปอยู่ในแบบง่ายต่อการอ่านของ search engine หรือไม่
2. เป้นตัวเลือกเฉพาะสำหรับ web server ที่ทำงานด้วยโปรแกรม apache สำหรับกำหนดให้เปลี่ยน URL ของหน้าเว็บเพจให้อยู่ในรูปแบบที่อ่านง่าย โดยจะกำหนดเกี่ยวกับไฟล์ .htaccess ซึ่งผมจะกล่าวถึงในบทความต่อ
3. กำหนดให้จะใส่ .html ลงไปด้านหลัง URL ของหน้าเว็บเพจหรือไม่