Shopping Cart Gallery

You are here: Shopping Carts

Tips and Tricks

Tips And Tricks

Launching your store in a production environment, configuring taxes tips.

Defining tax rates and zones is mostly taken care of right before launch and such an effort and configuration is typically specific to your business requirements and rules. Importing tax rates using the CSV import is an frequent issue. Users were editing with Microsoft Excel, will creating the CSV file to import. All the CSV file to be enclosed with double quotation marks and Excel removes these, since Magento requires double quotation. Magento will not be able to read the CSV file properly (Applicable to all CSV import files in Magento).

Example of files edited in Excel (while opening on notepad or any other text editor

Code,Country,State,Zip/Post Code,Rate,default
US-NY-12007-Rate 1,US,NY,12007,4,
US-NY-12009-Rate 1,US,NY,12009,4,
US-NY-12023-Rate 1,US,NY,12023,4,
US-NY-12041-Rate 1,US,NY,12041,4,

Proper file format with double quotation marks

"Code","Country","State","Zip/Post Code","Rate","default"
"US-NY-12007-Rate 1","US","NY","12007","4",
"US-NY-12009-Rate 1","US","NY","12009","4",
"US-NY-12023-Rate 1","US","NY","12023","4",
"US-NY-12041-Rate 1","US","NY","12041","4",

Magento’s default setting is the complete opposite, please keep in mind, if you need to apply tax to the shipping fees. However this can be modified by selecting on the dropdown located under System> Configuration > Sales > Tax > Tax Classes > Tax Class for Shipping the desired tax class for your selected carrier’s fees.

WYSIWYG Editors

Still Magento Version 1.0 doesn’t turn on WYSIWYG functionality by default. WYSIWYG editors are a convenient way to add content pages, products and categories; also it is more human-readable.

There is a TinyMCE developed by MoxieCode WYSIWYG editor installed with Magento. If you are not a fan or big fan of TinyMCE or want to try new, FCKeditor can easily get installed.

TinyMCE:

TinyMCE doesn’t work for Category description fields is the only drawback of it.

Where to get it

Download the files from http://tinymce.moxiecode.com/download.php and upload to your Magento installation. Use the directory /js/tiny_mce/ (from downloaded archive take the directory tinymce/jscripts/tiny_mce/).

Working

This text works on product page for version 1.1.6. UPDATED the tiny MCE code for unescaped " and it works now for the CMS example

Embed the code into the pages containing textarea elements you wish to attach the WYSIWYG to. Sure it the path is correct to the .js file also the elements used in the tinyMCE init function.

Where to insert it

Add the code around line 54 (line 49 on 1.1.1) of app/design/adminhtml/defaut/default/template/catalog/product/edit.phtml, for the product. To match your setup change the path to the javascript file in the code below.


<script language="javascript" type="text/javascript" src="<?php echo $this->getJsUrl('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>

Edit the function getElementHtml() around line 45 of lib/Varien/Data/Form/Element/Editor.php, for the CMS.


    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();
        }
    }
>

Check the path to the js file, getElementHtml function also has an if statement so the code you’ve added won’t be executed unless you change the field type to WYSIWYG.

if( $this->getWysiwyg() === true)

Also you can do this in /magento/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php, near the bottom:


        $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,
        ));

TinyMCE should look like this: when you get it working.
You can also change width and height of the editor in /magento/skin/adminhtml/.../.../boxes.css in line 405 and 406 (v1.1.1). To change the size of the editor on the fly, TinyMCE has nice features, so this is not absolutely needed.

FCKeditor

Where to get it

FCKEditor can get downloaded from the FCKeditor website

How to install it

Unzip the fckeditor folder as per choice of location, the best places for it are your Magento install’s root or inside the js folder.

Working

Insert the following code, to call FCKeditor on any page.


<script type="text/javascript" src="<?php echo $this->getJsUrl('fckeditor/fckeditor.js') ?>"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'id_of_element_where_you_want_to_attach_fckeditor' ) ;
oFCKeditor.BasePath = "path/to/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>

Without any customization FCKeditor looks like on the category page:

For CMS pages

Go in /app/code/core/Mage/Adminhtml/Block/CMS/Page/Edit/Tab/Main.php and modify


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

Go in /lib/Varien/Data/Form/Element/Editor.php and replace $html = ‘...’; by


            $html = '<textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
               <script type="text/javascript" src="/js/fckeditor/fckeditor.js"></script>
               <script type="text/javascript">
                   window.onload = function() {
                       var oFCKeditor = new FCKeditor( "' . $element .'" ) ;
                       oFCKeditor.BasePath = "/js/fckeditor/" ;
                       oFCKeditor.ReplaceTextarea() ;
                   }
               </script>';

Without touching the core files

You dont have to touch the core files of Magento because these are workarounds.

Method 1:

