Не зарегистрирован
Вход
Забыли пароль?
Регистрация
Подписаться
Сэкономьте время — перед вопросом на форуме узнайте, как найти ответ быстрее
По техническим проблемам необходимо обращаться в Консультационный центр

Поиск по форуму: 

Приглашаем в блог Amiro.CMS. Регулярные обзоры, опыт, решения, практикумы.

Форум  ->   Интернет Магазин  ->  Оформление выбора цвета товара

Вопросы по настройке магазина, каталога.

Добавлено: 19.11.14 15:37:18 #1




Регистрация: 14.11.14
Сообщений: 9


Обратиться по имени

Сделал выбор цвета товара как показано здесь:
http://manual.amiro.ru/faq#q554

+ чуть чуть изменил css изображений цвета и получилось вот что:


выбор цвета товара отображается в один столбец

Подскажите пожалуйста, как сделать:
1. чтобы выбор цвета товара отображался в 3 ровных столбца? (на крайний вариант как сделать так, чтобы выбор цвета отображался двумя строками или одной строкой?)
2. чтобы при наведении на изображение цвета всплывало изображение большего размера, то которое изначально добавляется в справочник?



Добавлено: 21.11.14 06:33:40 #2




Регистрация: 11.06.13
Сообщений: 404


Обратиться по имени

1. Нужно css стили настраивать. Покажите адрес страницы этого товара

2. JS можно написать, который будет вытаскивать из атрибута data-ami-mbpopup
картинки, на которую вы навели курсор, адрес увеличенной картинки и создавать
popup.



Если я вам помог, ставьте палец вверх ;)
Добавлено: 21.11.14 18:46:30 #3




Регистрация: 14.11.14
Сообщений: 9


Обратиться по имени

1. страничка товара: http://www.kstatimebel.ru/katalog/products/prihojie/obuvnicy/obuvnicy-serii-20143/shkaf-dlja-obuvi-almira-52
2 столбца нужно, чтобы изображение цвета товара вставить побольше чем 35 пикселей

2. а про яваскрипт можно поподробнее?

P.S. Ещё есть проблема, она отображается на этой же страничке товара.
Всплывающее изображение картинки в описании этого товара имеет большой размер и всплывает справа - так что если картинка в описании товара находится близко к "краю странички" - оно всплывает как-бы за "краем странички" уже в бэкграунде
Как сделать, чтобы оно было меньше (как к нему цсс применить?) и в таких случаях не залезало за "край странички"?



Добавлено: 21.11.14 19:42:20 #4

Партнер



Регистрация: 13.08.12
Сообщений: 41


Обратиться по имени

killaxe, готового решение я вам не подскажу, но если вам интересна настройка, как мы делали на данном сайте, то вы можете написать нам.



Добавлено: 22.11.14 17:14:24 #5




Регистрация: 14.11.14
Сообщений: 9


Обратиться по имени

cmall:
killaxe, готового решение я вам не подскажу, но если вам интересна настройка, как мы делали на данном сайте, то вы можете написать нам.

Да, мне интересно, как вы сделали такую настройку отображения цвета товара!

Расскажите, пожалуйста, как вы это сделали?
Ну или на какую почту кому писать?

Я увидел что у вас на страничке отсутствует тег <fieldset> в выборе цвета товара:
<div class="prop_wrapper" style="width: 160px;"><label class="propValue active" data-propindex="0" data-propvalue="Бук"><input type="radio" name="prop_radio_0" class="propValue__radio" checked="checked"><img src="http://www.bormebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fldsp_buk_elegija_300x300.jpg&amp;src=___gen=1|mod=eshop_reference|id=9|type=picture|lang=ru|refnum=23" title="Бук"><div class="propValue__title">Бук</div></label><label class="propValue" data-propindex="0" data-propvalue="Вишня"><input type="radio" name="prop_radio_0" class="propValue__radio"><img src="http://www.bormebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fvishnja_300x226.jpg&amp;src=___gen=1|mod=eshop_reference|id=2|type=picture|lang=ru|refnum=23" title="Вишня"><div class="propValue__title">Вишня</div></label></div>

У меня на страничке он присутствует и внутри этого тега между тегами <label> автоматически вставляется тег <br>, что и мешает нормально работать свойству float, примененному к разным label:
<nobr id="ami-eshop-properties__wrapper">
    <fieldset class="eshop-item-properties" id="itemD_property_0" name="property_0"><legend class="eshop-item-properties__header" title="Выберите другой">Цвет товара</legend>
