【个人】shopify开发总结

小香香君
692 阅读4分钟

Shopify开发总结

1、做过的内容

  • 1、修改某个文案
  • 2、使用分期付款app
  • 3、收集用户的email
  • 4、html在shopify中的使用（liquid文件）
  • 5、使用google地图api

2、前端html在shopify中的使用 步骤

  1. 写好页面dom与css
  2. 新建liquid文件
  3. 动态设置liquid文件变量

3、liquid文件 配置解释

  1. name：在可视化配置页面，左侧展示的section名称，必须保持唯一
  2. class： 尽量唯一，会自动生成带此class的dom
  3. settings： 页面变量
  • type：变量类型（image_picker、text、textarea...待补充）
  • id：变量名称，在此liquid需保持唯一
  • label：在可视化编辑中，用于提示编辑者的名称
  1. blocks：页面可遍历的变量
{
    "name": "BLACK FRIDAY BANNER",
    "class": "black-friday-banner",
    "settings": [
      {
        "type": "image_picker",
        "id": "banner_image_pc",
        "label": "Image"
      }, {
        "type": "image_picker",
        "id": "banner_image_mobile",
        "label": "Image"
      }
    ],
    "blocks": [
      {
        "type" : "product",
        "name" : "Product",
        "settings" : [
          {
            "type": "text",
            "id": "content",
            "label": "Content"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "BLACK FRIDAY BANNER",
        "blocks": []
      }
    ]
  }

4、使用媒体选择

  • 移动端范围：0 ~ 899
  • 平板端范围：900 ~ 1200
  • PC端范围：1200 ~ ∞

5、flex布局

  • 使用flex布局，导致宽度失效的话，子元素设置：
    flex-shrink:0

转载：www.jianshu.com/p/e8ca761e8…

6、关于getTime()

  • new Date('2022-11-30').getTime() 得到的是1970年01月01日8点至1970年11月30日8点整的毫秒数
  • new Date('2022-11-30 23:59:59').getTime() 得到的是1970年01月01日8点至1970年11月30日23:59:59的毫秒数

7、关于满减插件

8、学到了新的css写法

  • root选择器 定义全局变量 第一步：定义
:root{
  --red: #ff0000;
  --font-family-normal: DIN;
}

第二步：使用

.my-dom{
  color: var(--red);
  font-family: var(--font-family-normal);
}
  • not选择器 会匹配到所有 不包含active类名的元素
.my-dom:not(.active){
  font-size: 12px;
}

9、shopify搜索

  1. 搜索的内容只涵括：产品、页面、收藏、博客、文章
  2. 希望内容不被搜索到，需要在后台设置原字段seo.hidden为1
  3. 搜索使用的表单，隐藏的input框是用来存放url参数的
<form action="{{ routes.search_url }}" method="get" role="search"
    class="site-header__search-form oc-photo-management-form" data-dark="{{ dark_search_bg }}">
    <input type="hidden" name="type" value="product">
    <input type="hidden" name="options[prefix]" value="last">
    <!-- <input type="search" name="q" value="{{ search.terms | escape | replace: '*', '' }}" placeholder="Search" class="site-header__search-input oc-p-m-search-input" aria-label=""> -->
    <input type="search" name="q" value="" placeholder="Search" class="site-header__search-input oc-p-m-search-input" aria-label="">
    <button type="submit" class="text-link site-header__search-btn site-header__search-btn--submit oc-p-m-search-submit">
      <img src="https://cdn.shopify.com/s/files/1/0280/0012/4993/files/search_icon_e0ed45ab-9bdc-470d-9197-d23200840c02.png?v=1676007707" alt="">
    </button>
  </form>

10、shopify图库需求

- 搜索的实现

shopify官方文档-Storefront search

所有页面的搜索都是用的同一个搜索section，section可配置背景图、高度

  1. 新建一个search的section
  2. shopify的搜索是用表单来实现的
    <form action="{{ routes.search_url }}">
      <input type="text"
        placeholder="Search"
        name="q"
        value="{{ search.terms | escape }}"
      />
      <input type="hidden" name="type" value="product,page" />
      <input type="hidden" name="options[unavailable_products]" value="hide" />
      <input type="hidden" name="options[prefix]" value="last" />
      <input type="submit" value="Search" />
    </form>
  1. search的form里添加一个标记，这样才能在search页面筛选图库产品。
    <input type="hidden" name="pm-category" value="photo-manage">

  1. 文件名称和section名称是：oc-photo-management-search[OC PM Search]

  2. 在搜索结果页，根据url中是否有pm-category=photo-manage判断是展示图库产品，还是展示默认的搜索结果

  3. 搜索页面的分类：

  • 在search的section里添加一个可以录入collection的block
  • 由于在search页面也需要对图库产品进行分类
  • 使用collection-category模块
  • 给每个item绑定事件，点击之后，展示对应的collection的产品
  • 如果点击全部，展示所有产品。
  • 因为一个产品可以对应多个collection，所以需要遍历每个产品的data-collection-name，使用js处理之后，判断是否展示
  • 注意：因为在搜索页面，搜出来的结果不会有重复的，所以不需要去重步骤
  1. 由于此需求不需要分页，且因为for循环被限制为每页 50 次迭代，所以您需要使用paginate标记来迭代具有超过 50 项的数组所以搜索出来的结果这样展示：
  • 放到 {% paginate search.results by 999 %}{% endpaginate %} 标签内展示时，需要给数量设置为999

- 首页的实现

首页相对来说比较简单，步骤是：

  1. 新建一个page的template
  2. 新建一个section，section里包含collection列表（轮播图）+所有collection的产品展示。oc-photo-management-collectionlist[OC PM Collection List]
  3. setting的type使用collection_list,可以选择多个collection，得到的结果是一个数组。
  4. 由于页面会把所有collection里的所有产品展示出来，所以会有重复的product，需要用js进行一个去重。

- 排序页面的实现

其实排序页面和首页内容非常相似，不同点在于，可以对collection的内容进行排序
（毕竟首页只是page页面，没有排序功能）

  1. 新建一个collection的template
  2. 新建sectionoc-photo-management-collectionsort[OC PM Collection Sort]
  3. 在collection页面可以使用排序功能
  4. 自定义排序内容，总共需要Featured、Alphabetically, A-Z、Alphabetically, Z-A、Date, old to new、Date, new to old
<select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
  <option value="manual" {% if 'manual' == sort_by %} selected="selected"{% endif %}>Featured</option>
</select>
  1. 需要引入排序的css和js文件
  {{ 'component-facets.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
  1. 结果放在#ProductGridContainer->.collection->#product-grid内，是facets.js的逻辑控制的，会直接替换innerhtml
avatar
文章
阅读
粉丝