shoplazza-cli 0.0.1

package/fixtures/sections/instagram_plus.liquid

@@ -0,0 +1,393 @@
+
+ <div class="instagram-section card-{{section.id}} container-gap" {% if section.settings.ins_bg %}style="background:{{ section.settings.ins_bg }};"{% endif %}>
+    {% if section.settings.title != blank %}
+      <header class="section-header">
+        <h2 class="dj_skin_title common-card-title col-12">{{ section.settings.title }}</h2>
+      </header>
+    {% endif %}
+  {% if section.blocks.size > 0 %}
+    <div class="collection_slider__outer ins_container">
+      <div class="collection_slider__wrapper ins_list" style="overflow: auto;">
+        <div style="white-space: nowrap; text-align: center; width: 100%;">
+          {% for block in section.blocks %}
+            {% assign image_src = block.settings.src %}
+            {% assign account_id = block.settings.account_id %}
+            <a class="ins_item swiper-slide" data-account-id="{{ account_id }}">
+              {% if image_src!=blank %}
+                <div class="ins_img lazyload"
+                title="{{ images[image_src].alt | escape }}"
+                data-sizes="auto"
+                data-bgset="{{ images[image_src].src | img_url: '610x' }}"
+                style="background-size:cover;"><i class="sep-font sep-font-instagram"></i></div>
+                {% else %}
+                <div class="ins_img">
+                <i class="sep-font sep-font-instagram"></i>
+                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
+                </div>
+              {% endif %}
+              <div class="in_user text-left">
+                <div><i class="sep-font sep-font-dengluzhuce"></i><img class="ins_photo" src="{{ user_photo }}"/></div>
+                <div>
+                  <p class="ins_name">username</p>
+                  <p class="ins_id">@account_id</span></p>
+                </div>
+              </div>
+            </a>
+            {% javascript %}
+              $(function(){
+              var accountId="{{account_id}}";
+              if(accountId!=""){
+                  $.get('/api/instagram/profile?username='+accountId,function(data){
+                  $("[data-account-id='{{account_id | escape}}'] .ins_id").html('@'+accountId);
+                  $("[data-account-id='{{account_id | escape}}'] .ins_name").html(data.profile.full_name);
+                  $("[data-account-id='{{account_id | escape}}'] .ins_photo").attr('src',data.profile.profile_pic_url);
+                })
+              }
+              })
+            {% endjavascript %}
+
+          {% endfor %}
+        </div>
+      </div>
+      <i data-direction="prev" class="ins_pagination sep-font sep-font-angle-left ins-prev swiper-button-disabled"></i>
+      <i data-direction="next" class="ins_pagination sep-font sep-font-angle-right ins-next"></i>
+    </div>
+  {% endif %}
+  </div>
+{% javascript %}
+  $(function () {
+    var $section = $('[data-section-id=' + {{section.id}} + ']');
+    var $container = $section.find('.ins_list');
+    $(document).on('click', '[data-section-id=' + {{section.id}} + '] .ins_pagination', function () {
+      var distance = $section.find('.ins_list > div > a:first').outerWidth() + 20;
+      $container.stop().animate({
+          scrollLeft: $container.scrollLeft() + ({'prev': -1, 'next': 1}[$(this).data('direction')] * distance)
+        }, { duration: "150", easing: "linear" }
+      );
+    })
+    $container.scroll($.throttle(function () {
+      var direction = ($container[0].scrollWidth - ($container.width() + $container.scrollLeft()) <= 5 && 'next')
+        || ($container.scrollLeft() <= 5 && 'prev') || 'none';
+      $section.find('.ins_pagination[data-direction]')
+        .removeClass('swiper-button-disabled').end()
+        .find('.ins_pagination[data-direction='+direction+']')
+        .addClass('swiper-button-disabled');
+    }, 100))
+  })
+{% endjavascript %}
+<style>
+[data-section-type="instagram_plus"].shoplazza-select:before {
+    animation: none !important;
+}
+.instagram-feed-wrap {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+.HScroll-wrapper{
+  position:relative;
+  transition-property: left;
+  transition-duration: 0.6s;
+  transition-timing-function: cubic-bezier(0, 0, 0.15, 0.97);
+}
+.ins_pagination{
+  width:43px;
+  height:43px;
+  background:rgba(50,50,50,1);
+  box-shadow:0px 2px 10px 0px rgba(0,0,0,0.11);
+  opacity:0.7;
+  position:absolute;
+  top:50%;
+  margin-top:-21px;
+  text-align:center;
+  line-height:43px;
+  z-index:10;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.ins_pagination.sep-font-angle-left{
+  left:36px;
+}
+.ins_pagination.sep-font-angle-right{
+  right:36px;
+}
+.ins_container:hover .ins_pagination{
+  opacity:0.7;
+}
+.ins_container .ins_pagination.swiper-button-disabled {
+    cursor: not-allowed;
+    background: rgba(204, 204, 204, 0.6);
+}
+.collection_slider__outer.ins_container {
+    width: 100%;
+    max-width: none;
+    position: relative;
+    overflow: hidden;
+}
+.instagram-section {
+    padding: 80px 0;
+    padding-bottom: 10px;
+}
+
+.instagram-section h2 {
+    text-align: center;
+    margin-bottom: 80px;
+}
+.ins_list{
+  display:flex;
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+  overflow-x: auto;
+}
+.ins_list::-webkit-scrollbar { width: 0 !important }
+.ins_item {
+    width: 305px;
+    background: #fff;
+    margin: 0 10px;
+    flex-shrink: 0;
+    display: inline-block;
+}
+
+.ins_img {
+    width: 100%;
+    height: 325px;
+    background-color: #F1F1F1;
+    background-position: center;
+    position: relative;
+}
+
+.ins_img i {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    right: 10px;
+    top: 10px;
+    font-size: 20px;
+    line-height: 20px;
+    color: #000;
+    z-index: 5;
+}
+
+.in_user {
+    padding: 10px 10px 10px 75px;
+    position: relative;
+    height:68px;
+}
+
+.in_user>div:first-child {
+    width: 48px;
+    height: 48px;
+    background: #BFBFBF;
+    border-radius: 50%;
+    margin-right: 10px;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+.in_user>div:first-child i {
+    position: absolute;
+    font-size: 30px;
+    left: 0;
+    bottom: 0;
+    line-height: 48px;
+    text-align: center;
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+    color: #fff;
+}
+.in_user>div:first-child img {
+    max-width: 100%;
+    position:relative;
+    z-index:10;
+}
+.ins_name {
+    font-size: 16px;
+    font-family:PingFangSC-Medium,PingFang SC;
+    font-weight:500;
+    color:rgba(85,87,90,1);
+    line-height:22px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 0  5px;
+    height:22px;
+}
+
+.ins_id {
+    font-size: 14px;
+    font-family:Futura-Medium,Futura;
+    font-weight:500;
+    color:rgba(143,143,145,1);
+    line-height:19px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 1 auto;
+    margin: 0;
+}
+
+.in_user>div:first-child i {
+    width: 100%;
+    height: 100%;
+}
+</style>
+{% schema %}
+{
+  "name": "instagram_plus",
+  "max_blocks": 9,
+  "min_blocks": 7,
+  "settings": [
+    {
+      "type": "text",
+      "id": "title",
+      "label": {
+        "en-US": "Heading",
+        "zh-CN": "标题"
+      },
+      "default": "Find us on Instagram"
+    },
+    {
+      "type": "color",
+      "id": "ins_bg",
+      "label": {
+        "en-US": "Background",
+        "zh-CN": "背景"
+      },
+      "default": "#F7F7F7"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "banner",
+      "name": {
+        "zh-CN": "图片",
+        "en-US": "Image"
+      },
+      "settings": [
+        {
+          "type": "image_picker",
+          "label": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "id": "src",
+          "info": {
+            "zh-CN": "建议尺寸（宽*高）：610*750px",
+            "en-US": "Recommended resolution (width * height):610*750px"
+          }
+        },
+        {
+          "type": "text",
+          "id": "account_id",
+          "label": {
+            "zh-CN": "用户名",
+            "en-US": "Username"
+          },
+          "placeholder": {
+            "en-US": "Account id",
+            "zh-CN": "Account id"
+          },
+          "default": ""
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "instagram_plus",
+      "cname": {
+        "zh-CN": "ins精选集",
+        "en-US": "Instagram"
+      },
+      "category": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "ccategory": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "display": true,
+      "blocks": [
+        {
+          "type": "banner",
+          "name": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "settings": {
+            "account_id": ""
+          }
+        },
+        {
+          "type": "banner",
+          "name": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "settings": {
+            "account_id": ""
+          }
+        },
+        {
+          "type": "banner",
+          "name": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "settings": {
+            "account_id": ""
+          }
+        },
+        {
+          "type": "banner",
+          "name": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "settings": {
+            "account_id": ""
+          }
+        },
+        {
+          "type": "banner",
+          "name": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "settings": {
+            "account_id": ""
+          }
+        },
+        {
+          "type": "banner",
+          "name": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "settings": {
+            "account_id": ""
+          }
+        },
+        {
+          "type": "banner",
+          "name": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "settings": {
+            "account_id": ""
+          }
+        }
+      ],
+      "icon": "oss/operation/cdf1e220d89c2dcd2e000c3d105bf93e.svg"
+    }
+  ]
+}
+{% endschema %}

package/fixtures/sections/logo_bar.liquid

@@ -0,0 +1,183 @@
+{% use 'logo_bar.css' %}
+{% assign defaultImg = "oss/operation/bd6b59c95b561f181796c20cecfee168.png" %}
+
+<div class="container container-gap">
+
+  {% if section.settings.title != blank %}
+    {% include 'card_title', title: section.settings.title %}
+  {% endif %}
+
+  {% if section.blocks.size > 0 %}
+    {% case section.blocks.size %}
+      {% when 1 %}
+        {% assign col = "col-12" %}
+        {% assign colMd = "col-md-12" %}
+      {% when 2 %}
+        {% assign col = "col-6" %}
+        {% assign colMd = "col-md-6" %}
+      {% when 3 %}
+        {% assign col = "col-4" %}
+        {% assign colMd = "col-md-4" %}
+      {% when 4 %}
+        {% assign col = "col-3" %}
+        {% assign colMd = "col-md-3" %}
+      {% when 5 %}
+        {% assign col = "col-3" %}
+        {% assign colMd = "col-md-2_4" %}
+      {% else %}
+        {% assign col = "col-3" %}
+        {% assign colMd = "col-md-2" %}
+    {% endcase %}
+    <div class="row common__product-row">
+      {% for block in section.blocks %}
+        <div class="{{col}} {{colMd}} common__product-gap logo-bar__block">
+          <a
+            {% unless block.settings.link.type != 'web' or block.settings.link.url contains shop.domain %}target="_blank"{% endunless %}
+            {% if block.settings.link.url != blank %}href="{{ block.settings.link.url }}"{% endif %}
+            {% if block.settings.image == blank %}style="background: #f7f7f7;"{% endif %}
+            class="common__img-wrapper_lazy logo-bar__link">
+            {% assign src = block.settings.image | default: defaultImg %}
+            {% include 'lazyimg',
+              src: src,
+              style: "width: 100%;height:100%;object-fit: contain;",
+              alt: images[block.settings.image].alt | default: shop.name,
+              class: 'logo-bar__img'
+            %}
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% comment %} 补充模拟数据 {% endcomment %}
+    {% if shop.env == 1 %}
+      <div class="row common__product-row">
+        {% for block in (1..4) %}
+          <div class="col-3 col-md-3 common__product-gap logo-bar__block">
+            <a style="background: #f7f7f7;"
+              class="common__img-wrapper_lazy logo-bar__link">
+              <img class="logo-bar__img" src="{{defaultImg | img_url}}">
+            </a>
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+  {% endif %}
+</div>
+
+
+{% schema %}
+{
+  "name": "logo_bar",
+  "max_blocks": 20,
+  "settings": [
+    {
+      "type": "text",
+      "id": "title",
+      "label": {
+        "en-US": "Heading",
+        "zh-CN": "标题"
+      },
+      "default": "BRAND LIST"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "logo_image",
+      "name": {
+        "zh-CN": "品牌图",
+        "en-US": "Logo image"
+      },
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "image",
+          "label": {
+            "zh-CN": "图片",
+            "en-US": "Image"
+          },
+          "info": {
+            "zh-CN": "建议尺寸（宽*长）：600*360px,透明底色png格式图片",
+            "en-US": "Recommended resolution (width * height):600*360px,png images with transparent background"
+          }
+        },
+        {
+          "type": "url",
+          "id": "link",
+          "label": {
+            "zh-CN": "图片链接",
+            "en-US": "Image link"
+          }
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "logo_bar",
+      "cname": {
+        "zh-CN": "品牌列表",
+        "en-US": "Logo list"
+      },
+      "category": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "ccategory": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "display": true,
+      "blocks": [
+        {
+          "type": "logo_image",
+          "name": {
+            "zh-CN": "品牌图",
+            "en-US": "Logo image"
+          },
+          "max_blocks": 20,
+          "settings": {
+            "image": "",
+            "link": ""
+          }
+        },
+        {
+          "type": "logo_image",
+          "name": {
+            "zh-CN": "品牌图",
+            "en-US": "Logo image"
+          },
+          "max_blocks": 20,
+          "settings": {
+            "image": "",
+            "link": ""
+          }
+        },
+        {
+          "type": "logo_image",
+          "name": {
+            "zh-CN": "品牌图",
+            "en-US": "Logo image"
+          },
+          "max_blocks": 20,
+          "settings": {
+            "image": "",
+            "link": ""
+          }
+        },
+        {
+          "type": "logo_image",
+          "name": {
+            "zh-CN": "品牌图",
+            "en-US": "Logo image"
+          },
+          "max_blocks": 20,
+          "settings": {
+            "image": "",
+            "link": ""
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}