shoplazza-cli 0.0.1

package/fixtures/sections/three_images.liquid

@@ -0,0 +1,157 @@
+{% use 'three_images.css' %}
+<div class="container container-gap">
+  {% assign  text= section.settings.text %}
+<div class="row three-image__row">
+{% assign defaultImg = 'oss/operation/0910a006fb3101bcf913804c47bf3b13.png' %}
+{% for i in (1..3) %}
+  {% if i == 1 %}
+    {% assign imgSrc = 'image_src_1' %}
+    {% assign linkUrl = 'url_1' %}
+  {% elsif i == 2 %}
+    {% assign imgSrc = 'image_src_2' %}
+    {% assign linkUrl = 'url_2' %}
+  {% else %}
+    {% assign imgSrc = 'image_src_3' %}
+    {% assign linkUrl = 'url_3' %}
+  {% endif %}
+  {% assign imageUrl = section.settings[imgSrc] %}
+  {% assign linkToUrl = section.settings[linkUrl].url %}
+  {% assign link_type = section.settings[linkUrl].type %}
+  <div class="col-sm-12 col-md-4 three-image__image">
+    <a class="common__img-wrapper_lazy {% if linkToUrl %}common__mask{% endif %} {%if shop.env == 1 and imageUrl == "" %}common__img-desc{% endif %}" data-title="Image-{{i}}"
+      style="padding-bottom:{{ images[imageUrl].height | image_padding_bottom : images[imageUrl].width, origin: 'unlimit'}}; width:100%"
+      {% if linkToUrl%}
+        href="{{ linkToUrl }}"
+      {% endif %}
+      {% if link_type == 'web' %}
+        target="_blank"
+      {% endif %}>
+      {% assign src = imageUrl | default: defaultImg %}
+      {% include 'lazyimg',
+        src: src,
+        class: 'img-full-width'
+      %}
+    </a>
+  </div>
+{% endfor %}
+</div>
+</div>
+
+
+
+{% schema %}
+{
+  "name": "three_images",
+  "settings": [
+    {
+      "type": "header",
+      "content": {
+        "en-US": "Image 1",
+        "zh-CN": "图1"
+      }
+    },
+    {
+      "type": "image_picker",
+      "id": "image_src_1",
+      "label": {
+        "en-US": "Image",
+        "zh-CN": "图片"
+      },
+      "info": {
+        "zh-CN": "建议尺寸：宽度1000px,高度可自适应",
+        "en-US": "Recommended resolution: width 1000px,responsive height"
+      },
+      "default": ""
+    },
+    {
+      "type": "url",
+      "id": "url_1",
+      "label": {
+        "en-US": "Link",
+        "zh-CN": "链接"
+      },
+      "is_image_link": true,
+      "default": ""
+    },
+    {
+      "type": "header",
+      "content": {
+        "en-US": "Image 2",
+        "zh-CN": "图2"
+      }
+    },
+    {
+      "type": "image_picker",
+      "id": "image_src_2",
+      "label": {
+        "en-US": "Image",
+        "zh-CN": "图片"
+      },
+      "info": {
+        "zh-CN": "建议尺寸：宽度1000px,高度可自适应",
+        "en-US": "Recommended resolution: width 1000px,responsive height"
+      },
+      "default": ""
+    },
+    {
+      "type": "url",
+      "id": "url_2",
+      "label": {
+        "en-US": "Link",
+        "zh-CN": "链接"
+      },
+      "is_image_link": true,
+      "default": ""
+    },
+    {
+      "type": "header",
+      "content": {
+        "en-US": "Image 3",
+        "zh-CN": "图3"
+      }
+    },
+    {
+      "type": "image_picker",
+      "id": "image_src_3",
+      "label": {
+        "en-US": "Image",
+        "zh-CN": "图片"
+      },
+      "info": {
+        "zh-CN": "建议尺寸：宽度1000px,高度可自适应",
+        "en-US": "Recommended resolution: width 1000px, responsive height"
+      },
+      "default": ""
+    },
+    {
+      "type": "url",
+      "id": "url_3",
+      "label": {
+        "en-US": "Link",
+        "zh-CN": "链接"
+      },
+      "is_image_link": true,
+      "default": ""
+    }
+  ],
+  "presets": [
+    {
+      "name": "three_images",
+      "cname": {
+        "zh-CN": "多图-3",
+        "en-US": "Images 3"
+      },
+      "category": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "ccategory": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "display": true,
+      "blocks": []
+    }
+  ]
+}
+{% endschema %}

