scritik/prestui

UI library for PrestaShop modules

PrestUI: UI library for PrestaShop modules

PrestUI is an UI library to help you develop interfaces for your PrestaShop modules. It allows you to write one concise html, compatible with all recent versions of PrestaShop (1.5, 1.6 and 1.7). PrestUI will automatically adapt depending on which PrestaShop version the module is used on.

Eg, you can write:

<ps-switch name="switch" label="Switch" yes="Yes" no="No" active="true"></ps-switch>

And you will automatically get something like this, a valid HTML for PrestaShop (1.6+ here):

<div class="form-group">
    <label class="control-label col-lg-3 "><span>Switch</span></label>
    <div class="col-lg-9">
        <span class="switch prestashop-switch fixed-width-lg">
            <input type="radio" value="1" name="switch" id="switch_on" checked="checked">
            <label for="switch_on">Yes</label>
            <input type="radio" value="0" name="switch" id="switch_off">
            <label for="switch_off">No</label>
            <a class="slide-button btn"></a>
        </span>
    </div>
</div>

PrestUI is based on RiotJS 3, a really light React-like user interface library. You can find more information about RiotJS on GitHub and a full documentation on the official website.

Installation / Usage

To use PrestUI, you need to include the files into your module. Download PrestUI and move the folder in /views/templates/admin/

You also need to include RiotJS+compiler since all the components are based on it. You can download a copy and include it into the module, or you can use a CDN.

You can now include PrestUI and RiotJS like this:

$this->context->controller->addJS('path/to/riot+compiler.js')

$html = $this->display(__FILE__, 'path/to/your/file.tpl')

return $html.$this->display(__FILE__, 'views/templates/admin/prestui/ps-tags.tpl');

If you only need a few tags, you can assign a variable with only the groups you need, before rendering ps-tags:

$this->smarty->assign('tags', array('tabs', 'panel'));

Available tags

All available tags and their attributes are listed on the wiki

Contribution

Found a bug or have an idea? Use GitHub's tickets system. If you want to help and add a feature or fix a bug, you need to make a pull request:

• Create a fork of this repo
• Create a new branch like "feature-xxxxxx"
• Commit your changes on the dev branch
• Create your pull request on GitHub

License

PrestUI is licensed under the MIT licence

prestui's Issues

Didn't works

Sorry, we have followed the instructions without success... Is still valid the documentation and the files?

Thanks

Fails when using ps-table tag

Creating a ps-table using your example array, all other tags I've used so far have worked perfectly, I just can't this ps-table tag to load, am I missing something?

Thanks

'data' => Tools::jsonEncode(array(
                    'columns' => array(
                        array('content' => 'ID', 'key' => 'id', 'center' => true),
                        array('content' => 'Email', 'key' => 'email'),
                        array('content' => 'Name', 'key' => 'name'),
                        array('content' => 'Active', 'key' => 'active', 'bool' => true, 'center' => true, 'fa' => true)
                    ),
                    'rows' => array(
                        array('id' => 1, 'email' => '[email protected]', 'name' => 'Bob'),
                        array('id' => 2, 'email' => '[email protected]', 'name' => 'John')
                    ),
                    'rows_actions' => array(
                        array('title' => 'Edit', 'action' => 'edit_employee', 'icon' => 'pencil', 'img' => '../img/admin/edit.gif', 'fa' => 'pencil'),
                        array('title' => 'Delete', 'action' => 'delete_employee', 'icon' => 'trash', 'img' => '../img/admin/delete.gif', 'fa' => 'trash')
                    ),
                    'top_actions' => array(
                        array('title' => 'Add employee', 'action' => 'add_employee', 'icon' => 'add', 'img' => 'themes/default/img/process-icon-new.png', 'fa' => 'plus'),
                    ),
                    'url_params' => array('configure' => 'A Name'),
                    'identifier' => 'id'
                ))

