[Решено] Вывод 3-х первых картинок в списке товаров категории

  • 20 Ответов
  • 4237 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

rudoy24

  • ***
  • 31
  • 1
Задача заключается в том, чтобы вывести в список товаров категории не одну картинку как у стандартного вывода списка товаров в категории, а сразу несколько, в данном случае 3, которые должны браться с карточек товара непосредственно.

-----
За вывод списка товаров категории отвечает файл: components/com_jshopping/templates/default/list_products/product.php , а за вывод самой картинки следующий код:
Код
<a href="<?php print $product->product_link?>">
                <img class="jshop_img" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" />
            </a>

Все картинки к товару отображаются в карточке товара, и за это отвечает файл:
components/com_jshopping/templates/default/product/product_default.php , а за сам вывод всех картинок непосредственно код:
Код
<span id='list_product_image_thumb'>
            <?php if ( (count($this->images)>1) || (count($this->videos) && count($this->images)) ) {?>
                <?php foreach($this->images as $k=>$image){?>
                    <img class="jshop_img_thumb" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" onclick="showImage(<?php print $image->image_id?>)" />
                <?php }?>
            <?php }?>
            </span>


Если попросту перенести код с product_default.php в product.php то в списке товаров категории ничего не отображается.

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

« Последнее редактирование: 22.02.2013, 02:19:26 от ELLE »

*

Linfuby

  • ******
  • 1239
  • 174
  • Всё просто...
Необходимо в контроллере объявить переменную images.
То есть в файле components/com_jshopping/controller/product.php в функции view есть строка что-то типа такого
Код
$view->set('images', $images);
Найти где формируется $images и создать такой же код в файле components/com_jshopping/controller/category.php в той же функции view
Только прошу не заниматься копипастом. Так не прокатит.
Немного воображения и логики, и любая проблема становится решенной.
Кривые решения - дают кривой результат!
Решения для JoomShopping
Благодарности и поддержка принимаются по след. реквизитам:
Яндекс.Деньги - 41001751720054

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Можно напрямую обратиться к базе данных
Необходимо в файле com_jshopping/list_products/product.php сделать следующее:

Заменить код
          
Код
<a href="<?php print $product->product_link?>">
                <img class="jshop_img" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" />
            </a>

На этот код            
Код
        <div class="three_img">
         <?php
$jshopConfig = &JSFactory::getConfig();
$db = &JFactory::getDBO();
$Query = "SELECT image_thumb FROM #__jshopping_products_images WHERE product_id=$product->product_id LIMIT 3";
$db->setQuery($Query);
$prodimg = $db->loadObjectList();
if (count($prodimg)){
foreach($prodimg as $primg)
{$prfullimg=str_replace('thumb_','full_',$primg->image_thumb);
print "<a title='$product->name'  class='screenshot lightbox' rel='$jshopConfig->image_product_live_path/$prfullimg' href='$product->product_link'><img src='$jshopConfig->image_product_live_path/$primg->image_thumb'/></a>";
}}
else {print "<a href='$product->product_link'><img src='$jshopConfig->image_product_live_path/noimage.gif'/></a>";}
?>
</div>
        <!--End-->

Здесь подтягиваются первые три изображения из карточки товара, в случае отсутствия изображений в карточке товара отобразиться noimage.gif

Если еще добавить вот такой скрипт в файл com_jshopping/list_products/list_products.php (можно запихнуть этот код в отдельный файл (js))
Спойлер
[свернуть]
И прописать свойства класса "screenshot"
Спойлер
[свернуть]

То должно получиться примерно так http://pvi.spb-ies.ru/cars.html
« Последнее редактирование: 20.02.2013, 21:09:28 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

Alienoff

  • ***
  • 181
  • 0
Чтобы не плодить
Как можно сделать вывод первых двух картинок таким образом, чтобы на лице стояла первая (обычный вид), а при наведении курсора менялась на вторую?

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Чтобы не плодить
Как можно сделать вывод первых двух картинок таким образом, чтобы на лице стояла первая (обычный вид), а при наведении курсора менялась на вторую?

Количество выводимых изображений можно регулировать изменяя параметр LIMIT (если необходимо два изображения ставьте цифру 2 :)  )
Ну, а для подмены изображения опять же можно воспользоваться jQuery, используя например методы hover, eq и CSS..http://api.jquery.com/eq/, мне так кажется :)
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

Alienoff

  • ***
  • 181
  • 0
Brooksus, это бы подробнее как-то...

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Brooksus, это бы подробнее как-то...
Первый вариант:
Изначально делаем оба изображения скрытыми и показываем первое после загрузки страницы. Далее они буду подменять друг друга при наведении курсора мыши:
Код CSS - a.screenshot img{display:none;}
Код jQuery -
Спойлер
[свернуть]

Второй вариант:
Изначально оба изображения отоброжаются на долю секунды (до полной загрузки страницы), после чего второе изображение скроется. Далее они буду подменять друг друга при наведении курсора мыши:
Код CSS - не требуется
Код jQuery -
Спойлер
[свернуть]

Оба метода имеет свои небольшие недостатки.
В первом случае пока не загрузится страница изображения не будут видны, и, если вдруг у пользователя не будет javascript работать, то он не увидит никакое изображение, правда в этом случае и магазин работать не будет :)
Во втором случае, пусть и очень короткое время, но все же пользователь будет видеть оба изображения сразу.
Лично мне больше нравится первый вариант :)
Пример работы для Alienoff http://pvi.spb-ies.ru/water.html

