我正在尝试添加一个飞行到购物车功能'点击'飞到购物车'，它在桌面视图上完美运行。但是当我因某种原因切换到移动设备时，它会飞到我的屏幕左侧，我的购物车图标不在。它基本上会飞到'汉堡包菜单'。不太确定为什么会这样做......
我从这个代码笔中获取了代码： https://codepen.io/elmahdim/pen/tEeDn
提前感谢您的帮助！
以下代码适用于收藏页面。
<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>
以下代码适用于我的网站标题，我的购物车图标为：
<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>
答案 0 :(得分：0)
我发现这是因为某些原因的.cart-link没有被.offset（）。left或.offset（）。top读取。 Console.logged它和控制台说它是未定义的。 走了树，叫了一个父div，它给了我一个值。 然而，它仍然会在移动设备上以不同方式启动，因此我添加了一个查询以检查移动窗口大小并抓住移动推车元素以找到偏移量然后它完美无缺。