Subversion Repositories web.creative

{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default" id="btn-cancel"><i class="fa fa-reply"></i></a>
      </div>
      <h1>{{ heading_title }}</h1>      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_create }}</h3>
      </div>
      <div class="panel-body">
        {% if error_variant %}
          <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_variant }}</div>
        {% else %}
          <div id="page-listing">
            {% if error_warning %}
              <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
            {% endif %}
            <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
              <input type="hidden" name="product_id" value="{{ product.product_id }}"/>
              <input type="hidden" name="quantity" value="{{ product.quantity }}"/>
              <input type="hidden" name="taxonomy_id" value="" id="taxonomy-id" />
              <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-listing-general" data-toggle="tab">{{ tab_general }}</a></li>
                <li><a href="#tab-listing-additional" data-toggle="tab">{{ tab_additional }}</a></li>
                <li><a href="#tab-images" data-toggle="tab">{{ tab_image }}</a></li>
              </ul>
              <div class="tab-content">
                <div id="tab-listing-general" class="tab-pane active">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group required">
                        <label class="col-sm-2 control-label">{{ entry_category }}</label>
                        <div class="col-sm-10">
                          <div id="category-selected" class="alert alert-success" style="display:none;"><i class="fa fa-check fa-lg" style="color:green"></i> {{ text_category_selected }} <a class="label label-info" id="reset-category">{{ button_edit }}</a></div>
                          <span id="category-loading"><i class="fa fa-cog fa-lg fa-spin"></i></span>
                          <span id="category-parents"></span>
                          <div id="category-select-container" style="display: none;"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-title">{{ entry_title }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="title" value="{{ product.name }}" placeholder="{{ entry_title }}" id="input-title" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-description"><span data-toggle="tooltip" data-container="#tab-listing-general" title="{{ help_description }}">{{ entry_description }}</span></label>
                    <div class="col-sm-10">
                      <textarea name="description" placeholder="{{ entry_description }}" id="input-description" class="form-control">{{ product.description_raw }}</textarea>
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-price">{{ entry_price }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="price" value="{{ product.price }}" placeholder="{{ entry_price }}" id="input-price" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-is-supply">{{ entry_is_supply }}</label>
                    <div class="col-sm-10">
                      <select name="is_supply" id="input-is-supply" class="form-control">
                        <option value="false" selected="selected">{{ text_no }}</option>
                        <option value="true">{{ text_yes }}</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-who-made">{{ entry_who_made }}</label>
                    <div class="col-sm-10">
                      <select name="who_made" id="input-who-made" class="form-control">
                        {% for who_made in setting.who_made %}
                        <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-when-made">{{ entry_when_made }}</label>
                    <div class="col-sm-10">
                      <select name="when_made" id="input-when-made" class="form-control">
                        {% for when_made in setting.when_made %}
                        <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-state">{{ entry_state }}</label>
                    <div class="col-sm-10">
                      <select name="state" id="input-state" class="form-control">
                        {% for state in setting.state %}
                        <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="form-group required">
                    <label class="col-sm-2 control-label" for="input-shipping">{{ entry_shipping }} <span id="shipping-loading" style="display: none;"><i class="fa fa-cog fa-lg fa-spin"></i></span></label>
                    <div class="col-sm-10">
                      <select name="shipping_template_id" id="input-shipping" class="form-control" disabled="disabled">
                      </select>
                    </div>
                  </div>
                </div>
                <div id="tab-listing-additional" class="tab-pane">
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-shop-section">{{ entry_shop }} <span id="shop-section-loading" style="display: none;"><i class="fa fa-cog fa-lg fa-spin"></i></span></label>
                    <div class="col-sm-10">
                      <select name="shop_section_id" id="input-shop-section" class="form-control" disabled="disabled">
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-style-1">{{ entry_style }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="style_1" value="" placeholder="{{ entry_style }}" id="input-style-1" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-style-2">{{ entry_style_2 }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="style_2" value="" placeholder="{{ entry_style_2 }}" id="input-style-2" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-non-taxable">{{ entry_non_taxable }}</label>
                    <div class="col-sm-10">
                      <select name="non_taxable" id="input-non-taxable" class="form-control">
                        <option value="0" selected="selected">{{ text_no }}</option>
                        <option value="1">{{ text_yes }}</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-recipient">{{ entry_recipient }}</label>
                    <div class="col-sm-10">
                      <select name="recipient" id="input-recipient" class="form-control">
                        {% for recipient in setting.recipient %}
                        <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-occasion">{{ entry_occasion }}</label>
                    <div class="col-sm-10">
                      <select name="occasion" id="input-occasion" class="form-control">
                        {% for occasion in setting.occasion %}
                        <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-processing-min">{{ entry_processing_min }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="processing_min" value="" placeholder="{{ entry_processing_min }}" id="input-processing-min" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-processing-max">{{ entry_processing_max }}</label>
                    <div class="col-sm-10">
                      <input type="text" name="processing_max" value="" placeholder="{{ entry_processing_max }}" id="input-processing-max" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-material">{{ entry_materials }}</label>
                    <div class="col-sm-10">
                      <div class="row">
                        <div class="col-sm-4">
                          <div class="row">
                            <div class="col-xs-8">
                              <input type="text" name="material_input" value="" placeholder="{{ entry_materials }}" id="input-material" class="form-control" />
                            </div>
                            <div class="col-xs-2">
                              <button class="btn btn-primary" title="" onclick="addMaterial();" data-toggle="tooltip" type="button" data-original-title="{{ text_material_add }}"><i class="fa fa-plus-circle"></i></button>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-8">
                          <ul class="list-group" id="material-container">
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-tag">{{ entry_tags }}</label>
                    <div class="col-sm-10">
                      <div class="row">
                        <div class="col-sm-4">
                          <div class="row">
                            <div class="col-xs-8">
                              <input type="text" name="tag_input" value="" placeholder="{{ entry_tags }}" id="input-tag" class="form-control" />
                            </div>
                            <div class="col-xs-2">
                              <button class="btn btn-primary" title="" onclick="addTag();" data-toggle="tooltip" type="button" data-original-title="{{ text_tag_add }}"><i class="fa fa-plus-circle"></i></button>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-8">
                          <ul class="list-group" id="tag-container">
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="tab-images" class="tab-pane">
                  <div class="form-group">
                    <label class="col-sm-2 control-label" for="input-image">{{ entry_image }}</label>
                    <div class="col-sm-10"><a id="thumb-image" class="img-thumbnail"><img src="{{ product.thumb }}" alt="" title="" /></a>
                      <input type="hidden" name="image" value="{{ product.image_url }}" id="input-image" />
                    </div>
                  </div>
                  {% if product.product_images is not empty %}
                  <div class="table-responsive">
                    <table id="images" class="table table-striped table-bordered table-hover">
                      <thead>
                      <tr>
                        <td class="text-right" style="width: 1px;"></td>
                        <td class="text-left">{{ entry_image_other }}</td>
                      </tr>
                      </thead>
                      <tbody>
                      {% set image_row = 0 %}
                      {% for product_images in product.product_images %}
                      <tr>
                        <td class="text-left"><input type="checkbox" name="product_image[{{ image_row }}][image_url]" value="{{ product_image.image_url }}" class="product-image" checked="checked" /></td>
                        <td class="text-left"><a href="" class="img-thumbnail"><img src="{{ product_image.thumb }}" alt="" title="" /></a></td>
                      </tr>
                      {% set image_row = image_row + 1 %}
                      {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {% endif %}
                </div>
                <div class="well">
                  <div class="row">
                    <div class="col-sm-12"> <a class="btn btn-primary pull-right" id="button-submit" onclick="submitForm();"><span>{{ button_submit }}</span></a> </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div id="page-listing-success" style="display:none;">
          <div class="well">
            <div class="row">
              <div class="col-sm-12">
                <h3>{{ text_created }}</h3>
                <p>{{ text_listing_id }}: <span id="listing-id"></span></p>
                <ul class="list-group" id="listing-image-status">
                </ul>
              </div>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
  var image_count = 1;

  function submitForm() {
    $.ajax({
      url: 'index.php?route=extension/openbay/etsy_product/createsubmit&user_token={{ user_token }}',
      beforeSend: function(){
        $('#button-submit').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
      },
      type: 'post',
      data: $("#form").serialize(),
      dataType: 'json',
      success: function(json) {
        if (json.error) {
          if (json.code) {
            alert(json.error);
          } else {
            $.each(json.error, function( k, v ) {
              alert(v);
            });
          }
          $('#button-submit').empty().html('<span>{{ button_submit }}</span>').removeAttr('disabled');
        } else {
          if (json.listing_id) {
            // upload the primary image
            var image_primary = $('#input-image').val();

            if (image_primary != '') {
              uploadImage(json.listing_id, $('#input-image').val(), image_count);
              image_count = image_count + 1;
            }

            // get the extra images and upload
            $('.product-image:checkbox:checked').each(function() {
              uploadImage(json.listing_id, $(this).val(), image_count);
              image_count = image_count + 1;
            });

            $('#listing-id').text(json.listing_id);
            $('#page-listing').hide();
            $('#page-listing-success').fadeIn();
            $('#button-submit').empty().html('<span>{{ button_submit }}</span>').removeAttr('disabled');
          } else {
            alert('Error creating listing?');
          }
        }
      },
      error: function (xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
        $('#button-submit').empty().html('<span>{{ button_submit }}</span>').removeAttr('disabled');
      }
    });
  }

  function uploadImage(listing_id, url, id) {
    $.ajax({
      url: 'index.php?route=extension/openbay/etsy_product/addimage&user_token={{ user_token }}',
      beforeSend: function(){
        $('#listing-image-status').append('<li class="list-group-item list-group-item-info" id="image-upload-status-'+id+'"><i class="fa fa-cog fa-lg fa-spin"></i> {{ text_img_upload }} '+id+'</li>');
      },
      type: 'post',
      data: {'listing_id':listing_id,'image':url},
      dataType: 'json',
      success: function(json) {
        $('#image-upload-status-'+id).removeClass('list-group-item-info').addClass('list-group-item-success').empty().html('<i class="fa fa-check fa-lg" style="color:green;"></i> {{ text_img_upload_done }} '+id+'');
      },
      error: function (xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  }

  var material_count = 0;

  function addMaterial() {
    var material = $('#input-material').val();

    if (material != '') {
      $('#material-container').append('<li class="list-group-item" id="material-id-'+material_count+'"><div class="row"><div class="col-xs-1"><button class="btn btn-danger btn-xs" title="" type="button" data-toggle="tooltip" data-original-title="{{ text_material_remove }}" onclick="$(\'#material-id-'+material_count+'\').remove();"><i class="fa fa-times"></i></button></div><div class="col-xs-11">'+material+'</div></div><input type="hidden" name="materials[]" value="'+material+'" /></li>');

      material_count = material_count + 1;

      $('#input-material').val('');
    }
  }

  var tag_count = 0;

  function addTag() {
    var tag = $('#input-tag').val();

    if (tag != '') {
      $('#tag-container').append('<li class="list-group-item" id="tag-id-'+tag_count+'"><div class="row"><div class="col-xs-1"><button class="btn btn-danger btn-xs" title="" type="button" data-toggle="tooltip" data-original-title="{{ text_tag_remove }}" onclick="$(\'#tag-id-'+tag_count+'\').remove();"><i class="fa fa-times"></i></button></div><div class="col-xs-11">'+tag+'</div></div><input type="hidden" name="tags[]" value="'+tag+'" /></li>');

      tag_count = tag_count + 1;

      $('#input-tag').val('');
    }
  }

  $('body').on('change', '.etsy-category', function() {
    getCategories($(this).val());
  });

  $('body').on('click', '#reset-category', function() {
    getCategories(0);
  });

  var select_html;

  function getCategories(id_path) {
    $.ajax({
      url: 'index.php?route=extension/openbay/etsy_product/getCategories&user_token={{ user_token }}&id_path=' + id_path,
      beforeSend: function(){
        $('#category-selected').hide();
        $('#category-select-container').hide();
        $('#category-loading').show();
        $('#taxonomy-id').val('');
      },
      type: 'get',
      dataType: 'json',
      success: function(json) {
        if (json.final_category == true) {
          $('#category-parents').text(json.parent_text);
          $('#category-selected').show();
          $('#taxonomy-id').val(json.last_id);
        } else {
          select_html = '<select name="category" class="etsy-category form-control">';
          select_html += '<option selected="true" disabled="disabled">{{ text_select }}</option> ';
          $.each(json.data, function( key, category ) {
            select_html += '<option value="' + category.id_path + '">' + category.name + '</option>';
          });
          select_html += '</select>';

          $('#category-select-container').empty().html(select_html).fadeIn();
          $('#category-parents').text(json.parent_text);
        }

        $('#category-loading').hide();
      },
      error: function (xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  }

  function getShippingProfiles() {
    $.ajax({
      url: 'index.php?route=extension/openbay/etsy_shipping/getall&user_token={{ user_token }}',
      beforeSend: function(){
        $('#shipping-loading').show();
      },
      type: 'get',
      dataType: 'json',
      success: function(json) {
        if ($.isEmptyObject(json.data.results)) {
          alert('{{ error_no_shipping }}');
        } else {
          $.each(json.data.results, function( k, v ) {
            $('#input-shipping').append('<option value="'+v.shipping_template_id+'">'+ v.title+'</option>');
          });
        }

        $('#input-shipping').removeAttr('disabled');
        $('#shipping-loading').hide();
      },
      error: function (xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  }

  function getShopSection() {
    $.ajax({
      url: 'index.php?route=extension/openbay/etsy_shop/getsections&user_token={{ user_token }}',
      beforeSend: function(){
        $('#shop-section-loading').show();
      },
      type: 'get',
      dataType: 'json',
      success: function(json) {
        if ($.isEmptyObject(json.data.results)) {
          alert('{{ error_no_shop_secton }}');
        } else {
          $.each(json.data.results, function( k, v ) {
            $('#input-shop-section').append('<option value="'+v.shop_section_id+'">'+v.title+'</option>');
          });
        }

        $('#input-shop-section').removeAttr('disabled');
        $('#shop-section-loading').hide();
      },
      error: function (xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  }

  $(document).ready(function() {
    getShippingProfiles();
    getShopSection();
    getCategories(0);
  });

//--></script>
{{ footer }}