Как настроить макет, если YooTheme ZOO? - PullRequest
Новая
       25

Как настроить макет, если YooTheme ZOO?

0 голосов
/ 08 июня 2019

Я не могу найти информацию, описывающую, как настроить макет модуля ZOOM Joomla.

В результате мне нужен этот макет: enter image description here

У меня есть модуль Zoo Item , макет темы - UIkit , я добавил два пользовательских поля: цена и состояние .

Итак, мне нужно добавить пользовательское имя класса для этих элементов, чтобы расположить тег цена в верхнем правом углу и поле name с укажите внизу изображения.

Единственное, что я гуглил, - это создание пользовательского 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>

Рабочий примерБуду очень признателен!

Ответы [ 2 ]

1 голос
/ 11 июня 2019

Я сделал нечто похожее с каталогом ZOO на https://www.baycoproducts.com/product/duty-personal-size

Я изменил 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;}
0 голосов
/ 11 июня 2019

Для самого быстрого решения я нашел компонент JBZoo , который из коробки имеет лучшую разметку и имеет некоторые классы CSS для более удобной настройки макета

...