Автор Тема: Вывод уменьшенных фото товара на мобильной версии сайта?  (Прочитано 80 раз)

28 Июль 2017, 11:30:27
  • Старожил
  • ****
  • Сообщений: 324
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Необходимо сделать вывод уменьшенных фото товаров на стр каталога (210*210), и карточке товара (415*415)
для мобильной версии сайта с целью уменьшения веса страницы.

Подскажите с чего начать?
28 Июль 2017, 11:33:22
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86543
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Измените размеры изображений в админке, перегенерируйте миниатюры изображений.
28 Июль 2017, 11:38:19
Ответ #2
  • Старожил
  • ****
  • Сообщений: 324
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Измените размеры изображений в админке, перегенерируйте миниатюры изображений.

Хорошо будут у меня миниатюры изображений.

У как указать чтобы для мобильной версии в карточке товара были фото 415x415,
а например для десктопной версии 800x800.

Какой признак необходимо учитывать в шаблоне .tpl, при создании ссылок на фото?

Как определить ширину экрана пользователя?
28 Июль 2017, 12:47:34
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 21057
  • Репутация: +25282/-0
  • Prestashop - просто и эффективно
    • Просмотр профиля
У как указать чтобы для мобильной версии в карточке товара были фото 415x415,
а например для десктопной версии 800x800.
Создать новый формат изображений.
Создать шаблоны, стили для мобильной версии темы в папке  /themes/default-bootstrap/mobile/... В них для картинок использовать новый формат.
В шаблоных темы использовать переменные isMobile (для javascript) или $mobile_device (для tpl) для подключения разных шаблонов в зависимости от устройств.

Какой признак необходимо учитывать в шаблоне .tpl, при создании ссылок на фото?
Нет особых "признаков" для ссылок. Методы классов одинаковые для всех версий сайта.

Как определить ширину экрана пользователя?
$(window).width / height...или
@media (max-width: ...px)
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
28 Июль 2017, 13:06:50
Ответ #4
  • Старожил
  • ****
  • Сообщений: 324
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо за ответ!

Я правильно понимаю, что для карточки товара необходимо переписать в папку /themes/default-bootstrap/mobile/
шаблон product.tpl и изменить в нём пути на новый формат изображения?
28 Июль 2017, 13:24:00
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 3066
  • Репутация: +72/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Темы делают с адаптивной версткой, для мобильных ненужно создать разные шаблоны. Все делается в одном файле
{if isMobile} для мобильника {else} для десктопа
28 Июль 2017, 13:42:12
Ответ #6
  • Старожил
  • ****
  • Сообщений: 324
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Темы делают с адаптивной версткой, для мобильных ненужно создать разные шаблоны. Все делается в одном файле
{if isMobile} для мобильника {else} для десктопа

На карточке товара вывожу
{if isMobile}1234{else}2456{/if}

Смотрю на экране ПК, вижу 1234
Почему?
28 Июль 2017, 13:52:53
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 14167
  • Репутация: +14571/-2
  • Сообщество PrestaShop
    • Просмотр профиля
Вообще-то должно ошибку показать. Вы используете переменную js вместо шаблоной переменной. Кеширование отключите, должно показывать ошибку.
28 Июль 2017, 13:57:57
Ответ #8
  • Старожил
  • ****
  • Сообщений: 324
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вообще-то должно ошибку показать. Вы используете переменную js вместо шаблоной переменной. Кеширование отключите, должно показывать ошибку.

Кеш отключен.

В контроле должно быть что то вроде этого??
$this->context->smarty->assign('isMobile', $this->context->getMobileDevice());
28 Июль 2017, 14:44:46
Ответ #9
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22323
  • Репутация: +17114/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
Зависит от версии prestashop. mobile_device не во всех версиях определена. В FrontController.php нужно смотреть.
Для prestashop последних версий
{if isset($mobile_device) && $mobile_device}
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
28 Июль 2017, 15:22:00
Ответ #10
  • Старожил
  • ****
  • Сообщений: 324
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Заработало у меня следующим образом:
на примере карточки товара

В ProductController.php добавил
require_once(_PS_TOOL_DIR_.'mobile_Detect/Mobile_Detect.php');
$mobile_detect = new Mobile_Detect();
$mob = ($mobile_detect->isMobile()) ? 1 : 2;

в $this->context->smarty->assign(array(добавил
'mob' => $mob,
Далее в шаблоне карточки товара product.tpl добавил:
{if $mob == 1} {assign var=large value="thickbox_default_new"} {else} {assign var=large value="large_default"} {/if}
Ну и для вывода самого изображения:
<img id="thumb_{$image.id_image}" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $imageIds, $large)|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" />
Как то так...

Варианты с:
{if isset($mobile_device) && $mobile_device}и
{if isMobile} для мобильника {else} для десктопане работают...

P.S. 1.6.1.4
28 Июль 2017, 16:27:22
Ответ #11
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 105597
  • Репутация: +39548/-0
    • Просмотр профиля
    • Webstudio UwK
В ProductController.php добавил
require_once(_PS_TOOL_DIR_.'mobile_Detect/Mobile_Detect.php');
$mobile_detect = new Mobile_Detect();
$mob = ($mobile_detect->isMobile()) ? 1 : 2;

в $this->context->smarty->assign(array(добавил
'mob' => $mob,
Метод getMobileDetect опеределен в классе Context его можно использовать в других классах (контроллерах)
$this->context->getMobileDetect();
mobile_device не для определения мобильного устройства. Для того чтобы определить с какого устройства вошел посетитель используйте метод isMobile() класса Context.
'mob' => $this->context->isMobile(),
Cоздание интернет сайтов Webstudio UwK