Add the code around line 12 of “app/design/adminhtml/default/default/template/page/head.phtml”.
After:


  <script type="text/javascript">
    var BLANK_URL = '<?php echo $this->getJsUrl() ?>blank.html';
    var BLANK_IMG = '<?php echo $this->getJsUrl() ?>spacer.gif';
    var BASE_URL = '<?php echo $this->getUrl('*') ?>';
    var SKIN_URL = '<?php echo $this->getSkinUrl() ?>';
</script>
Code: 
<?
if(stristr($_SERVER["REQUEST_URI"], 'cms_page/edit') == true or stristr($_SERVER["REQUEST_URI"], 'cms_page/new') == true) {
?>
<script type="text/javascript" src="/js/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var oFCKeditor = new FCKeditor( 'page_content' ) ;
            oFCKeditor.BasePath = "/js/fckeditor/" ;
            oFCKeditor.Height    = 300 ;
            oFCKeditor.Width    = 600 ;
            oFCKeditor.ReplaceTextarea() ;
    }
</script>
<? }?>

Method 2:

Insert the following code into magento/app/design/adminhtml/default/default/template/page/head.phtml:


<script type="text/javascript" src="http://www.yoursite.com/js/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    if(document.getElementById('description')){
        if(document.getElementById('description').value == ''){
            document.getElementById('description').value = "<p>Enter description</p>";
            document.getElementById('short_description').value = "<p>Enter short description</p>";
        }
        var oFCKeditor = new FCKeditor( 'description' );
        oFCKeditor.BasePath = "http://www.yoursite.com/js/fckeditor/";
        oFCKeditor.ReplaceTextarea();
        
        var pFCKeditor = new FCKeditor( 'short_description' ) ;
        pFCKeditor.BasePath = "http://www.yoursite.com/js/fckeditor/" ;
        pFCKeditor.ReplaceTextarea() ;
        }
    
    
    if(document.getElementById('_generaldescription')){
        if(document.getElementById('_generaldescription').value == ''){
                document.getElementById('_generaldescription').value = "<p>Enter category description</p>";
            }
        var qFCKeditor = new FCKeditor( '_generaldescription');
        qFCKeditor.BasePath = "http://www.yoursite.com/js/fckeditor/";
        qFCKeditor.ReplaceTextarea();
    }
    
    if(document.getElementById('page_content')){
        if(document.getElementById('page_content').value == ''){
                document.getElementById('page_content').value = "<p>Enter CMS content</p>";
            }
        var rFCKeditor = new FCKeditor( 'page_content');
        rFCKeditor.BasePath = "http://www.yoursite.com/js/fckeditor/";
        rFCKeditor.ReplaceTextarea();</pre>
    }
}
</script>

Method 3:

Insert the following code into magento/app/design/adminhtml/default/default/template/page/head.phtml: Start on the ?> line and insert this


$baseUrl = $this->getJsUrl("fckeditor");
$server = $_SERVER['SERVER_NAME'];
$basePath = substr($baseUrl,stripos($baseUrl,$server) + strlen($server));
?>
 
<script type="text/javascript" src="<?php echo $baseUrl; ?>/fckeditor.js"></script>
 
<script type="text/javascript">
 
  Event.observe(window, 'load', function() {
    winOb = $$('textarea');
    winOb.each( function(item) {
      var nbutton = document.createElement('a');
      nbutton.innerHTML="Rich Edit";
      item.up(1).appendChild(nbutton);
      Event.observe(nbutton,"click", function() {
        nbutton.hide();
        var oFCKeditor = new FCKeditor( item.id );
        oFCKeditor.BasePath = "<?php echo $basePath; ?>/";
        oFCKeditor.ReplaceTextarea();
        return false;
      });
    });
  });
 
</script>
>

Make it BIGGER

For magento 1.0 release for WYSIWYG on CMS, replace in skin/adminhtml/default/default/boxes.css:


columns .form-list td.value             { width:auto; padding-right:5px; }
by 
/* @hack FCKEditor */
.columns .form-list td.value             { width:270px; padding-right:5px; }
#page_tabs_main_section_content  td.value  { width:100%; padding-right:5px; }
You can optionally replace in /js/fckeditor/fckeditor.js : 
    this.Height            = height        || '200' ;
by 
    this.Height            = height        || '600' ;
For earlier releases: <br />
  Add the following code in skin/adminhtml/default/default/boxes.css: 
...
#_generaldescription___Frame{
width: 550px;
height: 600px;
}
...

Additional Tips and Tricks

Use fckEdit to upload images

1. To store uploaded files Create directory.
2. ChMod newly created dir to 777
3. Edit connector files under /js/fckeditor/editor/filemanager/connectors/php/config.php
Change:

$Config['Enabled'] = true ;
// WARNING !
// Set it to hard coded 'true' is a SECURITY hole, you must check it against the PHP admin session ...
// Something like (not tested !!) :
// session_name('adminhtml');
// session_start();
// $Config['Enabled'] = array_key_exists('user', $_SESSION);
//
// http://www.mail-archive.com/ This e-mail address is being protected from spambots. You need JavaScript enabled to view it /msg00006.html
//
$Config['UserFilesPath'] = '/media/upload/' ;

