โดยให้เราโหลด extension Ajzele_MailTransport ตัวนี้มา จากนั้นแตกซิบแล้วนำไปวางบน server magento ของเรา

การตั้งค่าให้ไปที่เมนู System > Configuration > System > Ajzele MailTransport แล้ว config ดังรูป

เป็นอันเสร็จครับ

Thank : http://inchoo.net/ecommerce/magento/custom-email-server-transport-with-magento/

วันนี้มี Extension น่าสนใจตัวหนึ่งมาฝากครับนั่นคือ Facebook Connect เอาไว้ลูกค้าที่เล่น facebook อยู่แล้วสามารถ login เข้ามาซื้อสินค้าในเว็บเราได้ โดยใช้บัญชี facebook เป็นตัวเชื่อมต่อ

ประโยชน์ก็คือลูกค้าไม่จำเป็นต้องมาเสียเวลาสมัครสมาชิกเพื่อซื้อสินค้าเรา เป็นการเพิ่มความสะดวกให้กับลูกค้าเราอีกทางครับ

โดยให้เราโหลด Extension Facebook Connect มาก่อน จากนั้นแตกไฟล์เราจะได้โฟลเดอร์ชื่อ app/ มาให้นำไปอัพโหลดขึ้นเว็บไซต์ของเราได้เลยครับ

สามารถอ่านรายละเอียดของ extension ได้ที่ http://www.yourstore.com/facebook/ จากนั้นเราต้องทำการสร้าง app บน facebook กันก่อนให้ไปที่หน้า http://www.facebook.com/developers/createapp.php

จากนั้นใส่ชื่อร้านค้าของเราลงไป และยอมรับเงื่อนไข จากนั้นกด Create Application

ไปที่เมนูเชื่อมต่อระบุ url ของเว็บไซต์เราลงไป

จากนั้นทำการบันทึกค่า ในส่วนของค่าอื่นๆเราสามารถใส่ลงไปแต่ตามต้องการ ต่อมาให้เรานำก็อปปี้ค่า API 2 ค่าดังรูป

จากนั้นไปที่หน้า admin ไปที่เมนู System > Configuration > Customer Configuration นำ API ทั้งสองค่ามาใส่

เพียงเท่านี้เราก็จะได้ facebook connect มาใช้งานแล้วครับ สามารถทดสอบลองเล่น DEMO ได้

thank : http://inchoo.net/ecommerce/magento/facebook-connect-magento-extension/

ให้ทำการติดตั้ง Extension ตัวนี้ครับ Thai (Thailand) Language Pack ดูวิธีติดตั้ง Extension ใน magento ได้จาก ที่นี่

หลังจากติดตั้งเสร็จแล้วจะได้ดังภาพ

จากนั้นกลับไปที่หน้า admin แล้วไปที่เมนู System > Configuration > General ที่ Countries options เลือกเป็นไทย

Locale options เลือกเป็นไทย

จากนั้นทำการเซพแล้วเลือกลงมาล่างสุดที่ Interface Locale: เลือกเป็นไทย

แล้วเราก็จะได้หน้าภาษาไทยตามต้องการ…

การแสดงผลออกมาก็จะเป็นแบบนี้

ซึ่งเมื่อมีเวอร์ชั่นใหม่ออกมาทาง magento จะส่งเป็นจดหมายเข้ามาหาเราและเตือนเราว่ามีเวอร์ชั่นใหม่ออกแล้วน่ะให้ทำการอัพเกรดด้วยน่ะจ๊ะ เพื่อจะได้ไม่ตกเทรน ในหน้า admin ของ magento เรา

สิ่งแรกที่ควรทำทุกครั้งก่อนที่จะทำการอัพเกรดไม่ว่าจะเป็น cms ตัวไหนๆก็ตามคือ สำรองฐานข้อมูล ครับ
อย่างที่สองถ้าเราได้ทำการแก้ไข code หรือไฟล์อะไรก็ให้ทำการสำรองสิ่งเหล่านี้ไว้ด้วยครับ
อย่างที่สามสำรอง folder media ไว้ด้วย เพราะภายใน folder นี้ได้มีการเก็บรูปภาพที่เราอัพโหลดขึ้นไปในส่วนของ product และ category ทั้งหมด
อย่างสุดท้าย สำรองไฟล์ app/etc/local.xml ไว้ด้วย