package/fixtures/sections/two_images.liquid

@@ -0,0 +1,125 @@
+{% use 'two_images.css' %}
+<div class="container container-gap">
+  {% assign  text= section.settings.text %}
+<div class="row two-image__row">
+{% assign defaultImg = 'oss/operation/0910a006fb3101bcf913804c47bf3b13.png' %}
+
+{% for i in (1..2) %}
+  {% if i == 1 %}
+    {% assign imgSrc = 'image_src_1' %}
+    {% assign linkUrl = 'url_1' %}
+  {% else %}
+    {% assign imgSrc = 'image_src_2' %}
+    {% assign linkUrl = 'url_2' %}
+  {% endif %}
+  {% assign imageUrl = section.settings[imgSrc] %}
+  {% assign linkToUrl = section.settings[linkUrl].url %}
+  {% assign link_type = section.settings[linkUrl].type %}
+  <div class="col-sm-12 col-md-6 two-image__image">
+    <a class="common__img-wrapper_lazy {% if linkToUrl %}common__mask{% endif %} {%if shop.env == 1 and imageUrl == "" %}common__img-desc{% endif %}" data-title="Image-{{i}}"
+      style="padding-bottom:{{ images[imageUrl].height | image_padding_bottom : images[imageUrl].width, origin: 'unlimit'}}; width:100%"
+      {% if linkToUrl%}
+        href="{{linkToUrl}}"
+      {% endif %}
+      {% if link_type == 'web' %}
+        target="_blank"
+      {% endif %}>
+      {% assign src = imageUrl | default: defaultImg %}
+      {% include 'lazyimg',
+        src: src,
+        class: 'img-full-width'
+      %}
+    </a>
+  </div>
+{% endfor %}
+</div>
+</div>
+
+
+
+{% schema %}
+{
+  "name": "two_images",
+  "settings": [
+    {
+      "type": "header",
+      "content": {
+        "en-US": "Image 1",
+        "zh-CN": "图1"
+      }
+    },
+    {
+      "type": "image_picker",
+      "id": "image_src_1",
+      "label": {
+        "en-US": "Image",
+        "zh-CN": "图片"
+      },
+      "info": {
+        "zh-CN": "建议尺寸：宽度1000px,高度可自适应",
+        "en-US": "Recommended resolution:width 1000px,responsive height"
+      },
+      "default": ""
+    },
+    {
+      "type": "url",
+      "id": "url_1",
+      "label": {
+        "en-US": "Link",
+        "zh-CN": "链接"
+      },
+      "is_image_link": true,
+      "default": ""
+    },
+    {
+      "type": "header",
+      "content": {
+        "en-US": "Image 2",
+        "zh-CN": "图2"
+      }
+    },
+    {
+      "type": "image_picker",
+      "id": "image_src_2",
+      "label": {
+        "en-US": "Image",
+        "zh-CN": "图片"
+      },
+      "info": {
+        "zh-CN": "建议尺寸：宽度1000px,高度可自适应",
+        "en-US": "Recommended resolution:width 1000px,responsive height"
+      },
+      "default": ""
+    },
+    {
+      "type": "url",
+      "id": "url_2",
+      "label": {
+        "en-US": "Link",
+        "zh-CN": "链接"
+      },
+      "is_image_link": true,
+      "default": ""
+    }
+  ],
+  "presets": [
+    {
+      "name": "two_images",
+      "cname": {
+        "zh-CN": "多图-2",
+        "en-US": "Images 2"
+      },
+      "category": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "ccategory": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "display": true,
+      "blocks": []
+    }
+  ]
+}
+{% endschema %}