Правда, в оба способа надо бы добавить проверку на количество изображений, иначе, если изображение будет в количестве адын штук, то при наведении курсора оно исчезнет...  
Вот немного доработанный код с проверкой:
Код CSS - не требуется
Код jQuery -
Спойлер
[свернуть]
« Последнее редактирование: 22.02.2013, 01:53:21 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

rudoy24

  • ***
  • 31
  • 1
Brooksus -- огромная благодарность в помощи по реализации данной задачи. Это именно то что нужно было реализовать и Вам это удалось на 100% , причем что не мало важно, без видоизменений в коде движка самого компонента JoomShopping, что в свою очередь дает возможность безпрепятственно его обновлять!

:)
« Последнее редактирование: 21.02.2013, 23:33:02 от rudoy24 »

*

Alienoff

  • ***
  • 181
  • 0
Спасибо. Добавил в репу...
А нереально сделать так, чтобы сразу как обычно одна картинка грузилась на лицо?
Я так понимаю, что если на странице много товаров и картинки достаточно большие, то по две картинки будут висеть достаточно долго?

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Спасибо. Добавил в репу...
А нереально сделать так, чтобы сразу как обычно одна картинка грузилась на лицо?
Я так понимаю, что если на странице много товаров и картинки достаточно большие, то по две картинки будут висеть достаточно долго?
Нет ничего нереального :), но я, вы уж простите, пока не буду этим заниматься. А картинки - это миниатюры, а не полноразмерные изображения, поэтому, если они у вас не сделаны гигантского размера, то сильно нагружать не будут.
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

HEKTO

  • **
  • 11
  • 0
То должно получиться примерно так http://pvi.spb-ies.ru/cars.html

Спасибо за предложенный вариант! Но у меня не работает :(... Конечно, просто сделал замену кода. И при переходе на категорию у меня выдает ошибку грузится пустая страница с выбором категорий и кол-ом отображаемого товара.
Полагаю в этой строчке: ($Query = ...) необходимо прописать нужные значения (или я дурак, и в этой строчке все то, что нужно)? Пожалуйста, можете пояснить код, а именно как именно он работает? За ранее благодарен за ответы!
« Последнее редактирование: 17.09.2013, 23:59:30 от nevigen »

*

nevigen

  • *****
  • 8832
  • 754
  • http://n*****n.com
2 некто

цитируйте суть, а не полные сообщения.
учитесь манерам и читайте правила форума
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
В последних версиях JoomShopping разработчики что-то поменяли в логике вывода изображений. Может быть именно в этом причина... Проверю...

Проверил. Работает (просто вставил код заменой).
« Последнее редактирование: 19.09.2013, 02:08:18 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

HEKTO

  • **
  • 11
  • 0
nevigen - сей урок понял. Извиняюсь!
Brooksus - странно, почему у меня не цепляет. Буду смотреть дальше. Спасибо большое!

*

denben777

  • ***
  • 157
  • 75
JS4(Joomla 3):
Код
<div class="three_img">
<?php
$jshopConfig = JSFactory::getConfig();
$db = JFactory::getDBO();
$Query = "SELECT image_name FROM #__jshopping_products_images WHERE product_id = {$product->product_id} LIMIT 3";
$db->setQuery($Query);
$prodimg = $db->loadObjectList();

if (count($prodimg)){
foreach($prodimg as $primg) {
print "<a title='{$product->name}' class='screenshot lightbox' href='{$product->product_link}'>";
print "<img src='{$jshopConfig->image_product_live_path}/thumb_{$primg->image_name}'/></a>";
}
}
else {
print "<a href='{$product->product_link}'><img src='{$jshopConfig->image_product_live_path}/noimage.gif'/></a>";
}
?>
</div>

*

koshsh

  • ****
  • 278
  • 8
Все работает, однако, есть вопрос касательно порядка вывода картинок, поидее главная картинка товара должна быть первой, а последующая второй, но скрипт выводит картинки расставляя их как попало.
Как это профиксить?

______________________________________
Рядом ставлю стандартный <img src="<?php print $product->image?>" alt="">
а в скрипте указываю "LIMIT 1", результат получается разный хотя по идее должен быть одинаковый, это только у меня так или никто не заметил?
« Последнее редактирование: 30.10.2013, 22:42:51 от koshsh »

*

denben777

  • ***
  • 157
  • 75
... но скрипт выводит картинки расставляя их как попало...
Проверил не один товар - выводит все согласно порядка админ-панели. Limit убран.

Скриншот настроек последнего добавленного товара в админке
(этот же товар первый в модуле "Новые товары" на Главной странице - кликните по иконке в центре фото товара):

 

Ссылка на страницу с примером.

*

koshsh

  • ****
  • 278
  • 8
Спасибо denben777
Я все операции проводил с уже имеющимися товарами в каталоге, там почемуто порядок товаров был как попало, однако при создании нового товара все отлично, поэтому я снес все товары и залил их заново, теперь все в нужном порядке, еще раз спасибо!

*

lvitalij

  • ***
  • 39
  • 3
  • Осваиваюсь на форуме
Brooksus, супер решение. На престе похожее делал, но там было куда подсматривать. а тут респектище в общем, в репу плюсище

*

lvitalij

  • ***
  • 39
  • 3
  • Осваиваюсь на форуме
Кстати, еще этот Код jQuery надо добавить в related.php, а то сопутствующие товары выводят по два фото сразу

Использовал первый метод Brooksus  с поправкой версии JS 4.1 от denben777, картинки подтягиваются, но их не видно если использовать
Код
a.screenshot img{display:none;}
, если не использовать у одного товара все нормально у остальных показываются остальные фото одновременно. Возможно ли это из-за вывода атрибутов в списке товаров?