Difference between revisions of "X-Cart:Customizing Text Labels"

From X-Cart 4 Classic
Jump to: navigation, search
m
(Using Webmaster Mode)
Line 97: Line 97:
 
==Using Webmaster Mode==
 
==Using Webmaster Mode==
  
Webmaster mode is an operating mode that facilitates WYSIWYG editing of language variable values directly from the pages on which they are displayed. In this mode, you can click on any text element in your store, and this action will open an editor in which you will be able to edit the text of the selected element. As soon as you save the changes made to the element, the results of editing will become available to all the users viewing the respective page of your store.
+
The Webmaster mode is an operating mode that facilitates the WYSIWYG editing of language variable values directly on the pages where they are displayed. In this mode, clicking on any text element in your store opens an editor, where you can edit the text of the selected element. Once the changes made to the element are saved, the result of the editing becomes available to all users viewing the respective page of your store.
  
The following browsers support Webmaster mode:
+
The following browsers support the Webmaster mode:
  
 
* IE 6.0.3790
 
* IE 6.0.3790
Line 105: Line 105:
 
* Firefox 2.0.0.5
 
* Firefox 2.0.0.5
  
{{Note1|Note: If you are using Firefox and the browser status line (at the bottom) does not change when you move the mouse over the site, with the Webmaster mode enabled, please make sure the option "<u>Change status bar text</u>" (<u>Browser settings -> Content -> Advanced (Advanced JavaScript Settings) </u>is enabled in your browser.}}
+
{{Note1|<b>Note:</b> If you are using Firefox, and the browser status line (at the bottom) with the Webmaster mode enabled does not change when you move the mouse over the site, make sure the option "<u>Change status bar text</u>" (<u>Browser settings -> Content -> Advanced (Advanced JavaScript Settings) </u>is enabled in your browser.}}
  
 
* Opera 9.22
 
* Opera 9.22
Line 111: Line 111:
 
* Safari 2.0.4
 
* Safari 2.0.4
 
* Safari 3.0.4
 
* Safari 3.0.4
* Netscape Navigator 9.0.05 (limited support: hyperlinks cannot be edited after pressing the "e" button)
+
* Netscape Navigator 9.0.05 (Limited support: hyperlinks cannot be edited by pressing the "e" button)
 
* Konquerror 3.5.7
 
* Konquerror 3.5.7
 
* Ephiphany 2.18.3
 
* Ephiphany 2.18.3
  
Other browsers may support Webmaster mode, but we cannot guarantee it as thorough testing has not been carried out.
+
Other browsers may support the Webmaster mode, but we cannot guarantee it, as no thorough testing has been carried out.
  
{{Note1|Important: Webmaster mode cannot be used in stores where a compilation of templates was done (For details on template compilation, see the chapter [[X-Cart:Editing_Skin_Files#Compiling_templates | Compiling templates]]).}}
+
{{Note1|<b>Important:</b> The Webmaster mode cannot be used in stores where a compilation of templates was done (For details on template compilation, see the chapter [[X-Cart:Editing_Skin_Files#Compiling_templates | Compiling templates]]).}}
  
 
===Starting Webmaster mode===
 
===Starting Webmaster mode===
  
To start Webmaster mode:
+
'''To start the Webmaster mode:'''
  
# Go to the '<u>Webmaster mode</u>' section of your store's Admin area (<u>Administration menu->Webmaster mode</u>). You should see a box with instructions for using Webmaster mode. At the bottom of the box with instructions, you should see a button labeled '''Start Webmaster mode'''.<br><br>[[Image:webmaster_mode.gif]]<br><br>
+
# Go to the '<u>Webmaster mode</u>' section of your store's Admin area by selecting the <u>'Webmaster mode'</u> item on the <u>'Tools'</u> menu. This opens a page with instructions on using the Webmaster mode. At the bottom of that page, there is a button labeled '''Start Webmaster mode'''.<br><br>[[Image:webmaster_mode.gif]]<br><br>
# Click the '''Start Webmaster mode '''button. Webmaster mode will be enabled. You will know it by that all the textual elements of the user interface in your current user session will become green:<br><br>[[Image:webmaster_mode1.gif]]
+
# Click the '''Start Webmaster mode''' button to enable the Webmaster mode. You will know it is enabled when all the textual elements of the user interface in your current user session become green:<br><br>[[Image:webmaster_mode1.gif]]
  
{{Note1|This is normal: green color of text shows that Webmaster mode is on.}}
+
{{Note1|<b>It's OK!</b> The green color of the text indicates that the Webmaster mode is on.}}
  
After enabling Webmaster mode, you will also see an additional pop-up window appear displaying the tree of templates of the current page. This is also normal: the pop-up window with the tree of templates is X-Cart's Debugging console which is automatically enabled by Webmaster mode; you can use it to quickly access any of the templates of the current page for editing (For detailed information on using the Debugging console, read the section [[X-Cart:Editing Skin Files#Using Debugging Console]]).
+
Webmaster mode also opens a pop-up window with the tree of templates used on the current page.
  
{{Note1|Note: Webmaster mode affects only one user session - the one in which it has been enabled. This means that, while you are working in Webmaster mode, any other users working in the store at the same time with you see the store's pages as perfectly normal (not green and without the Debugging console window).}}
+
: [[Image:webmaster_mode_debug.gif]]
 +
 
 +
The window is X-Cart's Debugging console, which you can use to quickly edit any templates used on the current page. (For detailed information on using the Debugging console, read [[X-Cart:Editing Skin Files#Using Debugging Console]]).
 +
 
 +
{{Note|Webmaster mode affects only one user session, the one where it is enabled. While you are working in Webmaster mode, other users working with the store see the store's pages as perfectly normal (no green text or Debugging console).}}
  
 
===Editing text in Webmaster mode===
 
===Editing text in Webmaster mode===
  
To edit text in Webmaster mode:
+
'''To edit text in the Webmaster mode:'''
  
# After enabling Webmaster mode, go to the page on which the text you wish to edit is located.
+
# Once the Webmaster mode is enabled, go to the page with the text to be edited.
#* If the desired page is in the Admin area, simply browse to it (the same way you would in the normal mode).
+
#* If the desired page is in the Admin area, simply browse to that page (the way you would do that in the normal mode).
#* If the desired page is in the Customer area, click on the link '<u>Open customer area in a new window</u>' at the top of the box with instructions for using Webmaster mode (this opens the Customer area in a new browser window or tab in the same session), then browse to the desired page. Note that you will need to log in using your customer account to edit the pages that are accessible only to authorized customers (like wish list, orders history, etc).
+
#* If the desired page is in the Customer area, click on the '<u>Open customer area in a new window</u>' link at the top of the page with the instructions on using the Webmaster mode (this opens the Customer area in a new browser window or tab in the same session), then browse to the desired page. Please note that you will need to log in using your customer account to edit the pages that are accessible to authorized customers only (like wish list, order history, etc).
#* (In X-Cart PRO): If the desired page is in the Provider area, open the Admin area in a new browser window or tab in the same session, then go to that new window or tab, edit the URL in the browser address bar so it points to the Provider area and press Enter. After the Provider area authorization page is loaded, log in as provider and browse to the desired page.
+
#* (In X-Cart PRO): If the desired page is in the Provider area, open the Admin area in a new browser window or tab in the same session, then switch to that new window or tab, edit the URL in the browser address bar so that it points to the Provider area and press the Enter key. When the Provider area authentication page appears, log in as provider and browse to the desired page.
# Ensure that the page you are going to edit is displayed in the language you wish to edit. For example, if the page is currently displayed in English, and you wish to leave all the English text on this page "as is" and just edit the Russian version of the page, switch the Language selector at the top right-hand corner of the page to Russian before you proceed.
+
# Make sure that the page to be edited is displayed in the language you are going to edit. For example, if the page is currently displayed in English, and you wish to leave all the English text on the page "as is" and just edit the Russian version of the page, switch the Language selector at the bottom right-hand corner of the page to Russian before you proceed.
# Point the mouse cursor at the text element the wording of which you wish to edit.{{Note1|Tip: Notice that, as you position the mouse cursor over a non-clickable text element, the browser status bar displays the name of the language variable that stores the respective text piece and the name of the template file that references this language variable; similarly, when you position the mouse cursor over a hyperlink, the browser status bar displays the destination of the hyperlink.}}
+
# Place the mouse pointer over the text element to be edited.{{Note1|<b>Tip:</b> Notice that as you place the mouse pointer over a non-clickable text element, the browser status bar (in browsers that have it) displays the name of the language variable that stores the respective text piece and the name of the template file that references this language variable; similarly, when you place the mouse pointer over a hyperlink, the browser status bar displays the destination of the hyperlink.}}
 
# Do one of the following:
 
# Do one of the following:
#* (If the text element is a non-clickable piece of text) Click on the text element once with the right mouse button.
+
#* (If the text element is a non-clickable piece of text) Click the text element.
#* (If the text element is a hyperlink): Press the "e" button on your keyboard.{{Note1|Important: As you press the "e" button, your computer must be set to type in the English language, otherwise it will simply not work.}} As soon as you do one of the above, a small pop-up window appears displaying a language variable. This pop-up window titled '<u>Edit label</u>' is where you can edit the language variable value:<br><br>[[Image:edit_label_popup1.gif]]
+
#* (If the text element is a hyperlink): Press the "e" key on your keyboard.{{Note1|<b>Important:</b> Make sure the keyboard layout on your computer is set to English when you are pressing the <b>e</b> key; otherwise it will simply not work.}} This opens a small pop-up window titled '<u>Edit label</u>', where you can edit the value of the language variable:<br><br>[[Image:edit_label_popup1.gif]]
  
Edit the language variable value displayed in the '<u>Edit label</u>' pop-up window and save the changes. For information on the '<u>Edit label</u>' pop-up window, see the chapter below.
+
Edit the value of the language variable displayed in the '<u>Edit label</u>' pop-up window and save the changes. For information on the '<u>Edit label</u>' pop-up window, see the following chapter.
  
 
'''The 'Edit label' pop-up'''
 
'''The 'Edit label' pop-up'''
  
The '<u>Edit label</u>' pop-up window is displayed after you select a text element in Webmaster mode. It displays the name of the language variable that stores the selected text element and provides a text area in which you can edit the value of that variable.
+
The '<u>Edit label</u>' pop-up window appears after you select a text element to be edited in the Webmaster mode. It displays the name of the language variable that stores the selected text element and provides a text area, where you can edit the value of that variable.
  
Note that, when <u>HTML Editor</u> module is enabled at your store, WYSIWYG editor is available for editing language variable values that are more than 40 characters in length or contain an EOL (end of line) symbol. In this case, above the text area with the variable value, you can see two links: '<u>Default editor</u>' and '<u>WYSIWYG editor</u>':
+
Note that with the <u>HTML Editor</u> module enabled in  your store you can use a WYSIWYG editor for editing language variable values that are longer than 40 characters or contain an EOL (end of line) symbol. The two links: '<u>Default editor</u>' and '<u>WYSIWYG editor</u>' above the text area with the variable value indicate that the WYSIWYG editor is available:
  
 
: [[Image:edit_label_popup2.gif]]
 
: [[Image:edit_label_popup2.gif]]
  
By clicking on the link '<u>WYSIWYG editor</u>', you can switch to editing the variable value in WYSIWYG editor. If you do not like the WYSIWYG editor, you can switch back to using the Default editor at any moment by clicking on the '<u>Default editor</u>' link.
+
By clicking on the '<u>WYSIWYG editor</u>' link, you can switch to editing the variable value in the WYSIWYG editor. If you do not like the WYSIWYG editor, you can switch back to the Default editor at any moment by clicking on the '<u>Default editor</u>' link.
  
For short and simple language variable values (less than 40 characters in length, not containing EOL symbols) only the Default editor is provided (In this case, you do not see any links above the text area).
+
For short and simple language variable values (shorter than 40 characters or not containing EOL symbols) only the Default editor is provided (In this case, you do not see any links above the text area).
  
 
Below the text area with the language variable value, there are three buttons: '''Preview''', '''Save''' and '''Cancel'''.
 
Below the text area with the language variable value, there are three buttons: '''Preview''', '''Save''' and '''Cancel'''.
Line 170: Line 174:
 
=== Exiting Webmaster mode ===
 
=== Exiting Webmaster mode ===
  
To quit Webmaster mode:
+
'''To quit the Webmaster mode:'''
  
# Go to the '<u>Webmaster mode</u>' section of your store's Admin area (<u>Administration menu->Webmaster mode</u>).
+
# Go to the '<u>Webmaster mode</u>' section of your store's Admin area by selecting the <u>'Webmaster mode'</u> item on the <u>'Tools'</u> menu.
# Click the button '''Close Webmaster mode'''. Webmaster mode will be disabled. All textual elements should become their normal color.
+
# Click the '''Close Webmaster mode''' button. The Webmaster mode will be disabled. All the textual elements in the store should return to their normal colors.
  
{{Note1|Note: Quitting Webmaster mode does not automatically close the pop-up windows that were opened while you were working in Webmaster mode (The windows that might be open are the Edit label window and the Debugging console window). You need to close any such windows manually. Before re-enabling Webmaster mode after it was closed, make sure you closed any pop-up windows that were left over from the previous Webmaster mode session.}}
+
{{Note|Quitting the Webmaster mode does not automatically close the pop-up windows that were opened while you were using the Webmaster mode (the windows that might be open are the Edit label window and the Debugging console window). You need to close any such windows manually. Before re-enabling the Webmaster mode, after it was closed, make sure you have closed any pop-up windows that were left open by the previous Webmaster mode session.}}
  
 
[[Category:X-Cart user manual]]
 
[[Category:X-Cart user manual]]

Revision as of 16:38, 9 September 2011

Overview

The text in the interface of your X-Cart based store (all kinds of text notes, labels and error messages), as well as the text sent in the e-mail notifications to your users, is easily editable. Perhaps, the best thing about it is that user does not need to possess any programming skills to be able to edit the text: the wording of any text piece of the store can be easily changed from the Admin area.

What makes text editing easy is the use of language variables. A language variable is a named storage location that can contain textual data. X-Cart's template code and program code operate with language variable names instead of using text pieces directly. Thus, the text pieces contained in the variables can be edited without changing the template or program code.

In fact, editing texts in X-Cart boils down to editing language variable values. X-Cart allows you to edit language variable values using the 'Languages' section of the store's admin area (see #Managing Language Variables) or using the Webmaster mode (see #Using Webmaster Mode).

X-Cart's 'Languages' section allows you to edit the values of the existing language variables, add new language variables and delete the language variables that you do not need in your store.

Managing Language Variables

Selecting a language for editing

Before you can edit, add or delete language variables, you need to select the language you are going to alter.

To select the language to be edited:

  1. On the 'Content' menu, select 'Languages' in your store's admin area.
  2. In the 'Edit language' section, pull the drop-down menu and then select the language to be edited.
Edit language.gif

This refreshes the page and displays all the tools necessary for editing the variables of the selected language.

Finding and viewing language variables

Please remember that every language is associated with a certain charset. To ensure that the variables of the language you have opened for editing are displayed properly, make sure to view them in the language they were created. In other words, if the language selected for editing is French, the current language of the Admin area needs to be switched to French, too:

Lng selector.gif

The number of language variables in X-Cart is extremely great, so, in order to view specific language variables, you will first need to find them. X-Cart's language variable filter facilitates finding language variables:

Lng filter.gif

Here's how you can use the filter:

For your convenience, all the language variables in X-Cart are divided into several groups:

  • Countries - country names in the language you are currently editing
  • E-mail - text pieces used in email notification messages
  • Errors - error messages
  • Labels - relatively small text pieces (section titles, field names, etc)
  • Languages - language names in the language you are currently editing
  • Modules - module names and descriptions for the 'Modules' section of the store's admin area
  • Options - subsection titles for the 'General settings' section of the store's back end, names of specific options and settings, help notes for specific options and settings
  • Text - longer text pieces (notes, comments, instructions, etc.)

The filter allows you to narrow down your search by specifying a group of variables to be searched and entering a sequence of characters to be looked for.

To find one or more language variables:

  1. On the 'Select topic' drop-down box of the language variable filter, select the variable group to be searched (or select All to search all the groups).
    This refreshes the page and displays all the variables of the selected group in the 'Edit language entries' area below the filter.
  2. In the 'Apply filter' field, enter a phrase, word or partial word to be looked for (Please note that X-Cart searches both variable names and variable values).
  3. Click the Go button.

This refreshes the page again displaying only those variables that belong to the specified variable group and match the search string.

Editing language variables

To edit the value of a language variable:

  1. Select the language to be edited.
  2. Make sure the options of the language being edited are adjusted properly:
    • If you have not yet done so, set the charset to be used for displaying the language by entering the respective charset code in the 'Charset' field of the 'Language options' section of the 'Edit language' page. By default, the value of the 'Charset' field is iso-8859-1, which is appropriate for English and some other European languages. If you need a different charset, replace the content of the 'Charset' field with the required code. The following resources provide information on charsets:
    • Click the Apply button
  3. Make sure the current interface language matches the language being edited (This is critical because when editing variable values in a certain language, you want to enter the characters in the charset of that language).
  4. Find the language variable to be edited.
  5. Edit the value of the language variable.
  6. Click the Update all button.

Adding language variables

To add a new variable:

  1. Select the language to be edited.
  2. Make sure the options of the language being edited are properly set.
  3. Make sure the current interface language matches the language being edited (This is critical because when editing variable values in a certain language, you want to enter the characters in the charset of that language).
  4. Scroll down to the 'Add new entry' section of the 'Edit language entries' area.
  5. Enter details for the new variable:
    • 'Select topic' - Name of the variable group the new variable belongs to.
    • 'Variable' - Name of the new variable (in English).
    • 'Value' - Text piece to be stored in the variable (in the language being edited).
  6. Click the Add button.

Deleting language variables

To delete one or more language variables:

  1. Select the language to be edited and find the language variables to be removed.
  2. Select the check boxes next to their names in the 'Edit language entries' area.
  3. Click the Delete selected button.

Using Webmaster Mode

The Webmaster mode is an operating mode that facilitates the WYSIWYG editing of language variable values directly on the pages where they are displayed. In this mode, clicking on any text element in your store opens an editor, where you can edit the text of the selected element. Once the changes made to the element are saved, the result of the editing becomes available to all users viewing the respective page of your store.

The following browsers support the Webmaster mode:

  • IE 6.0.3790
  • IE 7.0.6000.16386
  • Firefox 2.0.0.5
Note: If you are using Firefox, and the browser status line (at the bottom) with the Webmaster mode enabled does not change when you move the mouse over the site, make sure the option "Change status bar text" (Browser settings -> Content -> Advanced (Advanced JavaScript Settings) is enabled in your browser.
  • Opera 9.22
  • Mozilla 1.7.13
  • Safari 2.0.4
  • Safari 3.0.4
  • Netscape Navigator 9.0.05 (Limited support: hyperlinks cannot be edited by pressing the "e" button)
  • Konquerror 3.5.7
  • Ephiphany 2.18.3

Other browsers may support the Webmaster mode, but we cannot guarantee it, as no thorough testing has been carried out.

Important: The Webmaster mode cannot be used in stores where a compilation of templates was done (For details on template compilation, see the chapter Compiling templates).

Starting Webmaster mode

To start the Webmaster mode:

  1. Go to the 'Webmaster mode' section of your store's Admin area by selecting the 'Webmaster mode' item on the 'Tools' menu. This opens a page with instructions on using the Webmaster mode. At the bottom of that page, there is a button labeled Start Webmaster mode.

    Webmaster mode.gif

  2. Click the Start Webmaster mode button to enable the Webmaster mode. You will know it is enabled when all the textual elements of the user interface in your current user session become green:

    Webmaster mode1.gif
It's OK! The green color of the text indicates that the Webmaster mode is on.

Webmaster mode also opens a pop-up window with the tree of templates used on the current page.

Webmaster mode debug.gif

The window is X-Cart's Debugging console, which you can use to quickly edit any templates used on the current page. (For detailed information on using the Debugging console, read X-Cart:Editing Skin Files#Using Debugging Console).

Note: Webmaster mode affects only one user session, the one where it is enabled. While you are working in Webmaster mode, other users working with the store see the store's pages as perfectly normal (no green text or Debugging console).

Editing text in Webmaster mode

To edit text in the Webmaster mode:

  1. Once the Webmaster mode is enabled, go to the page with the text to be edited.
    • If the desired page is in the Admin area, simply browse to that page (the way you would do that in the normal mode).
    • If the desired page is in the Customer area, click on the 'Open customer area in a new window' link at the top of the page with the instructions on using the Webmaster mode (this opens the Customer area in a new browser window or tab in the same session), then browse to the desired page. Please note that you will need to log in using your customer account to edit the pages that are accessible to authorized customers only (like wish list, order history, etc).
    • (In X-Cart PRO): If the desired page is in the Provider area, open the Admin area in a new browser window or tab in the same session, then switch to that new window or tab, edit the URL in the browser address bar so that it points to the Provider area and press the Enter key. When the Provider area authentication page appears, log in as provider and browse to the desired page.
  2. Make sure that the page to be edited is displayed in the language you are going to edit. For example, if the page is currently displayed in English, and you wish to leave all the English text on the page "as is" and just edit the Russian version of the page, switch the Language selector at the bottom right-hand corner of the page to Russian before you proceed.
  3. Place the mouse pointer over the text element to be edited.
    Tip: Notice that as you place the mouse pointer over a non-clickable text element, the browser status bar (in browsers that have it) displays the name of the language variable that stores the respective text piece and the name of the template file that references this language variable; similarly, when you place the mouse pointer over a hyperlink, the browser status bar displays the destination of the hyperlink.
  4. Do one of the following:
    • (If the text element is a non-clickable piece of text) Click the text element.
    • (If the text element is a hyperlink): Press the "e" key on your keyboard.
      Important: Make sure the keyboard layout on your computer is set to English when you are pressing the e key; otherwise it will simply not work.
      This opens a small pop-up window titled 'Edit label', where you can edit the value of the language variable:

      Edit label popup1.gif

Edit the value of the language variable displayed in the 'Edit label' pop-up window and save the changes. For information on the 'Edit label' pop-up window, see the following chapter.

The 'Edit label' pop-up

The 'Edit label' pop-up window appears after you select a text element to be edited in the Webmaster mode. It displays the name of the language variable that stores the selected text element and provides a text area, where you can edit the value of that variable.

Note that with the HTML Editor module enabled in your store you can use a WYSIWYG editor for editing language variable values that are longer than 40 characters or contain an EOL (end of line) symbol. The two links: 'Default editor' and 'WYSIWYG editor' above the text area with the variable value indicate that the WYSIWYG editor is available:

Edit label popup2.gif

By clicking on the 'WYSIWYG editor' link, you can switch to editing the variable value in the WYSIWYG editor. If you do not like the WYSIWYG editor, you can switch back to the Default editor at any moment by clicking on the 'Default editor' link.

For short and simple language variable values (shorter than 40 characters or not containing EOL symbols) only the Default editor is provided (In this case, you do not see any links above the text area).

Below the text area with the language variable value, there are three buttons: Preview, Save and Cancel.

The Preview button allows you to preview the page after making changes to the language variable value before you actually save the changes.

The Save button saves the changes you make to the language variable value.

The Cancel button allows you to discard any changes made to the language variable value before they are saved.

Exiting Webmaster mode

To quit the Webmaster mode:

  1. Go to the 'Webmaster mode' section of your store's Admin area by selecting the 'Webmaster mode' item on the 'Tools' menu.
  2. Click the Close Webmaster mode button. The Webmaster mode will be disabled. All the textual elements in the store should return to their normal colors.
Note: Quitting the Webmaster mode does not automatically close the pop-up windows that were opened while you were using the Webmaster mode (the windows that might be open are the Edit label window and the Debugging console window). You need to close any such windows manually. Before re-enabling the Webmaster mode, after it was closed, make sure you have closed any pop-up windows that were left open by the previous Webmaster mode session.