Сообщений в теме: 5

[vanyushka]

Здравствуйте!

В новом шаблоне Весна, в каталоге товаров, при наведении на фотографию товара снизу выдвигается поле, где можно выбрать некоторые действия. Я бы хотел реализовать то же самое в Мокко, но чтобы там была одна единственная кнопка "положить в корзину". Возможно ли такое сделать?

[sengun]

ipodushkin (28 Март 2014 - 20:23) писал:

Здравствуйте!

В новом шаблоне Весна, в каталоге товаров, при наведении на фотографию товара снизу выдвигается поле, где можно выбрать некоторые действия. Я бы хотел реализовать то же самое в Мокко, но чтобы там была одна единственная кнопка "положить в корзину". Возможно ли такое сделать?

Здравствуйте.
Давайте попробуем.
В шаблоне main.css замените

.goodsListItemBlock				 {height:300px;margin:5px;overflow:hidden;}

на такой код

.goodsListItemBlock				 {height:300px;margin:5px;overflow:hidden; position: relative;}

а в конец добавьте такой код

.slide_button {background: rgba(0,0,0,0.5); height: 50px; width: 100%; position: absolute; bottom: -100px; display: table;}
.slide_button form {display: table-cell; vertical-align: middle;}

В шаблоне "Товары" добавьте код

			 <div class="slide_button">
				 <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}" />
					 <input type="submit" 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; в корзину" value="Положить в корзину">
				 </div>
				 </form>
			 </div>

после кода

			 <div class="goodsListItemPriceOld">
				 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
					 <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
				 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
					 <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
				 {% ENDIF %}
			 </div>

и в конец main.js добавьте

$(document).ready(function(){
$('.goodsListItemBlock').hover(
function(){
	 $(this).find('.slide_button').animate({'bottom' : '0px'}, 500);
},
function(){
	 $(this).find('.slide_button').animate({'bottom' : '-50px'}, 500);
}
);
});

[vanyushka]

sengun (28 Март 2014 - 21:01) писал:

Здравствуйте.
Давайте попробуем.
В шаблоне main.css замените

.goodsListItemBlock				 {height:300px;margin:5px;overflow:hidden;}

на такой код

.goodsListItemBlock				 {height:300px;margin:5px;overflow:hidden; position: relative;}

а в конец добавьте такой код

.slide_button {background: rgba(0,0,0,0.5); height: 50px; width: 100%; position: absolute; bottom: -100px; display: table;}
.slide_button form {display: table-cell; vertical-align: middle;}

В шаблоне "Товары" добавьте код

			 <div class="slide_button">
				 <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}" />
					 <input type="submit" 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; в корзину" value="Положить в корзину">
				 </div>
				 </form>
			 </div>

после кода

			 <div class="goodsListItemPriceOld">
				 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
					 <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
				 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
					 <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
				 {% ENDIF %}
			 </div>

и в конец main.js добавьте

$(document).ready(function(){
$('.goodsListItemBlock').hover(
function(){
	 $(this).find('.slide_button').animate({'bottom' : '0px'}, 500);
},
function(){
	 $(this).find('.slide_button').animate({'bottom' : '-50px'}, 500);
}
);
});

Все сделал, но ничего на сайте не изменилось. Может надо какой-то скрипт загрузить?

[Vaccina]

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

[vanyushka]

Vaccina (29 Март 2014 - 04:48) писал:

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

Да, я возвращал шаблон к прежнему виду. Сейчас я снова добавил все предложенные сверху изменения, но ничего не изменилось.

[Castiel]

ipodushkin (29 Март 2014 - 12:13) писал:

Да, я возвращал шаблон к прежнему виду. Сейчас я снова добавил все предложенные сверху изменения, но ничего не изменилось.

Здравствуйте, вы не выполнили инструкцию полностью. Вам необходимо было добавить в файл main.js

$(document).ready(function(){
$('.goodsListItemBlock').hover(
function(){
		 $(this).find('.slide_button').animate({'bottom' : '0px'}, 500);
},
function(){
		 $(this).find('.slide_button').animate({'bottom' : '-50px'}, 500);
}
);
});

Все изменения были внесены, сейчас все работает корректно.