<input name="itemD_property_0" id="fieldset_itemD_property_0_radio_0" type="radio" value="Белый<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fbelyi_1_60x60.jpg&amp;src=___gen=1|mod=eshop_reference|id=10|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio">
<label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_0">Белый<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fbelyi_1_60x60.jpg&amp;src=___gen=1|mod=eshop_reference|id=10|type=picture|lang=ru|refnum=10" title="" alt=""></label>
<br>
<input name="itemD_property_0" id="fieldset_itemD_property_0_radio_1" type="radio" value="Бук<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-381-beech-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=2|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio">
<label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_1">Бук<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-381-beech-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=2|type=picture|lang=ru|refnum=10" title="" alt=""></label>
<br>
<input name="itemD_property_0" id="fieldset_itemD_property_0_radio_2" type="radio" value="Венге+Клён<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fvenge-klen_60x59.jpg&amp;src=___gen=1|mod=eshop_reference|id=9|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio"><label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_2">Венге+Клён<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fvenge-klen_60x59.jpg&amp;src=___gen=1|mod=eshop_reference|id=9|type=picture|lang=ru|refnum=10" title="" alt=""></label>
<br>
<input name="itemD_property_0" id="fieldset_itemD_property_0_radio_3" type="radio" value="Венге<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-2227-wenge-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=3|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio"><label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_3">Венге<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-2227-wenge-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=3|type=picture|lang=ru|refnum=10" title="" alt=""></label><br><input name="itemD_property_0" id="fieldset_itemD_property_0_radio_4" type="radio" value="Вишня<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-088-cherry-oxford-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=4|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio"><label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_4">Вишня<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-088-cherry-oxford-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=4|type=picture|lang=ru|refnum=10" title="" alt=""></label><br><input name="itemD_property_0" id="fieldset_itemD_property_0_radio_5" type="radio" value="Дуб сонома<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fsonoma-big_60x60.jpg&amp;src=___gen=1|mod=eshop_reference|id=6|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio"><label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_5">Дуб сонома<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fsonoma-big_60x60.jpg&amp;src=___gen=1|mod=eshop_reference|id=6|type=picture|lang=ru|refnum=10" title="" alt=""></label><br><input name="itemD_property_0" id="fieldset_itemD_property_0_radio_6" type="radio" value="Клён<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-375-maple-natural-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=5|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio"><label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_6">Клён<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-375-maple-natural-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=5|type=picture|lang=ru|refnum=10" title="" alt=""></label><br><input name="itemD_property_0" id="fieldset_itemD_property_0_radio_7" type="radio" value="Орех<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-722-walnut-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=7|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio"><label class="eshop-item-properties__label" for="fieldset_itemD_property_0_radio_7">Орех<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-722-walnut-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=7|type=picture|lang=ru|refnum=10" title="" alt=""></label><br><input name="itemD_property_0" id="fieldset_itemD_property_0_radio_8" type="radio" value="Яблоня<img class=&quot;eshop-item-detailed__img2&quot; src=&quot;http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-1972-apple-locarno-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=8|type=picture|lang=ru|refnum=10&quot; title=&quot;&quot; alt=&quot;&quot; />" class="eshop-item-properties__radio" checked=""><label class="eshop-item-properties__label eshop-item-properties__label_visited" for="fieldset_itemD_property_0_radio_8">Яблоня<img class="eshop-item-detailed__img2" src="http://www.kstatimebel.ru/show_pic.php?sname=_mod_files%2Fce_images%2Feshop%2Fgenerated%2Fd-1972-apple-locarno-0_fancybox_60x39.jpg&amp;src=___gen=1|mod=eshop_reference|id=8|type=picture|lang=ru|refnum=10" title="" alt=""></label><br></fieldset></nobr>



Добавлено: 23.11.14 10:51:50 #6




Регистрация: 14.07.08
Сообщений: 1127


Обратиться по имени

killaxe, вывод подвидов сделан на JS, поэтому переписывать нужно именно его, как и написал выше Helper



Разработка мобильной версии сайта с сохранением дизайна и позиций в поиске
Добавлено: 23.11.14 17:10:57 #7




Регистрация: 14.11.14
Сообщений: 9


Обратиться по имени

@Дмитрий:
killaxe, вывод подвидов сделан на JS, поэтому переписывать нужно именно его, как и написал выше Helper

Вот на этом сайте вывод подвидов сделан с помощью JS?

Или вообще в любом стандартном интернет-магазине на Amiro вывод подвидов товара делается с помощью JS?

Helper написал, что можно сделать,написав JS, всплывающее изображение, появляющееся при наведении на картинку цвета подвида товара. Это же вроде чуть-чуть про другое?

Объясните, как строится вот здесь кусочек странички товара, где выводятся подвиды товара? Если за это отвечает JS, то где он лежит?
Или подскажите хотябы, как заменить на этой же страничке
вот этот тег:
<fieldset class="eshop-item-properties" id="itemD_property_0" name="property_0">*блаблаблабла*</fieldset>

