Skip to content
UI library for PrestaShop modules
Smarty PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Add gitignore Mar 19, 2017
LICENSE
README.md Update doc Apr 12, 2017
index.php Add index.php Mar 19, 2017
ps-alert.tpl Update licences Mar 19, 2017
ps-form.tpl
ps-panel.tpl
ps-table.tpl Update licences Mar 19, 2017
ps-tabs.tpl
ps-tags.tpl Update licences Mar 19, 2017

README.md

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, 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

You can’t perform that action at this time.