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

<vn-data-viewer
    model="$ctrl.model">
    <vn-horizontal class="catalog-list">
    <section ng-repeat="item in $ctrl.model.data" class="product">
        <vn-card>
            <div class="image">
                <div ng-if="::item.hex != null" class="item-color-background">
                    <div class="item-color" ng-style="{'background-color': '#' + item.hex}"></div>
                </div>
                <img
                    ng-src="{{::$root.imagePath('catalog', '200x200', item.id)}}" 
                    zoom-image="{{::$root.imagePath('catalog', '1600x900', item.id)}}"
                    on-error-src/>
            </div>
            <div class="description">
                <h3 class="link" 
                ng-click="itemDescriptor.show($event, item.id)">
                    {{::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>
                <vn-rating ng-if="::item.stars" 
                    ng-model="::item.stars">
                </vn-rating>
                <div class="footer">
                    <div class="price">
                        <vn-one>
                            <span>{{::item.available}}</span> 
                            <span translate>to</span>
                            <span>{{::item.price | currency:'EUR':2}}</span>
                        </vn-one>
                        <vn-icon-button vn-none
                            icon="add_circle"
                            ng-click="pricesPopover.show($event, item)"
                            vn-tooltip="Add">
                        </vn-icon-button>
                    </div>
                    <div class="priceKg" ng-show="::item.priceKg">
                        <span>Precio por kilo {{::item.priceKg | currency: 'EUR'}}</span> 
                    </div>
                </div>
            </div>
        </vn-card>
    </section>
    </vn-horizontal>
</vn-data-viewer>
<vn-order-prices-popover
    vn-id="prices-popover"
    order="$ctrl.order">
</vn-order-prices-popover>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>