на какой-либо другой с тем же содержанием внутри.
Откуда там берется именно филдсет и теги внутри него - я вот этого не понимаю.



Добавлено: 23.11.14 17:52:33 #8




Регистрация: 14.07.08
Сообщений: 1127


Обратиться по имени

И на примере и на вашем сайте все сделано на JS, который находится в папке _shared/code/js и называется ami.eshop.properties.js , но ваш сайт находится на хостинге Амиро, поэтому до этой папки вы не доберетесь, но его можно взять по этой ссылке http://www.kstatimebel.ru/amiro_sys_js.php?script=system|filter|api|common и нужный объект/функцию переопределить в common.js



Разработка мобильной версии сайта с сохранением дизайна и позиций в поиске
Добавлено: 23.11.14 19:51:40 #9

Партнер


Регистрация: 22.02.09
Сообщений: 468


Обратиться по имени

killaxe:
Или подскажите хотябы, как заменить на этой же страничке
вот этот тег
Если нужно именно заменить тег, то нужно переопределять JS объект AMI.Eshop.Properties. Где и как это делается - уже написал @Дмитрий.
Однако если требуется просто настройка внешнего вида без изменения логики работы, то можно обойтись настройкой этих тегов через стили - тот же тег fieldset не заменять, а настроить его вид или убрать перенос строки - тег <br> через display:none;



Добавлено: 29.11.14 05:07:21 #10




Регистрация: 14.11.14
Сообщений: 9


Обратиться по имени

Evgeney S.:
killaxe:
Или подскажите хотябы, как заменить на этой же страничке
вот этот тег
Если нужно именно заменить тег, то нужно переопределять JS объект AMI.Eshop.Properties. Где и как это делается - уже написал @Дмитрий.
Однако если требуется просто настройка внешнего вида без изменения логики работы, то можно обойтись настройкой этих тегов через стили - тот же тег fieldset не заменять, а настроить его вид или убрать перенос строки - тег через display:none;


1. С JS у меня полная беда. Поэтому решил не изменять логику работы скрипта.
Остановлюсь на варианте применения к тегу <br> свойства display:none;.
Подскажите, как это сделать? У этого тега ведь нет ни id ни css отдельного
2. А что делать с всплывающим изображением при наведении на картинку в описании товара? Оно появляется исходного здоровенного размера и совершенно не в том месте страницы, где его хочется видеть! Хотелось бы чтобы оно всплывало в нужном месте страницы и его размер хоть как-то регулировался бы.
3. И в связи с пунктом 1 моего списка хотелось бы понять, как написать JS, который будет:
вытаскивать из атрибута data-ami-mbpopup
картинки, на которую вы навели курсор, адрес увеличенной картинки и создавать
popup. ?

JS для меня, как язык Мордора, практически.
Я кажется понял, что JS может работать с объектами и их свойствами (атрибутами?). И что data-ami-mbpopup - это атрибут некоторого изображения которое является частью объекта AMI.Eshop.Properties (блока с подвидами товаров). Кажется, popup - это должен быть некоторый создаваемый скриптом объект в который запихивается картинка, так же как картинки запихиваются в AMI.Eshop.Properties . Вот большая часть того, что я понял.



Добавлено: 01.12.14 10:24:47 #11




Регистрация: 11.06.13
Сообщений: 404


Обратиться по имени

1. Если я про те <br> понял, то
.eshop-item-properties > br {
display: none;
}

2. Я бы настроил CSS и JS, чтобы учитывалось положение курсора, и размер экрана.
Но наверное проще прикрутить сторонний скрипт для этого.
Например: http://www.jacklmoore.com/zoom/
их много, какой выбрать уже вам решать.

3. Примерно так:
<style>
.eshop-item-detailed__popup-link {
position: relative;
}

.eshop-item-detailed__img_popup {
position: absolute;
left: -50%;
bottom: 0px;
}
</style>

<script>
$(document).ready(function() {

    $(".eshop-item-detailed__img";).mouseenter(function() {
        var popup_img_src = $(this).attr('data-ami-mbpopup';);
        $(this).parent().append('<img class="eshop-item-detailed__img_popup" src="' + popup_img_src + '"/>';);
    });

    $('.eshop-item-detailed__popup-link';).on('mouseleave', '.eshop-item-detailed__img_popup', function(e){
        $(this).remove();
    });

});
</script>


Если решили сами писать, то стоит разобраться в основах JS/jQuery.



Если я вам помог, ставьте палец вверх ;)


Создать новую тему

Всего тем: 6630
Всего сообщений: 27746
Всего зарегистрированных пользователей: 48913
Последний зарегистрированный пользователь: user52029783