package/fixtures/sections/video.liquid

@@ -0,0 +1,95 @@
+{% use 'video.css' %}
+{% assign defaultImage = 'oss/operation/ee147ae7fe87ec16f50a5f17e57e6aa9.jpg' | img_url %}
+<div class="container video-{{section.id}} container-gap">
+  <div class="row">
+    <div class="video">
+      {% if section.settings.video_title %}
+        <h1 class="video__title dj_skin_title text-truncate">{{section.settings.video_title}}</h1>
+      {% endif %}
+      <div class="video__wrapper">
+        <img class="video__wrappe_default" src="{{defaultImage}}"/>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% javascript %}
+  $(function () {
+    var videoId = $.getYoutubeId('{{section.settings.video.url}}');
+    videoId && $('.video-{{section.id}} .video__wrapper').html('<iframe title="" src="https://www.youtube.com/embed/' + videoId + '?rel=0&modestbranding=1&autoplay='+ 0 + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
+  })
+{% endjavascript %}
+
+{% schema %}
+{
+  "name": "video",
+  "settings": [
+    {
+      "type": "header",
+      "content": {
+        "en-US": "Text",
+        "zh-CN": "文本"
+      }
+    },
+    {
+      "type": "text",
+      "id": "video_title",
+      "label": {
+        "en-US": "Heading",
+        "zh-CN": "标题"
+      },
+      "placeholder": {
+        "zh-CN": "视频标题",
+        "en-US": "Video title"
+      },
+      "default": "Video"
+    },
+    {
+      "type": "header",
+      "content": {
+        "en-US": "Video",
+        "zh-CN": "视频"
+      }
+    },
+    {
+      "type": "popover",
+      "label": {
+        "zh-CN": "请复制视频链接到下方，当前仅支持Youtube视频",
+        "en-US": "Copy the video link to the below (only support Youtube video now)"
+      }
+    },
+    {
+      "type": "video_url",
+      "id": "video",
+      "placeholder": {
+        "en-US": "Paste Youtube video link",
+        "zh-CN": "粘贴Youtube视频链接"
+      },
+      "label": {
+        "zh-CN": "视频链接",
+        "en-US": "Video link"
+      },
+      "default": ""
+    }
+  ],
+  "presets": [
+    {
+      "name": "video",
+      "cname": {
+        "en-US": "Video",
+        "zh-CN": "视频"
+      },
+      "category": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "ccategory": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "display": true,
+      "blocks": []
+    }
+  ]
+}
+{% endschema %}

package/fixtures/sections/video_text.liquid

@@ -0,0 +1,128 @@
+{% use 'video_text.css' %}
+{% assign defaultImage = 'oss/operation/ee147ae7fe87ec16f50a5f17e57e6aa9.jpg' | img_url %}
+<div class="video-text container container-gap">
+  <div class="row">
+    <div class="col-12 col-md-6 video-text__text d-flex flex-column justify-content-center">
+      {% for block in section.blocks %}
+        {% if block.type == 'heading' and block.settings.heading %}
+          <h1 class="dj_skin_title_font video-text__text_title">{{block.settings.heading | escape}}</h1>
+        {% endif %}
+        {% if block.type == 'desc' and block.settings.desc %}
+          <div class="dj-mce-view dj_skin_text video-text__text_desc">{{block.settings.desc}}</div>
+        {% endif %}
+      {% endfor %}
+    </div>
+    <div class="col-12 col-md-6 video-text__video d-flex align-items-center">
+      <div class="video-text__video_wrapper">
+        <img class="video-text__video_wrapper-default" src="{{defaultImage}}"/>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+{% javascript %}
+
+$(function () {
+  var videoId = $.getYoutubeId('{{section.settings.video_url.url}}');
+  videoId && $('[data-section-id="{{section.id}}"] .video-text__video_wrapper').html('<iframe title="" class="video-text__video_wrapper-iframe" src="https://www.youtube.com/embed/' + videoId + '?rel=0&modestbranding=1&autoplay='+ 0 + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
+})
+{% endjavascript %}
+
+{% schema %}
+{
+  "name": "video_text",
+  "max_blocks": 2,
+  "settings": [
+    {
+      "type": "video_url",
+      "id": "video_url",
+      "placeholder": {
+        "en-US": "Paste Youtube video link",
+        "zh-CN": "粘贴Youtube视频链接"
+      },
+      "label": {
+        "zh-CN": "视频背景链接",
+        "en-US": "Video link"
+      },
+      "default": ""
+    }
+  ],
+  "blocks": [
+    {
+      "type": "heading",
+      "name": {
+        "zh-CN": "标题",
+        "en-US": "Heading"
+      },
+      "limit": 1,
+      "settings": [
+        {
+          "type": "text",
+          "id": "heading",
+          "label": {
+            "en-US": "Heading",
+            "zh-CN": "标题"
+          },
+          "default": "Video hero"
+        }
+      ]
+    },
+    {
+      "type": "desc",
+      "name": {
+        "zh-CN": "文字",
+        "en-US": "Text"
+      },
+      "limit": 1,
+      "settings": [
+        {
+          "type": "richtext",
+          "id": "desc",
+          "label": {
+            "en-US": "Text",
+            "zh-CN": "正文"
+          },
+          "placeholder": {
+            "zh-CN": "输入文本内容",
+            "en-US": "Input text"
+          },
+          "default": "<p><span>Use this text to share information about your brand with your customers. Describe a product,share announcements,or welcome customers to your store.</span></p>"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "video_text",
+      "cname": {
+        "en-US": "Text video",
+        "zh-CN": "文本视频"
+      },
+      "category": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "ccategory": {
+        "en-US": "Material",
+        "zh-CN": "素材"
+      },
+      "display": true,
+      "blocks": [
+        {
+          "type": "heading",
+          "settings": {
+            "heading": "Video hero"
+          }
+        },
+        {
+          "type": "desc",
+          "settings": {
+            "desc": "<p><span>Use this text to share information about your brand with your customers. Describe a product,share announcements,or welcome customers to your store.</span></p>"
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/fixtures/snippets/bgset.liquid

@@ -0,0 +1,21 @@
+{% if image != blank %}
+  {% comment %} 默认图是从管理平台上传，没有width信息，返回 {% endcomment %}
+  {% if image.width == 0 or image.width == nil %}
+    {{ image.src | img_url: '180x' }} 180w,
+    {{ image.src | img_url: '540x' }} 540w,
+    {{ image.src | img_url: '900x' }} 900w,
+    {{ image.src | img_url: '1296x' }} 1296w,
+    {{ image.src | img_url: '1728x' }} 1728w
+  {% else %}
+    {% if image.width <= 180 %}{{ image.src | img_url: '180x' }} 180w,{% endif %}
+    {% if image.width > 180 %}{{ image.src | img_url: '180x' }} 180w,{% endif %}
+    {% if image.width > 360 %}{{ image.src | img_url: '360x' }} 360w,{% endif %}
+    {% if image.width > 540 %}{{ image.src | img_url: '540x' }} 540w,{% endif %}
+    {% if image.width > 720 %}{{ image.src | img_url: '720x' }} 720w,{% endif %}
+    {% if image.width > 900 %}{{ image.src | img_url: '900x' }} 900w,{% endif %}
+    {% if image.width > 1080 %}{{ image.src | img_url: '1080x' }} 1080w,{% endif %}
+    {% if image.width > 1296 %}{{ image.src | img_url: '1296x' }} 1296w,{% endif %}
+    {% if image.width > 1512 %}{{ image.src | img_url: '1512x' }} 1512w,{% endif %}
+    {% if image.width > 1728 %}{{ image.src | img_url: '1728x' }} 1728w{% endif %}
+  {% endif %}
+{% endif %}

package/fixtures/snippets/card_title.liquid

@@ -0,0 +1,8 @@
+{% comment %}
+  Description: 卡片标题
+  Author: Pang
+  Params: title-卡片标题
+{% endcomment %}
+<div class="row">
+  <div class="dj_skin_title common-card-title col-12" data-theme-editor-setting="{{titlePath}}">{{title}}</div>
+</div>

package/fixtures/snippets/cart_modal.liquid

@@ -0,0 +1,74 @@
+{% use 'cart_modal.css' %}
+<script id="atc-modal-wrapper" type="text/html">
+  <div class="modal fade right" id="atc-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-body">
+          <div class="sep-font sep-font-close close modal__close" data-dismiss="modal" aria-label="Close"></div>
+          <div id='atc_container'>
+          </div>
+          <div style="display:flex;align-items:center;justify-content:center;height: 2.5rem;">
+            <a href="/cart" class="atc-btn__link">{{ 'i18n.product.product_detail.view_cart' | t }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</script>
+
+{% javascript %}
+  $(function () {
+    if ($('#atc-modal').length) return;
+    $(document.body).on("dj.addToCart", function (e, options) {
+      if (window.SHOP_PARAMS.template_type == '13') { $.toast.show({ content: window.SHOP_PARAMS.product_lang.added_to_cart_successfully }) };
+      if (window.SHOP_PARAMS.template_type === '13') return;
+      if (options.source == "drawer" || options.process != 'to_toast') return;
+      if ($.cart) { $(document).trigger("dj.cart.refresh"); $('#atc-modal').modal('show'); return; }
+      $.ajax({
+        type: 'GET',
+        dataType: 'html',
+        url: '/cart?' + $.toQuery($.params()),
+        success: function (res) {
+          if ($('#atc-modal').length) return;
+          console.log('options', options)
+          var modalTemplate = template('atc-modal-wrapper', options);
+          $('body').prepend(modalTemplate);
+          var bodyHTML = res.match(/(<body\b[^>]*>)([^<]*(?:(?!<\/body>)<[^<]*)*)(<\/body>)/gi)[0];
+          var bodyClass = (res.match(/\<body.+class="([^"]+)/) || ["",""])[1];
+          $('#atc-modal .modal-content').addClass(bodyClass);
+          console.log('bodyHTML', bodyHTML)
+          var $body = $(bodyHTML);
+          $body.find('[data-section-type^=header],[data-section-type^=footer]').attr({ 'data-section-id': '' }).remove();
+          $("#atc_container").html($body);
+          var $modal = $('#atc-modal');
+          $('.modal-backdrop').css({ display: 'none' })
+          $modal.modal('show').on('shown.bs.modal', function () {
+            $.loading.hide();
+            $('#product-select-modal').modal('hide');
+            if ($(window).width() < 768) {
+              $(document.body).addClass('cart_fixed-screen');
+            }
+            $(document.body).one("click", '.modal-backdrop', function () {
+              $modal.modal('hide')
+            })
+          })
+          $modal.on('hide.bs.modal hidden.bs.modal', function () {
+            $(document.body).removeClass('cart_fixed-screen');
+          })
+          cartObj && cartObj.line_items && cartObj.line_items.forEach(function(item, index) {
+            if (Number(item.image.width) >= Number(item.image.height)) {
+              $('#cart').before('<style> #cart_form .cart__item:nth-of-type(' + (index + 1) + ') .cart__img {height:90px!important;} </style>')
+            } else {
+              if ((110 / 90) * item.image.width < item.image.height) {
+                $('#cart').before('<style> #cart_form .cart__item:nth-of-type(' + (index + 1) + ') .cart__img {height:110px!important;} </style>')
+              } else {
+                $('#cart').before('<style> #cart_form .cart__item:nth-of-type(' + (index + 1) + ') .cart__img {width:90px;height:' + ((90 * item.image.height) / item.image.width) + 'px!important;} </style>')
+              }
+            }
+          });
+          $(document).trigger("dj.cart.refresh")
+        }
+      });
+    })
+  })
+{% endjavascript %}

package/fixtures/snippets/collection.liquid

@@ -0,0 +1,77 @@
+{% assign title = collection.title %}
+{% assign type = collection.type %}
+{% assign image = collection.image %}
+{% assign url = collection.url %}
+{% assign imgSize = imgSize | '600x' %}
+
+{% assign isMock = collection.isMock %}
+{% assign imageHeightMd = heightMd | default: "100%" %}
+{% assign imageHeight = height | default: "100%" %}
+{% assign defaultImg = defaultImage | default: 'oss/operation/5fa90cbdc7fbff1eac9c585b3b5caa0e.png' %}
+{% assign src = image.src | default: defaultImg %}
+
+{% comment %} 小图情况处理 {% endcomment %}
+{% assign rate = image.height | image_padding_bottom : image.width, origin: 'unlimit' | abs %}
+{% assign rate_gt = 'width: 100%;height: auto;max-width: unset;max-height: unset; right: 0; top: 50%; left: 50%; bottom: unset; transform: translate(-50%, -50%);' %}
+{% assign rate_lt = 'height: 100%;max-width: unset;max-height: unset; bottom: 0; left: 50%; top: 100%; right: unset; transform: translate(-50%, -50%);' %}
+
+{% comment %} 由于无法获取默认图宽高比例，需要手动设置 {% endcomment %}
+{% if src == defaultImg %}
+  {% assign rate = '100' %}
+{% endif %}
+
+{% comment %} PC端 {% endcomment %}
+<div data-track="item"
+  data-track-type="{{type|escape}}" data-track-name="{{title|escape}}" class="product-snippet">
+  {% if isMock %}
+    {% assign src = defaultImg %}
+  {% endif %}
+  {% assign wrapper_rate =  imageHeightMd | abs %}
+  {% assign img_size = rate_lt %}
+  {% if rate > wrapper_rate %}
+    {% assign img_size = rate_gt %}
+  {% endif %}
+  {% assign wrapper_rate_mobile =  imageHeight | abs %}
+  {% assign img_size_mobile = rate_lt %}
+  {% if rate > wrapper_rate_mobile %}
+    {% assign img_size_mobile = rate_gt %}
+  {% endif %}
+  <style>
+    @media (min-width: 768px) {
+      [data-section-id="{{section.id}}"] a.product-snippet__img-wrapper {
+        padding-bottom: {{imageHeightMd}};
+      }
+      [data-section-id="{{section.id}}"] a.product-snippet__img-wrapper img[id="{{src}}"] {
+        {{img_size}}
+      }
+    }
+    @media (max-width: 768px) {
+      [data-section-id="{{section.id}}"] a.product-snippet__img-wrapper {
+        padding-bottom: {{imageHeight}};
+      }
+      [data-section-id="{{section.id}}"] a.product-snippet__img-wrapper img[id="{{src}}"] {
+        {{img_size_mobile}}
+      }
+    }
+  </style>
+
+  <a {% if isMock != true and url %}href="{{url}}"{% endif %}
+    class="product-snippet__img-wrapper common__img-wrapper_lazy common__mask_title two_line_text_truncate d-flex align-items-center justify-content-center dj_skin_title_font_family"
+    title="{{title}}"
+    style="width: 100%; {% if isMock %}background: #f7f7f7;{% endif %}">
+    <img
+      id="{{src}}"
+      src="{{shop.default_img}}"
+      class="lazyload {{class}} imglazy"
+      {% if lazysize %}
+        data-src="{{src | img_url: lazysize}}"
+      {% else %}
+
+        data-src="{{src | img_url: '{width}x'}}"
+        data-sizes="auto"
+      {% endif %}
+      alt="{{image.alt | default: title | escape}}"
+      {{other}}
+    >
+  </a>
+</div>