Перейти к содержимому


Анимация Добавления Товара В Корзину


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 3

#1 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 15 Июль 2016 - 16:53

Анимация заключается в том, что когда кликаешь по кнопке Купить, картинка товара "улетает" в корзину.
Чтобы добавить красивую анимацию для добавления товара в корзину на свой сайт, Вам нужно:
1) В конец файла main.js добавляем блок
$(function() {
$('form.goodsDataForm, form.goodsToCartFromCompareForm, form.goodsListItemCatalogueAddToCartButton').each(function() {
$(this).addClass('ajaxForm');
});
$(this).find('.ulproduct, .owl-item, .prod_hold').addClass('form-block-wrapper');
$(this).find('.ulproduct a > img, .owl-item a > img, .prod_hold a > img').addClass('product-img');
$('form.ajaxForm').submit(function() {
var formData = $(this).serializeArray();
formData.push({name: 'ajax_q', value: 1});
$.post($(this).attr('action'), formData, $.proxy(function(html) {
				 $('#cart .incart').html($(html).find('.newCartSum').html());
				 //$('#cartCount').html($(html).find('.newCartCount').html());
				 // console.log ($(this).closest('.form-block-wrapper'));
				 var wrapper = $(this).closest('.form-block-wrapper').length ? $(this).closest('.form-block-wrapper') : $(this);
				 console.log(wrapper);
				 var product_img = wrapper.find('.product-img');
				
				 var img = product_img.clone().appendTo($('body'));
				 img.css({
								 position: "absolute",
								 left: product_img.offset().left,
								 top: product_img.offset().top,
								 display: "block",
								 zIndex: 999
				 }).animate({
								 width: 0,
								 height: 0,
								 left: $('#cart').offset().left,
								 top: $('#cart').offset().top
								 }, 800, 'linear', function() {
									 $(this).remove();
					 wrapper.find('.goodsincart').show();
								 });
}, this));
return(false);
});
});

Теперь переходим в шаблоны.
Шаблон Товары.
Находим строку
<a class="addToCart" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ"><span class="icon-cart3"></span></a>
  и заменяем ее на
<a class="addToCart" onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Быстро оформить заказ"><span class="icon-cart3"></span></a>

Шаблон HTML
Товары на главной
Находим блок
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
							 <a class="addToCart {%IF index_page_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF index_page_goods.MIN_REST_VALUE > 0%}onclick="quickorder('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}');return false;" {%ENDIF%}{%IF index_page_goods.MIN_REST_VALUE > 0%} title="Быстро оформить заказ"{%ELSE%} title="Товара нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></a>
							 </form>
и заменяем его на
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
							 <a class="addToCart {%IF index_page_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF index_page_goods.MIN_REST_VALUE > 0%}onclick="$('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}').submit(); return false;" {%ENDIF%}{%IF index_page_goods.MIN_REST_VALUE > 0%} title="Быстро оформить заказ"{%ELSE%} title="Товара нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></a>
							 </form>
