How to customize the layout if YooTheme ZOO?

Question

I can't find any information describing how to customize the layout of Joomla's ZOO module.

As a result I need this layout:

I've Zoo Item module, the theme's layout is UIkit, I've added two custom fields: the price and state.

So, I need to add a custom class name to theses elements, in order to position the price tag at top right corner and name field with state at bottom of image.

The only one thing which I've googled was to create a custom tmpl for that module. I have this code:

<?php if (!empty($items)) : ?>

<div class="uk-grid car_list_columns a_list_cars">
    <?php $i = 0; foreach ($items as $item) : ?>
    <?php echo $renderer->render('item.'.$layout, compact('item', 'params'), 'class="uk-width-1-3"'); ?>
    <?php $i++; endforeach; ?>
</div>

It only devides data into columns

But as a result I'm looking into something like this:

<div class="a_list_cars">
        <div class="price">£7,995</div> 
        <img src="xxx.jpg" class="">        
        <h3 class="price_desc"><span class="state">new</span> Description</h3>  
</div>

Working example will be very appreciated!

Answer 1

I did something similar with a ZOO catalog on https://www.baycoproducts.com/product/duty-personal-size

I modified the teaser.php to make some changes and specifically call some values.

$url = $this->app->route->item($item);
$lid = '5c2aec52-222d-4444-a222-22a22c2222ca';
$lumens = $item->getElement($lid)->getElementData()->get('value'); 	

For the grid format, I am using the default ZOO layout and then overrode the layout with CSS FlexBox.

/* NEW LAYOUT */
#yoo-zoo.product-default .items h1, #yoo-zoo .items h1.title, #yoo-zoo .items h2, #yoo-zoo .items h2.pos-title, #yoo-zoo .items h3, #yoo-zoo .items h4, #yoo-zoo .items h5, #yoo-zoo .items h6 {font-family: "Exo 2", sans-serif;}
#yoo-zoo.product-default div.box-1 div.row {padding: 0rem;display: flex;margin-bottom: 1rem;flex-flow: row;}
#yoo-zoo.product-default .items div.teaser-item {/*padding: 1rem;border: 1px solid #ccc;margin: 0.5rem;text-align: center;*/}
#yoo-zoo.product-default .items div.product-item {padding: 1rem;border: 1px solid #ccc;margin: 0.5rem;text-align: center;}
#yoo-zoo.product-default div.box-1 div.row {border:none !important;}
#yoo-zoo.product-default .items div.teaser-item .pos-sku, .pos-sku a {color: #555 !important;font-size: 1rem !important;margin: 15px auto 7px auto !important;    font-weight: 100 !important;}
#yoo-zoo.product-default .items div.media-center {border:none !important;}
 

#yoo-zoo.product-default div.box-t1,#yoo-zoo div.box-1,#yoo-zoo div.box-b1, #yoo-zoo div.box-t2, #yoo-zoo div.box-t3, #yoo-zoo div.box-b2, #yoo-zoo div.box-b3, #yoo-zoo div.box-1 div.row {background:none;border:none;}

#yoo-zoo.product-default .items h2.pos-title {min-height: 3.2rem;}
#yoo-zoo.product-default p.pos-links a {color:#0093D7;text-transform:capitalize;}
#yoo-zoo.product-default .pos-sku, .pos-sku a {color:#555;font-size: 1rem;margin: 15px auto 7px auto !important;}
#yoo-zoo.product-default .items h2.pos-title a {line-height: 120%;margin-bottom: 2.2rem;}


#yoo-zoo.product-default .teaser-item {padding: 0rem !important;}
#yoo-zoo.product-default .teaser-item .btn-video { color: #0093D7;font-size:0.8rem;}
#yoo-zoo.product-default .teaser-item .fa-stack {color: #0093d7;}
#yoo-zoo.product-default .teaser-item .bottom-links {margin: 0rem auto;display: flex;}
#yoo-zoo.product-default .teaser-item .pos-popup {flex: 84%;text-align: right;padding-right: 0rem;}
#yoo-zoo.product-default .teaser-item .pos-links {text-align:left;padding: 0.25rem 0rem 0rem;display: inline-grid;flex: 100%;}
#yoo-zoo.product-default .teaser-item .pos-links .element-itemlink {background:none !important;margin: -0.25rem auto;text-align: center;}
#yoo-zoo.product-default .teaser-item .pos-links .element-itemlink a {color:#333 !important;    text-transform: capitalize;font-weight: 100;font-size: 0.8rem !important;text-align: left;background-color: #e4e4e4 !important;padding: 0.25rem 0.75rem;}
#yoo-zoo.product-default .teaser-item .pos-compare-top {text-align:right;}
#yoo-zoo.product-default .teaser-item .zl-bootstrap .btn {background: #eee !important;box-shadow: none;border: none;padding: 0.25rem .5rem;margin-right: 0rem;}

For the ribbons, there is a checkbox group that sets the ribbons based upon the attributes selected.

/* RIBBONS */
#yoo-zoo.product-default .teaser-item .pos-flags {float:left;position: relative;}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon {position: absolute;left: -1.55rem; top: -0.45rem;z-index: 1;/*overflow: hidden;*//*width: 100px; height: 100px;*/text-align: center;}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon span {font-size: 10px;font-family:$font;font-weight: bold;color: #FFF;text-transform: uppercase;text-align: center;line-height: 20px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);width: 8.5rem;display: block;background: #79A70A;background: linear-gradient(#9BC90D 0%, #79A70A 100%);box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);position: absolute;top: 19px; left: -21px;}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon span em {font-style:normal !important;}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon:nth-of-type(2) {}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon:nth-of-type(2) span {font-size: 7px;max-height: 15px;transform: rotate(-45deg) scale(1.4);margin-top: 1.3rem;left: -4px;/*padding-bottom: 1.2rem;*/}
     #yoo-zoo.product-default .teaser-item .pos-flags .ribbon:nth-of-type(2) span em {}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon:nth-of-type(3) span {font-size: 6.5px;max-height: 15px;transform: rotate(-45deg) scale(1.5);    margin-top: 5rem;left: 0px;padding: 0rem 1.1rem 0 1rem;top: -20px;}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon:nth-of-type(3) span em {}

#yoo-zoo.product-default .teaser-item .pos-flags .ribbon span::before {content: "";position: absolute; left: 0px; top: 100%;z-index: -1;border-left: 3px solid #666;border-right: 3px solid transparent;border-bottom: 3px solid transparent;border-top: 3px solid #666;}
#yoo-zoo.product-default .teaser-item .pos-flags .ribbon span::after {content: "";position: absolute; right: 0px; top: 100%;z-index: -1;border-left: 3px solid transparent;border-right: 3px solid #666;border-bottom: 3px solid transparent;border-top: 3px solid #666;}

#yoo-zoo.product-default div.pos-lumens {margin:1rem auto -0.5rem auto;color:#888;font-family: "Raleway",sans-serif;font-weight:500;font-size:0.8rem;display: inline-block;width: 100%;height: 26px;}
#yoo-zoo.product-default img.lumen-icon {width:35px;height:auto;filter:opacity(0.6);padding-bottom:6px;}
#yoo-zoo.product-default div.pos-lumens h5, div.pos-lumens .lnum {}
#yoo-zoo.product-default div.pos-lumens h5 {}
#yoo-zoo.product-default div.pos-lumens .lnum {font-weight: 900;font-size: 1rem;font-family: "Open Sans",sans-serif;}

Answer 2

For the quickest solution, I've found the JBZoo component which from the box have better markup and have some css classes in order to customize the layout much better