YooTheme ZOO 如何自定义布局？
How to customize the layout if YooTheme ZOO?
我找不到任何描述如何自定义 Joomla 的 ZOO 模块布局的信息。
因此我需要这样的布局：
我有 Zoo Item 模块，主题的布局是 UIkit，我添加了两个自定义字段：价格和状态.
因此，我需要为这些元素添加一个自定义 class 名称，以便将 price 标签定位在右上角和 图片底部带有 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>
工作示例将不胜感激！
为了最快的解决方案，我发现 JBZoo 组件在包装盒中有更好的标记，并且有一些 css 类 以便更好地自定义布局
我在 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;}
我找不到任何描述如何自定义 Joomla 的 ZOO 模块布局的信息。
因此我需要这样的布局：
我有 Zoo Item 模块，主题的布局是 UIkit，我添加了两个自定义字段：价格和状态.
因此，我需要为这些元素添加一个自定义 class 名称，以便将 price 标签定位在右上角和 图片底部带有 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>
工作示例将不胜感激！
为了最快的解决方案，我发现 JBZoo 组件在包装盒中有更好的标记，并且有一些 css 类 以便更好地自定义布局
我在 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;}