You are browsing documentation for version 5.0 of OroCommerce, supported until January 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Items Manager 


  • Backbone collection for storing list of items

  • itemsManagerEditor - [jQuery-UI widget] for binding html inputs to the item

  • itemsManagerTable - [jQuery-UI widget] for rendering list of items


Define Backbone.Model for an item:

var ItemModel = Backbone.Model.extend({
    defaults: {
        name : null,
        label: null,
        func: null,
        sorting: null

Define Backbone.Collection for the item list:

var ItemCollection = Backbone.Collection.extend({
    model: ItemModel

Define html for itemsManagerEditor:

<div id="editor">
    <input name="name"></input>
    <input name="label"></input>
    <input name="func"></input>
    <input name="sorting"></input>
    <button class="add-button"></button>
    <button class="save-button"></button>
    <button class="cancel-button"></button>

Define html for itemsManagerTable:

    <tbody class="item-container">

Define template file templates/item.html for the item on the list:

<tr data-cid="<%= cid %>">
    <td><%= name %></td>
    <td><%= label %></td>
    <td><%= func %></td>
    <td><%= sorting %></td>
    <td class="action-cell">
        <a href="#" data-collection-action="edit" role="button" title="_.__('Edit')">
            <span class="fa-pencil-square-o hide-text" aria-hidden="true"></span>
        <a href="#" data-collection-action="delete" role="button" title="_.__('Delete')"
            <span class="fa-trash-o hide-text" aria-hidden="true"></span>

Instantiate item collection:

var items = new ItemCollection([
        "name": "a",
        "label": "A",
        // ...
        "name": "b",
        "label": "B",
        // ...
        "name": "c",
        "label": "C",
        // ...

Apply itemsManagerEditor widget on div#editor:

    collection: items

Apply itemsManagerTable widget to tbody.item-container:

import itemTemplate from 'tpl-loader!templates/item.html';

    itemTemplate: itemTemplate,
    collection: items