"Быстрый просмотр" товаров в категории JoomShopping - Дизайн и оформление

Решение основано исключительно на верстке + fancybox, править будем только шаблоны JS.

Текущие версии Jshop 3.6.1 + J 2.5

1. Качаем fancybox v2.0.6 | Документация по Fancybox

2. Из архива достаем:
    - jquery.fancybox.pack.js кидаем в /templates/ваш_шаблон/js/
    - jquery.fancybox.css и картинки (blank.gif, fancybox_loading.gif, fancybox_sprite.png) в /templates/ваш_шаблон/css/
 (в принципе кидать вы можете куда угодно, хоть в корень, только помните про пути :-))

3. Если шаблоны Joomshoppinga не переопределены, то переопределяем в /templates/ваш_шаблон/html/com_jshopping/*

4. В админке -> Настройки->Заказы->Не переходить в корзину после покупки - ставим галку
    (и проверяем чтобы в  /templates/шаблон/component.php был вывод системных сообщений - <jdoc:include type="message" />)
[spoiler title= если нужно чтоб при клике на кнопку сразу переходило в корзину]
нужно в <form ...> вставить target="_parent" и работает
[/spoiler]

5. Идем в /templates/шаблон/html/com_jshopping/product/product_default.php (или другой, который вы используете) и в самом начале пишем условие

6. Идем в /templates/шаблон/html/com_jshopping/list_products/list_products.php
    и в самом конце подключаем fancybox, стили и инициализируем плагин

7. Идем в /templates/шаблон/html/com_jshopping/list_products/product.php и добавляем одну строчку

8. Проверяем результат..настраиваем стили на свой вкус и под свой диз...
----------------------------------------------------------------------------------
Другой вариант - штатными средствами Joomla, на мутулз
[spoiler title=описание]
1. Делаем что написано в пункте 3; п. 5 при необходимости
2. В /templates/шаблон/html/com_jshopping/list_products/list_products.php вставляем одну строчку
3. В /templates/шаблон/html/com_jshopping/list_products/product.php вставляем в нужное место строчку
[/spoiler]

Вот и все
Во всплывающем окне можно и купить и положить в список желаний и т.д и т.п))

[spoiler title=пример окна на фансибокс][/spoiler]

-----------------------------------------------------------------------------------
UPD ^{от 30.05.2013}

Теперь "Быстрый просмотр" есть в виде плагина

Плагин работает в категориях, производителях, в списке товаров и в сопутствующих. Трогать шаблоны магазина и подключать какие-либо скрипты не нужно.

PRO версия | Lite версия плагина

Ветка для обсуждений

В репу.
Спасибо. Работает.

Немного оптимизации:
1. по пункту 7 добавляем rel="nofollow"
2. в роботсе одну строчку пропишем -  Disallow: /*?tmpl=component
 Так как товар будет доступен по 2м ссылкам, а нужно чтобы в индекс попал только главный документ

отличное решение.
правда лишняя лайба....
но эффект нужный

правда лишняя лайба....

Да, можно и штатным modal решить, css-класс же можно ему назначить при инициализации, а остальное - так же

Да, можно и штатным modal решить, css-класс же можно ему назначить при инициализации, а остальное - так же

Штатный modal.js вроде как не работает без мутулз, который у меня отключен, поэтому собственно на fancybox для jquery


Основная проблема была в том чтобы показать ограниченную карточку товара (кому как, а мне например в окне нафиг не нужны всякие отзывы и сопутствующие товары) - это п.5, а остальное как говориться на вкус и цвет...

ELLE я так понимаю это универсальное решение, то есть подойдет и на другие компоненты?

ELLE я так понимаю это универсальное решение, то есть подойдет и на другие компоненты?

да, конечно - можно использовать и в других компонентах (только править соответственно шаблоны своего компонента)
и если компонент на мутулз (как VirtueMart допустим) и jquery не используется, тогда лучше на штатном modal сделать, как выше уже сказали.

Работает, спасибо!!

Только вот это не очень ясно:
3. Если шаблоны Joomshoppinga не переопределены, то переопределяем в /templates/ваш_шаблон/html/com_jshopping/*

У меня шаблон в папке компонента (рядом с дефолтным) и в админке ДШ он назначен, быстрый просмотр работает, только основной стиль сайта не цепляет Переопределение поможет? Просто перекинуть шаблон в /templates/ваш_шаблон/html/com_jshopping/ ? А в ДШ админке тогда не будет работать выбор шаблона?

devirus, а вообще только один шаблон используется, или вы разным товарам/категориям разные шаблоны задаете?

вам нужно не перекидывать, а скопировать шаблоны из компонента и определить их в шаблоне сайта (по указанному пути) и тут же править

Шаблон только использую 1 для всего… так что не критично

Определил шаблон в джумловский, магазин работает, в дш админке выбор шаблона не влияет (всё логично),
но фэнсибокс опять цепляет только шаблон из компонента и CSS оттуда же (если в дш админке сменить, везде останется нормальный джумловский, а у фэнсибокс — компонентский)

http://nebofon.ru/test/brillianty

По идее должно отображаться в точности как на странице товара

devirus в component.php у вас
<link rel="stylesheet" href="/test/templates/system/css/general.css" type="text/css" />
   <link rel="stylesheet" href="/test/templates/system/css/template.css" type="text/css" />

а на странице товара

<link rel="stylesheet" type="text/css" href="/test/templates/nebofon/css/template.css">
<link rel="stylesheet" type="text/css" href="/test/templates/nebofon/css/fonts/stylesheet.css">

думаю стоит заменить

аа, точно же!
спасибо, разобрался, всё супер

Работает корректно только с включенным SEF.
Без SEF, в iframe грузит весь шаблон сайта.

Без SEF, в iframe грузит весь шаблон сайта.

Попробуйте заменить знак вопроса на амперсанд здесь

А как на странице товара выудить переменную с url-адресом товара? (чтобы сделать ссылку на полную страницу товара в быстром просмотре)

Пока делаю так:


Может есть более элегантное решение?

а как сделать чтобы таким образом выводило товары которые лежат в подкатегории ?

сайт http://www.justintime.com.ua/

наверно вы способ не верно выбрали...
посмотрите тут

нет , не то вобще.

попытаюсь так ... сайт службы доставки из ресторанов партнеров , для удобства клиента нужно чтобы при выборе категории блюд ( например пицца ) клиенту показывало пиццу из той категории которую он выбрал.

Показывать всю продукцию в родительской категории нужды нет .

ELLE, спасибище большое, все работает!

Только проблемка одна, у меня в карточке есть кнопка "оформление заказа" и если на нее нажать то переход происходит прямо во всплывающем окне. Можно сделать так, чтобы на обычную страницу переходил?

1.<a href="/order" target="_parent">Оформление заказа</a>
2.http://fancyapps.com/fancybox/
3. можно сделать окно через modal.js (это второй вариант)

3. Если шаблоны Joomshoppinga не переопределены, то переопределяем в /templates/ваш_шаблон/html/com_jshopping/*

Это как?

3. Если шаблоны Joomshoppinga не переопределены, то переопределяем в /templates/ваш_шаблон/html/com_jshopping/*

devirus, а вообще только один шаблон используется, или вы разным товарам/категориям разные шаблоны задаете?

вам нужно не перекидывать, а скопировать шаблоны из компонента и определить их в шаблоне сайта (по указанному пути) и тут же править

Вот на этом моменте можно поподробнее?

Например
шаблон карточки товара достаем из /components/com_jshopping/templates/default/product/product_default.php
и копируем по адресу
/templates/Ваш_Шаблон/html/com_jshopping/product/product_default.php

шаблон товара в категории
из /components/com_jshopping/templates/default/list_products/product.php
в /templates/ваш_шаблон/html/com_jshopping/list_products/product.php

общий шаблон категории
из /components/com_jshopping/templates/default/list_products/list_products.php
в /templates/ваш_шаблон/html/com_jshopping/list_products/list_products.php

Это необходимо сделать для того чтобы все изменения, которые вы внесете в код не затерлись при обновлении JoomShopping'а

Понятно, только вот у меня нет по указанному пути компонента JS.. Копировать com_joomshopping целиком в папку HTML своего шаблона?

Версия? Я говорю о самой последней версии магазина, в первом посте об этом сказано.
"Копировать com_joomshopping целиком в папку HTML своего шаблона" - не поможет

Версия 3.7.2. Ну так я и спрашиваю, что делать, чтоб "помогло".
Как бы фэнсибокс работает, функция быстрого просмотра появилась, только не так, как показано в демке - посередине, а надпись "быстрый просмотр" красуется в виде простого текста, под изображением товара.. Где накосячил, просветите?

Версия 3.7.2. Ну так я и спрашиваю, что делать, чтоб "помогло".
Как бы фэнсибокс работает, функция быстрого просмотра появилась, только не так, как показано в демке - посередине, а надпись "быстрый просмотр" красуется в виде простого текста, под изображением товара.. Где накосячил, просветите?

если фанси работает и окно всплывает, а не устраивает только ссылка - внешнее оформление, то.....дальше пункт 8 из первого поста -

..настраиваем стили на свой вкус и под свой диз...

Firebug + Htmlbook вам в помощь.

Например
шаблон карточки товара достаем из /components/com_jshopping/templates/default/product/product_default.php
и копируем по адресу
/templates/Ваш_Шаблон/html/com_jshopping/product/product_default.php

шаблон товара в категории
из /components/com_jshopping/templates/default/list_products/product.php
в /templates/ваш_шаблон/html/com_jshopping/list_products/product.php

общий шаблон категории
из /components/com_jshopping/templates/default/list_products/list_products.php
в /templates/ваш_шаблон/html/com_jshopping/list_products/list_products.php

Это необходимо сделать для того чтобы все изменения, которые вы внесете в код не затерлись при обновлении JoomShopping'а

Добрый вечер. А если у меня нет по данному адресу /templates/ваш_шаблон/html/com_jshopping/ папки com_jshopping, надо ли ее создать? или вообще должна ли она там была быть?

естественно, и полные пути в файлам шаблонов.