随笔- 18 文章- 0 评论- 2 阅读- 10万

Shopify 新增模板：现有主题下新增另外一套常见问题手风琴排版

以 Pages 为例：

1、进入Shopify 后台：Online Store - > Current theme - > Actions-> Edit code

2、打开 Template: Add a new template，填写完之后点击 Create template。

创建完之后会再Template文件夹下面新增一个page.alternate.liquid文件，并默认带入Page默认模板的代码。

3、如果新增的排版需要其他自定义配置时，可以在Sections创建一个文件: page-alternate.liquid.

4、把Template/page.alternate.liquid 的内容移至Sections/page.alternate.liquid，Template/page.alternate.liquid 新增内容 {% section 'page-alternate' %}代码，引入对应的文件块，

之后就可以改Sctions/faq-alternate.liquid 里面的文件了，Customize配置项在 Schema->settings配置

5、回到Online Store 下面的 Pages 选项，点击 Add pages 创建新的一个Pages页面, 准备title 跟 content 内容，并选择刚刚创建的模板(alternate)

手风琴排版使用的是content的内容：

<h2>FAQS</h2>
<h4>Q:What's the weather like today?</h4>
<p>A: Fine. It's sunny</p>
<h4>Q:Can this product be returned without reason</h4>
<p>A: Yes</p>
<h4>NOTES</h4>
<p>1.Support return and exchange when it does not affect the second sale of goods</p>
<p>2.There are many types to choose from</p>

6、在Assets文件夹下面的 Custom.js 文件，加入代码点击显示隐藏效果,在 Sections/faq-alternate.liquid 加入： <script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

(function () {
    function handleShowHidePanel(dom,activeClass,firstAddClass){
        var nodes = document.querySelectorAll(dom);
        var k;
        for (k = 0; k < nodes.length; k++) {
            if (k == 0) {
                var firstContent = nodes[0].nextElementSibling
                firstContent.style.maxHeight =  100 + "px";
                if(firstAddClass){
                    nodes[0].classList.add(activeClass)
                }
            }
     
            (function (index) {
                nodes[index].addEventListener("click", function () {
                    this.classList.toggle(activeClass);
                    var panel = this.nextElementSibling;
                    if (panel.style.maxHeight) {
                        panel.style.maxHeight = null;
                    } else {
                        panel.style.maxHeight = panel.scrollHeight + "px";
                    }
                });
 
            })(k)
        }
    }
    handleShowHidePanel('.faq-title','active',true)
})()

7、在Assets文件夹下面创建 faq-alternate.scss.liquid 文件，在 Sections/faq-alternate.liquid 引入该样式文件 :{{- 'faq-alternate.scss.css' | asset_url | stylesheet_tag -}}

 1 .faq-row {
 2     margin-bottom: 10px;
 3 }
 4 .faq-title {
 5     line-height: 1.4em;
 6     display: flex;
 7     align-items: flex-start;
 8     cursor: pointer;
 9     margin-bottom: 14px;
10     position: relative;
11     padding-right: 50px;
12 }
13 .faq-title::after {
14     content: '\002B';
15     color: #777;
16     font-weight: bold;
17     float: right;
18     margin-left: 5px;
19     font-size: 20px;
20     position: absolute;
21     right: 0;
22     top: 0;
23 }
24 .faq-title.active::after {
25     content: "\2212";
26 }
27 
28 .faq-title>h4 {
29     flex: 1;
30     margin-bottom: 0;
31     text-transform: none;
32     letter-spacing:normal;
33     line-height: 1.5rem;
34   font-size: 1.2rem;
35   font-weight: bold;
36       display: flex;
37     align-items: center;
38     margin-bottom: 0;
39 }
40 .faq-row .faq-content {
41     font-size: 1em;
42     max-height: 0;
43     overflow: hidden;
44     transition: max-height 0.2s ease-out;
45 }
46 .page__content {
47     p {
48         word-break: break-word;
49         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
50     }
51 }
52 @media screen and (max-width: 767px) {
53     .faq-row {
54         margin-bottom: 10px;
55     }
56     .faq-title {
57         -webkit-tap-highlight-color: transparent;
58     }
59 
60     .faq-title>h4 {
61         line-height: 1.4em;
62         font-size: 1.1rem;
63     }
64     .page__content {
65         p {
66             line-height: 1.4rem;
67         }
68     }
69 }

View Code

8、修改后的Sections/faq-alternate.liquid 文件代码如下：

 1 {{- 'faq-alternate.scss.css' | asset_url | stylesheet_tag -}}
 2 <script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
 3 <div class="page-width">
 4   <div class="grid">
 5     <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
 6       <div class="section-header text-center">
 7         <h1>{{ page.title }}</h1>
 8       </div>
 9 
10       <div class="rte">
11         {%- if page.content != blank -%}
12                 {%- assign page_content_arr = page.content | split:"<h2" -%}
13                 {%- for item in page_content_arr -%}
14                     {%- if item contains '</h2>' -%}
15                         {%- assign faqs_full_content = item | prepend: '<h2' -%}
16                             {%- assign faqs_content = faqs_full_content | split: '</h2>' -%}
17                             {%- assign faq_title = faqs_content[0] | append: '</h2>' -%}
18                             {%- assign faq_content = faqs_content[1] -%}
19                              <h2 class="page_faq_title {% if forloop.index == 1 %} title-active {%- endif -%}">{{faq_title | strip_html}}</h2>
20                              {%- if faqs_full_content contains 'FAQ' or faqs_full_content contains 'faq' -%}
21                             {%- assign chunks = faq_content | strip | split:"<h4" -%}
22                             <div class="page-content">
23                             {%-  for faq_row in chunks  -%}
24                                 {%- unless faq_row.size == 0 -%}
25                                 {%- assign rows = faq_row | strip | split:"</h4>"  -%}
26                                 {%- assign faq_title_text = rows[0] | prepend:'<h4 ' | append: '</h4>' | strip_html -%}
27                                     {%- if faq_title_text != blank -%}
28                                     <div class="faq-row">
29                                         <div class="faq-title"  data-type="faq">
30                                             <h4>{{ faq_title_text }}</h4>
31                                         </div>
32                                         <div class="faq-content">{{rows[1] }}</div>
33                                     </div>
34                                 {%- endif -%}
35                                 {%- endunless -%}
36                             {%- endfor -%}
37                         </div>
38                         {%- else -%}
39                         <div class="page-content">{{faq_content}}</div>
40                         {%- endif -%}
41                     {%- else -%}
42                     {{item}}
43                     {%- endif -%}
44                 {%- endfor -%}
45             {%- endif -%}
46       </div>
47     </div>
48   </div>
49 </div>
50 
51 {% schema %}
52   {
53     "name": "page alternate settings",
54     "settings": [
55 
56           {
57             "type": "checkbox",
58             "id": "tabs_enable",
59             "label": "Enable description tabs",
60             "default": false
61           }
62 ]
63   }
64 {% endschema %}
65 
66 {% stylesheet %}
67 {% endstylesheet %}
68 
69 {% javascript %}
70 {% endjavascript %}