shoplazza-cli 0.0.1

package/fixtures/assets/collection_detail.scss

@@ -0,0 +1,345 @@
+@import './tools.scss';
+
+.collection {
+  &__container {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &__title {
+    color: rgba(33, 33, 33, 1);
+    font-weight: 500;
+    font-size: px-to-rem(18);
+    margin: 16px 0;
+
+    @media ($pc) {
+      font-size: px-to-rem(34);
+      line-height: 1.3em;
+      margin: 20px 0;
+      padding: 0;
+    }
+  }
+
+  &__hr {
+    margin: px-to-rem(30/2) px-to-rem(15) 0;
+    border: none;
+    border-bottom: 1px solid rgba(238, 238, 238, 1);
+    width: 100%;
+
+    @media ($pc) {
+      margin: px-to-rem(30) 0 0;
+    }
+  }
+
+  &__desc {
+    color: #666;
+    font-size: px-to-rem(14);
+    margin: 10px 0;
+
+    @media ($pc) {
+      font-size: px-to-rem(18);
+      line-height: 1.2em;
+      margin: 20px 0;
+      padding: 0;
+    }
+  }
+
+  &__sort {
+    padding-top: px-to-rem(30/2);
+    padding-bottom: px-to-rem(30/ 2);
+
+    @media ($pc) {
+      padding-top: px-to-rem(30);
+      padding-bottom: px-to-rem(25);
+      margin: 0 px-to-rem(-15);
+    }
+  }
+
+  &-product {
+    &__wrapper {
+      margin: 0 px-to-rem(-$bootstrap_padding/2);
+
+      @media ($pc) {
+        margin: 0 px-to-rem(-$bootstrap_padding - $pc_collection_row_padding);
+      }
+    }
+  }
+
+  &__number {
+    font-size: px-to-rem(14);
+    color: rgba(0, 0, 0, 1);
+    line-height: px-to-rem(38);
+
+    @media ($mobile) {
+      line-height: 1em;
+      margin-bottom: px-to-rem(15);
+    }
+  }
+
+  &__sort-select {
+    font-size: px-to-rem(14);
+    color: #000;
+
+    @media ($mobile) {
+      .collection__filter-by ~ & {
+        width: 50%;
+      }
+
+      .common__select {
+        width: 100%;
+      }
+
+      .common__select select {
+        width: 100%;
+      }
+    }
+  }
+
+  &__none {
+    font-size: px-to-rem(14);
+    color: rgba(0, 0, 0, 1);
+    line-height: px-to-rem(20);
+    margin-top: px-to-rem(17.5);
+    margin-bottom: px-to-rem(25);
+
+    @media ($pc) {
+      font-size: px-to-rem(16);
+      margin-top: px-to-rem(70);
+      margin-bottom: px-to-rem(32);
+    }
+  }
+
+  &__none-btn {
+    padding-bottom: px-to-rem(58);
+
+    a {
+      font-size: px-to-rem(15);
+      font-weight: 600;
+      line-height: px-to-rem(30);
+    }
+
+    @media ($pc) {
+      padding-bottom: px-to-rem(122);
+
+      a {
+        width: px-to-rem(240);
+        font-size: px-to-rem(16);
+        font-weight: 500;
+        line-height: px-to-rem(36);
+      }
+    }
+  }
+
+  &__pagination {
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 50px;
+  }
+
+  &__filter-by {
+    width: 165px;
+    font-size: 14px;
+    border-radius: 2px;
+
+    @media ($mobile) {
+      width: 50%;
+    }
+  }
+
+  &__filter-buttons {
+    &_has-filter {
+      @media ($mobile) {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.collection-filter__wrapper {
+  transition: left 0.3s;
+  margin: 0 px-to-rem(9) 0 px-to-rem(-15);
+
+  @media ($mobile) {
+    position: fixed;
+    height: 100vh;
+    top: 0;
+    left: -100%;
+    z-index: 300;
+    margin: 0;
+
+    &-open {
+      left: 0 !important;
+      right: 0;
+      background: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
+
+.collection-filter {
+  flex-grow: 1;
+  width: 100%;
+  margin-bottom: px-to-rem(20);
+
+  &__scroll {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+  }
+
+  @media ($mobile) {
+    width: px-to-rem(300);
+    background: #fff;
+    overflow-y: auto;
+    height: 100vh;
+    padding: 0 px-to-rem(15) px-to-rem(74);
+  }
+
+  &__title {
+    padding: px-to-rem(30) 0 px-to-rem(25);
+    line-height: px-to-rem(38);
+    font-size: px-to-rem(18);
+
+    @media ($mobile) {
+      padding: px-to-rem(30) 0 px-to-rem(25);
+      line-height: 1em;
+      margin-bottom: px-to-rem(-20);
+    }
+  }
+
+  &__item {
+    width: 100%;
+    margin-bottom: px-to-rem(25);
+
+    @media ($mobile) {
+      margin: px-to-rem(20) 0;
+    }
+  }
+
+  &__item-title {
+    font-weight: bold;
+    height: px-to-rem(40);
+    line-height: px-to-rem(40);
+    padding-left: px-to-rem(10);
+    background: rgba(0, 0, 0, 0.03);
+    font-size: px-to-rem(16);
+  }
+
+  &__item-select {
+    overflow-y: auto;
+    max-height: px-to-rem(233);
+
+    /* width */
+    &::-webkit-scrollbar {
+      width: px-to-rem(4);
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: #f5f5f5;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: #dfdfdf;
+      border-radius: px-to-rem(4);
+    }
+
+    @media ($mobile) {
+      overflow: unset;
+      max-height: unset;
+    }
+  }
+
+  &__footer {
+    @media ($mobile) {
+      margin-top: px-to-rem(15);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: px-to-rem(300);
+      height: px-to-rem(74);
+      display: flex;
+      align-items: center;
+      background: #eee;
+    }
+  }
+
+  .custom-control-label {
+    margin-left: px-to-rem(12);
+    cursor: pointer;
+
+    &::before {
+      background: #fff;
+      border: 1px solid #212121;
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    font-weight: bold;
+  }
+
+  .custom-control-input:focus ~ .custom-control-label::before {
+    box-shadow: none;
+  }
+
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
+    background-color: #fff;
+  }
+
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background: #212121;
+    border-radius: 50%;
+    transform: scale(0.6);
+  }
+
+  .custom-radio {
+    margin-top: px-to-rem(8);
+    font-size: px-to-rem(14);
+    line-height: 1.8em;
+  }
+
+  .btn {
+    font-size: px-to-rem(14);
+
+    @media ($mobile) {
+      &:first-child {
+        margin: 0 px-to-rem(10) 0 px-to-rem(15);
+        line-height: 1.1;
+      }
+
+      &:last-child {
+        margin: 0 px-to-rem(15) 0 px-to-rem(10);
+        line-height: 1.1;
+      }
+    }
+  }
+}
+
+
+
+
+html[dir='rtl'] {
+  .collection-filter__item-title {
+    padding-right: px-to-rem(10);
+  }
+
+  .collection__sort-select {
+    margin-left: 0 !important;
+  }
+
+  .collection__sort-label {
+    margin-right: 0 !important;
+    margin-left: px-to-rem(16) !important;
+  }
+
+  .collection-filter__wrapper {
+    margin: 0 px-to-rem(-15) 0 px-to-rem(9);
+  }
+
+  @media ($mobile) {
+    .collection__filter-by {
+      margin-left: px-to-rem(8);
+      margin-right: 0 !important;
+    }
+  }
+}

package/fixtures/assets/collection_list.scss

@@ -0,0 +1,11 @@
+@import './tools.scss';
+
+.collection_list_gap {
+  .common__product-gap {
+    margin-bottom: px-to-rem(30/2);
+
+    @media ($pc) {
+      margin-bottom: px-to-rem(24);
+    }
+  }
+}

package/fixtures/assets/collection_slider.scss

@@ -0,0 +1,169 @@
+@import './tools.scss';
+
+.collection_slider {
+  &__wrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    user-select: none;
+    font-size: 0;
+    cursor: grab;
+    margin: 0 -12px;
+    padding: 5px 0;
+    // 隐藏滚动条
+    scrollbar-color: transparent transparent;//火狐
+    -ms-overflow-style: none;//ie
+    &::-webkit-scrollbar{//chrome 和 Safari
+      width: 0 !important;
+    }
+
+    @media ($mobile) {
+      display: flex;
+      align-items: flex-start;
+    }
+  }
+
+  .point_none {
+    pointer-events: none;
+  }
+
+  &__pagination {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+
+    @media ($mobile) {
+      display: none;
+    }
+
+    &.done {
+      opacity: 0.3;
+    }
+
+    .sep-font {
+      font-size: 30px;
+      font-weight: 600;
+    }
+
+    &-prev {
+      left: 0;
+    }
+
+    &-next {
+      right: 0;
+    }
+  }
+
+  &__outer {
+    overflow: hidden;
+    position: relative;
+
+    @media ($pc) {
+      padding: 0;
+    }
+  }
+
+  &__item {
+    width: 25%;
+    display: inline-block;
+    padding: 0 12px;
+    min-width: 138px;
+    overflow: hidden;
+    user-select: none;
+    vertical-align: top;
+    -webkit-user-drag: none;
+    transition: transform 0.3s;
+
+    @media ($mobile) {
+      min-width: px-to-rem(250);
+    }
+
+    &:hover {
+      transform: scale(1.03);
+      transform-origin: 50% 50%;
+    }
+  }
+
+  &__image {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &__info {
+    padding: px-to-rem(10);
+    position: relative;
+    height: px-to-rem(96);
+    text-align: left;
+
+    &-title {
+      word-break: break-all;
+      white-space: normal;
+      font-size: px-to-rem(16) !important;
+      line-height: 1.2;
+      font-weight: 900 !important;
+    }
+
+    &-brief {
+      font-size: px-to-rem(14);
+      line-height: 1.2;
+      margin-top: px-to-rem(6);
+      opacity: 0.8;
+    }
+
+    &-price {
+      font-weight: bold !important;
+      font-size: 12px !important;
+      position: absolute;
+      bottom: 5px;
+    }
+  }
+
+  &__title {
+    text-align: center;
+    margin-bottom: px-to-rem(25);
+  }
+
+  &__view {
+    margin-top: px-to-rem(20);
+    text-align: center;
+
+    &-btn {
+      display: inline-block;
+      text-decoration: none;
+      color: #fff;
+      padding: px-to-rem(8) px-to-rem(28);
+    }
+
+    &-mobile {
+      display: inline-block;
+      position: relative;
+      width: 93px;
+      height: 93px;
+      line-height: 93px;
+      text-align: center;
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 50%;
+    }
+  }
+
+  &__pc {
+    @media ($mobile) {
+      display: none;
+    }
+  }
+
+  &__mobile {
+    display: block;
+    margin: auto 12px;
+    @media ($pc) {
+      display: none;
+    }
+  }
+}

package/fixtures/assets/feature_columns.scss

@@ -0,0 +1,26 @@
+@import './tools.scss';
+
+.block {
+  &__image {
+    margin-bottom: px-to-rem(15);
+
+    @media ($pc) {
+      margin-bottom: px-to-rem(20);
+    }
+  }
+
+  &__title {
+    font-size: px-to-rem(18);
+    margin-bottom: px-to-rem(10);
+  }
+
+  &__text {
+    font-size: px-to-rem(14);
+    margin-bottom: px-to-rem(18);
+  }
+
+  &__btn {
+    padding: px-to-rem(10) px-to-rem(30);
+    font-size: px-to-rem(14);
+  }
+}

package/fixtures/assets/feature_product.scss

@@ -0,0 +1,109 @@
+@import './tools.scss';
+
+.featured-product {
+  @media ($pc) {
+    justify-content: space-between;
+  }
+
+  @media ($mobile) {
+    flex-direction: column;
+  }
+
+  &__image {
+    position: relative;
+    overflow: hidden;
+
+    @media ($mobile) {
+      width: 100%;
+      margin-bottom: px-to-rem(20);
+      order: 0;
+    }
+
+    @media ($pc) {
+      width: 50%;
+    }
+
+    &_tag {
+      position: absolute;
+      top: px-to-rem(-16);
+      right: px-to-rem(-10);
+      width: px-to-rem(50);
+      height: px-to-rem(50);
+      background-color: #9a9a9a;
+      border-radius: px-to-rem(30);
+      color: #fff;
+      font-size: px-to-rem(13);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @media ($pc) {
+        top: px-to-rem(-25);
+        right: px-to-rem(-25);
+        width: px-to-rem(50);
+        height: px-to-rem(50);
+      }
+    }
+  }
+
+  &__text {
+    display: grid;
+    row-gap: 20px;
+    @media ($mobile) {
+      order: 1;
+      row-gap: 12px;
+    }
+
+    @media ($pc) {
+      width: 40%;
+    }
+  }
+
+  &__title {
+    font-size: px-to-rem(24);
+    font-weight: 500;
+    display: block;
+
+    @media ($pc) {
+      font-size: px-to-rem(30);
+    }
+  }
+
+  &__desc {
+    font-size: 16px;
+  }
+
+  &__price-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span,
+    del {
+      padding: 0 px-to-rem(8);
+      vertical-align: middle;
+      max-width: 100%;
+    }
+  }
+
+  &__price {
+    font-size: px-to-rem(20);
+
+    @media ($pc) {
+      font-size: px-to-rem(24);
+    }
+  }
+
+  &__compare-at-price {
+    font-size: px-to-rem(16);
+  }
+
+  &__btn {
+    max-width: px-to-rem(345);
+    padding: px-to-rem(10) px-to-rem(30);
+
+    @media ($pc) {
+      max-width: px-to-rem(200);
+    }
+  }
+}

package/fixtures/assets/footer.js

@@ -0,0 +1,58 @@
+(function ($) {
+  $.card_footer = function (params) {
+    $("#section_footer").on('click', '#submit_footer_newsletter', function () {
+      var emailExp = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/g;
+      var emailObj = $('#input_email_footer_newsletter');
+      var email = emailObj.val();
+      var invalidFeedback = $('#footer-newsletter .invalid-feedback');
+      var validFeedback = $('#footer-newsletter .valid-feedback');
+      var lan = params.lan;
+      var feedbacks = {
+        'is_empty': lan.email_address_empty_warning,
+        'not_formatted': lan.email_address_invalid_warning,
+        'is_successful': lan.confirmation
+      };
+
+      emailObj.removeClass('is-valid is-invalid');
+      invalidFeedback.html('');
+      validFeedback.html('');
+
+      if (email === '') {
+        invalidFeedback.html(feedbacks['is_empty']);
+        emailObj.addClass('is-invalid');
+        return;
+      }
+      if (!emailExp.test(email)) {
+        invalidFeedback.html(feedbacks['not_formatted']);
+        emailObj.addClass('is-invalid');
+        return;
+      }
+      $('#submit_footer_newsletter').attr("disabled", "");
+      $.ajax({
+        url: '/api/customers/newsletters',
+        type: 'post',
+        dataType: 'text',
+        data: {
+          email: email
+        },
+        success: function (data, textStatus, jqXHR) {
+          if (jqXHR.status === 200) {
+            emailObj.addClass('is-valid');
+            validFeedback.html(feedbacks['is_successful']);
+          }
+        },
+        error: function (jqXHR) {
+          emailObj.addClass('is-invalid');
+          invalidFeedback.html(JSON.parse(jqXHR.responseText).errors);
+        },
+        complete: function () {
+          $('#submit_footer_newsletter').removeAttr("disabled");
+        }
+      });
+    }).on('keyup', '#input_email_footer_newsletter', function (e) {
+      if (e.keyCode === 13) {
+        $('#submit_footer_newsletter').trigger('click');
+      }
+    });
+  };
+})(window.jQuery);