Помогите сделать так же как на этом сайте. Мучаюсь не один день, хочу что бы описание товара работало как на этом сайте. Вот ссылка: http://bomber.com.ua/fototovary/shtativy-i-golovy/shtativnye-golovki.html
Вот пример как можно это реализовать Демо работы кода + исходник http://codepen.io/shaman_tito/pen/tEnhc Исходник http://www.w3avenue.com/2010/04/02/cross-browser-pure-css3-vertical-accordion/ Структура (пишем данный код в свой шаблон - в случае OPENCART catalog/view/theme/*/template/product/category.tpl) * Не забываем подставлять свои переменные ! Код: <div class="verticalaccordion"> <ul> <li> <h3>Heading 1</h3> <div>Content For Panel 1.</div> </li> <li> <h3>Heading 2</h3> <div>Content For Panel 2.</div> </li> <li> <h3>Heading 3</h3> <div>Content For Panel 3.</div> </li> <li> <h3>Heading 4</h3> <div>Content For Panel 4</div> </li> </ul> </div> Стиль (пишем данный код в свой файл стилей или подключаем новый - в случае OPENCART catalog/view/theme/*/stylesheet/stylesheet.css) Код: .verticalaccordion>ul { margin: 0; padding: 0; list-style:none; width: 500px; } .verticalaccordion>ul>li { display:block; overflow: hidden; margin: 0; padding: 0; list-style:none; height:40px; width: 500px; /* Decorative CSS */ background-color:#f0f0f0; /* CSS3 Transition Effect */ transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; } .verticalaccordion>ul>li>h3 { display:block; margin: 0; padding:10px; height:19px; /* Decorative CSS */ border-top:#f0f0f0 1px solid; font-family: Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; color: #000; background: #cccccc; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #999999, #cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */ } .verticalaccordion>ul>li>div { margin:0; overflow: auto; padding:10px; height:220px; } .verticalaccordion>ul>li:hover { height: 280px; } .verticalaccordion:hover>ul>li:hover>h3 { /* Decorative CSS */ color:#fff; background: #000000; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */ background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */ } .verticalaccordion>ul>li>h3:hover { cursor:pointer; }
Скажите пожалуйста мне больше кажется что это похоже на меню ? А мне хотелось сделать что бы при наводке мышки на товар, появлялось описание товара .
Да это аккордеон при ховере открывается - суть в том что можно его прикрутить или же сделать hover для $description (описания) вечером освобожусь помогу p.s. ссыль на сайт сюда или в личку
В разделе платных шаблонов есть такой шаблон: Шаблон "Еxtended" Ocstore 1.5.5.1.2 так вот в нем на странице списка товаров категорий есть что-то подобное, только в обратную сторону, там изначально стоит описание товара, а при наведении мышки описание убирается и появляется кнопка "купить". Думаю можно выдернуть оттуда данную опцию, но к сожалению не знаю как. Если вы сможете это сделать, очень прошу поделиться потом опытом как это реализовать. Спасибо. А вот ссылка на демо: http://extended.tmpl.mk.ua/index.php?route=product/category&path=20
Смотрю не только я хочу с делать такую функцию. Приятно что я не один такой. В шаблоне что вы придложили немного не так ка хотелось что бы работало. Вот еще пример : http://rozetka.com.ua/photo/c80001/filter/preset=zerkal/
В розетке мне понравилась боковая панель, а центральные блоки из-за разных названий продуктов смотрятся не ровно и не совсем красиво . На моем сайте уже стоит что-то подобное но мне тоже не нравится как расположены продукты из-за длинных и коротких названий. Первый пример который вы привели отвечает всем требованиям потому как там вроде не имеет значения какой длинны название и общая картина сайта не плывет из-за этого.
Вот решение задачи: в файле шаблона категорий (твоя тема OXY) catalog/view/theme/oxy/template/product/category.tpl сразу после (пользуемся ctrl+c и сtrl+v): Код: <div class="cart"> <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /> </div> <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div> <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div> вставить: Код: <div class="product-hover"> <div class="descriptions"><?php echo $product['description']; ?></div> </div> должно получится: Код: <div class="cart"> <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /> </div> <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div> <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div> <div class="product-hover"> <div class="descriptions"><?php echo $product['description']; ?></div> </div> </div> только смотри там дивку не добавь лишнюю потом переходим к стилю (в свой файлиг стиля) catalog/view/theme/oxy/stylesheet/stylesheet.css добавь: Код: .three.mobile-two.columns { background-color: #FFFFFF; margin-bottom: 20px; position: relative; } .three.mobile-two.columns .product-hover { left: 0; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 70%; transition: all 550ms ease 0s; z-index: 9999; padding: 16px; width: 100%; } .three.mobile-two.columns:hover { box-shadow: 0 0 5px #E1E0DD; } .three.mobile-two.columns:hover .product-hover { opacity: 1; cursor: pointer; background-color: #FFFFFF; box-shadow: 0 5px 4px -1px rgba(0,0,0,0.26); top: 100%; width: 100%; } вот что должно получится --- Добавлено, 17 июн 2014 --- Совсем забыл чтоб работала переключения сетки на список и наоборот можешь в стиле прописать display: none; для .list или class product-hover вставить выше и выводить его только в сетке (здесь можно извращаться как угодно)
Господи не ужели оно так может работать. Чего то оно у меня не получается. Добавляю стили слажуеться впечатление что они конфликтуют. описание не появляется и рамка вокруг товара пропадает на половину
Подводим итог - может кому пригодится ! Задача: сделать на странице категорий эффект Hover на чистом CSS для описания товара (при наведении на товар чтоб плавно раскрывалась описание товара) Пример: http://bomber.com.ua/fototovary/fotooborudovanie/ob-ektivy.html http://rozetka.com.ua/photo/c80001/filter/preset=zerkal/ * данный эффект прикручивался к теме OXY - Multi-Purpose Responsive OpenCart Theme (аналогично можно прикрутить к любой другой теме- по примеру приведенному ниже) 1. Шаг (нам нужно прописать в HTML структуру файла шаблона категорий /catalog/view/theme/oxy/template/product/category.tpl код ) Открываем и находим в шаблоне: /catalog/view/theme/oxy/template/product/category.tpl HTML: <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div> <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div> После него вставляем: HTML: <div class="product-hover"> <div class="description-hover"><?php echo utf8_substr( strip_tags( $product['description']),0,500); ?><a href="<?php echo $product['href']; ?>">Подробнее...</a> </div> </div> Затем в этом же файле находим строчки Java которые отвечают за переключение вида сетки и списка: (*обратите внимание эта строчка должна встречаться 2 раза - соответственно код вставляем после нее тоже 2 раза) Код: html += '<div class="description">' + $(element).find('.description').html() + '</div>'; После него вставляем: Код: html += '<div class="product-hover">' + $(element).find('.product-hover').html() + '</div>'; 2. Шаг (теперь определяем стили классам в файле /catalog/view/theme/oxy/stylesheet/stylesheet.css) Открываем файл стиля: /catalog/view/theme/oxy/stylesheet/stylesheet.css ( вставляем код стиля в любое место - предпочтительно после стилей товара, но не принципиально) Вставляем код: Код: /*STYL FOR CLASS PRODUCT-HOVER & DESRIPTION-HOVER START*/ .product-list .product-hover { display: none!important; } .three.mobile-two.columns { /*background-color: #FFFFFF;*/ /*margin-bottom: 20px;*/ position: relative; } .three.mobile-two.columns .product-hover { left: 0; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 60%; transition: all 550ms ease 0s; z-index: 9999; padding: 16px; width: 100%; } .three.mobile-two.columns:hover { box-shadow: 0 2px 23px rgba(0, 0, 0, 0.25); } .three.mobile-two.columns:hover .product-hover { opacity: 1; cursor: pointer; background-color: #FFFFFF; box-shadow: 0 7px 20px 0px rgba(0, 0, 0, 0.25); top: 100%; width: 100%; } .description-hover a { font-weight: bolder; text-decoration: underline; float: right; } /*STYL FOR CLASS PRODUCT-HOVER & DESRIPTION-HOVER END*/ Вот что должно получится: Все тему можно закрывать - задача решена !
