etsy_create.twig (24052B)
1 {{ header }}{{ column_left }} 2 <div id="content"> 3 <div class="page-header"> 4 <div class="container-fluid"> 5 <div class="pull-right"> 6 <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default" id="btn-cancel"><i class="fa fa-reply"></i></a> 7 </div> 8 <h1>{{ heading_title }}</h1> <ul class="breadcrumb"> 9 {% for breadcrumb in breadcrumbs %} 10 <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </div> 15 <div class="container-fluid"> 16 <div class="panel panel-default"> 17 <div class="panel-heading"> 18 <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_create }}</h3> 19 </div> 20 <div class="panel-body"> 21 {% if error_variant %} 22 <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_variant }}</div> 23 {% else %} 24 <div id="page-listing"> 25 {% if error_warning %} 26 <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div> 27 {% endif %} 28 <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal"> 29 <input type="hidden" name="product_id" value="{{ product.product_id }}"/> 30 <input type="hidden" name="quantity" value="{{ product.quantity }}"/> 31 <input type="hidden" name="taxonomy_id" value="" id="taxonomy-id" /> 32 <ul class="nav nav-tabs"> 33 <li class="active"><a href="#tab-listing-general" data-toggle="tab">{{ tab_general }}</a></li> 34 <li><a href="#tab-listing-additional" data-toggle="tab">{{ tab_additional }}</a></li> 35 <li><a href="#tab-images" data-toggle="tab">{{ tab_image }}</a></li> 36 </ul> 37 <div class="tab-content"> 38 <div id="tab-listing-general" class="tab-pane active"> 39 <div class="row"> 40 <div class="col-sm-12"> 41 <div class="form-group required"> 42 <label class="col-sm-2 control-label">{{ entry_category }}</label> 43 <div class="col-sm-10"> 44 <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> 45 <span id="category-loading"><i class="fa fa-cog fa-lg fa-spin"></i></span> 46 <span id="category-parents"></span> 47 <div id="category-select-container" style="display: none;"></div> 48 </div> 49 </div> 50 </div> 51 </div> 52 <div class="form-group required"> 53 <label class="col-sm-2 control-label" for="input-title">{{ entry_title }}</label> 54 <div class="col-sm-10"> 55 <input type="text" name="title" value="{{ product.name }}" placeholder="{{ entry_title }}" id="input-title" class="form-control" /> 56 </div> 57 </div> 58 <div class="form-group required"> 59 <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> 60 <div class="col-sm-10"> 61 <textarea name="description" placeholder="{{ entry_description }}" id="input-description" class="form-control">{{ product.description_raw }}</textarea> 62 </div> 63 </div> 64 <div class="form-group required"> 65 <label class="col-sm-2 control-label" for="input-price">{{ entry_price }}</label> 66 <div class="col-sm-10"> 67 <input type="text" name="price" value="{{ product.price }}" placeholder="{{ entry_price }}" id="input-price" class="form-control" /> 68 </div> 69 </div> 70 <div class="form-group required"> 71 <label class="col-sm-2 control-label" for="input-is-supply">{{ entry_is_supply }}</label> 72 <div class="col-sm-10"> 73 <select name="is_supply" id="input-is-supply" class="form-control"> 74 <option value="false" selected="selected">{{ text_no }}</option> 75 <option value="true">{{ text_yes }}</option> 76 </select> 77 </div> 78 </div> 79 <div class="form-group required"> 80 <label class="col-sm-2 control-label" for="input-who-made">{{ entry_who_made }}</label> 81 <div class="col-sm-10"> 82 <select name="who_made" id="input-who-made" class="form-control"> 83 {% for who_made in setting.who_made %} 84 <option value="{{ value }}">{{ value }}</option> 85 {% endfor %} 86 </select> 87 </div> 88 </div> 89 <div class="form-group required"> 90 <label class="col-sm-2 control-label" for="input-when-made">{{ entry_when_made }}</label> 91 <div class="col-sm-10"> 92 <select name="when_made" id="input-when-made" class="form-control"> 93 {% for when_made in setting.when_made %} 94 <option value="{{ value }}">{{ value }}</option> 95 {% endfor %} 96 </select> 97 </div> 98 </div> 99 <div class="form-group required"> 100 <label class="col-sm-2 control-label" for="input-state">{{ entry_state }}</label> 101 <div class="col-sm-10"> 102 <select name="state" id="input-state" class="form-control"> 103 {% for state in setting.state %} 104 <option value="{{ value }}">{{ value }}</option> 105 {% endfor %} 106 </select> 107 </div> 108 </div> 109 <div class="form-group required"> 110 <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> 111 <div class="col-sm-10"> 112 <select name="shipping_template_id" id="input-shipping" class="form-control" disabled="disabled"> 113 </select> 114 </div> 115 </div> 116 </div> 117 <div id="tab-listing-additional" class="tab-pane"> 118 <div class="form-group"> 119 <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> 120 <div class="col-sm-10"> 121 <select name="shop_section_id" id="input-shop-section" class="form-control" disabled="disabled"> 122 </select> 123 </div> 124 </div> 125 <div class="form-group"> 126 <label class="col-sm-2 control-label" for="input-style-1">{{ entry_style }}</label> 127 <div class="col-sm-10"> 128 <input type="text" name="style_1" value="" placeholder="{{ entry_style }}" id="input-style-1" class="form-control" /> 129 </div> 130 </div> 131 <div class="form-group"> 132 <label class="col-sm-2 control-label" for="input-style-2">{{ entry_style_2 }}</label> 133 <div class="col-sm-10"> 134 <input type="text" name="style_2" value="" placeholder="{{ entry_style_2 }}" id="input-style-2" class="form-control" /> 135 </div> 136 </div> 137 <div class="form-group"> 138 <label class="col-sm-2 control-label" for="input-non-taxable">{{ entry_non_taxable }}</label> 139 <div class="col-sm-10"> 140 <select name="non_taxable" id="input-non-taxable" class="form-control"> 141 <option value="0" selected="selected">{{ text_no }}</option> 142 <option value="1">{{ text_yes }}</option> 143 </select> 144 </div> 145 </div> 146 <div class="form-group"> 147 <label class="col-sm-2 control-label" for="input-recipient">{{ entry_recipient }}</label> 148 <div class="col-sm-10"> 149 <select name="recipient" id="input-recipient" class="form-control"> 150 {% for recipient in setting.recipient %} 151 <option value="{{ value }}">{{ value }}</option> 152 {% endfor %} 153 </select> 154 </div> 155 </div> 156 <div class="form-group"> 157 <label class="col-sm-2 control-label" for="input-occasion">{{ entry_occasion }}</label> 158 <div class="col-sm-10"> 159 <select name="occasion" id="input-occasion" class="form-control"> 160 {% for occasion in setting.occasion %} 161 <option value="{{ value }}">{{ value }}</option> 162 {% endfor %} 163 </select> 164 </div> 165 </div> 166 <div class="form-group"> 167 <label class="col-sm-2 control-label" for="input-processing-min">{{ entry_processing_min }}</label> 168 <div class="col-sm-10"> 169 <input type="text" name="processing_min" value="" placeholder="{{ entry_processing_min }}" id="input-processing-min" class="form-control" /> 170 </div> 171 </div> 172 <div class="form-group"> 173 <label class="col-sm-2 control-label" for="input-processing-max">{{ entry_processing_max }}</label> 174 <div class="col-sm-10"> 175 <input type="text" name="processing_max" value="" placeholder="{{ entry_processing_max }}" id="input-processing-max" class="form-control" /> 176 </div> 177 </div> 178 <div class="form-group"> 179 <label class="col-sm-2 control-label" for="input-material">{{ entry_materials }}</label> 180 <div class="col-sm-10"> 181 <div class="row"> 182 <div class="col-sm-4"> 183 <div class="row"> 184 <div class="col-xs-8"> 185 <input type="text" name="material_input" value="" placeholder="{{ entry_materials }}" id="input-material" class="form-control" /> 186 </div> 187 <div class="col-xs-2"> 188 <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> 189 </div> 190 </div> 191 </div> 192 <div class="col-sm-8"> 193 <ul class="list-group" id="material-container"> 194 </ul> 195 </div> 196 </div> 197 </div> 198 </div> 199 <div class="form-group"> 200 <label class="col-sm-2 control-label" for="input-tag">{{ entry_tags }}</label> 201 <div class="col-sm-10"> 202 <div class="row"> 203 <div class="col-sm-4"> 204 <div class="row"> 205 <div class="col-xs-8"> 206 <input type="text" name="tag_input" value="" placeholder="{{ entry_tags }}" id="input-tag" class="form-control" /> 207 </div> 208 <div class="col-xs-2"> 209 <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> 210 </div> 211 </div> 212 </div> 213 <div class="col-sm-8"> 214 <ul class="list-group" id="tag-container"> 215 </ul> 216 </div> 217 </div> 218 </div> 219 </div> 220 </div> 221 <div id="tab-images" class="tab-pane"> 222 <div class="form-group"> 223 <label class="col-sm-2 control-label" for="input-image">{{ entry_image }}</label> 224 <div class="col-sm-10"><a id="thumb-image" class="img-thumbnail"><img src="{{ product.thumb }}" alt="" title="" /></a> 225 <input type="hidden" name="image" value="{{ product.image_url }}" id="input-image" /> 226 </div> 227 </div> 228 {% if product.product_images is not empty %} 229 <div class="table-responsive"> 230 <table id="images" class="table table-striped table-bordered table-hover"> 231 <thead> 232 <tr> 233 <td class="text-right" style="width: 1px;"></td> 234 <td class="text-left">{{ entry_image_other }}</td> 235 </tr> 236 </thead> 237 <tbody> 238 {% set image_row = 0 %} 239 {% for product_images in product.product_images %} 240 <tr> 241 <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> 242 <td class="text-left"><a href="" class="img-thumbnail"><img src="{{ product_image.thumb }}" alt="" title="" /></a></td> 243 </tr> 244 {% set image_row = image_row + 1 %} 245 {% endfor %} 246 </tbody> 247 </table> 248 </div> 249 {% endif %} 250 </div> 251 <div class="well"> 252 <div class="row"> 253 <div class="col-sm-12"> <a class="btn btn-primary pull-right" id="button-submit" onclick="submitForm();"><span>{{ button_submit }}</span></a> </div> 254 </div> 255 </div> 256 </div> 257 </form> 258 </div> 259 <div id="page-listing-success" style="display:none;"> 260 <div class="well"> 261 <div class="row"> 262 <div class="col-sm-12"> 263 <h3>{{ text_created }}</h3> 264 <p>{{ text_listing_id }}: <span id="listing-id"></span></p> 265 <ul class="list-group" id="listing-image-status"> 266 </ul> 267 </div> 268 </div> 269 </div> 270 </div> 271 {% endif %} 272 </div> 273 </div> 274 </div> 275 </div> 276 <script type="text/javascript"><!-- 277 var image_count = 1; 278 279 function submitForm() { 280 $.ajax({ 281 url: 'index.php?route=extension/openbay/etsy_product/createsubmit&user_token={{ user_token }}', 282 beforeSend: function(){ 283 $('#button-submit').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled'); 284 }, 285 type: 'post', 286 data: $("#form").serialize(), 287 dataType: 'json', 288 success: function(json) { 289 if (json.error) { 290 if (json.code) { 291 alert(json.error); 292 } else { 293 $.each(json.error, function( k, v ) { 294 alert(v); 295 }); 296 } 297 $('#button-submit').empty().html('<span>{{ button_submit }}</span>').removeAttr('disabled'); 298 } else { 299 if (json.listing_id) { 300 // upload the primary image 301 var image_primary = $('#input-image').val(); 302 303 if (image_primary != '') { 304 uploadImage(json.listing_id, $('#input-image').val(), image_count); 305 image_count = image_count + 1; 306 } 307 308 // get the extra images and upload 309 $('.product-image:checkbox:checked').each(function() { 310 uploadImage(json.listing_id, $(this).val(), image_count); 311 image_count = image_count + 1; 312 }); 313 314 $('#listing-id').text(json.listing_id); 315 $('#page-listing').hide(); 316 $('#page-listing-success').fadeIn(); 317 $('#button-submit').empty().html('<span>{{ button_submit }}</span>').removeAttr('disabled'); 318 } else { 319 alert('Error creating listing?'); 320 } 321 } 322 }, 323 error: function (xhr, ajaxOptions, thrownError) { 324 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 325 $('#button-submit').empty().html('<span>{{ button_submit }}</span>').removeAttr('disabled'); 326 } 327 }); 328 } 329 330 function uploadImage(listing_id, url, id) { 331 $.ajax({ 332 url: 'index.php?route=extension/openbay/etsy_product/addimage&user_token={{ user_token }}', 333 beforeSend: function(){ 334 $('#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>'); 335 }, 336 type: 'post', 337 data: {'listing_id':listing_id,'image':url}, 338 dataType: 'json', 339 success: function(json) { 340 $('#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+''); 341 }, 342 error: function (xhr, ajaxOptions, thrownError) { 343 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 344 } 345 }); 346 } 347 348 var material_count = 0; 349 350 function addMaterial() { 351 var material = $('#input-material').val(); 352 353 if (material != '') { 354 $('#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>'); 355 356 material_count = material_count + 1; 357 358 $('#input-material').val(''); 359 } 360 } 361 362 var tag_count = 0; 363 364 function addTag() { 365 var tag = $('#input-tag').val(); 366 367 if (tag != '') { 368 $('#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>'); 369 370 tag_count = tag_count + 1; 371 372 $('#input-tag').val(''); 373 } 374 } 375 376 $('body').on('change', '.etsy-category', function() { 377 getCategories($(this).val()); 378 }); 379 380 $('body').on('click', '#reset-category', function() { 381 getCategories(0); 382 }); 383 384 var select_html; 385 386 function getCategories(id_path) { 387 $.ajax({ 388 url: 'index.php?route=extension/openbay/etsy_product/getCategories&user_token={{ user_token }}&id_path=' + id_path, 389 beforeSend: function(){ 390 $('#category-selected').hide(); 391 $('#category-select-container').hide(); 392 $('#category-loading').show(); 393 $('#taxonomy-id').val(''); 394 }, 395 type: 'get', 396 dataType: 'json', 397 success: function(json) { 398 if (json.final_category == true) { 399 $('#category-parents').text(json.parent_text); 400 $('#category-selected').show(); 401 $('#taxonomy-id').val(json.last_id); 402 } else { 403 select_html = '<select name="category" class="etsy-category form-control">'; 404 select_html += '<option selected="true" disabled="disabled">{{ text_select }}</option> '; 405 $.each(json.data, function( key, category ) { 406 select_html += '<option value="' + category.id_path + '">' + category.name + '</option>'; 407 }); 408 select_html += '</select>'; 409 410 $('#category-select-container').empty().html(select_html).fadeIn(); 411 $('#category-parents').text(json.parent_text); 412 } 413 414 $('#category-loading').hide(); 415 }, 416 error: function (xhr, ajaxOptions, thrownError) { 417 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 418 } 419 }); 420 } 421 422 function getShippingProfiles() { 423 $.ajax({ 424 url: 'index.php?route=extension/openbay/etsy_shipping/getall&user_token={{ user_token }}', 425 beforeSend: function(){ 426 $('#shipping-loading').show(); 427 }, 428 type: 'get', 429 dataType: 'json', 430 success: function(json) { 431 if ($.isEmptyObject(json.data.results)) { 432 alert('{{ error_no_shipping }}'); 433 } else { 434 $.each(json.data.results, function( k, v ) { 435 $('#input-shipping').append('<option value="'+v.shipping_template_id+'">'+ v.title+'</option>'); 436 }); 437 } 438 439 $('#input-shipping').removeAttr('disabled'); 440 $('#shipping-loading').hide(); 441 }, 442 error: function (xhr, ajaxOptions, thrownError) { 443 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 444 } 445 }); 446 } 447 448 function getShopSection() { 449 $.ajax({ 450 url: 'index.php?route=extension/openbay/etsy_shop/getsections&user_token={{ user_token }}', 451 beforeSend: function(){ 452 $('#shop-section-loading').show(); 453 }, 454 type: 'get', 455 dataType: 'json', 456 success: function(json) { 457 if ($.isEmptyObject(json.data.results)) { 458 alert('{{ error_no_shop_secton }}'); 459 } else { 460 $.each(json.data.results, function( k, v ) { 461 $('#input-shop-section').append('<option value="'+v.shop_section_id+'">'+v.title+'</option>'); 462 }); 463 } 464 465 $('#input-shop-section').removeAttr('disabled'); 466 $('#shop-section-loading').hide(); 467 }, 468 error: function (xhr, ajaxOptions, thrownError) { 469 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 470 } 471 }); 472 } 473 474 $(document).ready(function() { 475 getShippingProfiles(); 476 getShopSection(); 477 getCategories(0); 478 }); 479 480 //--></script> 481 {{ footer }}