Старый форум WebAsyst и Shop-Script / Быстрый просмотр товаров

Nikolayn · 2013-03-09 00:26

Всем привет!
Много искал по форуму и не нашел решения - БЫСТРЫЙ ПРОСМОТР ТОВАРОВ. В категории товаров, при наведении курсора, можно быстро просмотреть содержание товара и купить его, не переходя на карточку товара. Пример на всем известном сайте http://www.wildberries.ru/Nike/обувь
Если кто знает и умеет так делать, поделитесь с нами) Спасибо!

mask · 2013-03-09 19:24

Ваш сайт какой?

Nikolayn · 2013-03-09 19:43

Веду проект www.pun-pun.ru

mask · 2013-03-09 19:47

Nikolayn написал:
Веду проект ...

Сейчас чуть освобожусь, попробуем сделать.

Отредактировано mask (2013-03-09 19:48)

Nikolayn · 2013-03-09 19:53

ок, спасибо за отклик!

mask · 2013-03-09 20:35

1. Качаем плагин

2. Открываем colorbox-master/example1

3.
В colorbox.css меняем весь код, на:

Код:

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background: #000;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url('../../images/images/controls.png') no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url('../../images/images/controls.png') no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url('../../images/images/controls.png') no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url('../../images/images/controls.png') no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url('../../images/images/controls.png') left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url('../../images/images/controls.png') right top repeat-y;}
    #cboxTopCenter{height:21px; background:url('../../images/images/border.png') 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url('../../images/images/border.png') 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url('../../images/images/loading_background.png') no-repeat center center;}
        #cboxLoadingGraphic{background:url('../../images/images/loading.gif') no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url('../../images/images/controls.png') no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url('../../images/images/controls.png') no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; top:0; right:0; background:url('../../images/images/controls.png') no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url('../../images/images/ie6/borderTopLeft.png');}
.cboxIE6 #cboxTopCenter{background:url('../../images/images/ie6/borderTopCenter.png');}
.cboxIE6 #cboxTopRight{background:url('../../images/images/ie6/borderTopRight.png');}
.cboxIE6 #cboxBottomLeft{background:url('../../images/images/ie6/borderBottomLeft.png');}
.cboxIE6 #cboxBottomCenter{background:url('../../images/images/ie6/borderBottomCenter.png');}
.cboxIE6 #cboxBottomRight{background:url('../../images/images/ie6/borderBottomRight.png');}
.cboxIE6 #cboxMiddleLeft{background:url('../../images/images/ie6/borderMiddleLeft.png');}
.cboxIE6 #cboxMiddleRight{background:url('../../images/images/ie6/borderMiddleRight.png');}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

4. В папке images удаляем overlay.png

5. Папку images бросаем в /published/publicdata/КЛЮЧ/attachments/SC/images/

6. Файл colorbox.css бросаем в /published/publicdata/КЛЮЧ/attachments/SC/themes/Тема/

7. Файл jquery.colorbox-min.js переименовываем в colorbox-min.js и бросаем в /published/SC/html/scripts/js/

8.
В файле /published/SC/html/scripts/templates/frontend/frame.html

После:

Код:

<link rel="stylesheet" href="{$URL_THEME_OFFSET}/main.css" type="text/css">

Дописать:

Код:

<link rel="stylesheet" href="{$URL_THEME_OFFSET}/colorbox.css" type="text/css">

После:

Код:

<script type="text/javascript" src="{$smarty.const.URL_JS}/widget_checkout.js"></script>

Дописать:

Код:

<script type="text/javascript" src="{$smarty.const.URL_JS}/colorbox-min.js"></script>

9.
В файле /published/SC/html/scripts/templates/frontend/product_brief.html

В нужном месте прописать:

Код:

<a href="{$_product_url}&view=noframe" class="c-view">{"prd_fast_view"|translate}</a>

10.
В файле /published/SC/html/scripts/js/colorbox-min.js в самом верху прописать:

Код:

$(document).ready(function() {

$('.c-view').colorbox({
    iframe: true, 
    width: "80%", 
    height: "80%",
    opacity: 0.6,
    fixed: true
});

}); //end Ready