เรามาเริ่มอัพเกรดกันเลยดีกว่าครับให้ไปหน้า admin ของ magento จากนั้นไปที่เมนู System >> Magento Connect >> Magento Connect Manager

ให้เราทำการติดตั้ง Extension โดนใส่ลงไปในช่ิอง Paste extension key to install: ว่า magento-core/Mage_All_Latest จากนั้นกด install ครับ ระบบจะทำการโหลดเวอร์ชั่นล่าสุดแล้วอัพเกรดให้ครับ

เพียงเท่านี้เราก็จะได้ magento เวอร์ชั่นล่าสุดมาใช้งานละครับ ง่ายโครต!!!

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 ซึ่งถ้าทำตามผมได้อย่างถูกต้อง สามารถนำไปใช้งานได้แน่นอนครับ

ให้เราเข้าไำปเลือก extension ก่อนที่ http://www.magentocommerce.com/magento-connect ครับมีทั้งแบบเีสียเงินซื้อ กับแบบฟรีครับ ผมขอเลือกแบบฟรีล่ะครับ โดยผมเลือก Magento EasyLightbox เพื่อทำให้รูปภาพสินค้าของเราแสดงผลเป็นแบบ lightbox ให้เรากดคลิกที่ Get extension key ครับจะอยู่ที่ใต้รูปเสมอ

ติ้กที่ช่อง By checking this box I agree to the แล้วก็กดปุ่ม Get extension key ครับ

จากนั้นให้เราจำ key ที่ได้มาไว้ครับหรือไม่ก็อย่าพึ่งปิดหน้านี้

จากนั้นไปที่หน้า admin ของ magento ครับแล้วไปที่เมนู System >> Magento Connect >> Magento Connect Manager

ใครเข้ามาแล้วเจอหน้าตาดังภาพ

ให้ ssh เข้าไปที่ระบบเราครับจากนั้น run command line เป็นการเปลี่ยนสิทธิ์ไฟล์ทั้งหมดให้เป็น 644 และ folder ทั้งหมดเ็ป็น 777 หรือง่ายที่สุดก็ ftp ไปเปลี่ยน permision ของ magento ทั้งหมดให้เป็น 777 ครับ

find . -type d -exec chmod 777 {} \;
find . -type f -exec chmod 644 {} \; 

หลังจากผ่านมาได้ให้เรา log in ด้วย user admin ของเราอีกครั้ง

ให้เรานำ extension key มาใส่ลงไป

จากนั้นเลือกแท็บ Settings ให้เราตั้งค่า Preferred State: โดยดูได้จาก Extension ที่เราเลือกมาติดตั้ง อย่างของผมเลือก Magento EasyLightbox ก็ดูว่า Stability มันคือไร เช่นเป็น beta ก็ให้มาปรับค่า Preferred State: เป็น beta เช่นกัน

กลับมาที่แท็บ Extension กด Install ครับ

ระบบจะทำการติดตั้ง extension ให้ครัุบ เพียงเท่านี้เราก็จะได้ extension มาใช้งานละครับ

จากนั้นให้เราดูวิธีการใช้งานของ extension นั้นๆเอาครับว่าเขาใช้งานกันยังไงซึ่งโดยส่วนมากจะบอกมาในแท็บ overview ครับ

และถ้าเราติดตั้งแล้วไม่อยากใช้งาน ให้เราไป Disable ได้ครับโดยไปที่เมนู System >> Configuration >> Advanced >> Advanced เลือก extension ที่เราต้องการ Disable โดย extension ที่เราพึ่งติดตั้งมาจะอยู่ล่างสุดเสมอครับ

ให้เราคลิกที่ Module เลยครับ

