amazon_item_links.twig (13516B)
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"><i class="fa fa-reply"></i></a></div> 7 <h1>{{ heading_title }}</h1> 8 <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 <form id="product-form"> 17 <div class="alert alert-info"> 18 <p>{{ text_desc1 }}</p> 19 <p>{{ text_desc2 }}</p> 20 <p>{{ text_desc3 }}</p> 21 </div> 22 <div class="well"> 23 <div class="row"> 24 <div class="col-sm-12 text-right"> 25 <a class="btn btn-primary" id="button-load">{{ button_load }}</a> 26 </div> 27 </div> 28 </div> 29 <table class="table table-bordered table-hover"> 30 <thead id="table-head-1"> 31 <tr> 32 <th class="text-center" colspan="3"><h4>{{ text_new_link }}</h4></th> 33 </tr> 34 </thead> 35 <thead id="table-head-2"> 36 <tr> 37 <th class="text-right">{{ text_autocomplete_product }}</th> 38 <th class="text-left">{{ text_amazon_sku }}</th> 39 <th class="text-center">{{ text_action }}</th> 40 </tr> 41 </thead> 42 <tbody id="unlinked-items"> 43 <tr> 44 <td class="text-right"> 45 <input type="hidden" id="new-product-id"> 46 <input id="new-product" type="text" class="form-control" autocomplete="off"> 47 </td> 48 <td> 49 <input id="new-amazon-sku" type="text" class="form-control" autocomplete="off"> 50 </td> 51 <td class="text-center"> 52 <a class="btn btn-primary" id="add-new-button" onclick="addNewLinkAutocomplete()" data-toggle="tooltip" data-original-title="{{ button_add }}"><i class="fa fa-plus-circle"></i></a> 53 </td> 54 </tr> 55 </tbody> 56 </table> 57 <table class="table table-bordered table-hover"> 58 <thead> 59 <tr> 60 <th class="text-center" colspan="6"><h4>{{ text_linked_items }}</h4></th> 61 </tr> 62 </thead> 63 <thead> 64 <tr> 65 <th>{{ text_name }}</th> 66 <th>{{ text_sku }}</th> 67 <th>{{ text_model }}</th> 68 <th>{{ text_combination }}</th> 69 <th>{{ text_amazon_sku }}</th> 70 <th class="text-center">{{ text_action }}</th> 71 </tr> 72 </thead> 73 <tbody id="linked-items"></tbody> 74 </table> 75 </form> 76 </div> 77 </div> 78 <script type="text/javascript"><!-- 79 $(document).ready(function () { 80 loadLinks(); 81 }); 82 83 function loadLinks() { 84 $.ajax({ 85 url: '{{ link_get_items }}', 86 type: 'get', 87 dataType: 'json', 88 data: 'product_id=' + encodeURIComponent($('#new-product-id').val()) + '&amazon_sku=' + encodeURIComponent($('#new-amazon-sku').val()), 89 success: function (json) { 90 var rows = ''; 91 for (i in json) { 92 rows += '<tr>'; 93 rows += '<td class="text-left">' + json[i]['product_name'] + '</td>'; 94 if (json[i]['var'] != '') { 95 rows += '<td class="text-left">' + json[i]['var'] + '</td>'; 96 } else { 97 rows += '<td class="text-left">' + json[i]['sku'] + '</td>'; 98 } 99 rows += '<td class="text-left">' + json[i]['model'] + '</td>'; 100 101 if (typeof json[i]['combination'] == 'undefined') { 102 rows += '<td class="text-left">-</td>'; 103 } else { 104 rows += '<td class="text-left">' + json[i]['combination'] + '</td>'; 105 } 106 107 rows += '<td class="text-left">' + json[i]['amazon_sku'] + '</td>'; 108 rows += '<td class="text-center"><a data-toggle="tooltip" data-original-title="{{ button_remove }}" class="btn btn-danger" onclick="removeLink(this, \'' + json[i]['amazon_sku'] + '\');"><i class="fa fa-times-circle"></i></a></td>'; 109 rows += '</tr>'; 110 } 111 $('#linked-items').html(rows); 112 }, 113 error: function (xhr, ajaxOptions, thrownError) { 114 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 115 } 116 }); 117 } 118 119 $('#button-load').bind('click', function(e) { 120 e.preventDefault(); 121 122 $.ajax({ 123 url: '{{ link_get_unlinked_items }}', 124 type: 'get', 125 dataType: 'json', 126 beforeSend: function () { 127 $('#button-load').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled'); 128 }, 129 complete: function () { 130 $('#button-load').empty().html('{{ button_load }}').removeAttr('disabled'); 131 }, 132 success: function (json) { 133 var thread1 = ''; 134 thread1 += '<tr>'; 135 thread1 += '<td class="text-center" colspan="6">{{ text_unlinked_items }}</td>'; 136 thread1 += '</tr>'; 137 $('#table-head-1').html(thread1); 138 139 var thread2 = ''; 140 thread2 += '<tr>'; 141 thread2 += '<td>{{ text_name }}</td>'; 142 thread2 += '<td>{{ text_model }}</td>'; 143 thread2 += '<td>{{ text_combination }}</td>'; 144 thread2 += '<td>{{ text_sku }}</td>'; 145 thread2 += '<td>{{ text_amazon_sku }}</td>'; 146 thread2 += '<td class="text-center">{{ text_action }}</td>'; 147 thread2 += '</tr>'; 148 $('#table-head-2').html(thread2); 149 150 var rows = ''; 151 for (i in json) { 152 rows += '<tr id="product_row_' + json[i]['product_id'] + '_' + json[i]['sku'] + '">'; 153 rows += '<td class="text-left">' + json[i]['product_name'] + '</td>'; 154 rows += '<td class="text-left">' + json[i]['model'] + '</td>'; 155 rows += '<td class="text-left">' + json[i]['combination'] + '</td>'; 156 rows += '<td class="text-left">' + json[i]['sku'] + '</td>'; 157 rows += '<td class="text-left">'; 158 rows += '<div class="amazon_sku_div_' + json[i]['product_id'] + '_' + json[i]['sku'] + '">'; 159 rows += '<div class="row">'; 160 rows += '<div class="col-sm-8 form-group">'; 161 rows += '<input class="form-control amazon_sku_' + json[i]['product_id'] + '_' + json[i]['sku'] + '" type="text">'; 162 rows += '</div>'; 163 rows += '<div class="col-sm-4 form-group">'; 164 rows += '<a class="btn btn-primary" onclick="addNewSkuField(' + json[i]['product_id'] + ', \'' + json[i]['sku'] + '\')" data-toggle="tooltip" data-original-title="{{ button_add }}"><i class="fa fa-plus-circle"></i></a>'; 165 rows += '</div>'; 166 rows += '</div>'; 167 rows += '</div>'; 168 rows += '</td>'; 169 rows += '<td class="text-center"><a class="btn btn-primary" onclick="addNewLink(this, \'' + json[i]['product_id'] + '\', \'' + json[i]['sku'] + '\')" data-toggle="tooltip" data-original-title="{{ button_add }}"><i class="fa fa-plus-circle"></i></a></td>'; 170 rows += '</tr>'; 171 } 172 173 $('#unlinked-items').html(rows); 174 }, 175 error: function (xhr, ajaxOptions, thrownError) { 176 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 177 } 178 }); 179 }); 180 181 function addLink(button, product_id, amazon_sku, variation) { 182 $.ajax({ 183 url: '{{ link_add_item }}', 184 type: 'get', 185 dataType: 'json', 186 async: 'false', 187 data: 'product_id=' + encodeURIComponent(product_id) + '&amazon_sku=' + encodeURIComponent(amazon_sku) + '&var=' + encodeURIComponent(variation), 188 beforeSend: function () { 189 $(button).empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled'); 190 }, 191 complete: function () { 192 $(button).empty().html('<i class="fa fa-plus-circle"></i>').removeAttr('disabled'); 193 }, 194 success: function (json) { 195 loadLinks(); 196 }, 197 error: function (xhr, ajaxOptions, thrownError) { 198 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 199 } 200 }); 201 } 202 203 function removeLink(button, amazon_sku) { 204 $.ajax({ 205 url: '{{ link_remove_item }}', 206 type: 'get', 207 dataType: 'json', 208 data: 'amazon_sku=' + encodeURIComponent(amazon_sku), 209 beforeSend: function () { 210 $(button).empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled'); 211 }, 212 success: function (json) { 213 //alert(json); 214 loadLinks(); 215 }, 216 error: function (xhr, ajaxOptions, thrownError) { 217 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 218 } 219 }); 220 } 221 222 function addNewSkuField(product_id, variation) { 223 var html = ''; 224 html += '<div class="amazon_sku_div_' + product_id + '_' + variation + '">'; 225 html += '<div class="row">'; 226 html += '<div class="col-sm-8 form-group">'; 227 html += '<input class="form-control amazon_sku_' + product_id + '_' + variation + '" type="text">'; 228 html += '</div>'; 229 html += '<div class="col-sm-4 form-group">'; 230 html += '<a class="btn btn-danger remove_sku_icon_' + product_id + '_' + variation + '" onclick="removeSkuField(this, \'' + product_id + '\', \'' + variation + '\')"><i class="fa fa-minus-circle"></i></a>'; 231 html += '</div>'; 232 html += '</div>'; 233 html += '</div>'; 234 235 $(".amazon_sku_div_" + product_id + "_" + variation.replace(":", "\\:")).last().after(html); 236 } 237 238 function removeSkuField(icon, product_id, variation) { 239 var removeIndex = $('.remove_sku_icon_' + product_id + '_' + variation.replace(':', '\\:')).index($(icon)) + 1; 240 $(".amazon_sku_div_" + product_id + "_" + variation.replace(':', '\\:') + ":eq(" + removeIndex + ")").remove(); 241 } 242 243 function addNewLink(button, product_id, variation) { 244 var errors = 0; 245 246 console.log(".amazon_sku_" + product_id + "_" + variation.replace(':', '\\:')); 247 $(".amazon_sku_" + product_id + "_" + variation.replace(':', '\\:')).each(function (index) { 248 if ($(this).val() == '') { 249 errors++; 250 } 251 }); 252 if (errors > 0) { 253 alert('{{ error_empty_sku }}'); 254 return; 255 } 256 257 $(".amazon_sku_" + product_id + "_" + variation.replace(':', '\\:')).each(function (index) { 258 addLink(button, product_id, $(this).val(), variation); 259 }); 260 261 $("#product_row_" + product_id + "_" + variation.replace(':', '\\:')).remove(); 262 } 263 264 function addNewLinkAutocomplete() { 265 if ($('#new-product').val() == "") { 266 alert('{{ error_empty_name }}'); 267 return; 268 } 269 270 if ($('#new-product-id').attr('label') != $('#new-product').val()) { 271 alert('{{ error_no_product_exists }}'); 272 return; 273 } 274 275 if ($('#new-amazon-sku').val() == "") { 276 alert('{{ error_empty_sku }}'); 277 return; 278 } 279 280 var product_id = $('#new-product-id').val(); 281 var amazon_sku = $('#new-amazon-sku').val(); 282 var variation = ''; 283 if ($('#variant-option-selector').length != 0) { 284 variation = $('#variant-option-selector').val(); 285 } 286 287 addLink('#add-new-button', product_id, amazon_sku, variation); 288 289 $('#new-product').val(''); 290 $('#new-amazon-sku').val(''); 291 $('#new-product-id').val(''); 292 $('#new-product-id').attr('label', ''); 293 $('.variant-option-selector').remove(); 294 } 295 296 $('#new-product').autocomplete({ 297 'source': function(request, response) { 298 $.ajax({ 299 url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request), 300 dataType: 'json', 301 success: function (json) { 302 response($.map(json, function (item) { 303 return { 304 label: item['name'], 305 value: item['product_id'] 306 } 307 })); 308 } 309 }); 310 }, 311 'select': function (item) { 312 $('#new-product-id').val(item['value']); 313 $('#new-product').val(item['label']); 314 $('#new-product-id').attr('label',item['label']); 315 openstockCheck(item['value']); 316 } 317 }); 318 319 function openstockCheck(product_id) { 320 $.ajax({ 321 url: '{{ link_get_variants }}', 322 dataType: 'json', 323 type: 'get', 324 data: 'product_id=' + product_id, 325 success: function (data) { 326 if (!data) { 327 $(".variant-option-selector").remove(); 328 return; 329 } 330 331 var optionHtml = '<div class="form-group variant-option-selector" style="margin-top:5px;"><select id="variant-option-selector" class="form-control variant-option-selector"><option value=""/>'; 332 for (var i in data) { 333 optionHtml += '<option value="' + data[i]['sku'] + '">' + data[i]['combination'] + '</option>'; 334 } 335 optionHtml += '</select></div>'; 336 $('#new-product').after(optionHtml); 337 }, 338 error: function (xhr, ajaxOptions, thrownError) { 339 if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } 340 } 341 }); 342 } 343 //--></script>