Если ничего не забыл, то товар откроется в новом окне при нажатии на добавленную ссылку.
Результат не 100% похож, нужно дорабатывать, но основной функционал понятен.

Отредактировано mask (2013-03-09 23:35)

Nikolayn · 2013-03-09 21:19

И все пути вида: background:url меняем на (пример как должно получится в путях):

Код:

background:url('../images/images/controls.png')

извиняюсь, а что меняем на (пример, как должно получится в путях)?

вот , кусок кода:

Код:

   #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}

например, первая строка кода:

Код:

   #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}

Тут я меняю width:21px; height:21px; ....no-repeat -101px 0...? Извиняюсь, хромаю ловить с лета коды.

Nikolayn · 2013-03-09 21:33

Mask, моем случае тоже #039? Мне не понятно - откуда и что брать для замены всех путей вида: background:url

Nikolayn · 2013-03-09 21:37

Т.е. меняется только, например:

Код:

background:url(images/controls.png)

На:

Код:

background:url('../images/images/controls.png')

Ок, пробую.

mask · 2013-03-09 21:40

Nikolayn написал:
Mask, моем случае тоже #039? Мне не понятно - откуда и что брать для замены всех путей вида: background:url

Я вас понял) В п. 3 изменил.

Nikolayn · 2013-03-09 21:48

Все сделал. Ничего не изменилось.

mask · 2013-03-09 21:51

Nikolayn написал:
Все сделал. Ничего не изменилось.

Это только половина, выше дописываю.

mask · 2013-03-09 22:07

Можете доделывать.

Nikolayn · 2013-03-09 22:14

Mask, что то похожее получилось. Попробую доделать мелочи. Если не получится, спрошу помощи. Огромное спасибо!

mask · 2013-03-09 22:15

Nikolayn написал:
Mask, что то похожее получилось. Попробую доделать мелочи. Если не получится, спрошу помощи. Огромное спасибо!

Пути пропишите к изображениям нормальные.
Вручную сделайте п.3 без редакторов дизайна и замените файл по ftp.
Ато у вас пути вида:

Код:

&#039

Отредактировано mask (2013-03-09 22:19)

Nikolayn · 2013-03-09 22:23

Пути к изображениям каким? Что были в папке (5. Папку images бросаем в /published/publicdata/КЛЮЧ/attachments/SC/images/)? я в published/publicdata/КЛЮЧ/attachments/SC/images/
создал папку images, в ней папку ie6 и по папкам раскидал изображения, чтоб получилась готовая папка images.
Не верно?
И вопрос: как убрать "хлебные крошки" в открывшемся окне товара?

mask · 2013-03-09 22:30

Пути к изображениям каким? Что были в папке (5. Папку images бросаем в /published/publicdata/КЛЮЧ/attachments/SC/images/)? я в published/publicdata/КЛЮЧ/attachments/SC/images/
создал папку images, в ней папку ie6 и по папкам раскидал изображения, чтоб получилась готовая папка images.

Да просто папку со скачанного архива бросаете по ftp в свою папку.
Вот тут видите какие пути?
Вместо

Код:

Html код:

Код:

&#039

И вопрос: как убрать "хлебные крошки" в открывшемся окне товара?

В /published/SC/html/scripts/templates/frontend/product_category_info.html

Заменить:

Код:

{if !$CPT_CONSTRUCTOR_MODE}

На:

Код:

{if !$CPT_CONSTRUCTOR_MODE && $PAGE_VIEW ne 'noframe'}

Nikolayn · 2013-03-09 22:42

Mask, крошки убрались. Появились такие:
Главная страница / mp3
Их можно убрать?

mask · 2013-03-09 22:44

Nikolayn написал:
Mask, крошки убрались. Появились такие:
Главная страница / mp3
Их можно убрать?

Да, проглядел, тогда весь код с этого файла, заключите так:

Код:

{if $PAGE_VIEW ne 'noframe'}
//код с файла
{/if}