Resulting template code is:
<ps-table header="Models" icon="icon-users" content="{"columns":[{"content":"ID","key":"id","center":true},{"content":"Email","key":"email"},{"content":"Name","key":"name"},{"content":"Active","key":"active","bool":true,"center":true,"fa":true}],"rows":[{"id":1,"email":"[email protected]","name":"Bob"},{"id":2,"email":"[email protected]","name":"John"}],"rows_actions":[{"title":"Edit","action":"edit_employee","icon":"pencil","img":"..\/img\/admin\/edit.gif","fa":"pencil"},{"title":"Delete","action":"delete_employee","icon":"trash","img":"..\/img\/admin\/delete.gif","fa":"trash"}],"top_actions":[{"title":"Add employee","action":"add_employee","icon":"add","img":"themes\/default\/img\/process-icon-new.png","fa":"plus"}],"url_params":{"configure":"A Name"},"identifier":"id"}" no-items-text="No items found"></ps-table>

which seems ok, but I get an error:
VM10986:1 Uncaught SyntaxError: Unexpected token c in JSON at position 0 at JSON.parse (<anonymous>) at re.<anonymous> (<anonymous>:6:17) at re.<anonymous> (riot+compiler.min.js:2) at re.M (riot+compiler.min.js:2) at O (riot+compiler.min.js:2) at re.k (riot+compiler.min.js:2) at re.<anonymous> (riot+compiler.min.js:2) at re.<anonymous> (riot+compiler.min.js:2) at re.M (riot+compiler.min.js:2) at O (riot+compiler.min.js:2)

S missing

S is missing for "prestui" in
return $html.$this->display(FILE, 'views/templates/admin/pretui/ps-tags.tpl');

Create tables

We are implementing the standard UX using the PrestUI library. We are showing a table using the example of github (https://github.com/Scritik/prestui/wiki/Tables) but the table does not show the rows; it only shows the header. Debbugging the code for displaying the table (ps-table.tpl) we found that the error should be on the line 66:

    
        
            { row[value] }
        
        
            

                

                    
                         { this.primary_action.title }
                    
                    
                         
                    
                    

                        

                        
                                 { elem.title }
                            
                        
                    
                
            
        
    

Specifically in the loop columns nested within the loop of the rows. The variable this.columns_keys is apparently being ignored because is nested within a loop. If we change the variable this.columns_keys and we put the variable row in its place, declared in the upper loop, the rows of the table are shown.

This also happens with the action buttons for each row. The condition of the line 69 (if={ this.primary_action }) is always false because that variable seems not to exist in that loop.

We would appreciate a more extensive documentation and examples of PrestUI to display tables.

Wiki ps-switch incorrect

<ps-switch on-change="logSwitch"></ps-switch>

should be

<ps-switch on-switch="logSwitch">

Prefix is needed for attribute

If we use id, name or class for target element the orginal element ( for exemple will be targeted.

Like this

$('.myinput') will target generated input AND the orginal element.

It's worse with id (see my request) because jquery stop on first id founded.

Margin is missing when two right button is added

If i add save and saveAndStay button no margin as added between those button.

<ps-panel-footer-submit title="{l s='Save and stay'}" icon="save" direction="right" name="submitAddproductAndStay"></ps-panel-footer-submit>
<ps-panel-footer-submit title="{l s='Save'}" icon="save" direction="right" name="submitAddproduct"></ps-panel-footer-submit>

json parse error with ps-table

Hi,

I try to use ps-table component to display a list, I try the example found on the wiki but I have an json parse error. Someone has an example who is working ?

Thanks

switch or select error elements inside tabs

i'm trying this code

<ps-tab label="test" id="tab_base" icon="icon-AdminParentModules" img="../img/t/AdminBackup.gif" fa="cogs"> <ps-switch name="switch" label="Switch" yes="Yes" no="No" active="false"></ps-switch> <ps-select label="Select input" name="ps_select" chosen='true'> <option value="test">test</option> <option value="test2">test2</option> </ps-select> </ps-tab>

and don't render well

• switch: never show correct status
• select: dont show options

there is some thing wrong in my code?

thanks

riot 3.1.x compatible?

hi,
i'm install prestui in my proyect and i set riot+compiler.min load but i receive this error:
Uncaught TypeError: Cannot read property 'opts' of undefined

prestui is compatible with recent versions of riot?

if not, what version i must use?

thanks