Новинки
Находим лок
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_new_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{index_page_new_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{index_page_new_goods.MIN_PRICE_NOW_ID}" />
							 <a class="addToCart {%IF index_page_new_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF index_page_new_goods.MIN_REST_VALUE > 0%}onclick="quickorder('.product-form-{index_page_new_goods.MIN_PRICE_NOW_ID}');return false;" {%ENDIF%} {%IF index_page_new_goods.MIN_REST_VALUE > 0%} title="Быстро оформить заказ"{%ELSE%}title="Товара нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></a>
							 </form>
заменяем на
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_new_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{index_page_new_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{index_page_new_goods.MIN_PRICE_NOW_ID}" />
							 <a class="addToCart {%IF index_page_new_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF index_page_new_goods.MIN_REST_VALUE > 0%}onclick="$('.product-form-{index_page_new_goods.MIN_PRICE_NOW_ID}').submit(); return false;" {%ENDIF%} {%IF index_page_new_goods.MIN_REST_VALUE > 0%} title="Быстро оформить заказ"{%ELSE%}title="Товара нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></a>
							 </form>
Хиты продаж
Нахоидм блок
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
							 <a class="addToCart {%IF index_page_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF index_page_goods.MIN_REST_VALUE > 0%}onclick="quickorder('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}');return false;" {%ENDIF%}{%IF index_page_goods.MIN_REST_VALUE > 0%} title="Быстро оформить заказ"{%ELSE%} title="Товара нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></a>
							 </form>
и заменяем на
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{index_page_favorites_goods.MIN_PRICE_NOW_ID}">
								 <input type="hidden" name="hash" value="{HASH}" />
								 <input type="hidden" name="form[goods_from]" value="{index_page_favorites_goods.GOODS_FROM}" />
								 <input type="hidden" name="form[goods_mod_id]" value="{index_page_favorites_goods.MIN_PRICE_NOW_ID}" />							
								 <a class="addToCart {% IF index_page_favorites_goods.MIN_REST_VALUE <= 0 %}noavalible{% ENDIF %}" {%IF index_page_favorites_goods.MIN_REST_VALUE > 0%}onclick="quickorder('.product-form-{index_page_favorites_goods.MIN_PRICE_NOW_ID}');return false;"{%ENDIF%} {%IF index_page_favorites_goods.MIN_REST_VALUE > 0%} title="Быстро оформить заказ"{%ELSE%}title="Товара нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></span></a>
							 </form>

Шаблон Товар
Сопутствующие товары
Находим блок
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{related_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{related_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{related_goods.MIN_PRICE_NOW_ID}" />								
							 <a class="addToCart {%IF related_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF related_goods.MIN_REST_VALUE > 0%}onclick="quickorder('.product-form-{related_goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ"{%ENDIF%}{%IF related_goods.MIN_REST_VALUE <= 0%}title="Нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></a>
							 </form>
и заменяем его на
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{related_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{related_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{related_goods.MIN_PRICE_NOW_ID}" />								
							 <a class="addToCart {%IF related_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF related_goods.MIN_REST_VALUE > 0%}onclick="$('.product-form-{related_goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Быстро оформить заказ"{%ENDIF%}{%IF related_goods.MIN_REST_VALUE <= 0%}title="Нет в наличии"{%ENDIF%}><span class="icon-cart3"></span></a>
							 </form>

С этим товаром смотрят
Находим блок
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{related_views_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{related_views_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{related_views_goods.MIN_PRICE_NOW_ID}" />								
							 <a class="addToCart {%IF related_views_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF related_views_goods.MIN_REST_VALUE > 0%} onclick="quickorder('.product-form-{related_views_goods.MIN_PRICE_NOW_ID}');return false;"{%ENDIF%} {%IF related_views_goods.MIN_REST_VALUE <= 0%}title="Нет в наличии"{%ELSE%}title="Быстро оформить заказ"{%ENDIF%}><span class="icon-cart3"></span></a>
						 </form>
и заменяем его на
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{related_views_goods.MIN_PRICE_NOW_ID}">
							 <input type="hidden" name="hash" value="{HASH}" />
							 <input type="hidden" name="form[goods_from]" value="{related_views_goods.GOODS_FROM}" />
							 <input type="hidden" name="form[goods_mod_id]" value="{related_views_goods.MIN_PRICE_NOW_ID}" />								
							 <a class="addToCart {%IF related_views_goods.MIN_REST_VALUE <= 0%}noavalible{%ENDIF%}" {%IF related_views_goods.MIN_REST_VALUE > 0%} onclick="$('.product-form-{related_views_goods.MIN_PRICE_NOW_ID}').submit(); return false;"{%ENDIF%} {%IF related_views_goods.MIN_REST_VALUE <= 0%}title="Нет в наличии"{%ELSE%}title="Быстро оформить заказ"{%ENDIF%}><span class="icon-cart3"></span></a>
						 </form>

Шаблон AJAX добавление товара в корзину
Находим блок
<strong class="newCartSum">
{% IF cart_count_empty %}
	 <span class="red">0</span>
{% ELSE %}
	 {% FOR cart_sum %}
	 {cart_sum.NOW | money_format}<br />
	 {% ENDFOR %}
{% ENDIF %}
</strong>
и заменяем его на
<strong class="newCartSum">
<span class="icon-cart3 icon"></span>
			 &nbsp;&nbsp;{CART_COUNT_TOTAL} товар(ов) -										
				 {% IF cart_count_empty %}
				 <span>0 {CURRENCY_NAME}</span>
				 {% ELSE %}
				 {% FOR cart_sum %}
					 {cart_sum.NOW} {CURRENCY_NAME}
				 {% ENDFOR %}
				 {% ENDIF %}</span>
</strong>


#2 bartjohn

bartjohn

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 135 сообщений

Отправлено 15 Июль 2016 - 19:10

Но мне не подойдет(( т.к половины скриптов таких нету....

#3 sVs

sVs

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 232 сообщений
  • ГородМосква

Отправлено 15 Июль 2016 - 22:33

А можно пример, где можно посмотреть такую анимацию?

#4 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 924 сообщений

Отправлено 16 Июль 2016 - 16:08

Просмотр сообщенияbartjohn (15 Июль 2016 - 19:10) писал:

Но мне не подойдет(( т.к половины скриптов таких нету....
Для какого дизайн-шаблона Вам нужна инструкция?




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных