Вы не авторизованы.
Всем привет!
Много искал по форуму и не нашел решения - БЫСТРЫЙ ПРОСМОТР ТОВАРОВ. В категории товаров, при наведении курсора, можно быстро просмотреть содержание товара и купить его, не переходя на карточку товара. Пример на всем известном сайте http://www.wildberries.ru/Nike/обувь
Если кто знает и умеет так делать, поделитесь с нами) Спасибо!
Неактивен
Nikolayn написал:
Веду проект ...
Сейчас чуть освобожусь, попробуем сделать.
Отредактировано mask (2013-03-09 19:48)
Неактивен
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)
Неактивен
И все пути вида: 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...? Извиняюсь, хромаю ловить с лета коды.
Неактивен
Mask, моем случае тоже #039? Мне не понятно - откуда и что брать для замены всех путей вида: background:url
Неактивен
Т.е. меняется только, например:
background:url(images/controls.png)
На:
background:url('../images/images/controls.png')
Ок, пробую.
Неактивен
Nikolayn написал:
Mask, моем случае тоже #039? Мне не понятно - откуда и что брать для замены всех путей вида: background:url
Я вас понял) В п. 3 изменил.
Неактивен
Nikolayn написал:
Все сделал. Ничего не изменилось.
Это только половина, выше дописываю.
Неактивен
Mask, что то похожее получилось. Попробую доделать мелочи. Если не получится, спрошу помощи. Огромное спасибо!
Неактивен
Nikolayn написал:
Mask, что то похожее получилось. Попробую доделать мелочи. Если не получится, спрошу помощи. Огромное спасибо!
Пути пропишите к изображениям нормальные.
Вручную сделайте п.3 без редакторов дизайна и замените файл по ftp.
Ато у вас пути вида:
'
Отредактировано mask (2013-03-09 22:19)
Неактивен
Пути к изображениям каким? Что были в папке (5. Папку images бросаем в /published/publicdata/КЛЮЧ/attachments/SC/images/)? я в published/publicdata/КЛЮЧ/attachments/SC/images/
создал папку images, в ней папку ie6 и по папкам раскидал изображения, чтоб получилась готовая папка images.
Не верно?
И вопрос: как убрать "хлебные крошки" в открывшемся окне товара?
Неактивен
Пути к изображениям каким? Что были в папке (5. Папку images бросаем в /published/publicdata/КЛЮЧ/attachments/SC/images/)? я в published/publicdata/КЛЮЧ/attachments/SC/images/
создал папку images, в ней папку ie6 и по папкам раскидал изображения, чтоб получилась готовая папка images.
Да просто папку со скачанного архива бросаете по ftp в свою папку.
Вот тут видите какие пути?
Вместо
'
Html код:
'
И вопрос: как убрать "хлебные крошки" в открывшемся окне товара?
В /published/SC/html/scripts/templates/frontend/product_category_info.html
Заменить:
{if !$CPT_CONSTRUCTOR_MODE}
На:
{if !$CPT_CONSTRUCTOR_MODE && $PAGE_VIEW ne 'noframe'}
Неактивен
Mask, крошки убрались. Появились такие:
Главная страница / mp3
Их можно убрать?
Неактивен
Nikolayn написал:
Mask, крошки убрались. Появились такие:
Главная страница / mp3
Их можно убрать?
Да, проглядел, тогда весь код с этого файла, заключите так:
{if $PAGE_VIEW ne 'noframe'} //код с файла {/if}
Неактивен
Файл заменил. Картинки из /published/publicdata/КЛЮЧ/attachments/SC/images/ должны где то отображаться?
Неактивен
Nikolayn написал:
Файл заменил. Картинки из /published/publicdata/КЛЮЧ/attachments/SC/images/ должны где то отображаться?
Предыдущее сообщение.
Там файл не тот дал.
Еще раз замените.
Отредактировано mask (2013-03-09 22:59)
Неактивен
Крошки убрались. Уже смотрится лучше.
Mask, убрать "С этим товаром покупают" и кнопку "НАЗАД" можно с быстрого просмотра? Чтоб остался только товар и кнопки совершения покупки.
Неактивен
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}
Неактивен
Mask, все заработало! Огромное спасибо! Хотелось бы отблагодарить! Как могу?
Неактивен