salix/modules/order/front/catalog/index.html

<vn-crud-model
    vn-id="model"
    url="/order/api/Orders/CatalogFilter"
    filter="$ctrl.filter"
    limit="50"
    data="items"
    on-data-change="$ctrl.onDataChange()">
</vn-crud-model>
<div class="main-with-right-menu">
    <vn-card compact>
        <vn-horizontal class="catalog-header" pad-medium-h>
            <vn-one>
                <div ng-if="model.moreRows">
                    <span translate>More than</span> {{model.limit}} <span translate>results</span>
                </div>
            </vn-one>
            <vn-auto>
                <vn-autocomplete vn-id="field" vn-one
                    data="$ctrl.fieldList"
                    initial-data="$ctrl.field"
                    field="$ctrl.field"
                    translate-fields="['name']"
                    order="name"
                    show-field="name"
                    value-field="field"
                    label="Order by">
                </vn-autocomplete>
                <vn-autocomplete vn-one
                    data="$ctrl.wayList"
                    initial-data="$ctrl.way"
                    field="$ctrl.way"
                    translate-fields="['name']"
                    show-field="name"
                    value-field="way"
                    label="Order">
                </vn-autocomplete>
            </vn-auto>
        </vn-horizontal>
    </vn-card>
    <vn-card
        ng-if="!model.data || model.data.length == 0"
        style="text-align: center"
        margin-medium-top
        pad-medium>
        <span translate>No results</span>
    </vn-card>
    <vn-horizontal class="catalog-list">
        <section class="product" ng-repeat="item in items">
        <vn-card>
            <div class="image">
                <img
                    ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}" 
                    zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
                    on-error-src/>
            </div>
            <div class="description">
                <h3>
                    {{::item.name}}
                </h3>
                <h4 class="ellipsize">
                    <span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
                </h4>
                <div class="tags">
                    <vn-label-value
                        ng-if="::item.value5"
                        label="{{::item.tag5}}"
                        value="{{::item.value5}}">
                    </vn-label-value>
                    <vn-label-value
                        ng-if="::item.value6"
                        label="{{::item.tag6}}"
                        value="{{::item.value6}}">
                    </vn-label-value>
                    <vn-label-value
                        ng-if="::item.value7"
                        label="{{::item.tag7}}"
                        value="{{::item.value7}}">
                    </vn-label-value>
                </div>
                <div class="footer">
                    <div class="price">
                        <span>{{::item.available}}</span> 
                        <span translate>from</span>
                        <span>{{::item.price | currency:'EUR':2}}</span>
                    </div>
                    <vn-icon-button
                        icon="add_circle"
                        ng-click="$ctrl.preview($event, item)"
                        vn-tooltip="Add">
                    </vn-icon-button>
                </div>
            </div>
        </vn-card>
        </section>
    </vn-horizontal>
    <vn-pagination margin-small-v model="model"></vn-pagination>
</div>
<vn-side-menu side="right">
    <vn-catalog-filter order="$ctrl.order"></vn-catalog-filter>
</vn-side-menu>
<vn-order-prices-popover
    vn-id="pricesPopover"
    order="$ctrl.order">
</vn-order-prices-popover>