In Venddor IO, a microformat isn't just a CSS style; it's a strategic method for specifying JavaScript actions based on certain events tied to an HTML element. These microformats are essential for enhancing web page interactivity and user experience.
Microformats in Venddor IO adhere to a naming pattern: cm-new-microformat-name. The prefix cm- symbolizes it as a Venddor IO specific microformat. Interestingly, unlike traditional CSS styles, the details of a microformat are found in JavaScript files rather than CSS files. To locate the JavaScript code responsible for a specific microformat, one should search for the substring .hasClass('cm-microformat-name') within the /js/ directory.
Forms are vital for user inputs, and ensuring that these inputs are valid is crucial for smooth operations. Venddor IO makes this process streamlined with field validation microformats.
For instance:
<label class="cm-email cm-required" for="elm_id">Field name:</label>
<input type="text" name="test" value="Y" id="elm_id" />The label element, associated with the element being validated using the for parameter, is pivotal for the field validator. The microformat for field validation is specified in the label element's class attribute, and these classes are combinable.
The label's descriptor is crucial as it gets used in error messages for incorrect input. Such messages can contain placeholders, including:
[field] - Replaces the label's description.[field1], [field2] - Represents the main and additional label descriptors.[extra] - Represents additional data for the message.Some essential field validation microformats include:
cm-required: Indicates the field must be completed. If linked to a checkbox, it implies the checkbox must be checked.cm-email: Validates that the input is a legitimate email address.cm-phone: Ensures the input matches a valid phone number format.cm-zipcode: Validates the input against a specific zip code pattern. Since each country has its unique zip code pattern, this pattern must be predefined in Venddor IO's country table.In Venddor IO, certain JavaScript functions are crafted to define and validate specific patterns, like zip codes:
<script type="text/javascript">
Tygh.$.ceFormValidator('setZipcode', {
US: {
regexp: /^(\d{5})(-\d{4})?$/,
format: '01342 (01342-5678)'
},
...
});
</script>Several microformats are at developers' disposal to ensure data integrity and user-friendly input validations:
cm-value-integer: Validates the entered value as an integer.cm-value-decimal: Validates the value as a decimal number.cm-integer: Requires the value to be an integer.cm-password: Ensures that paired elements have matching values.cm-multiple: Ensures at least one select element is chosen.cm-all: Automatically selects all options of the select element before form submission.Additionally, custom validations can be achieved using the cm-regexp microformat:
<script type="text/javascript">
Tygh.$.ceFormValidator('setRegexp', {
'elm_id': {
regexp: "^[A-Za-z]+$",
message: "Please, use only alphabetical signs"
}
};
</script>Venddor IO offers enhanced interactivity with forms using specific microformats:
cm-ajax: Submits the form via AJAX. This requires a hidden result_ids element.cm-ajax-full-render: When used with cm-ajax, it refreshes the entire page.cm-no-ajax: If assigned to the form's submit button, the form submits normally, bypassing AJAX, even if cm-ajax is also present.Events can also be defined for more granular control before and after form submission:
$.ceEvent('on', 'ce.formpre_add_to_cart_form', function(form, elm) {
// Custom code
});cm-check-changes: Alerts the user of unsaved changes in the form before submitting.cm-disable-empty: Only submits fields with data, omitting empty ones.cm-failed-field: Highlights any field with incorrect or missing data post-submission.cm-no-hide-input: Ensures even empty fields are submitted, overriding cm-disable-empty.cm-trim: Removes any leading or trailing spaces from the input during validation.cm-reset-link: Resets form values to their default.cm-select-text: Highlights content upon click for easier copying.cm-reload-form: Upon any changes in an element bearing this microformat, the parent form gets refreshed with a GET request.cm-ajax-content-input: Beneficial for autocompletion. As a user types in a picker, a delayed AJAX request fetches matching results, filling the designated container, as per the rev attribute.cm-ajax-content-more: It helps load additional content when an element is made visible, useful for extensive dropdown lists.cm-cancel: Reset all picker fields to default on click.cm-clone: Allows multiple additions to a picker without closing.cm-dialog-opener/closer: These microformats open and close dialog boxes. The container for the dialog is specified via the rev attribute.cm-dialog-auto-open: Automates the opening of a dialog box upon visiting a page, often utilized in the admin panel's welcome screen.cm-js-item: Specifically used when adding an item from a picker to a form. It attaches to the container holding the new addition.cm-submit: Assigning this to an element (other than submit buttons) submits its parent form upon a click.
Implementation: Ensure the element has the cm-submit microformat, provide the target dispatch in data-ca-dispatch, and optionally, if the element isn't within the form, specify the target form in data-ca-target-form.
cm-new-window: Activates the form to open in a new window upon submission.cm-parent-window: Directs the form submission to its parent window.cm-no-submit: Prevents form submission when the assigned element is clicked.cm-skip-validation: Submits the form without validating the entries upon clicking the element with this class.For complex interactivities:
cm-combination: It controls the visibility of containers, ideal for collapsible sections.cm-uncheck: Works with cm-combination to toggle checkbox states.cm-switch-availability: Switches the state of input elements.cm-select-with-input-key: Couples a selector with a text area, disabling the area when selector value changes.In Venddor IO, the cm-combinations microformat facilitates the switching of various combos or sets, providing functionalities akin to expanding/collapsing sections or trees. The cm-js and cm-j-tabs microformats manage tabs, streamlining navigation within different sections of a form or page. With cm-save-state, users can preserve the state of specific containers, enabling a more personalized user experience.
Cloning nodes becomes a cinch with cm-first-sibling and cm-image-field. They're instrumental for operations like duplicating product options, each having its unique images.
The cm-hidden-wrapper microformat ensures elements are displayed only when they hold content. This helps in avoiding blank spaces or null elements on a page.
Venddor IO taps into AJAX for real-time content updates. Microformats like cm-ajax, cm-comet, cm-ajax-cache, cm-ajax-force, and others manage AJAX requests, ensuring a fluid, live content experience without the need for page reloads.
With cm-reload, product content can dynamically update based on option changes, like price adjustments on variant selection.