Можно Ли Сделать Увеличение Фото Категорий Товаров
#1
Отправлено 31 Январь 2014 - 13:56
1. Подскажите, можно ли сделать увеличение фото категорий товаров при наведении курсора или по клику на избражение ( только отображение без дополнительной отдельной вкладки) и добалять несколько фото для просмотра именно фото самой категории до входа в саму катрочку товара. Планируем магазин керамической плитки, на фото категории будет представлен возможный интреьер, а при входе в данную категорию будут уже представлены товары, из которых состоит данный интерьер Получается основное фото представлено в категории, а фото в карточке товаров уже не так информативно, сейчас как вариант просто в качесте товара добаляю фото интрьеров чтобы их можно было просмотреть при увеличении.
2. Можно ли вообще закрыть просмотр товаров в виде списка , оставив только в табличной форме. По карточке товара убрать кнопку подробнее, т.е. никаких характеристик не будет, а это будет покупателей немного отвлекать, а добавить возможность выводить на странице товара дополнительные характеристики- например размер, и т.д.
3. Убрать кнопку сортировки при просмотре карточки товаров. Заранее спасибо за ответы.
#2
Отправлено 31 Январь 2014 - 14:50
алексколомна (31 Январь 2014 - 13:56) писал:
1. Подскажите, можно ли сделать увеличение фото категорий товаров при наведении курсора или по клику на избражение ( только отображение без дополнительной отдельной вкладки) и добалять несколько фото для просмотра именно фото самой категории до входа в саму катрочку товара. Планируем магазин керамической плитки, на фото категории будет представлен возможный интреьер, а при входе в данную категорию будут уже представлены товары, из которых состоит данный интерьер Получается основное фото представлено в категории, а фото в карточке товаров уже не так информативно, сейчас как вариант просто в качесте товара добаляю фото интрьеров чтобы их можно было просмотреть при увеличении.
2. Можно ли вообще закрыть просмотр товаров в виде списка , оставив только в табличной форме. По карточке товара убрать кнопку подробнее, т.е. никаких характеристик не будет, а это будет покупателей немного отвлекать, а добавить возможность выводить на странице товара дополнительные характеристики- например размер, и т.д.
3. Убрать кнопку сортировки при просмотре карточки товаров. Заранее спасибо за ответы.
1) Инструкция - http://forum.storela...__20#entry86532
3) Убрать сортировку можно в Настройках - Основных
#3
Отправлено 01 Февраль 2014 - 11:26
1.Меня интересует увеличение изображения, которое прикреплено к категории товаров ( Например в плитке для ванны и стен, серзанит, релах - интересует возможность увеличения именно этой картинки, до входа в категорию товаров).
2. Сделал увеличение при наведении кртинки как Вы написали, в принципе, понравилось такая возможность, но есть вопрос- можно ли при просмотре табличного варианта как-то задавать расположение картинки относительно экрана монитора, а не относительно картинки ( самые левые картинки отображаются нормально, а если открывать самые правые то изображение съезжант за экран).
3.Можно ли сделать увеличение картинки простым кликом на фоне в карточке товаров, не заходя в карточку подробнее, где потом можно сделать увеличение картинки кликом ( т.е. анологично, но находясь в табличной форме товаров)
4. Так и не ответили- можно ли убрать просмотр списком и возможность входить в карточку товаров через кнопку подробнее.
Заранее благодарен.
#4
Отправлено 01 Февраль 2014 - 11:33
#5
Отправлено 05 Февраль 2014 - 08:41
#6
Отправлено 05 Февраль 2014 - 16:08
алексколомна (05 Февраль 2014 - 08:41) писал:
Увеличение изображения каталога при наведении
Редактируем шаблон Товары
Находим 40-42 строку
<div class="img txtalgncnt"> <a href="{nested_categories_list.URL}" title="Перейти на страницу &laquo;{nested_categories_list.NAME}&raquo;"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a> </div>
Заменить на
<div class="img txtalgncnt"> <div class="prd-image"> <a href="{nested_categories_list.URL}" title="{nested_categories_list.NAME}" class="product_img_link"> <img class="product_image" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}" alt="{nested_categories_list.NAME}" /> </a> <div class="goods_images_list"> <div style="display: none;"><img src="{nested_categories_list.IMAGE_MEDIUM}" alt="{nested_categories_list.NAME}" /></div> </div> </div> </div>
Редактируем main.css
Находим
.goods_images_list > div { display: none; position: absolute; z-index: 100; background: #FFFFFF; border: 3px solid #CCCCCC; border-radius: 4px; left: -208px; padding: 2px; top: -35px; max-height: 512px; max-width: 750px; }
Заменяем на
.goods_images_list > div { display: none; position: absolute; z-index: 100; background: #FFFFFF; border: 3px solid #CCCCCC; border-radius: 4px; padding: 2px; top: -15px; max-height: 300px; max-width: 400px; }
4. Убираем товары списком.
Редактируем шаблон Товары
Находим 152 строку
{% IF GOODS_VIEW_TYPE=1 %}Заменяем на
{% IF GOODS_VIEW_TYPE=2 %}
Если вы хотите полностью удалить вывод списком, то находим и удаляем
<ul> {% IF GOODS_VIEW_TYPE=1 %} <li><a href="?goods_view_type=2" class="table"></a></li> <li><a href="?goods_view_type=1" class="list current"></a></li> {% ENDIF %} {% IF GOODS_VIEW_TYPE=2 %} <li><a href="?goods_view_type=2" class="table current"></a></li> <li><a href="?goods_view_type=1" class="list"></a></li> {% ENDIF %} </ul>
Удаляем
<!-- Вывод каталога списком --> {% FOR goods %} <div class="hr"></div> <div class="box padd"> <div class="titlebox txtalgnlft"> <ul> <li class="blue fnt11b"> <h2><a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"> {% IF goods.MAX_REST_VALUE=0 %}{% ENDIF %} {% IF goods.MAX_REST_VALUE>0 %}{% ENDIF %} </a></h2> </li> <li class="default fnt12b "><a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">{goods.NAME}</a></li> </ul> </div> <div class="ulproduct"> <div class="img txtalgncnt"> <div class="prd-image"> <a href="{goods.URL | url_amp}" title="{goods.NAME}" class="product_img_link"> <img class="product_image" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /> </a> <div class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div> </div> </div> <div class="infoproduct"> <div class="name fnt14b"> <a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">{goods.NAME}</a> </div> <div class="info fnt11n txtalgnlft"> {goods.DESCRIPTION_SHORT} </div> <div class="buttons"> {% IF goods.MAX_REST_VALUE>0 %} <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <div> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> <a class="whtgray" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину">Купить сейчас</a> <a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a> </div> </form> {% ENDIF %} {% IF goods.MAX_REST_VALUE=0 %}<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>{% ENDIF %} </div> <div class="price fnt12b txtalgnlft"> Цена: {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <span>{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | number_format("0", ",", " ")}</span> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <span>{goods.MIN_PRICE_OLD | number_format("0", ",", " ")}</span> {% ENDIF %} <em class="fnt12b">{goods.MIN_PRICE_NOW | money_format}</em> </div> </div> <div class="clear"></div> </div> </div> {% ENDFOR goods %} <!-- Вывод каталога списком-Конец --> {% ELSE %}
Если вы хотите просто скрыть режим отображения то редактруем main.css
Находим
#content .cort .right { float: right; margin: 2px 0 0 0; }
Заменяем на
#content .cort .right { float: right; margin: 2px 0 0 0; display:none; }
Сортировку можно скрыть, а в настройках выбрать один вид сортировки
Отключаем отображение сортировки
Редактируем main.css
Находим
#content .cort .left { float: left; color: #999; }
Заменяем на
#content .cort .left { float: left; color: #999; display:none; }
Если какие то вопросы остались без ответа, напишите их еще раз.
#7
Отправлено 05 Февраль 2014 - 21:40
#8
Отправлено 06 Февраль 2014 - 10:34
1. По увеличению каталога. Первый раз сделал, как вы написали- получилось сделать увеличение фото в корне каталога ( плитка для ванны, плитка для пола и т.д.) -увеличивалось нормально, но единственное изображение получалось расплывчатым( сечас фото почему то маленькое).
НО- меня интересует возможность увеличения только последнего фото непосредственно перед переходов к товарам -
в моем случае это фото в категории Церзанит - RELAX и Deep Blue( хочу увеличенный просмотр именно здесь), т.к. на фотографии отображаются сочетания товаров, которые будут в карточке.
И можно ли сделать увеличение кликом (чтоб изображение окрывалось на нейтральном фоне и по центру экрана по аналогии в таблице товаров, подробнее, увеличить изображение), а не наведением курсора. И последнее - можно ли сделать возможность прикрепления нескольких фото интерьеров к уже имеющимся RELAX и Deep Blue.
#9
Отправлено 06 Февраль 2014 - 10:47
#10
Отправлено 07 Февраль 2014 - 04:15
#11
Отправлено 07 Февраль 2014 - 10:49
#12
Отправлено 10 Февраль 2014 - 09:48
#13
Отправлено 12 Февраль 2014 - 18:28
<!-- Вывод информации из категории католога --> {% IF CATEGORY_DESCRIPTION %} <div class="headline"> <div class="main"> <div class="text fnt12n htmlDataBlock"> <!-- Описание категории --> {CATEGORY_DESCRIPTION} </div> </div> </div> {% ENDIF %} <!-- Вывод информации из категории католога-Конец -->
и перенести его ПЕРЕД кодом
<!-- Товары --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров -->
#14
Отправлено 12 Февраль 2014 - 18:39
#15
Отправлено 13 Февраль 2014 - 00:59
#16
Отправлено 13 Февраль 2014 - 10:03
1. По теме, которая уже обсуждалась на форуме и имеет инструкции: http://forum.storela...ть-изображение . Принцип увеличения такой как нужен, но при использовании данных кодов все разошлось, пропали фото категории, пишет ошибку, таб. и список все сразу. Мне нужно увеличение картинки товара в табличной форме простым кликом- вывод списком у меня отключен. ( а кнопку подробнее вообще убрать, чтоб заказы делали только из таблицы, чтоб не было возможности к переходу карточки подробнее). Сейчас увеличение товаров происходит при наведении курсора, но не нравиться, что изображение смещается относительно расположения увеличиваемого фото и параметры изображения меняются (Картинки есть как вертикально ориентированные, так и горизонтальны- сильно искажается). Извиняюсь, если недостаточно корректно формулирую свои пожелания... +
2. Возможно ли сделать увеличение кликом фото категорий товаров (Плитка для ванны, церзанит - пошли много фото коллекций производителя, что была возможность увеличения изображения при нажатии на картинку или лупу.
3. Хочу увеличить фото категории товаров ( Плитка для ванны, Церзанит - пошло много фото колллекции).Чтоб они были чуть крупнее. Размер фото 800X533. Через настройки делаю разрешение для изображения фото категорий товаров и 600, и 800 - но место по краям еще остается- может максимальны размер картинки прописан еще где. Как их можно еще увеличить????
Буду признателен за помощь.
#17
Отправлено 13 Февраль 2014 - 10:26
в файле main.js найти строку кода
// Сравнение товаров. Инвертирование свойств для сравнения товара
ПЕРЕД ней добавить код
$('.fancy').fancybox();
далее в описании категории добавить следующий блок
<a class="fancy" href="тут ссылка на большое изображение_1"><img alt="iPhone" src="тут ссылка на маленькое изображение_1"> </a> <a class="fancy" href="тут ссылка на большое изображение_2"><img alt="iPhone" src="тут ссылка на маленькое изображение_2"> </a>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных