[Решено] Помогите сделать так же как на этом сайте

Тема в разделе "OpenCart", создана пользователем bosten, 15 июн 2014.

Статус темы:
Закрыта.
  1. bosten

    bosten

    Регистрация:
    2 май 2013
    Сообщения:
    153
    Симпатии:
    33
  2. x-guest

    x-guest Команда форума

    Регистрация:
    8 окт 2012
    Сообщения:
    276
    Симпатии:
    977
    Вот пример как можно это реализовать
    [​IMG]
    Демо работы кода + исходник
    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;
    }
    
     
    dem03x и bosten нравится это.
  3. bosten

    bosten

    Регистрация:
    2 май 2013
    Сообщения:
    153
    Симпатии:
    33
    Скажите пожалуйста мне больше кажется что это похоже на меню ? А мне хотелось сделать что бы при наводке мышки на товар, появлялось описание товара .
     
  4. x-guest

    x-guest Команда форума

    Регистрация:
    8 окт 2012
    Сообщения:
    276
    Симпатии:
    977
    Да это аккордеон при ховере открывается - суть в том что можно его прикрутить или же сделать hover для $description (описания) вечером освобожусь помогу
    p.s. ссыль на сайт сюда или в личку
     
    bosten нравится это.
  5. ostrun

    ostrun

    Регистрация:
    7 ноя 2012
    Сообщения:
    140
    Симпатии:
    37
    В разделе платных шаблонов есть такой шаблон: Шаблон "Еxtended" Ocstore 1.5.5.1.2
    так вот в нем на странице списка товаров категорий есть что-то подобное, только в обратную сторону, там изначально стоит описание товара, а при наведении мышки описание убирается и появляется кнопка "купить". Думаю можно выдернуть оттуда данную опцию, но к сожалению не знаю как. Если вы сможете это сделать, очень прошу поделиться потом опытом как это реализовать. Спасибо.
    А вот ссылка на демо: http://extended.tmpl.mk.ua/index.php?route=product/category&path=20
     
  6. bosten

    bosten

    Регистрация:
    2 май 2013
    Сообщения:
    153
    Симпатии:
    33
    Смотрю не только я хочу с делать такую функцию. Приятно что я не один такой. В шаблоне что вы придложили немного не так ка хотелось что бы работало. Вот еще пример : http://rozetka.com.ua/photo/c80001/filter/preset=zerkal/
     
  7. ostrun

    ostrun

    Регистрация:
    7 ноя 2012
    Сообщения:
    140
    Симпатии:
    37
    В розетке мне понравилась боковая панель, а центральные блоки из-за разных названий продуктов смотрятся не ровно и не совсем красиво :smile:. На моем сайте уже стоит что-то подобное но мне тоже не нравится как расположены продукты из-за длинных и коротких названий. Первый пример который вы привели отвечает всем требованиям потому как там вроде не имеет значения какой длинны название и общая картина сайта не плывет из-за этого.
     
  8. bosten

    bosten

    Регистрация:
    2 май 2013
    Сообщения:
    153
    Симпатии:
    33
    Вполне с вами согласен. Просто я привел пример что бы было понятно что я хотел бы добиться
     
  9. x-guest

    x-guest Команда форума

    Регистрация:
    8 окт 2012
    Сообщения:
    276
    Симпатии:
    977
    Вот решение задачи:
    в файле шаблона категорий (твоя тема 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>
    только смотри там дивку не добавь лишнюю :wink:
    потом переходим к стилю (в свой файлиг стиля) 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%;
    }
    вот что должно получится
    [​IMG]
    --- Добавлено, 17 июн 2014 ---
    Совсем забыл:hot: чтоб работала переключения сетки на список и наоборот можешь в стиле прописать display: none; для .list или class product-hover вставить выше и выводить его только в сетке (здесь можно извращаться как угодно)
     
    Последнее редактирование: 17 июн 2014
    dem03x и bosten нравится это.
  10. bosten

    bosten

    Регистрация:
    2 май 2013
    Сообщения:
    153
    Симпатии:
    33
    Господи не ужели оно так может работать. Чего то оно у меня не получается. Добавляю стили слажуеться впечатление что они конфликтуют. описание не появляется и рамка вокруг товара пропадает на половину
     
  11. x-guest

    x-guest Команда форума

    Регистрация:
    8 окт 2012
    Сообщения:
    276
    Симпатии:
    977
    Подводим итог - может кому пригодится !
    Задача:
    сделать на странице категорий эффект 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*/

    Вот что должно получится:
    [​IMG]
    Все тему можно закрывать - задача решена !
     
    dem03x, ostrun, Zulus и 4 другим нравится это.
Статус темы:
Закрыта.