#Shopify代码教程#编码一个回到顶部按钮【★★☆☆☆】

前言:

如果你的店铺商品数量很大或产品详情内容非常多,当顾客要浏览商品时就需要开始无止尽的向下滚动,总算度过了这个恶心的过滚动后若对产品很满意,想回到顶部选择规格或是加入购物车他又得开始无止尽的向上滚动,这操作对顾客是不友好的;接下来我将教大家如何在页面中添加一个回到顶部的按钮。

Q:那么要编写代码??

A:不要紧张,这确实需要在代码中操作,但也仅仅是需要在代码中操作而已,我将提供所有需要的代码段和代码需要放置的位置,你仅仅需要把手指放在ctrl c v这3个摁键即可。

事前准备:

倒上一杯热标准美式单奶半塘,接下来的环节可能比较枯燥,我将一步一步的教大家如何制作这个back to top按钮

1:打开代码编辑页面

进入后台点击Online Store==》Themes==》Actions==》Edit code即可到达代码编辑页面

2: 添加第一个部分

点击左侧的Layout==>theme.liquid

滚动至最下面找到</body>后将代码

 {% section ‘back-to-top’ %} 

粘贴至他的上方,如图

温馨提示:若以后不需要此功能则需要回到此页面将这段代码删除。

3:添加第二个部分

在左侧找到Assets==》theme.js后将代码添加到最下面即可

$("#btt_btn").hide();
$(function () {
  $(window).scroll(function(){
   if ($(window).scrollTop()>600){
    $("#btt_btn").fadeIn(500);
   }else{
    $("#btt_btn").fadeOut(500);
   }
 });

  $("#btt_btn").click(function(){
    $('body,html').animate({scrollTop:0},500);
  });
})

4:关键步骤!

放轻松,活动一下筋骨,喝一口事先准备好的美式,美式凉了会酸的。

5:创建新section

继续找到文件Sections 点击==》Add a newsection在输入框中填写back-to-top

点击Create section后将会自动打开此文件,将里面的内容清空,将下面代码全部粘贴进去

<style>
  #btt_btn{
    position:fixed;
    cursor:pointer;
    z-index:999;
    bottom:{{ section.settings.bottom }};
    right:{{ section.settings.right }};
	width:{{ section.settings.width }};
  	height:{{ section.settings.height }};
    background: url({{ section.settings.logo | img_url }}) no-repeat ;
    background-size: 100% 100%;
    transition: all 0.4s;
  }
  #btt_btn:hover{
    transform: scale(1.2);
  }
</style>

 <div id="btt_btn"></div>


{% schema %}
{
  "name": {
    "en": "back to top"
  },
  "settings": [
      {
        "type": "image_picker",
        "id": "logo",
        "label": {
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fr": "Image",
        "it": "Immagine",
        "ja": "画像",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "zh-CN": "图片",
        "zh-TW": "圖片"
        }
      },
	{
      "id": "bottom",
      "type": "text",
      "label": {
        "en": "bottom"
      },
      "default": {
        "en": "100px"
      }
    },
    {
      "id": "right",
      "type": "text",
      "label": {
        "en": "right"
      },
      "default": {
        "en": "100px"
      }
    },
    {
      "id": "width",
      "type": "text",
      "label": {
        "en": "width"
      },
      "default": {
        "en": "40px"
      }
    },
    {
      "id": "height",
      "type": "text",
      "label": {
        "en": "height"
      },
      "default": {
        "en": "40px"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "en": "back to top"
      },
      "category": {
        "en": "back to top"
      }
    }
  ]
}

6:深呼吸

没错就是深呼吸

7:查看是否设置成功

退后至后台打开自定义页面,看到左侧最下面出现了back to top部分?干的漂亮!你已经成为一名优秀的程序员了!

8:自定义你的按钮

在左侧你可以自定义按钮的背景图片和大小以及位置

9:问答

Q:为什么自定义页面点击了按钮不起作用?

A:有一些情况下,要在url为商店地址才可起作用(哪些情况?我也不知道。)

Q:为什么加载完页面并没有看到回到顶部按钮?

A:要当滚轮滚动到一定位置按钮才会出现,只是为了用户在浏览顶部内容时看起来页面整洁一些。

Q:触摸效果好丑我可以改这个效果吗?

A:不能

10:bye

0

评论0

没有账号? 注册  忘记密码?