如果YooTheme ZOO如何自定义布局？

Question

我找不到描述如何自定义Joomla的ZOO模块布局的任何信息。

因此，我需要以下布局：

我已经 Zoo Item模块，主题的布局是 UIkit ，我添加了两个自定义字段： price 和状态。

因此，我需要在这些元素上添加自定义类名称，以便将 price 标签放置在右上角，并在 name 字段中添加 state 在图片底部。

我搜索过的唯一一件事是为该模块创建一个自定义的tmpl。 我有以下代码：

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

它仅将数据划分为列

但是，结果是我正在寻找这样的东西：

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

工作示例将不胜感激！

Answer 1

我对https://www.baycoproducts.com/product/duty-personal-size上的ZOO目录做了类似的操作

我修改了teaser.php以进行一些更改，并专门调用了一些值。

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

对于网格格式，我使用默认的ZOO布局，然后使用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;}

对于功能区，有一个复选框组可根据所选属性设置功能区。

/* 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

对于最快的解决方案，我发现JBZoo组件从一开始就具有更好的标记并具有一些CSS类，以便更好地自定义布局