Description apply to Apache/PHP installation. For Windows/other look at others catalogues to find proper connector.

Problems?

When creating new products, categories, and cms pages. Magento wouldn’t recognize the information enterted into FCK’s editing field. To get around this add the following javascript, which injects some text into the textarea prior to being converted to FCKEditor.

...

Enter" />

For people, which dont have any idea where to put above code there is other solution for saving new files created in fckEditor. Please look at: http://www.magentocommerce.com/boards/viewthread/7596/
In newly created pages use fckEditor build-in SAVE button first

Whom are using Magento version 1.0.19870.4 and couldn’t get things working using the above tutorial.
For some reason if anyone didn’t have the tinyMCE folder in the js folder, manually download TinyMCE 3.1.0.1 from http://tinymce.moxiecode.com/ and put the javascript files in a selfmade /js/tiny_mce folder. (The javascript files are in the folder where the file ‘tiny_mce.js’ is located)
Change file app/code/core/Mage/Admin/html/Block/Cms/Page/Edit/Tab/Main.php and put the wysiwyg value on line 100 to true so it looks like this:


          $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,
        ));
Change file <em>lib/Varien/Data/Form/Element/Editor.php</em> and replace  everything between the <script>...</script> tags in the $html  variable with this: 
                <script language="javascript" type="text/javascript">
                tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
 
        // Theme options
        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,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
 
        // Example content CSS (should be your site CSS)
        content_css : "http://www.your-domain.com/skin/frontend/interface/theme/css/styles.css"
 
        }); 
               </script>

Notice the url http://www.your-domain.com/skin/frontend/interface/theme/css/styles.css which you should replace with the correct values to see the right styles.
Change file app/design/admin/html/default/default/template/page.phtml and add the following code after line 37:


<script type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tiny_mce.js') ?>" language="javascript"></script>

Warning: This is not the most correct way to include the javascript, but it was the only solution to include it in the right place and the right way.

Who ever had trouble for getting the FCKeditor to display properly in the category admin page (Magento version 1.3.2.4). Add a few work arounds.
First off in the adminhtml head file (/app/design/adminhtml/default/default/template/page/head.phtml) move the script call into its own function and call that function from the window.onload:
<script type=”text/javascript” src=”/js/fckeditor/fckeditor.js”></script> <script type=”text/javascript”> function wysiwyg() {


    if(document.getElementById('description')) {
      if(document.getElementById('description').value == ''){
          document.getElementById('description').value = "<p>Enter description</p>";
          document.getElementById('short_description').value = "<p>Enter short description</p>";
      }</pre>
      var oFCKeditor = new FCKeditor( 'description' );
      oFCKeditor.BasePath = "/js/fckeditor/";
      oFCKeditor.ReplaceTextarea();
      var pFCKeditor = new FCKeditor( 'short_description' ) ;
      pFCKeditor.BasePath = "/js/fckeditor/" ;
      pFCKeditor.ReplaceTextarea() ;
  }
  if(document.getElementById('_generaldescription')){
      if(document.getElementById('_generaldescription').value == ''){
              document.getElementById('_generaldescription').value = "<p>Enter category description</p>";
      }
      var qFCKeditor = new FCKeditor( '_generaldescription');
      qFCKeditor.BasePath = "/js/fckeditor/";
      qFCKeditor.ReplaceTextarea();
  }
  if(document.getElementById('page_content')){
      if(document.getElementById('page_content').value == ''){
              document.getElementById('page_content').value = "<p>Enter CMS content</p>";
      }
      var rFCKeditor = new FCKeditor('page_content');
      rFCKeditor.BasePath = "/js/fckeditor/";
      rFCKeditor.ReplaceTextarea();
  }
  if(document.getElementById('group_3description')){
      if(document.getElementById('group_3description').value == ''){
             document.getElementById('group_3description').value = "<p>Enter CMS content</p>";
      }
      var sFCKeditor = new FCKeditor('group_3description');
      sFCKeditor.BasePath = "/js/fckeditor/";
      sFCKeditor.ReplaceTextarea();
  }
} window.onload = function() { 
  wysiwyg();
} </script> <br />
  Add another FCKeditor call which made the FCKeditor show up for all new  categories, but since selecting a category to edit does not produce a full page  refresh, <br />
  Add some code to the edit template of category  (/app/design/adminhtml/default/default/template/catalog/category/edit.phtml), add  another wysiwyg function call around line 93: </p>
          onSuccess: function(transport) {
              try {
                  if (transport.responseText.isJSON()) {
                      var response = transport.responseText.evalJSON()
                      if (response.error) {
                          alert(response.message);
                      }
                      if(response.ajaxExpired && response.ajaxRedirect) {
                          setLocation(response.ajaxRedirect);
                      }
                  } else {
                      $(categoryContainer).update(transport.responseText);
                  }
      wysiwyg();
              }

This now makes FCKeditor show up when editing all category pages.

Tips And Tricks

Launching your store in a production environment, configuring taxes tips.

WYSIWYG Editors

Problems?

Main Menu