HTML, CSS, JavaScript, Smarty

HTML Guidelines in Venddor IO

When crafting HTML for Venddor IO modules, it's essential to maintain consistency and clarity. Follow these simple guidelines to ensure clean and organised code:

Tag & Attribute Names: Always use lowercase for all HTML tags and attribute names.

For example: Instead of <DIV CLASS="example">, use <div class="example">.
Attribute Values: Enclose attribute values within double quotes.

For example: <img src="path/to/image.jpg" alt="description">.
Indentation: Use a 4-space indentation to structure your HTML. It aids in visually separating different sections of your code, making it easier to read and understand. Indentation should be applied mainly within the <head> and <body> sections.

While structuring, avoid excessive indentation between related elements like <tr> and <table>.

By adhering to these guidelines when developing for Venddor IO modules, you'll ensure that your code remains neat, easily maintainable, and in line with best practices.

<html>
    <head>
    </head>
    <body>
        <div id="header">Header</div>
            <div id="contents">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
            <h7>Some table data</h7>
            <div id="table_data">
                <table cellpadding="0" border="0">
                <tr>
                    <td>
                        ....
                    </td>
                </tr>
                </table>
            </div>
        </div>
    </body>
</html>

Smarty Guidelines

For an effective and clean Venddor IO module development, adhere to the following guidelines when working with Smarty tags:

Indentation: Always use a 4-space indentation to structure your Smarty tags. It aids in making the code more readable and organised.
HTML Validity: Ensure all templates are HTML5-compliant by beginning them with <!DOCTYPE html>.
Closing Tags: Even if HTML5 allows for certain tags to remain open, always close them to enhance readability.
Self-closing Elements: For self-closing elements like <hr>, <br>, <img>, <meta>, and <input>, utilise the format <tag_name />. Make sure to put a space before the slash.

Correct: <hr width="100%" />

Incorrect: <br>

Nested Tags: Always ensure nested tags are closed in the correct sequence.

Correct: <b><i>text</i></b>

Incorrect: <b><i>text</b></i>

Semantic Nesting: Be mindful of the semantics when nesting tags.

Use of "&": Avoid using the "&" symbol directly within the HTML body. Instead, opt for &.

Tag Placement: Position the closing tag immediately after the tag's content. Refrain from shifting the closing tag to a new line. However, for tags like <table><tr><td>, moving the closing tag to a new line can enhance clarity. Ensure there's no space between the content and the </td> closing tag.
Comments: Use {* *} for comments in Smarty.
Handling Checkboxes:

When dealing with checkboxes, the general practice is to send a capitalised "Y" for selected boxes. For checkboxes that aren't ticked, the value should be "N". Here's how it's done:

<input type="hidden" name="product_data[is_selected]" value="N" />
<input type="checkbox" name="product_data[is_selected]" value="Y" />

Element ID Formation:

Always start an element ID with a letter. The ID can then be followed by digits, letters, and underscores.

Correct: <div id="box_params_1234"></div>

Incorrect: <div id="1212asd[sdsd]"></div>

Styling Elements:

Avoid using inline styles with the style attribute for elements. Always define styles in an external CSS file, organised by classes.

Automated Testing References:

If you need to pinpoint a specific element during automated tests, utilise the data-ct-xxxxxx attribute. Here, "CT'' stands for Venddor IO test, and "xxxxxx" should be a descriptive name for the element.

Avoiding Element References:

It's best practice to avoid using classes and IDs to reference elements. Instead, utilise more semantic or descriptive ways to target them.

JavaScript Guidelines for Venddor IO Modules Development

1. Variable Escaping:

When a Smarty variable is part of an HTML parameter or JavaScript code, always escape its content. This ensures that any single or double quotes within the variable don't cause errors.

<script language="javascript">
var param = '{$smarty.get.param|escape:javascript}';
</script>
...
<input type="text" name="aa" value="{$param|escape:html}">

2. Avoid 'javascript:' Prefix:

Avoid using the javascript: prefix. Instead of using JavaScript code directly within an element, opt for event handlers. For instance, you can utilize microformats.

<a href="index.php" class="cm-submit-form">

3. Function Definition:

Ensure all function definitions end with semicolons (;). This ensures clarity and avoids potential errors in execution.

CSS Guidelines for Venddor IO Modules Development

a. Style Naming:

Style names should be descriptive and clear. Use lowercase letters for style names and use dashes (-) for separating words.

.dialog-box {
    font-size: 12px;
    font-weight: 10px;
}

b. Size Specification:

Generally, sizes should be specified using absolute values (like px). In specific situations, relative values might be more suitable.

c. CSS File Structure:

Organise the CSS file into logical sections and use comments to demarcate them. This enhances readability and maintenance.

Smarty Guidelines for Venddor IO Modules Development

1. Flag Parameters:

When passing flag parameters to templates, use true/false values. Avoid using values like "Y/N".

{include file="common/price.tpl" value=$price hide_sign=true}

2. Avoid str_replace in Templates:

Instead of str_replace, use the replace modifier.

3. Quote Usage:

Only use double quotes in templates, with the sole exception being JavaScript.

4. Curly Brackets:

To display curly brackets, avoid using $ldelim or ldelim unless the opening and closing brackets are on the same line. This enhances clarity.

5. Value Assignment:

Opt for short notations when assigning values to variables. This is more concise and clearer.

{$test = 123}