Shopify二次开发之四：完成第一个section

SuppperSA

已于 2023-11-30 17:50:26 修改

阅读量1.3k

点赞数 25

分类专栏： shopify 文章标签：前端

于 2023-11-30 10:02:53 首次发布

本文链接：https://blog.csdn.net/SupperSA/article/details/134695265

版权

shopify 专栏收录该内容

8 篇文章 12 订阅

订阅专栏

前面学习了关于目录结构分析、schema配置、liquid语法学习，模板渲染对象，到此就可以简单的开发一个section

完成第一个图文section，根据设计稿，分析需要配置的block和input settings

分析

上面图文表达如何要选择"这个品牌"，根据step一步步引导用户去阅读。

分析图文，得出这总体是一个section分3个block，block包括图片、标题、内容、图片位置(左、右)、图片占盒子的百分比。

schema配置

{% schema %}
{
  "name": "Next setp",
  "limit": 1,
  "max_blocks": 3,
  "blocks": [
     {
       "name": "Step",
       "type": "step",
       "settings": [
         {
           "type": "image_picker",  // 图片
           "id": "step_image",
           "label": "step image"
         },
        {
          "type": "range",         // 图片百分比
          "id": "image_width",
          "min": 25,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "image width %",
          "default": 35
        },
        {
          "type": "radio",       // 图片位置
          "id": "image_position",
          "label": "image position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
        },
        {
          "type": "text",        // 图文标题
          "id": "step_title",
          "label": "step title"
        },
        {
          "type": "textarea",    // 图文描述
          "id": "step_content",
          "label": "step content"
        }
       ]
     }
   ],
  "presets": [
    {
      "name": "food step"
    }
  ]
}
{% endschema %}

商城后台Customize，以下是对应到schema配置的模型对象数据

至此，数据已经由商城后台配置完成，接下来就是编写liquid代码，进行模板数据渲染。

liquid html代码

<div class="shopify-section-{{ section.id }} container">
  {% assign counter = 0 %}
  {% for block in section.blocks %}
    <div class="step-item">
      {% assign _settings = block.settings %}
      <div class="step-img-box {{ _settings.image_position }}">
        <img
          width="auto"
          height="auto"
          style="width: {{ _settings.image_width }}%;"
          src="{{ _settings.step_image | image_url }}"
        />
      </div>
      <div class="step-text-box">
        {% assign counter = counter | plus: 1 %}
        <p class="step-number">0{{ counter }}</p>
        <h3 class="step-heading">
          {{ _settings.step_title }}
        </h3>
        <p class="step-content">
          {{ _settings.step_content }}
        </p>
      </div>
    </div>
  {% endfor %}
</div>

通过for循环blocks每一项为block，因为schema blocks里只配置了一种type的block，所以不需要通过if或者case判断block的type是否为step，直接渲染。
声明counter ：{% assign counter = 0 %}每次循环+ 1，这样就得到了 1、2、3通过模板渲染01、02、03。
每一项循环得到block.settings: {% assign _settings = block.settings %}，获取后台配置的block设置：_settings.step_title、 _settings.step_title、_settings.step_content ...
style="width: {{ _settings.image_width }}%;" src="{{ _settings.step_image | image_url}}" 通过filter “image_url”得到img的strc，设置style对img进行百分比设置。

liquid style代码

{% style %}
  .shopify-section-{{ section.id }} {
    display: flex;
    flex-direction: column;
    gap: 90px;
    padding: 40px 32px;
  }

  .shopify-section-{{ section.id }} .step-item {
    display: flex;
    align-items: center;
    gap: 64px;
  }

  .shopify-section-{{ section.id }} .step-item div{
    flex: 1;
  }

  .shopify-section-{{ section.id }} .step-number{
    font-size: 86px;
    font-weight: 600;
    color: #ddd;
    margin-bottom: 12px;
  }

  .shopify-section-{{ section.id }} .step-heading{
    font-size: 30px;
    color: #333;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 32px;
  }

  .shopify-section-{{ section.id }} .step-content{
    font-size: 18px;
    line-height: 1.8;
  }

  .shopify-section-{{ section.id }} .step-img-box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shopify-section-{{ section.id }} .step-img-box.right{
    order: 2;
  }

  .shopify-section-{{ section.id }} .step-img-box::after{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shopify-section-{{ section.id }} .step-img-box::after, .step-img-box::before {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .shopify-section-{{ section.id }} .step-img-box::before{
    width: 60%;
    padding-bottom: 60%;
    background-color: #fdf2e9;
    z-index: -2;
  }

  .shopify-section-{{ section.id }} .step-img-box::after{
    width: 45%;
    padding-bottom: 45%;
    background-color: #fae5d3;
    z-index: -1;
  }

  @media (max-width: 75em) {
    .shopify-section-{{ section.id }} .step-heading {
      font-size: 22px;
    }

    .shopify-section-{{ section.id }} .step-content {
      font-size: 16px;
      line-height: 1.6;
    }

    .shopify-section-{{ section.id }} .step-item {
      gap: 32px;
    }
  }
  @media (max-width: 48em) {
    .shopify-section-{{ section.id }} .step-content {
      font-size: 14px;
      line-height: 1.6;
    }

    .shopify-section-{{ section.id }} .step-heading {
      font-size: 18px;
    }

    .shopify-section-{{ section.id }} .step-number {
      font-size: 60px;
    }

    .shopify-section-{{ section.id }} .step-item {
      flex-direction: column;
      flex: auto;
    }

    .shopify-section-{{ section.id }} .step-item .step-img-box {
      order: 1;
    }

    .shopify-section-{{ section.id }} .step-item .step-text-box {
      order: 2;
    }
  }
{% endstyle %}