在手机端很常见的效果,页面滑到到一定的位置,购物车按钮在底部悬浮显示(详细效果演示请看下面的视频)
如何不使用插件,直接代码实现这种效果呢?我们以shopify默认dawn主题为例(其他主题自行修改相关细节)
方法B-适用于Shopify1.0、2.0所有模板,在代码编辑器插入(按钮代码使用主题自带)
下面是需要用到的相关代码
CSS代码,可以插入到.css文件里面。如果直接插入网页,请插入在<style> </style>内
[erphpdown]
@media only screen and (max-width:589px){
.display-mobile {
padding: 0 10px;
background: #ffffff;
webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
width: 100%;
display: block;
position: fixed;
left: 0;
bottom: 0;
margin: 0;
z-index: 99;
}
.display-mobile .payment-buttons {
margin-top: 10px;
}
.display-mobile .shopify-payment-button__more-options {
display:none;
}
}
JS代码,可以插入到.js文件里面。如果直接插入网页,请插入在<script> </script>内
let displaybottom = document.querySelector('.display-bottom')
// 1. 页面滚动事件
window.addEventListener('scroll', function () {
// 2. 页面检测滚动的距离
// console.log(document.documentElement.scrollTop)
let num = document.documentElement.scrollTop
// 3. 进行判断显示和隐藏
if (num >= 1000) {
//num数值大于等于设定-显示那个元素
displaybottom.style.display = 'block'
} else {
// 否则隐藏元素
displaybottom.style.display = 'none'
}
})
HTML代码,插入到shopify产品详情页模板内,shopify不同主题产品详情页模板名字不同,请在编辑器内搜索Product查找(Dawn主题产品详情页名字“main-product.liquid”)。
<div class="display-bottom" style="display:none;">
<div class="display-mobile">
<!--这里面插入shopify按钮代码-->
</div>
</div>
如何查找主题的按钮代码
1、在Chrome浏览器打开shopify网站产品详情
2、按F12进入开发者模式。点击右上角“小箭头”图标
3、在网页界面上选中按钮区域。右边出现的区块就是按钮代码区块,复制<product-form class=”product-form”>…</product-form>整段代码(如果您想实现更完整复制的效果,可以把变体选择器、数量选择器代码复制下来)
进入shopify模板代码编辑页面,编辑“main-product.liquid”页面,搜索“<product-form class=”product-form”>”,此段代码既是按钮代码。
以下是Shopify Dawn主题产品详情页“main-product.liquid”购物车按钮代码。
<product-form class="product-form">
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-error"
viewBox="0 0 13 13"
>
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
disabled
>
<div class="product-form__buttons">
<button
type="submit"
name="add"
class="123 product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<span>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>
最后把前面的html/css/js/(js代码一定要放在最后不然会执行不成功)代码合在一起插入Shopify Dawn主题产品详情页“main-product.liquid”。最后的代码如下,代码插入在“{% schema %}”前即可。
<!--手机悬浮按钮-->
<div class="display-bottom">
<div class="display-mobile">
<!--这里插入shopify购物车按钮-->
<product-form class="product-form">
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-error"
viewBox="0 0 13 13"
>
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
disabled
>
<div class="product-form__buttons">
<button
type="submit"
name="add"
class="123 product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<span>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>
<!--这里插入shopify购物车按钮-->
</div>
</div>
<!--CSSS代码-->
<style>
@media only screen and (max-width:589px){
.display-mobile {
padding: 0 10px;
background: #ffffff;
webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
width: 100%;
display: block;
position: fixed;
left: 0;
bottom: 0;
margin: 0;
z-index: 99;
}
.display-mobile .payment-buttons {
margin-top: 10px;
}
.display-mobile .shopify-payment-button__more-options {
display:none;
}
}
</style>
<!--JS代码-->
<script>
let displaybottom = document.querySelector('.display-bottom')
// 1. 页面滚动事件
window.addEventListener('scroll', function () {
// 2. 页面检测滚动的距离
// console.log(document.documentElement.scrollTop)
let num = document.documentElement.scrollTop
// 3. 进行判断显示和隐藏
if (num >= 1000) {
//num数值大于等于设定-显示那个元素
displaybottom.style.display = 'block'
} else {
// 否则隐藏元素
displaybottom.style.display = 'none'
}
})
</script>
<!--手机悬浮按钮-->
方法B.1适用于Shopify2.0主题,主题自定义里添加自定义代码。可直接复制代码在自定义界面插入(按钮代码使用主题自带)
添加如下图模块“Custom liquid”,部分主题叫“Custom html”,插入后把上面编辑好的对应的代码直接插入即可
[/erphpdown]