mask · 2013-03-09 22:55

Сори, не тот файл:

Этот файл скачайте и замените по ftp у себя в /published/publicdata/КЛЮЧ/attachments/SC/themes/Тема/

Nikolayn · 2013-03-09 22:57

Файл заменил. Картинки из /published/publicdata/КЛЮЧ/attachments/SC/images/ должны где то отображаться?

mask · 2013-03-09 22:58

Nikolayn написал:
Файл заменил. Картинки из /published/publicdata/КЛЮЧ/attachments/SC/images/ должны где то отображаться?

Предыдущее сообщение.
Там файл не тот дал.
Еще раз замените.

Отредактировано mask (2013-03-09 22:59)

Nikolayn · 2013-03-09 23:00

Крошки убрались. Уже смотрится лучше.
Mask, убрать "С этим товаром покупают" и кнопку "НАЗАД" можно с быстрого просмотра? Чтоб остался только товар и кнопки совершения покупки.

mask · 2013-03-09 23:03

Nikolayn написал:
Крошки убрались. Уже смотрится лучше.
Mask, убрать "С этим товаром покупают" и кнопку "НАЗАД" можно с быстрого просмотра? Чтоб остался только товар и кнопки совершения покупки.

Кнопку назад не знаю где у вас стоит и кто ее делал, а товары в /published/publicdata/КЛЮЧ/attachments/SC/themes/Тема/product_info.html

Заменить:

Код:

{cpt_product_related_products overridestyle=''}

На:

Код:

{if $PAGE_VIEW ne 'noframe'}{cpt_product_related_products overridestyle=''}{/if}

Nikolayn · 2013-03-09 23:06

Mask, все заработало! Огромное спасибо! Хотелось бы отблагодарить! Как могу?

Переходите на новый форум!

#1 2013-03-09 00:26

Быстрый просмотр товаров

#2 2013-03-09 19:24

Re: Быстрый просмотр товаров

#3 2013-03-09 19:43

Re: Быстрый просмотр товаров

#4 2013-03-09 19:47

Re: Быстрый просмотр товаров

Nikolayn написал:

#5 2013-03-09 19:53

Re: Быстрый просмотр товаров

#6 2013-03-09 20:35

Re: Быстрый просмотр товаров

Код:

Код:

Код:

Код:

Код:

Код:

Код:

#7 2013-03-09 21:19

Re: Быстрый просмотр товаров

Код:

Код:

Код:

#8 2013-03-09 21:33

Re: Быстрый просмотр товаров

#9 2013-03-09 21:37

Re: Быстрый просмотр товаров

Код:

Код:

#10 2013-03-09 21:40

Re: Быстрый просмотр товаров

Nikolayn написал:

#11 2013-03-09 21:48

Re: Быстрый просмотр товаров

#12 2013-03-09 21:51

Re: Быстрый просмотр товаров

Nikolayn написал:

#13 2013-03-09 22:07

Re: Быстрый просмотр товаров

#14 2013-03-09 22:14

Re: Быстрый просмотр товаров

#15 2013-03-09 22:15

Re: Быстрый просмотр товаров

Nikolayn написал:

Код:

#16 2013-03-09 22:23

Re: Быстрый просмотр товаров

#17 2013-03-09 22:30

Re: Быстрый просмотр товаров

Код:

Код:

Код:

Код:

#18 2013-03-09 22:42

Re: Быстрый просмотр товаров

#19 2013-03-09 22:44

Re: Быстрый просмотр товаров

Nikolayn написал:

Код:

#20 2013-03-09 22:55

Re: Быстрый просмотр товаров

#21 2013-03-09 22:57

Re: Быстрый просмотр товаров

#22 2013-03-09 22:58

Re: Быстрый просмотр товаров

Nikolayn написал:

#23 2013-03-09 23:00

Re: Быстрый просмотр товаров

#24 2013-03-09 23:03

Re: Быстрый просмотр товаров

Nikolayn написал:

Код:

Код:

#25 2013-03-09 23:06

Re: Быстрый просмотр товаров

Board footer