เราจะพบกับ module หลายตัวๆที่ได้ทำการติดตั้งไว้แล้ว ถ้าเราอยากเอาตัวไหนออกให้เราติ้กช่องที่หน้าตัว module ตัวนั้น เราสามารถติ้กหลายๆ module ได้ จากนั้นกด uninstall ครับ

แต่ที่สะดวกที่สุดก็คือวิธีที่ 1 ครับติดตั้งด้วยไฟล์บีบอัดบนเครื่องเรา โดยส่วนใหญ่การติดตั้งโปรแกรมเสริมให้กับ joomla จะทำตามวิธีนี้ เนื่องจากโดยส่วนใหญ่เราจะต้องโหลดโปรแกรมเสริมมาเก็บไว้บนเครื่องของตนเองก่อน และโปรแกรมเสริมส่วนใหญ่ก็จะจัดเก็บไฟล์ด้วย .zip หรือ .tgz โดยให้เรากด Browse… จากนั้นเลือกโปรแกรมเสริมที่เราโหลดมาเพื่อจะติดตั้งลงไปบน joomla แล้วกด upload file and install

เพียงแค่นี้ก็จบการติดตั้งแล้ว ส่วนโปรแกรมเสริมที่เราติดตั้งลงไปนั้นก็ถูกแยกออกตามหมวดหมู่ของมันเอง component, module, plugin, theme (template) โดยให้เราไปดูที่เมนู Extension แล้วเลือกดูว่าเลยครับว่า โปรแกรมเสริมที่เราติดตั้งไปเมื่อกี้เราติดตั้งอะไรลงไป เช่น ติดตั้ง module ลงไปก็ให้ไปดูที่ Extension > Module Manager เป็นต้น

Module

Module คือส่วนประกอบย่อย หรือ window เล็กๆ ที่แสดงหน้าเว็บ ด้านบน ดานล่าง ด้านซ้าย ด้านขวา แล้วแต่เราจะออกแบบ และกำหนดตำแหน่งของมันใน template และเป็นโปรแกรมเสริมที่ช่วยในการดึงข้อมูลจากฐานข้อมูลภายในมานำเสนอผ่านหน้า เว็บ แต่ก็มีบางโปรแกรมที่ถึงเอาข้อมูลจากภายนอกมาใส่ไว้ในเว็บของเราได้เช่นกัน การทำงานของ Module นี่เองที่ทำให้เว็บไซต์ที่สร้างจาก Joomla CMS มีการนำเสนอข้อมูลที่มีความสวยงาม และหลากหลาย เช่น โมดูลการนำเสนอข้อมูลดัชนีซื้อขาย-หลักสทรัพย์ โมดูลแสดงรายการบทความใหม่ โมดูลแสดงสถิติผู้เยี่ยมชมเว็บไซต์ เป็นต้น

Component

Component เป็นซอฟแวร์อีกประเภทที่สร้างมาเป็นส่วนขยายเพื่อเพิ่มความสามารถของจูมล่า ให้มีความสามารถเพิ่มขึ้นจากเว็บคอนเท้นธรรมดา ถ้าเปรียบให้เข้าใจได้ง่าย Component ก็คืออวัยวะของร่างกายของเรา แต่เป็นอวัยวะที่มีความสามารถพิเศษทำให้ร่างกายสามารถทำงานได้อย่างไร้ขึดจำกัด เช่น. component virtuemart ก็คือช็อปปิ้งออนไลน์ ทำให้เว็บของเราเป็นเว็บขายของได้ เป็นต้น

Plugin

Plugin คือส่วนเสริม เพื่อเพิ่มความสามารถของจูมล่า และคอมโพแน้นต่างๆที่มีอยู่หรือติดตั้งใหม่ เป็นส่วนแก้ไขเพิ่มเติมให้กับโปรแกรมหลักเพื่อเพิ่มความสามารถให้กับความ สามารถเดิมที่มีอยู่แล้วให้ทำงานได้ดียิ่งขึ้น