需求背景

需求背景

一个网站好的公告栏，可以让用户在进入网站之后就迅速掌握网站的第一动态。用户第一时间知晓当前网站做了什么活动，活动力度多大，还有多长时间等，如果其中有一项命中顾客的心理预期，那么网站的跳出率会大大降低。如何让公告栏和用户互动起来是我们当下需要考虑的一个问题。现在网站基本的公告栏是文案+配色+链接，效果叠加起来也比较单调。如果能让现在的公告栏动起来，显示的内容更加丰富，用户的留存意愿是不是会大大提升？

1. 抛出问题：

公告栏Plus应该支持哪些功能

不论以那种主题为例，都需要找到原来的公告栏，隐藏或替换原来的公告栏，然后使用新的导航栏进行替换。
新的公告栏我们需要支持如下功能：

设置背景图 + 背景色
公告可以进行字体颜色设置 + 内容链接设置
支持公告轮播
支持倒计时（此教程中未加入，如果需要可以联系我）

2. 如何设置

如何支持轮播？
A: 可以使用市面上功能强大且常见的swiper.js

如何去配置？
可以在shopify后台自定义配置

代码部分如何实现
需要下载的资源, 并将文件上传到Assets目录

https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css
https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js
https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js

在 theme.liquid 的header部分加入 css + js

主题已经引入过jquery的小伙伴：

<link rel="stylesheet" href="{{ 'swiper.min.css' | asset_url }}">
<script src="{{ 'swiper.jquery.min.js' | asset_url }}"></script>

主题未引入过jquery的小伙伴：

<link rel="stylesheet" href="{{ 'swiper.min.css' | asset_url }}">
<script src="{{ 'swiper.min.js' | asset_url }}"></script>

在Sections目录创建文件 announcement-plus.liquid ```html {%- assign swiperId = “swiper-container-“ | append: section.id -%}

{%- capture swiper_style -%} {%- if section.settings.background_image != blank -%} background-image: url({{ section.settings.background_image | img_url }}); {%- endif -%} {%- if section.settings.background_color != blank -%} background-color: {{ section.settings.background_color }}; {%- endif -%} {%- if section.settings.height != blank -%} height: {{ section.settings.height }}px; {%- endif -%} {%- endcapture -%}

{%- for block in section.blocks -%}

{%- if block.settings.text != blank -%} {%- if block.settings.link != blank -%} {%- endif -%}

{%- if block.settings.link != blank -%} {%- endif -%} {%- endif -%}

{%- endfor -%}

{% schema %} { “name”: “公告栏plus”, “max_blocks”: 12, “settings”: [ { “type”: “image_picker”, “id”: “background_image”, “label”: “背景图” }, { “type”: “color”, “id”: “background_color”, “label”: “背景色” }, { “type”: “range”, “id”: “height”, “label”: “公告栏高度”, “min”: 0, “max”: 200, “step”: 10, “default”: 20, “unit”: “px” }, { “type”: “range”, “id”: “font_size”, “label”: “公告字体大小”, “min”: 12, “max”: 30, “step”: 1, “default”: 20, “unit”: “px” }, { “type”: “color”, “id”: “font_color”, “label”: “公告字体颜色”, “default”: “#000” }, { “type”: “checkbox”, “id”: “loop”, “label”: “是否轮播”, “default”: true }, { “type”: “range”, “id”: “autoplay”, “label”: “轮播间隔”, “min”: 1, “max”: 10, “step”: 1, “default”: 1, “unit”: “秒” }, { “type”: “select”, “id”: “direction”, “label”: “轮播方向”, “options”: [ { “label”: “横向”, “value”: “horizontal” }, { “label”: “纵向”, “value”: “vertical” } ], “default”: “vertical” } ], “blocks”: [ { “type”: “announcement”, “name”: “公告”, “settings”: [ { “type”: “text”, “id”: “text”, “default”: “Welcome to our store”, “label”: “宣传文案” }, { “type”: “url”, “id”: “link”, “label”: “宣传链接” }, { “type”: “checkbox”, “id”: “countdown_on”, “label”: “开启倒计时” }, { “type”: “text”, “id”: “countdown_end”, “label”: “截止时间” } ] } ], “presets”: [ { “name”: “公告栏plus” } ] } {% endschema %} ```