Javascript Jquery飞到购物车在移动设备上不能正常飞行
我正在尝试添加一个“点击时飞到购物车”的飞到购物车功能，它可以在桌面视图上完美地工作。但当我出于某种原因切换到手机时，它会飞到屏幕的左侧，而我的购物车图标不在那里。它基本上会飞到“汉堡包菜单”上。不太清楚它为什么这么做 我从这个密码笔里得到了密码： 提前感谢您的帮助 下面的代码用于收集页面Javascript Jquery飞到购物车在移动设备上不能正常飞行,javascript,jquery,jquery-ui,shopify,liquid,Javascript,Jquery,Jquery Ui,Shopify,Liquid,我正在尝试添加一个“点击时飞到购物车”的飞到购物车功能，它可以在桌面视图上完美地工作。但当我出于某种原因切换到手机时，它会飞到屏幕的左侧，而我的购物车图标不在那里。它基本上会飞到“汉堡包菜单”上。不太清楚它为什么这么做 我从这个密码笔里得到了密码： 提前感谢您的帮助 下面的代码用于收集页面 <div class="product_wrap"> <a href="{{ product.url }}" class="grid__image">
<div class="product_wrap">
<a href="{{ product.url }}" class="grid__image">
{% if template == 'index'%}
<img class="firstProdPic" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
{% else %}
<img class="firstProdPic" src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
{% endif %}
<div name="secomapp-fg-image-{{ product.id }}" style="display: none;"> {{ "icon-freegift.png" | asset_url | img_tag: "", "sca-fg-img-collect" }} </div>
<div class="sca-fg-cat-list" style="display:none;" name="secomapp-fg-data-{{ product.id }}" prod-show='list'> </div>
</a>
{%comment%}
<div class="view-details-btn">
{%comment%}<a href="{{ product.url | within: collection }}" class="btn btn3">View Details</a>{%endcomment%}
<!-- changed the above part because it was throwing different urls ^^^^^^^^^^^^^-->
<!-- <a href="{{ product.url }}" class="btn btn3">View Details</a> -->
{% if product.images[1] %}
<a href="{{product.url}}">
<img class="secondProdPic" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
</a>
{%endif%}
</div>
{%endcomment%}
{% if settings.quick_view_enabled %}
<a href="#product-{{ product.id }}" class="quick-view-link">Quick View</a>
{% include 'quick-view' %}
{% endif %}
{% if settings.collection_layout == 'hover' %}
<div class="product_overlay">
<div class="overlay-table">
<div class="overlay-inner">
{% else %}
<div class="product_info{% if settings.collection_layout == 'fancy' %} fancy{% endif %}">
{% endif %}
<a href="{{product.url}}"><p class="product_title">{{ product.title | split: ' - ' | first }}</p></a>
<p class="tags" style="color: {{productColor}};">{{ helps | upcase }}</p>
<div class="product-meta">
{% if settings.show_product_price %}
<p class="product_price">
{% unless variant.metafields.secomapp.freegifts %}
{% unless variant.title contains '(Freegifts)' %}
{% if on_sale %}
{% if bold_price_varies %}
{% assign sale_price = bold_price | money %}
<strong>{{ 'products.product.on_sale' | t: price: sale_price }}</strong>
{% else %}
<span class="comparePrice">{{ bold_compare_at_price_min | money }}</span>
<span>{{ bold_price | money }}</span>
{% endif %}
{% else %}
{% if bold_price_varies %}
{% assign price = bold_price | money %}
{% if settings.product_varyprice == 'from' %}
{{ 'products.general.from_text_html' | t: price: price }}
{% elsif settings.product_varyprice == 'plus' %}
{{ bold_price | money }}+
{% else %}
{{ bold_price_min | money }} - {{ bold_price_max | money }}
{% endif %}
{% else %}
{{ bold_price | money }}
{% endif %}
{% endif %}
{%endunless%}
{%endunless%}
</p>
{% endif %}
<!--<p><span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span></p>-->
<div class="yotpo bottomLine"
style="display:inline-block;"
data-product-id="{{ product.id }}"
data-url="{{ product.url }}">
</div>
<form method="post" action="/cart/add" class="productCoreForm">
<div class="product-single__add-to-cart">
<input type="hidden" name="id" value="{{ bold_selected_or_first_available_variant.id }}" />
<!-- ***************************Took out the plus and minus sign from add to cart button -->
{% comment %}{% if settings.collection_add_cart_quantity %}{% if settings.collection_add_cart_quantity %}{% include 'quantity' with 'collection' %}{% endif %}{% endif %}{% endcomment %}
<!-- ***************************took outthe plus and minus sign from add to cart button -->
<div class="submit-container">
<input type="hidden" name="return_to" value="back" />
<input type="submit" name="add" id="addtacart" class="btn {{settings.product_page_button_type}} productCoreBtn {{product.handle}} pcoreButton" data-price="{{ current_variant.price | money_without_currency }}" value="{{ 'products.product.add_to_cart' | t }}" />
</div>
</div>
</form>
{% endif %}
</div>
{% if settings.collection_layout == 'hover'%}
</div>
</div>
</div>
{% else %}
</div>
{% endif %}
</div>
<script>
// fly to cart code *********************************************************************
$('.pcoreButton').on('click', function () {
console.log('firing addtocart');
var cart = $('.cart-link');
console.log(cart);
var imgtodrag = $(this).parents('.product_wrap').find('.firstProdPic');
if (imgtodrag.length) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});
</script>
{%comment%}
{%comment%}{%endcomment%}
{%if product.images[1]}
{%endif%}
{%endcomment%}
{%if settings.quick_view_enabled%}
{%include'快速查看'%}
{%endif%}
{%if settings.collection_layout=='hover%}
{%else%}
{%endif%}
{%if settings.show_product_price%}
{%除非variant.metafields.secomapp.freegivents%}
{%除非variant.title包含“（免费赠品）%}
{%if on_sale%}
{如果粗体价格变化%}
{%assign sale_price=bold_price|money%}
{{'products.product.on|u sale''t:price:sale_price}}
{%else%}
{{bold_compare_at_price_min|money}}
{{bold|U价格{MENEY}}
{%endif%}
{%else%}
{如果粗体价格变化%}
{%assign price=bold|u price | money%}
{%if settings.product_varyprice=='来自“%”
{{'products.general.from_text_html'| t:price:price}}
{%elsif settings.product_varyprice=='加上“%”
{{bold|U价格{MENEY}}+
{%else%}
{{bold_price_min|money}-{{{bold_price_max|money}
{%endif%}
{%else%}
{{bold|U价格{MENEY}}
{%endif%}
{%endif%}
{%end除非%}
{%end除非%}
{%endif%}
{%comment%}{%if设置.collection\u add\u cart\u quantity%}{%if设置.collection\u add\u cart\u quantity%}{%include'quantity'与'collection%}{%endif%}{%endif%}{%endcomment%}
{%endif%}
{%if settings.collection_layout=='hover%}
{%else%}
{%endif%}
//飞到购物车代码*********************************************************************
$（'.pcoreButton'）。在（'click'，函数（）{
console.log（'firing addtocart'）；
var cart=$（'.cart-link'）；
控制台日志（购物车）；
var imgtodrag=$（this）.parents（'.product_wrap'）.find（'.firstProdPic'）；
if（imgtodrag.长度）{
var imgclone=imgtodrag.clone（）
.抵消({
顶部：imgtodrag.offset（）.top，
左：imgtodrag.offset（）.左
})
.css({
“不透明度”：“0.5”，
'位置'：'绝对'，
“高度”：“150px”，
“宽度”：“150px”，
“z指数”：“100”
})
.appendTo（$（'body'））
.制作动画({
“顶部”：cart.offset（）.top+10，
“左”：cart.offset（）.left+10，
“宽度”：75，
身高：75
}, 1000);
imgclone.animate({
“宽度”：0，
“高度”：0
}，函数（）{
$（this.detach（））
});
}
});
<header class="site-header is-moved-by-drawer" role="banner">
{% if settings.top_bar_show %}
<div class="top-bar">
<div class="wrapper">
<div class="top-bar-inner">
{% if settings.top_bar_text != '' %}
<div class="top-bar-content">
{% if customer %}
<div class="top-bar-text" style="display:table;font-size:0.8rem;">{{ settings.top_bar_text }}</div>
{% else %}
<div class="top-bar-text" style="display:table;font-size:0.8rem;">{%include 'topbar_newsletter' %}</div>
{%endif%}
</div>
{% endif %}
<div class="top-bar-meta right medium-down--hide">
<div class="header-right">
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href='' style="text-transform:none;">You have (<span data-lion-points>0</span>) Guru Points</a>
{{ 'Log out' | customer_logout_link }}
<a href="/account" class="account-link"><span>Account</span> {% include 'svg_icon' with 'account' %}</a>
{% else %}
<a href='' style="text-transform:none;">You have (<span data-lion-points>0</span>) Guru Points</a>
{{ 'Log in' | customer_login_link }}
{% if shop.customer_accounts_optional %}
{{ 'Register' | customer_register_link }}
{% endif %}
{% endif %}
{% endif %}
<a href="/cart" class="cart-link site-header__cart-toggle js-drawer-open-right" aria-controls="CartDrawer" aria-expanded="false">{% include 'svg_icon' with 'cart' %}<span class="cart-count">{{ cart.item_count }}</span></a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="site-nav--mobile mobile-cart-btn post-medium--hide text-right">
<span id="mobileSearch" class="icon icon-search searchIcon"></span>
<a href="/cart" class="js-drawer-open-right site-nav__link cart-link" aria-controls="CartDrawer" aria-expanded="false">
<span class="cart-svg">
{% include 'svg_icon' with 'cart' %}
<span class="cart-count">{{ cart.item_count }}</span>
</span>
</a>
</div>
</header>
{%if settings.top_bar_show%}
{%if settings.top_bar_text！=''%}
{%if客户%}
{{settings.top_bar_text}
{%else%}
{%include'topbar_通讯'%}
{%endif%}
{%endif%}
{%if shop.customer\u accounts\u enabled%}
{%if客户%}
{{‘注销’|客户_注销_链接}
{%else%}
{{‘登录’|客户_登录_链接}
{%if shop.customer\u accounts\u optional%}
{{‘注册’|客户{注册}
{%endif%}
{%endif%}
{%endif%}
{%endif%}