Опубликовано: 1 июля 2015
Быстрый просмотр (предпросмотр) товара Есть решение
Добрый день!
Вопрос такой:
Можно ли сделать просмотр товара во всплывающем окне не заходя в саму карточку товара? Это было бы очень удобно с точки зрения юзабилити.
Если такое сделать можно, то подскажите как?
Если такое сделать нельзя, то подскажите, пожалуйста, решение "Замены изображений товара при наведении на карточку товара" (Такой вопрос уже был, для шаблона "Купить Просто", ссылка: http://wm-site.ru/buy_simply/171/izmenenie-eskizov...)
Спасибо!
Комментарии (13)
Вот еще один интересный вариант предпросмотра который понравился. http://www.chemodan66.ru/rancy/
1. в файле "products.list.html" перед строкой
![]()
" />"])}{/if*}
{if !$wa->shop->settings('ignore_stock_count')}<div class="available"><span class="bold">[`Availability`]:
прописать
<form class="addtocart fast_view" method="post" action="{$wa->getUrl('/frontendCart/add')}"data-url="{$p.frontend_url}{if strpos($p.frontend_url, '?')}&{else}?{/if}cart=1">
<input type="hidden" name="product_id" value="{$p.id}">
<input type="submit" value="Быстрый просмотр">
</form>
2. в файле "product.cart.html", закомментировать блок
3. в том же файле перед строкой
<form id="cart-form{if $wa->get('cart')}-dialog{/if}" method="post" action="{$wa->getUrl('/frontendCart/add')}">
прописать
{if $wa->get('cart')}
{include file="product.image.html" gallery=$theme_settings.gallery}
{/if}
4. в пользовательские стили прописать правила
.dialog-window .cart.product .image.general img {
max-width: 300px;
}
.dialog-window .cart.product .image.general {
min-width: 300px;
}
.dialog-window .cart.product .align-center {
text-align: center;
float: left;
width: 300px;
margin-right: 40px;
}
.dialog-window .cart.product {
width: 600px;
}
.dialog-window>h4{
width:555px;
}
.dialog-window .cart.product .image.general .corner.left {
left: 0px;
}
.dialog-window .cart.product .image.general .corner.bottom {
bottom: 30px;
}
по поводу нескольких изображений для списка товаров - это уже другой вопрос, задайте его в новом "вопросе"
1. в файле "products.list.html" перед строкой
{if !$wa->shop->settings('ignore_stock_count')}<div class="available"><span class="bold">[`Availability`]:
прописать
<form class="addtocart fast_view" method="post" action="{$wa->getUrl('/frontendCart/add')}"data-url="{$p.frontend_url}{if strpos($p.frontend_url, '?')}&{else}?{/if}cart=1">
<input type="hidden" name="product_id" value="{$p.id}">
<input type="submit" value="Быстрый просмотр">
</form>
2. в файле "product.cart.html", закомментировать блок
{if !empty($theme_settings.dialogImg)}<span class="dialog-image-product">{$wa->shop->productImgHtml($product, '96x96', ['alt' => '', 'default' => "`$wa_theme_url`img/dummy96.png"])}</span>{/if}
должно получиться так
{*if !empty($theme_settings.dialogImg)}<span class="dialog-image-product">{$wa->shop->productImgHtml($product, '96x96', ['alt' => '', 'default' => "`$wa_theme_url`img/dummy96.png"])}</span>{/if*}
3. в том же файле перед строкой
<form id="cart-form{if $wa->get('cart')}-dialog{/if}" method="post" action="{$wa->getUrl('/frontendCart/add')}">
прописать
{if $wa->get('cart')}
{include file="product.image.html" gallery=$theme_settings.gallery}
{/if}
4. в пользовательские стили прописать правила
.dialog-window .cart.product .image.general img {
max-width: 300px;
}
.dialog-window .cart.product .image.general {
min-width: 300px;
}
.dialog-window .cart.product .align-center {
text-align: center;
float: left;
width: 300px;
margin-right: 40px;
}
.dialog-window .cart.product {
width: 600px;
}
.dialog-window>h4{
width:555px;
}
.dialog-window .cart.product .image.general .corner.left {
left: 0px;
}
.dialog-window .cart.product .image.general .corner.bottom {
bottom: 30px;
}
Замены изображений товара при наведении на карточку товара
это уже другой вопрос - задайте его в новом "вопросе"
после того как внесете изменения, пришлите пожалуйста адрес сайта - на обсуждение
1. в файле "products.list.html" перед строкой
{if !$wa->shop->settings('ignore_stock_count')}<div class="available"><span class="bold">[`Availability`]:
прописать
<form class="addtocart fast_view" method="post" action="{$wa->getUrl('/frontendCart/add')}"data-url="{$p.frontend_url}{if strpos($p.frontend_url, '?')}&{else}?{/if}cart=1">
<input type="hidden" name="product_id" value="{$p.id}">
<input type="submit" value="Быстрый просмотр">
</form>
2. в файле "product.cart.html", закомментировать блок
{if !empty($theme_settings.dialogImg)}<span class="dialog-image-product">{$wa->shop->productImgHtml($product, '96x96', ['alt' => '', 'default' => "`$wa_theme_url`img/dummy96.png"])}</span>{/if}
должно получиться так
{*if !empty($theme_settings.dialogImg)}<span class="dialog-image-product">{$wa->shop->productImgHtml($product, '96x96', ['alt' => '', 'default' => "`$wa_theme_url`img/dummy96.png"])}</span>{/if*}
3. в том же файле перед строкой
<form id="cart-form{if $wa->get('cart')}-dialog{/if}" method="post" action="{$wa->getUrl('/frontendCart/add')}">
прописать
{if $wa->get('cart')}
{include file="product.image.html" gallery=$theme_settings.gallery}
{/if}
4. в пользовательские стили прописать правила
ul.list .addtocart.fast_view{
margin-right:10px;
}
ul.thumbs .addtocart.fast_view{
position:absolute;
top: 70px;
display:none;
}
ul.thumbs li:hover .addtocart.fast_view{
display:block;
}
ul.thumbs .addtocart.fast_view input[type='submit']{
opacity:0.6;
}
ul.thumbs .addtocart.fast_view input[type='submit']:hover{
opacity:1;
background:#473b39;
transition:all .3s;
}
.dialog-window .cart.product .image.general img {
max-width: 300px;
}
.dialog-window .cart.product .image.general {
min-width: 300px;
}
.dialog-window .cart.product .align-center {
text-align: center;
float: left;
width: 300px;
margin-right: 40px;
}
.dialog-window .cart.product {
width: 600px;
}
.dialog-window>h4{
width:555px;
}
.dialog-window .cart.product .image.general .corner.left {
left: 0px;
}
.dialog-window .cart.product .image.general .corner.bottom {
bottom: 30px;
}
Пользовательские стили вносятся в файле "comfortbuy.shop.css" ?
Изменения внесены. Сайт Sumki5.ru.
Нужно только выровнять элементы.
Вопрос:
Можем ли в всплывающее окно добавить информацию, которая содержится в вкладках "Описание" и "Характеристики"?
Еще увидел один момент.
Когда в категории товаров спускаешься вниз подгружаются другие товары, если в них нажать на "Быстрый просмотр", а потом закрыть окно и вернуться на самый вверх страницы и попробовать поводить курсором над пунктами меню и логотипом, то увидите, что показывается всплывающее окно с просмотром фото товара. Показывается и исчезает. Если сдвинуть курсор на пару пикселей в любую сторону, то снова покажется и исчезнет.
Скриншот: http://joxi.ru/823bpXkIkE9xmO
к предыдущей инструкции
1. в файле "product.cart.html", заменить
{include file="product.image.html" gallery=$theme_settings.gallery}
на
{include file="product.image.html" gallery="popup"}
2. в пользовательские стили прописать дополнительные правила
.dialog-window .cart.product #product-gallery .jcarousel-clip-horizontal {
width: 266px;
}
.dialog-window .cart.product #product-gallery .jcarousel-container{
width: 300px;
}
.dialog-window .cart.product {
bottom: 15% !important;
overflow-y: auto;
}
.dialog-window .cart.product #cart-form-dialog{
margin-left:320px;
}
.dialog-window .cart.product #product-description{
margin-top:20px;
}
3. для добавления блока описания товара: в файле "product.cart.html", в конце файла прописать
{if $wa->get('cart')}
<div class="clear"></div>
{if $product.description}<div class="description" id="product-description" itemprop="description">{$product.description}</div>{/if}
{/if}
4. характеристики к сожалению достать нельзя
пользовательские стили - это здесь http://wm-site.ru/comfort_buy/109/sokhranenie-info...
описание товара достать можно а вот характеристики нет
во второй инструкции написал пункт 1-й, который заменяет выбранный тип отображения товара
Спасибо вам за оперативную поддержку!
Изменения внес.
Только пункт 3 сделал таким:
Перед строкой <script type="text/javascript" src="{$wa_theme_url}product.js?v{$wa_theme_version}"></script>
вставил
{if $wa->get('cart')}
<!--<div class="clear"></div>-->
{if $product.description}<div class="description" id="product-description" itemprop="description">{$product.description}</div>{/if}
{/if}
При том обратите внимание, что пришлось закомментировать строку <div class="clear"></div>.
Это не критично?
Таким образом добился, чтобы описание товара отображалось под кнопкой "В КОРЗИНУ" (скриншот: http://joxi.ru/D2P4QoDueMPN23)
<div class="clear"></div>
я вставил специально для случаев когда блок с ценой меньше высоты блока изображением, т.к. блок с изображением имеет float:left;
если делать как Вы написали, то при большом объеме текста, он будет обтекать блок с изображением
но как кому нравится
Я вас понял. Тогда буду действовать по своему усмотрению. Спасибо за решение проблемы.
Здравствуйте. Как сделать чтобы при появлении окна быстрого просмотра основной фон сайта был не белый с прозрачностью, а оверлей (как в fancybox)
Замените фон этого блока, например(добавив эти строки в блок пользовательских стилей):
.dialog-background {
background: #000;
}
Здравствуйте. С Новым Годом вас!
У меня есть проблема с этим окном быстрого просмотра при включенном CDN.
Выглядит так. При первом клике на любую кнопку Быстрый просмотр на странице категории окно быстрого просмотра не открывается.
Открывается окно только при втором клике. Все последующие нажатия любых кнопок Быстрый просмотр открываются с первого раза.
Однако если перезагрузить (закрыть-открыть) страницу категории происходит тоже самое. То есть первый клик не срабатывает.
Да и в окне Быстрого просмотра при клике по миниатюре основное фото не меняется. Вообще ни работает.
Такие ошибки возникают только при включенном CDN. Если его выключить то все работает как надо.
Конечно возможно проблема в самом CDN, но никаких других ошибок на сайте при использовании CDN я не наблюдаю.
И в Google Console вот такие ошибки (когда CDN выключен их нет)
Эти ошибки появляются при первом нажатии на кнопку Быстрый просмотр. Сама страница категории загружается без этих ошибок.
Uncaught ReferenceError: Product is not defined
at HTMLDocument.eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:3:13)
at j (jquery.min.js:2)
at Object.add [as done] (jquery.min.js:2)
at m.fn.init.m.fn.ready (jquery.min.js:2)
at e.fn.init.m.fn.init (jquery.min.js:2)
at e.fn.init (jquery-migrate-1.2.1.min.js:2)
at m (jquery.min.js:2)
at eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:2:5)
at eval (<anonymous>)
at jquery.min.js:2
jquery.jcarousel.min.js:16 Uncaught Error: jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
at a.jcarousel.pos (jquery.jcarousel.min.js:16)
at a.jcarousel.scroll (jquery.jcarousel.min.js:16)
at a.jcarousel.reload (jquery.jcarousel.min.js:16)
at jquery.jcarousel.min.js:16
jquery.jcarousel.min.js?v2.9.0:16 Uncaught Error: jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
at a.jcarousel.pos (jquery.jcarousel.min.js?v2.9.0:16)
at a.jcarousel.scroll (jquery.jcarousel.min.js?v2.9.0:16)
at a.jcarousel.reload (jquery.jcarousel.min.js?v2.9.0:16)
at jquery.jcarousel.min.js?v2.9.0:16
pos @ jquery.jcarousel.min.js?v2.9.0:16
scroll @ jquery.jcarousel.min.js?v2.9.0:16
reload @ jquery.jcarousel.min.js?v2.9.0:16
(anonymous) @ jquery.jcarousel.min.js?v2.9.0:16
Попробуйте в файле product.cart.html(Магазин-Витрина-Шаблоны) заменить строку:
<script type="text/javascript" src="{$wa_theme_url}product.js?v{$wa_theme_version}"></script>
строкой:
<script type="text/javascript" src="{$wa_real_theme_url}product.js?v{$wa_theme_version}"></script>
*после сделанных изменений сбросьте кеш приложения Инсталлер и браузера на котором просматриваете сайт