first commit
This commit is contained in:
Konstantin
@@ -0,0 +1,88 @@
|
||||
{{ header }}
|
||||
{{ column_left }}
|
||||
<div id="content">
|
||||
<div class="page-header">
|
||||
<div class="container-fluid">
|
||||
<div class="pull-right">
|
||||
<button type="submit" class="btn btn-primary" form="form" data-toggle="tooltip" title="{{ button_save }}"><i class="fa fa-save"></i></button>
|
||||
<a href="{{ mapping }}" class="btn btn-warning" data-toggle="tooltip" title="{{ button_mapping }}"><i class="fa fa-tags"></i></a>
|
||||
<a href="{{ shipping_taxes }}" class="btn btn-warning" data-toggle="tooltip" title="{{ button_shipping_taxes }}"><i class="fa fa-truck"></i></a>
|
||||
<a href="{{ campaign }}" class="btn btn-warning" data-toggle="tooltip" title="{{ button_campaign }}"><i class="fa fa-cogs"></i></a>
|
||||
<a href="{{ text_video_tutorial_url_setup }}" target="_blank" class="btn btn-info" data-toggle="tooltip" title="{{ button_video_tutorial_setup }}"><i class="fa fa-video-camera"></i></a>
|
||||
<a href="{{ cancel }}" class="btn btn-default" data-toggle="tooltip" title="{{ button_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">
|
||||
{% if success %}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><i class="fa fa-close"></i></button>
|
||||
<i class="fa fa-check-circle"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="blockerError" style="display: none;" class="alert alert-danger">
|
||||
<i class="fa fa-exclamation-triangle"></i> {{ error_adblock }}
|
||||
</div>
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><i class="fa fa-close"></i></button>
|
||||
<i class="fa fa-exclamation-triangle"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="warning-container">
|
||||
{% if warning %}
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><i class="fa fa-close"></i></button>
|
||||
<i class="fa fa-info-circle"></i> {{ warning }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="alert-container"></div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-pencil"></i> <span>{{ text_panel_heading }}</span></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form">
|
||||
<div class="tabbable">
|
||||
<ul class="nav nav-tabs mainMenuTabs">
|
||||
<li class="active"><a href="#tab_ads" data-toggle="tab">{{ tab_text_ads }}</a></li>
|
||||
<li><a href="#tab_reports" data-toggle="tab">{{ tab_text_reports }}</a></li>
|
||||
<li><a href="#tab_settings" data-toggle="tab">{{ tab_text_settings }}</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab_settings">{{ tab_settings }}</div>
|
||||
<div class="tab-pane active" id="tab_ads">{{ tab_ads }}</div>
|
||||
<div class="tab-pane" id="tab_reports">{{ tab_reports }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
.adBanner {
|
||||
background-color: transparent;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
<div id="wrapTest">
|
||||
<div class="adBanner">
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
$(document).ready(function() {
|
||||
$('#blockerError').toggle($("#wrapTest").height() == 0);
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
{{ footer }}
|
||||
@@ -0,0 +1,907 @@
|
||||
<!-- The filters -->
|
||||
<div id="filter-ads" class="col-lg-3 col-lg-push-9 col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-filter"></i> {{ text_filter }}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="input-name">{{ text_product_name }}</label>
|
||||
<input type="text" name="filter_name" value="" placeholder="{{ text_product_name }}" id="input-name" class="form-control" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="input-model">{{ text_product_model }}</label>
|
||||
<input type="text" name="filter_model" value="" placeholder="{{ text_product_model }}" id="input-model" class="form-control" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="input-category">{{ text_product_category }}</label>
|
||||
<div class="category-select-container">
|
||||
<input id="input-category" type="text" name="category_autocomplete" value="" class="form-control" placeholder="{{ text_product_category }}" />
|
||||
<input type="hidden" name="filter_category_id" value="">
|
||||
<button id="button-category-remove" class="btn btn-default" disabled><i class="fa fa-close"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="select-is-modified">{{ text_product_is_modified }}</label>
|
||||
<select class="form-control" name="filter_is_modified" id="select-is-modified">
|
||||
<option value="">{{ text_all }}</option>
|
||||
<option value="0">{{ text_no }}</option>
|
||||
<option value="1">{{ text_yes }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group text-right">
|
||||
<button type="button" id="button-filter" class="btn btn-default"><i class="fa fa-filter"></i> {{ text_filter }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The ads -->
|
||||
<div class="col-lg-9 col-lg-pull-3 col-md-12">
|
||||
<div class="alert alert-info">
|
||||
{{ text_ads_intro }}
|
||||
</div>
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="pull-right form-control-static">
|
||||
<button type="button" class="btn btn-default button-popup-bulk-edit form-control-static"><i class="fa fa-cog"></i> {{ button_bulk_edit_google_fields }}</button>
|
||||
<div class="btn-group form-control-static">
|
||||
<button type="button" class="btn btn-default dropdown-toggle button-advertise" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ button_select_campaigns }} <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right campaign-dropdown">
|
||||
{% for campaign in campaigns %}
|
||||
<li class="text-pre-line"><a><input type="checkbox" name="target_ids[]" value="{{ campaign.target_id }}" /> <span class="form-control-static">{{ campaign.campaign_name }}</span></a></li>
|
||||
{% endfor %}
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="text-center padding-lr-5">
|
||||
<p class="text-left text-sm text-pre-line"><em>{{ text_maximum_five }}</em></p>
|
||||
<button class="btn btn-success btn-xs button-apply-advertising"><i class="fa fa-check"></i> {{ button_apply }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="alert-container"></div>
|
||||
<div id="selection-container"></div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead id="list-head">
|
||||
<tr>
|
||||
<th class="text-center"><input type="checkbox" name="select_all" /></th>
|
||||
<th class="text-center">{{ text_image }}</th>
|
||||
<th class="text-left visible-lg"><a href="javascript:void(0)" data-sort="name">{{ text_product_name }}</a></th>
|
||||
<th class="text-left"><a href="javascript:void(0)" data-sort="model">{{ text_product_model }}</a></th>
|
||||
<th class="text-center"><a href="javascript:void(0)" data-sort="impressions"><i data-toggle="tooltip" data-original-title="{{ text_impressions }}" class="fa fa-eye"></i></a></th>
|
||||
<th class="text-center"><a href="javascript:void(0)" data-sort="clicks"><i data-toggle="tooltip" data-original-title="{{ text_clicks }}" class="fa fa-hand-pointer-o"></i></a></th>
|
||||
<th class="text-center"><a href="javascript:void(0)" data-sort="cost"><i data-toggle="tooltip" data-original-title="{{ text_cost }}" class="fa fa-dollar"></i></a></th>
|
||||
<th class="text-center"><a href="javascript:void(0)" data-sort="conversions"><i data-toggle="tooltip" data-original-title="{{ text_conversions }}" class="fa fa-handshake-o"></i></a></th>
|
||||
<th class="text-center"><a href="javascript:void(0)" data-sort="conversion_value"><i data-toggle="tooltip" data-original-title="{{ text_conversion_value }}" class="fa fa-line-chart"></i></a></th>
|
||||
</a></th>
|
||||
<th class="text-left">{{ text_campaigns }}</th>
|
||||
<th class="text-center"><a href="javascript:void(0)" data-sort="destination_status">{{ text_destination_status }}</a></th>
|
||||
<th class="text-center"><a href="javascript:void(0)" data-sort="has_issues">{{ text_issues }}</a></th>
|
||||
<th class="text-right">{{ text_action }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="list">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="pull-right form-control-static">
|
||||
<button type="button" class="btn btn-default button-popup-bulk-edit form-control-static"><i class="fa fa-cog"></i> {{ button_bulk_edit_google_fields }}</button>
|
||||
<div class="btn-group dropup form-control-static">
|
||||
<button type="button" class="btn btn-default dropdown-toggle button-advertise" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ button_select_campaigns }} <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right campaign-dropdown">
|
||||
{% for campaign in campaigns %}
|
||||
<li class="text-pre-line"><a><input type="checkbox" name="target_ids[]" value="{{ campaign.target_id }}" /> <span class="form-control-static">{{ campaign.campaign_name }}</span></a></li>
|
||||
{% endfor %}
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="text-center padding-lr-5">
|
||||
<p class="text-left text-sm text-pre-line"><em>{{ text_maximum_five }}</em></p>
|
||||
<button class="btn btn-success btn-sm button-apply-advertising"><i class="fa fa-check"></i> {{ button_apply }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="list-pagination">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="pull-right list-showing form-control-static">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
.padding-lr-5 {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#select_all_pages, #deselect_all_pages {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.category-select-container {
|
||||
padding-right: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-select-container #button-category-remove {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.text-pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
<script id="template-success" type="text/template">
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-check-circle" aria-hidden="true"></i> {message}
|
||||
</div>
|
||||
</script>
|
||||
<script id="template-error" type="text/template">
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {message}
|
||||
</div>
|
||||
</script>
|
||||
<script id="template-warning" type="text/template">
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-info-circle" aria-hidden="true"></i> {message}
|
||||
</div>
|
||||
</script>
|
||||
<script id="template-popup-product" type="text/template">
|
||||
<div class="modal fade" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<h4 class="modal-title">{title}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{body}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ button_close }}</button>
|
||||
<button type="button" class="btn btn-primary" id="button-popup-product-save">{{ button_save }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="template-popup-issues" type="text/template">
|
||||
<div class="modal fade" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<h4 class="modal-title">{title}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{body}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{{ button_close }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var selector = {
|
||||
ad_wrap: '#wrapTest',
|
||||
campaign_dropdown: {
|
||||
container: '.campaign-dropdown',
|
||||
element: '.campaign-dropdown li',
|
||||
first_container_checkboxes: '.campaign-dropdown:first li input[type=checkbox]',
|
||||
checkboxes: '.campaign-dropdown li input[type=checkbox]'
|
||||
},
|
||||
popup: {
|
||||
product: {
|
||||
form: '#form-popup-product',
|
||||
template: '#template-popup-product',
|
||||
button_show: '[data-product-id]',
|
||||
button_save: '#button-popup-product-save'
|
||||
},
|
||||
issues: {
|
||||
template: '#template-popup-issues',
|
||||
button_show: '[data-url-popup-issues]'
|
||||
}
|
||||
},
|
||||
template_success: '#template-success',
|
||||
template_error: '#template-error',
|
||||
template_warning: '#template-warning',
|
||||
alert_container: '#alert-container',
|
||||
warning_container: '#warning-container',
|
||||
selection_container: '#selection-container',
|
||||
button_advertise: '.button-advertise',
|
||||
button_bulk_edit: '.button-popup-bulk-edit',
|
||||
button_apply_advertising: '.button-apply-advertising',
|
||||
row: '.product-row',
|
||||
highlightable: '.highlightable',
|
||||
checkboxes: 'input[type="checkbox"][name="select[]"]',
|
||||
select_all: 'input[type="checkbox"][name="select_all"]',
|
||||
select_all_pages: '#select_all_pages',
|
||||
deselect_all_pages: '#deselect_all_pages',
|
||||
list: '#list',
|
||||
button_filter: '#button-filter',
|
||||
head: '#list-head',
|
||||
pagination: '.list-pagination',
|
||||
showing: '.list-showing',
|
||||
page: '.list-pagination .pagination li > a',
|
||||
filter: {
|
||||
product_name: 'input[name="filter_name"]',
|
||||
product_model: 'input[name="filter_model"]',
|
||||
category: 'input[name="filter_category_id"]',
|
||||
category_autocomplete: 'input[name="category_autocomplete"]',
|
||||
button_category_remove: '#button-category-remove',
|
||||
is_modified: 'select[name="filter_is_modified"]'
|
||||
}
|
||||
};
|
||||
|
||||
var total_items = 0;
|
||||
var total_pages = 1;
|
||||
var selected_all_pages = false;
|
||||
|
||||
var makeDestinationStatus = function(status) {
|
||||
switch (status) {
|
||||
case 'pending' :
|
||||
return '<span class="label label-warning">{{ text_label_pending }}</span>';
|
||||
case 'approved' :
|
||||
return '<span class="label label-success">{{ text_label_approved }}</span>';
|
||||
case 'disapproved' :
|
||||
return '<span class="label label-danger">{{ text_label_disapproved }}</span>';
|
||||
}
|
||||
}
|
||||
|
||||
var makeIssuesButton = function(has_issues, url) {
|
||||
if (has_issues) {
|
||||
return '<a data-toggle="tooltip" title="{{ text_view_issues }}" class="btn btn-warning" data-url-popup-issues="' + url + '"><i class="fa fa-exclamation-triangle"></i></a>';
|
||||
}
|
||||
|
||||
return '–';
|
||||
}
|
||||
|
||||
var makeCampaigns = function(campaigns) {
|
||||
var html = '';
|
||||
|
||||
if (campaigns.length > 0) {
|
||||
var result = $.map(campaigns, function(element) {
|
||||
return element.campaign_name;
|
||||
});
|
||||
|
||||
html = result.join('<br />');
|
||||
}
|
||||
|
||||
return html != '' ? html : '<span class="label label-default">{{ text_label_unassigned }}</span>';
|
||||
}
|
||||
|
||||
var getFilterPostData = function() {
|
||||
return {
|
||||
product_name: $(selector.filter.product_name).val(),
|
||||
product_model: $(selector.filter.product_model).val(),
|
||||
category_id: $(selector.filter.category).val(),
|
||||
is_modified: $(selector.filter.is_modified).val()
|
||||
};
|
||||
};
|
||||
|
||||
var listProducts = function() {
|
||||
$.ajax({
|
||||
url: '{{ list_ads }}',
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
sort: $(selector.list).data('sort'),
|
||||
order: $(selector.list).data('order'),
|
||||
page: $(selector.list).data('page'),
|
||||
filter: getFilterPostData()
|
||||
},
|
||||
beforeSend: function() {
|
||||
$('[data-sort]').removeClass('asc').removeClass('desc');
|
||||
|
||||
$('[data-sort="' + $(selector.list).data('sort') + '"]').addClass($(selector.list).data('order') == 'ASC' ? 'asc' : 'desc');
|
||||
|
||||
$(selector.list).html('<tr><td colspan="' + $(selector.head).find('th').length + '"><div class="text-center">{{ text_loading }}</div></td></tr>');
|
||||
|
||||
$(selector.button_advertise).attr('disabled', true).toggleClass('btn-info', false).toggleClass('btn-default', true);
|
||||
|
||||
$(selector.button_bulk_edit).attr('disabled', true);
|
||||
|
||||
$(selector.campaign_dropdown.checkboxes).prop('checked', false).trigger('change');
|
||||
|
||||
$(selector.select_all).prop('checked', false);
|
||||
|
||||
total_items = 0;
|
||||
total_pages = 1;
|
||||
$(selector.deselect_all_pages).trigger('click');
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
if ($(selector.ad_wrap).height() == 0) {
|
||||
$(selector.list).html('<tr><td colspan="' + $(selector.head).find('th').length + '"><div class="alert alert-danger">{{ error_adblock }}</div></td></tr>');
|
||||
} else {
|
||||
$(selector.list).html('<tr><td colspan="' + $(selector.head).find('th').length + '"><div class="alert alert-danger">' + textStatus + ': ' + errorThrown + '</div></td></tr>');
|
||||
}
|
||||
},
|
||||
success: function(data) {
|
||||
$(selector.list).empty();
|
||||
|
||||
if (typeof data.error != 'undefined') {
|
||||
$(selector.pagination).empty();
|
||||
$(selector.showing).empty();
|
||||
|
||||
$(selector.list).html('<tr><td colspan="' + $(selector.head).find('th').length + '"><div class="alert alert-danger">' + data.error + '</div></td></tr>');
|
||||
} else {
|
||||
if (data.products.length) {
|
||||
$(data.products).each(function(index, product) {
|
||||
var html = '<tr class="product-row">';
|
||||
|
||||
html += '<td class="highlightable text-center"><input type="checkbox" name="select[]" value="' + product.product_id + '"></td>';
|
||||
html += '<td class="highlightable text-center"><img class="img-thumbnail" src="' + product.image + '" alt="' + product.name + '" /></td>';
|
||||
html += '<td class="highlightable text-left visible-lg">' + product.name + '</td>';
|
||||
html += '<td class="highlightable text-left">' + product.model + '</td>';
|
||||
html += '<td class="highlightable text-center">' + product.impressions + '</td>';
|
||||
html += '<td class="highlightable text-center">' + product.clicks + '</td>';
|
||||
html += '<td class="highlightable text-center">' + product.cost + '</td>';
|
||||
html += '<td class="highlightable text-center">' + product.conversions + '</td>';
|
||||
html += '<td class="highlightable text-center">' + product.conversion_value + '</td>';
|
||||
html += '<td class="highlightable text-left no-wrap">' + makeCampaigns(product.campaigns) + '</td>';
|
||||
html += '<td class="highlightable text-center">' + makeDestinationStatus(product.destination_status) + '</td>';
|
||||
html += '<td class="highlightable text-center">' + makeIssuesButton(product.has_issues, product.url_issues) + '</td>';
|
||||
html += '<td class="highlightable text-right"><button class="btn ' + (product.is_modified ? "btn-default" : "btn-warning") + '" data-toggle="tooltip" title="' + (product.is_modified ? "{{ button_product_edit }}" : "{{ button_product_set }}") + '" data-product-id="' + product.product_id + '" data-product-advertise-google-id="' + product.product_advertise_google_id + '"><i class="fa fa-cog"></i></button></td>';
|
||||
|
||||
html += '</tr>';
|
||||
|
||||
$(selector.list).append(html);
|
||||
});
|
||||
} else {
|
||||
$(selector.list).html('<tr><td colspan="' + $(selector.head).find('th').length + '"><div class="text-center">{{ text_no_results }}</div></td></tr>');
|
||||
}
|
||||
|
||||
$(selector.pagination).html(data.pagination);
|
||||
$(selector.showing).html(data.showing);
|
||||
|
||||
total_items = data.total;
|
||||
total_pages = data.pages;
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
updateSelected();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var displayWarning = function(message) {
|
||||
$(selector.warning_container).html($(selector.template_warning).html().replace(/{message}/g, message));
|
||||
}
|
||||
|
||||
var displayError = function(message) {
|
||||
$(selector.alert_container).html($(selector.template_error).html().replace(/{message}/g, message));
|
||||
}
|
||||
|
||||
var displaySuccess = function(message) {
|
||||
$(selector.alert_container).html($(selector.template_success).html().replace(/{message}/g, message));
|
||||
}
|
||||
|
||||
var getPopupHtml = function(selector, data) {
|
||||
return $(selector).html().replace(/{body}/g, data.body).replace(/{title}/g, data.title);
|
||||
}
|
||||
|
||||
var advertiseChange = function() {
|
||||
var post_data = {
|
||||
all_pages : selected_all_pages ? '1' : '0',
|
||||
filter: getFilterPostData(),
|
||||
select : [],
|
||||
target_ids : []
|
||||
};
|
||||
|
||||
$(selector.campaign_dropdown.first_container_checkboxes + ':checked').each(function(index, element) {
|
||||
post_data.target_ids.push($(element).val());
|
||||
});
|
||||
|
||||
$(selector.checkboxes + ':checked').each(function(index, element) {
|
||||
post_data.select.push($(element).val());
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: '{{ advertise }}',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
data: post_data,
|
||||
beforeSend: function() {
|
||||
$(selector.list).html('<tr><td colspan="' + $(selector.head).find('th').length + '"><div class="text-center">{{ text_loading }}</div></td></tr>');
|
||||
|
||||
$(selector.campaign_dropdown.container).closest('.btn-group').removeClass('open');
|
||||
|
||||
$(selector.alert_container).empty();
|
||||
$(selector.warning_container).empty();
|
||||
|
||||
$(selector.button_advertise).attr('disabled', true).toggleClass('btn-info', false).toggleClass('btn-default', true);
|
||||
|
||||
$(selector.button_bulk_edit).attr('disabled', true);
|
||||
|
||||
$(selector.select_all).prop('checked', false);
|
||||
|
||||
total_items = 0;
|
||||
total_pages = 1;
|
||||
$(selector.deselect_all_pages).trigger('click');
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
displayError(textStatus + ': ' + errorThrown);
|
||||
},
|
||||
success: function(data) {
|
||||
if (data.warning) {
|
||||
displayWarning(data.warning);
|
||||
}
|
||||
|
||||
if (data.error) {
|
||||
displayError(data.error);
|
||||
} else if (data.success) {
|
||||
displaySuccess(data.success);
|
||||
}
|
||||
|
||||
listProducts();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var updateSelected = function() {
|
||||
var selected = $(selector.checkboxes + ':checked').length;
|
||||
var selection_text = '{{ text_selection_page }}'.replace(/{selected_page}/, selected).replace(/{total}/, total_items);
|
||||
var deselection_text = '{{ text_selection_all }}'.replace(/{total}/, total_items);
|
||||
|
||||
if (selected_all_pages) {
|
||||
$(selector.selection_container).html('<div class="alert alert-warning"><i class="fa fa-exclamation-triangle"></i> ' + deselection_text + '</div>');
|
||||
} else {
|
||||
if (selected > 0 && total_pages > 1) {
|
||||
$(selector.selection_container).html('<div class="alert alert-warning"><i class="fa fa-exclamation-triangle"></i> ' + selection_text + '</div>');
|
||||
} else {
|
||||
$(selector.selection_container).empty();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var googleFieldsPopup = function(settings) {
|
||||
var data = {
|
||||
title: '{{ text_popup_loading_title }}',
|
||||
body: '<p>{{ text_popup_loading_body }}<p>'
|
||||
};
|
||||
|
||||
var modal = $(getPopupHtml(selector.popup.product.template, data));
|
||||
|
||||
var ajaxSuccess = function(data) {
|
||||
var new_html = getPopupHtml(selector.popup.product.template, data);
|
||||
|
||||
$(modal).find('.modal-body').html($(new_html).find('.modal-body').html());
|
||||
$(modal).find('.modal-title').html($(new_html).find('.modal-title').html());
|
||||
|
||||
$.each(data.required_fields, function(key, element) {
|
||||
if (element.selected_field !== null) {
|
||||
$.each(element.selected_field, function(dependency, values) {
|
||||
$(modal).find('.modal-body').find('[name="' + dependency + '"]').change(function(e) {
|
||||
var newValue = $(this).val();
|
||||
|
||||
$(modal).find('.modal-body').find('[name="' + key + '"]').closest('.form-group').removeClass('required');
|
||||
|
||||
$.each(element.selected_field, function(k, values) {
|
||||
if (values.indexOf(newValue) >= 0) {
|
||||
$(modal).find('.modal-body').find('[name="' + key + '"]').closest('.form-group').addClass('required');
|
||||
}
|
||||
});
|
||||
}).trigger('change');
|
||||
});
|
||||
} else {
|
||||
$(modal).find('.modal-body').find('[name="' + key + '"]').closest('.form-group').addClass('required');
|
||||
}
|
||||
});
|
||||
|
||||
if (data.success) {
|
||||
$(modal).modal('hide');
|
||||
|
||||
displaySuccess(data.success_message);
|
||||
|
||||
settings.success_callback(data);
|
||||
}
|
||||
};
|
||||
|
||||
var ajaxError = function(jqXHR, textStatus, errorThrown) {
|
||||
var new_html = getPopupHtml(selector.popup.product.template, {
|
||||
title: '{{ text_popup_error_title }}',
|
||||
body: '{{ text_popup_error_body }}'.replace(/{error}/g, errorThrown)
|
||||
});
|
||||
|
||||
$(modal).find('.modal-body').html($(new_html).find('.modal-body').html());
|
||||
$(modal).find('.modal-title').html($(new_html).find('.modal-title').html());
|
||||
};
|
||||
|
||||
$(modal).on('hidden.bs.modal', function(e) {
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
$(modal).on('shown.bs.modal', function(e) {
|
||||
$(selector.popup.product.button_save).click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$.ajax({
|
||||
url: '{{ url_popup }}',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'submit',
|
||||
operand: settings.operand,
|
||||
form: $(selector.popup.product.form).serializeObject()
|
||||
},
|
||||
beforeSend: function() {
|
||||
$(modal).modal('show');
|
||||
},
|
||||
success: ajaxSuccess,
|
||||
error: ajaxError,
|
||||
complete: function() {
|
||||
// Highlight any found errors
|
||||
$(modal).find('.modal-body').find('.text-danger').each(function(index, element) {
|
||||
$(element).closest('.form-group').addClass('has-error');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: '{{ url_popup }}',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
data: {
|
||||
action : 'view',
|
||||
operand : settings.operand
|
||||
},
|
||||
beforeSend: function() {
|
||||
$(modal).modal('show');
|
||||
},
|
||||
success: ajaxSuccess,
|
||||
error: ajaxError
|
||||
});
|
||||
}
|
||||
|
||||
$(document)
|
||||
.on('click', selector.page, function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$(selector.list).data('page', parseInt($(this).attr('href')));
|
||||
|
||||
listProducts();
|
||||
})
|
||||
.on('click', '[data-sort]', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$(selector.list).data('sort', $(this).attr('data-sort'));
|
||||
|
||||
$(selector.list).data('order', $(selector.list).data('order') == 'ASC' ? 'DESC' : 'ASC');
|
||||
|
||||
listProducts();
|
||||
})
|
||||
.on('click', selector.button_filter, function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$(selector.list).data('page', 1);
|
||||
|
||||
listProducts();
|
||||
})
|
||||
.on('change', selector.select_all, function(e) {
|
||||
if ($(this).is(':checked')) {
|
||||
$(selector.checkboxes).prop('checked', true).trigger('change');
|
||||
} else {
|
||||
$(selector.checkboxes).prop('checked', false).trigger('change');
|
||||
}
|
||||
|
||||
updateSelected();
|
||||
})
|
||||
.on ('click', selector.select_all_pages, function(e) {
|
||||
selected_all_pages = true;
|
||||
|
||||
$(selector.select_all).prop('checked', true).trigger('change').attr('disabled', true);
|
||||
$(selector.checkboxes).attr('disabled', true);
|
||||
})
|
||||
.on ('click', selector.deselect_all_pages, function(e) {
|
||||
selected_all_pages = false;
|
||||
|
||||
$(selector.select_all).prop('checked', false).trigger('change').attr('disabled', false);
|
||||
$(selector.checkboxes).attr('disabled', false);
|
||||
})
|
||||
.on('change', selector.checkboxes, function(e) {
|
||||
$(this).closest(selector.row).find(selector.highlightable).removeClass('active');
|
||||
|
||||
if ($(this).is(':checked')) {
|
||||
$(this).closest(selector.row).find(selector.highlightable).addClass('active');
|
||||
}
|
||||
|
||||
var status = $(selector.checkboxes + ":checked").length == 0;
|
||||
|
||||
$(selector.button_advertise).attr('disabled', status).toggleClass('btn-info', !status).toggleClass('btn-default', status);
|
||||
|
||||
$(selector.button_bulk_edit).attr('disabled', status);
|
||||
|
||||
updateSelected();
|
||||
})
|
||||
.on('hide.bs.dropdown', function(e) {
|
||||
if ($(event.target).closest(selector.campaign_dropdown.container).length > 0) {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.on('change', selector.campaign_dropdown.checkboxes, function(e) {
|
||||
var this_parent = $(this).closest(selector.campaign_dropdown.container)[0];
|
||||
var this_value = $(this).attr('value');
|
||||
var this_checked = $(this).is(':checked');
|
||||
var remaining_status;
|
||||
|
||||
$(selector.campaign_dropdown.container).each(function(index, element) {
|
||||
if (element != this_parent) {
|
||||
var other_checkbox = $(element).find('input[type="checkbox"][value="' + this_value + '"]');
|
||||
|
||||
$(other_checkbox).prop('checked', this_checked);
|
||||
|
||||
$(other_checkbox).closest(selector.campaign_dropdown.element).toggleClass('active', this_checked);
|
||||
}
|
||||
});
|
||||
|
||||
$(this).closest(selector.campaign_dropdown.element).toggleClass('active', this_checked);
|
||||
|
||||
// Disable/Enable all remaining checkboxes depending on the reached limit
|
||||
remaining_status = $(selector.campaign_dropdown.first_container_checkboxes + ':checked').length == 5;
|
||||
|
||||
$(selector.campaign_dropdown.checkboxes + ":not(:checked)").attr('disabled', remaining_status);
|
||||
})
|
||||
.on('click', selector.button_apply_advertising, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
advertiseChange();
|
||||
})
|
||||
.on('click', selector.popup.product.button_show, function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
googleFieldsPopup({
|
||||
operand: {
|
||||
type: 'single',
|
||||
data: $(this).attr('data-product-advertise-google-id')
|
||||
},
|
||||
success_callback : function(data) {
|
||||
$(selector.popup.product.button_show + '[data-product-id=' + data.product_id + ']').removeClass('btn-warning').addClass('btn-default');
|
||||
}
|
||||
});
|
||||
})
|
||||
.on('click', selector.button_bulk_edit, function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var post_data = {
|
||||
all_pages : selected_all_pages ? '1' : '0',
|
||||
filter: getFilterPostData(),
|
||||
select: []
|
||||
};
|
||||
|
||||
$(selector.checkboxes + ':checked').each(function(index, element) {
|
||||
post_data.select.push($(element).val());
|
||||
});
|
||||
|
||||
googleFieldsPopup({
|
||||
operand: {
|
||||
type: 'multiple',
|
||||
data: post_data
|
||||
},
|
||||
success_callback : function(data) {
|
||||
listProducts();
|
||||
}
|
||||
});
|
||||
})
|
||||
.on('click', selector.popup.issues.button_show, function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var data = {
|
||||
title: '{{ text_popup_loading_title }}',
|
||||
body: '<p>{{ text_popup_loading_body }}<p>'
|
||||
};
|
||||
|
||||
var modal = $(getPopupHtml(selector.popup.issues.template, data));
|
||||
|
||||
var url_popup = $(this).attr('data-url-popup-issues');
|
||||
|
||||
$(modal).on('hidden.bs.modal', function(e) {
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
var ajaxSuccess = function(data) {
|
||||
var new_html = getPopupHtml(selector.popup.issues.template, data);
|
||||
|
||||
$(modal).find('.modal-body').html($(new_html).find('.modal-body').html());
|
||||
$(modal).find('.modal-title').html($(new_html).find('.modal-title').html());
|
||||
};
|
||||
|
||||
var ajaxError = function(jqXHR, textStatus, errorThrown) {
|
||||
var new_html = getPopupHtml(selector.popup.issues.template, {
|
||||
title: '{{ text_popup_error_title }}',
|
||||
body: '{{ text_popup_error_body }}'.replace(/{error}/g, errorThrown)
|
||||
});
|
||||
|
||||
$(modal).find('.modal-body').html($(new_html).find('.modal-body').html());
|
||||
$(modal).find('.modal-title').html($(new_html).find('.modal-title').html());
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: url_popup,
|
||||
dataType: 'json',
|
||||
type: 'GET',
|
||||
beforeSend: function() {
|
||||
$(modal).modal('show');
|
||||
},
|
||||
success: ajaxSuccess,
|
||||
error: ajaxError
|
||||
});
|
||||
})
|
||||
.on('change', selector.filter.category, function(e) {
|
||||
var has_value = $(this).val() != '';
|
||||
|
||||
$(selector.filter.category_autocomplete).attr('disabled', has_value);
|
||||
$(selector.filter.button_category_remove).attr('disabled', !has_value);
|
||||
})
|
||||
.on('click', selector.filter.button_category_remove, function(e) {
|
||||
$(selector.filter.category_autocomplete).val('');
|
||||
$(selector.filter.category).val('').trigger('change');
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
$(selector.list).data('sort', 'name');
|
||||
$(selector.list).data('order', 'ASC');
|
||||
$(selector.list).data('page', 1);
|
||||
|
||||
listProducts();
|
||||
});
|
||||
|
||||
$(selector.filter.product_name).autocomplete({
|
||||
'source': function(request, response) {
|
||||
$.ajax({
|
||||
url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
|
||||
dataType: 'json',
|
||||
success: function(json) {
|
||||
response($.map(json, function(item) {
|
||||
return {
|
||||
label: item['name'],
|
||||
value: item['product_id']
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
'select': function(item) {
|
||||
$(selector.filter.product_name).val(item.label);
|
||||
}
|
||||
});
|
||||
|
||||
$(selector.filter.product_model).autocomplete({
|
||||
'source': function(request, response) {
|
||||
$.ajax({
|
||||
url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_model=' + encodeURIComponent(request),
|
||||
dataType: 'json',
|
||||
success: function(json) {
|
||||
response($.map(json, function(item) {
|
||||
return {
|
||||
label: item['model'],
|
||||
value: item['product_id']
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
'select': function(item) {
|
||||
$(selector.filter.product_model).val(item.label);
|
||||
}
|
||||
});
|
||||
|
||||
$(selector.filter.category_autocomplete).autocomplete({
|
||||
'source': function(request, response) {
|
||||
$.ajax({
|
||||
url: '{{ url_category_autocomplete }}&filter_name=' + encodeURIComponent(request),
|
||||
dataType: 'json',
|
||||
success: function(json) {
|
||||
response($.map(json, function(item) {
|
||||
return {
|
||||
label: item['name'],
|
||||
value: item['category_id']
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
'select': function(item) {
|
||||
$(selector.filter.category_autocomplete).val(item.label);
|
||||
|
||||
$(selector.filter.category).val(item.value).trigger('change');
|
||||
}
|
||||
});
|
||||
|
||||
$.fn.serializeObject = function(){
|
||||
var self = this,
|
||||
json = {},
|
||||
push_counters = {},
|
||||
patterns = {
|
||||
"validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
|
||||
"key": /[a-zA-Z0-9_]+|(?=\[\])/g,
|
||||
"push": /^$/,
|
||||
"fixed": /^\d+$/,
|
||||
"named": /^[a-zA-Z0-9_]+$/
|
||||
};
|
||||
|
||||
|
||||
this.build = function(base, key, value){
|
||||
base[key] = value;
|
||||
return base;
|
||||
};
|
||||
|
||||
this.push_counter = function(key){
|
||||
if(push_counters[key] === undefined){
|
||||
push_counters[key] = 0;
|
||||
}
|
||||
return push_counters[key]++;
|
||||
};
|
||||
|
||||
$.each($(this).serializeArray(), function(){
|
||||
|
||||
// skip invalid keys
|
||||
if(!patterns.validate.test(this.name)){
|
||||
return;
|
||||
}
|
||||
|
||||
var k,
|
||||
keys = this.name.match(patterns.key),
|
||||
merge = this.value,
|
||||
reverse_key = this.name;
|
||||
|
||||
while((k = keys.pop()) !== undefined){
|
||||
|
||||
// adjust reverse_key
|
||||
reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
|
||||
|
||||
// push
|
||||
if(k.match(patterns.push)){
|
||||
merge = self.build([], self.push_counter(reverse_key), merge);
|
||||
}
|
||||
|
||||
// fixed
|
||||
else if(k.match(patterns.fixed)){
|
||||
merge = self.build([], k, merge);
|
||||
}
|
||||
|
||||
// named
|
||||
else if(k.match(patterns.named)){
|
||||
merge = self.build({}, k, merge);
|
||||
}
|
||||
}
|
||||
|
||||
json = $.extend(true, json, merge);
|
||||
});
|
||||
|
||||
return json;
|
||||
};
|
||||
})(jQuery);
|
||||
</script>
|
||||
@@ -0,0 +1,805 @@
|
||||
{{ header }}
|
||||
{{ column_left }}
|
||||
<div id="content">
|
||||
<div class="page-header">
|
||||
<div class="container-fluid">
|
||||
<div class="pull-right">
|
||||
<a href="{{ text_video_tutorial_url_install }}" target="_blank" class="btn btn-info" data-toggle="tooltip" title="{{ button_video_tutorial_install }}"><i class="fa fa-video-camera"></i></a>
|
||||
<a href="{{ cancel }}" class="btn btn-default" data-toggle="tooltip" title="{{ button_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">
|
||||
{% if not from_dashboard %}
|
||||
{{ steps }}
|
||||
{% endif %}
|
||||
<div id="alerts">
|
||||
{% if success %}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-check-circle" aria-hidden="true"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if warning %}
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><i class="fa fa-close"></i></button>
|
||||
<i class="fa fa-info-circle"></i> {{ warning }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-pencil"></i>
|
||||
<span>
|
||||
{% if from_dashboard %}
|
||||
{{ text_panel_heading_campaign_2 }}
|
||||
{% else %}
|
||||
{{ text_panel_heading_campaign }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
|
||||
<div class="form-group required">
|
||||
<label class="col-sm-2 control-label">{{ entry_campaign }}</label>
|
||||
<div class="col-sm-10">
|
||||
<div id="targets">
|
||||
{% if targets %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">{{ entry_campaign_name }}</th>
|
||||
<th class="text-center">{{ entry_country }}</th>
|
||||
<th class="text-center">{{ entry_budget }}</th>
|
||||
<th class="text-left">{{ entry_feed }}</th>
|
||||
<th class="text-center">{{ entry_roas }}</th>
|
||||
<th class="text-center">{{ entry_status }}</th>
|
||||
<th class="text-right">{{ entry_action }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="list">
|
||||
{% for target in targets %}
|
||||
<tr>
|
||||
<td class="text-left">{{ target.campaign_name }}</td>
|
||||
<td class="text-center">{{ target.country.name }}</td>
|
||||
<td class="text-center">{{ target.budget.formatted }}</td>
|
||||
<td class="text-left">
|
||||
<ul>
|
||||
{% for feed in target.feeds %}
|
||||
<li>{{ feed.text }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if target.roas_status %}
|
||||
{{ target.roas }}%
|
||||
{% else %}
|
||||
<span class="label label-default" data-toggle="tooltip" data-original-title="{{ target.roas_warning }}">{{ text_label_unavailable }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if target.status == 'paused' %}
|
||||
<span class="label label-warning">{{ text_label_paused }}</span>
|
||||
{% elseif target.status == 'active' %}
|
||||
<span class="label label-success">{{ text_label_active }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<button class="btn btn-primary button-target-edit" data-toggle="tooltip" title="{{ button_edit }}" data-target-id="{{ target.target_id }}"><i class="fa fa-pencil"></i></button>
|
||||
<button class="btn btn-danger button-target-delete" data-toggle="tooltip" title="{{ button_delete }}" data-target-id="{{ target.target_id }}"><i class="fa fa-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-warning"><i class="fa fa-warning"></i> {{ text_no_targets }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<button id="button-target-add" class="btn btn-default"><i class="fa fa-plus"></i> {{ button_add_target }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--div class="form-group">
|
||||
<label class="col-sm-2 control-label">{{ entry_auto_advertise }}</label>
|
||||
<div class="col-sm-10">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="advertise_google_auto_advertise" value="1" {{ advertise_google_auto_advertise == '1' ? 'checked="checked"' }}>
|
||||
{{ text_yes }}
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="advertise_google_auto_advertise" value="0" {{ advertise_google_auto_advertise == '0' ? 'checked="checked"' }}>
|
||||
{{ text_no }}
|
||||
</label>
|
||||
</div>
|
||||
</div-->
|
||||
<hr />
|
||||
{% if not from_dashboard %}
|
||||
<div class="alert alert-info text-left">
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" class="acknowledge" /> {{ text_acknowledge_add_campaign_1 }}</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" class="acknowledge" /> {{ text_acknowledge_add_campaign_2 }}</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="pull-right">
|
||||
<button type="submit" {{ not from_dashboard ? 'disabled' }} class="btn btn-primary" id="proceed">{{ button_proceed }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-info-circle"></i> <span>{{ text_panel_heading_more_info }}</span></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{{ text_campaign_more_info }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-image"></i> <span>{{ text_panel_heading_preview }}</span></h3>
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<img id="ad-preview" src="view/image/advertise/google/ad-preview.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
.feed {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feed > .row {
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.button-feed-delete {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#feeds > .feed:first-child > .row {
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
#ad-preview {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script type="text/template" id="template-targets">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">{{ entry_campaign_name }}</th>
|
||||
<th class="text-center">{{ entry_country }}</th>
|
||||
<th class="text-center">{{ entry_budget }}</th>
|
||||
<th class="text-left">{{ entry_feed }}</th>
|
||||
<th class="text-center">{{ entry_roas }}</th>
|
||||
<th class="text-center">{{ entry_status }}</th>
|
||||
<th class="text-right">{{ entry_action }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="list">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/template" id="template-list-element">
|
||||
<tr>
|
||||
<td class="text-left">{campaign_name}</td>
|
||||
<td class="text-center">{country}</td>
|
||||
<td class="text-center">{budget}</td>
|
||||
<td class="text-left">{feeds}</td>
|
||||
<td class="text-center">{roas}</td>
|
||||
<td class="text-center">{status}</td>
|
||||
<td class="text-right">
|
||||
<button class="btn btn-primary button-target-edit" data-toggle="tooltip" title="{{ button_edit }}" data-target-id="{target_id}"><i class="fa fa-pencil"></i></button>
|
||||
<button class="btn btn-danger button-target-delete" data-toggle="tooltip" title="{{ button_delete }}" data-target-id="{target_id}"><i class="fa fa-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
<script type="text/template" id="template-modal">
|
||||
<div id="target-modal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
|
||||
<h4 class="modal-title">{title}</h4>
|
||||
</div>
|
||||
<div class="modal-body form-horizontal">
|
||||
<div id="target-alerts"></div>
|
||||
<div class="form-group required" data-error-type="error_campaign_name">
|
||||
<label for="input-campaign-name" class="col-sm-3 control-label">{{ entry_campaign_name }}</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="input-campaign-name" name="campaign_name" value="{campaign_name}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">{{ entry_status }}</label>
|
||||
<div class="col-sm-9">
|
||||
<select class="form-control" name="status" id="select-status" data-value="{status}">
|
||||
<option value="active">{{ text_active }}</option>
|
||||
<option value="paused">{{ text_paused }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required" data-error-type="error_country">
|
||||
<label for="select-country" class="col-sm-3 control-label">{{ entry_country }}</label>
|
||||
<div class="col-sm-9">
|
||||
<select class="form-control" name="country" id="select-country" data-value="{country}">
|
||||
<option value="">{{ text_select_country }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" data-error-type="error_roas">
|
||||
<label for="input-roas" class="col-sm-3 control-label">{{ entry_roas }}</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ help_roas }}</div>
|
||||
<div id="warning-roas" class="alert alert-warning" style="display: none;"><i class="fa fa-exclamation-triangle"></i> {roas_warning}</div>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="input-roas" name="roas" value="{roas}" min="0" />
|
||||
<div class="input-group-addon"><i class="fa fa-percent"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required" data-error-type="error_budget">
|
||||
<label for="input-budget" class="col-sm-3 control-label">{{ entry_budget }}</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ help_budget }}</div>
|
||||
<div id="warning-budget" class="alert alert-warning" style="display: none;"><i class="fa fa-exclamation-triangle"></i> {{ warning_budget }}</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon"><i class="fa fa-dollar"></i></div>
|
||||
<input type="number" class="form-control" id="input-budget" name="budget" value="{budget}" min="5" />
|
||||
<div class="input-group-addon">{{ text_usd_day }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required" data-error-type="error_feed">
|
||||
<label class="col-sm-3 control-label">{{ entry_feed }}</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ help_feed }}</div>
|
||||
<div id="feeds">{feeds}</div>
|
||||
<div>
|
||||
<button id="button-feed-add" class="btn btn-success"><i class="fa fa-plus"></i> {{ button_add_feed }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> {{ button_close }}</button>
|
||||
<button type="button" class="btn btn-primary" id="button-target-save" data-text="{{ button_save }}" data-loading="{{ text_loading_please_wait }}" data-url="{url}"><i class="fa fa-save"></i> {{ button_save }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/template" id="template-feed">
|
||||
<div class="feed" data-id="{id}">
|
||||
<div class="row">
|
||||
<div class="col-md-6 form-control-static">
|
||||
<select class="form-control" name="feed[{id}][language]" data-value="{language}">
|
||||
<option value="">{{ text_select_language }}</option>
|
||||
{languages}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6 form-control-static">
|
||||
<select class="form-control" name="feed[{id}][currency]" data-value="{currency}">
|
||||
<option value="">{{ text_select_currency }}</option>
|
||||
{currencies}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button-feed-delete btn btn-default" data-toggle="tooltip" title="{{ button_delete }}"><i class="fa fa-trash"></i></button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/template" id="template-alert">
|
||||
<div class="alert alert-{type} alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-{icon}" aria-hidden="true"></i> {message}
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var allowed_targets = {{ json_allowed_targets }};
|
||||
|
||||
var targets = {{ json_targets }};
|
||||
|
||||
var id = 0;
|
||||
|
||||
var selector = {
|
||||
alerts: '#alerts',
|
||||
acknowledge: '.acknowledge',
|
||||
save: '#proceed',
|
||||
form: '#form',
|
||||
target: {
|
||||
container: '#targets',
|
||||
list: '#list',
|
||||
modal: '#target-modal',
|
||||
alerts: '#target-alerts',
|
||||
add : '#button-target-add',
|
||||
edit: '.button-target-edit',
|
||||
delete: '.button-target-delete',
|
||||
country : '#select-country',
|
||||
status : '#select-status',
|
||||
save: '#button-target-save',
|
||||
budget: '#input-budget',
|
||||
warning_budget: '#warning-budget',
|
||||
roas: '#input-roas',
|
||||
warning_roas: '#warning-roas'
|
||||
},
|
||||
feed: {
|
||||
container: '#feeds',
|
||||
error_type: '[data-error-type]',
|
||||
language: 'select[name*="[language]"]',
|
||||
currency: 'select[name*="[currency]"]',
|
||||
add : '#button-feed-add',
|
||||
delete: '.button-feed-delete',
|
||||
row: '.feed'
|
||||
},
|
||||
template : {
|
||||
alert: '#template-alert',
|
||||
modal : '#template-modal',
|
||||
feed : '#template-feed',
|
||||
targets: '#template-targets',
|
||||
list_element: '#template-list-element'
|
||||
}
|
||||
};
|
||||
|
||||
var template = function(html, data) {
|
||||
$.map(data, function(text, key) {
|
||||
html = html.replace(new RegExp("{" + key + "}", 'g'), text);
|
||||
});
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
var makeModalHtml = function(data) {
|
||||
var html = $(selector.template.modal).html();
|
||||
|
||||
return template(html, data);
|
||||
};
|
||||
|
||||
var makeFeedsHtml = function(data) {
|
||||
var html = $(selector.template.feed).html();
|
||||
|
||||
data.languages = '';
|
||||
data.currencies = '';
|
||||
|
||||
// Set the feed countries
|
||||
$(allowed_targets).each(function(index, target) {
|
||||
if (target.country.code == $(selector.target.country).val()) {
|
||||
$(target.languages).each(function(index, language) {
|
||||
data.languages += '<option value="' + language.code + '" ' + (language.status ? '' : 'disabled') + '>' + language.name + '</option>';
|
||||
});
|
||||
|
||||
$(target.currencies).each(function(index, currency) {
|
||||
data.currencies += '<option value="' + currency.code + '" ' + (currency.status ? '' : 'disabled') + '>' + currency.name + '</option>';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return template(html, data);
|
||||
};
|
||||
|
||||
var makeAlertHtml = function(data) {
|
||||
var html = $(selector.template.alert).html();
|
||||
|
||||
return template(html, data);
|
||||
};
|
||||
|
||||
var displayError = function(container, message) {
|
||||
$(container).html(makeAlertHtml({
|
||||
icon: 'exclamation-triangle',
|
||||
type: 'danger',
|
||||
message: message
|
||||
}));
|
||||
};
|
||||
|
||||
var makeListElementHtml = function(data) {
|
||||
var html = $(selector.template.list_element).html();
|
||||
|
||||
return template(html, data);
|
||||
}
|
||||
|
||||
var makeListElementRoasHtml = function(roas_status, roas_warning, roas) {
|
||||
if (!roas_status) {
|
||||
return '<span class="label label-default" data-toggle="tooltip" data-original-title="' + roas_warning + '">{{ text_label_unavailable }}</span>';
|
||||
} else {
|
||||
return roas.toString() + '%';
|
||||
}
|
||||
}
|
||||
|
||||
var makeListElementStatusHtml = function(status) {
|
||||
if (status == 'paused') {
|
||||
return '<span class="label label-warning">{{ text_label_paused }}</span>';
|
||||
} else if (status == 'active') {
|
||||
return '<span class="label label-success">{{ text_label_active }}</span>';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
var makeListElementFeedsHtml = function(feeds) {
|
||||
html = '<ul>';
|
||||
$(feeds).each(function(index, feed) {
|
||||
html += '<li>' + feed.text + '</li>';
|
||||
});
|
||||
html += '</ul>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
var displaySuccess = function(message) {
|
||||
$(selector.alerts).html(makeAlertHtml({
|
||||
icon: 'check-circle',
|
||||
type: 'success',
|
||||
message: message
|
||||
}));
|
||||
};
|
||||
|
||||
var refreshTargets = function(callback) {
|
||||
$.ajax({
|
||||
url: '{{ target_list }}',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
beforeSend: function() {
|
||||
$(selector.target.container).html('<div class="alert alert-info text-center">{{ text_loading }}</div>');
|
||||
},
|
||||
complete: callback,
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
displayError(selector.alerts, '(' + textStatus + ') ' + errorThrown);
|
||||
},
|
||||
success: function(data) {
|
||||
if (data.error) {
|
||||
displayError(selector.alerts, data.error);
|
||||
} else {
|
||||
if (data.targets.length) {
|
||||
targets = data.targets;
|
||||
|
||||
$(selector.target.container).html($(selector.template.targets).html());
|
||||
|
||||
$(data.targets).each(function(index, target) {
|
||||
$(selector.target.list).append(makeListElementHtml({
|
||||
target_id: target.target_id,
|
||||
campaign_name: target.campaign_name,
|
||||
country: target.country.name,
|
||||
budget: target.budget.formatted,
|
||||
roas: makeListElementRoasHtml(target.roas_status, target.roas_warning, target.roas),
|
||||
status: makeListElementStatusHtml(target.status),
|
||||
feeds: makeListElementFeedsHtml(target.feeds)
|
||||
}));
|
||||
});
|
||||
} else {
|
||||
$(selector.target.container).html('<div class="alert alert-warning"><i class="fa fa-warning"></i> {{ text_no_targets }}</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var initModal = function(modalData) {
|
||||
var html = $(makeModalHtml(modalData));
|
||||
|
||||
$(html).modal();
|
||||
|
||||
$(html).on('shown.bs.modal', function() {
|
||||
// Enable tooltips
|
||||
$('[data-toggle="tooltip"]').tooltip({container: 'body', html: true});
|
||||
|
||||
// Populate countries
|
||||
$(allowed_targets).each(function(index, target) {
|
||||
$(selector.target.country).append('<option value="' + target.country.code + '">' + target.country.name + '</option>');
|
||||
});
|
||||
|
||||
// Select the current country
|
||||
$(selector.target.country).val($(selector.target.country).attr('data-value')).trigger('change');
|
||||
|
||||
$(selector.target.status).val($(selector.target.status).attr('data-value')).trigger('change');
|
||||
|
||||
$(selector.target.budget).trigger('change');
|
||||
|
||||
$(selector.target.roas).attr('disabled', !modalData.roas_status);
|
||||
$(selector.target.roas).attr('data-original-disabled', !modalData.roas_status ? '1' : '0');
|
||||
|
||||
$(selector.target.warning_roas).toggle(!modalData.roas_status);
|
||||
});
|
||||
|
||||
$(html).on('hidden.bs.modal', function() {
|
||||
$(this).remove();
|
||||
});
|
||||
};
|
||||
|
||||
var campaignCreateTestPromise = new Promise((resolve, reject) => {
|
||||
{% if can_edit_campaigns %}
|
||||
resolve();
|
||||
{% else %}
|
||||
var doCampaignCreateTest = function() {
|
||||
$.ajax({
|
||||
url: '{{ url_campaign_test }}',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
if (data.status) {
|
||||
resolve();
|
||||
} else if (data.redirect) {
|
||||
document.location = data.redirect;
|
||||
} else {
|
||||
setTimeout(doCampaignCreateTest, 10000);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
doCampaignCreateTest();
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
$(document).on('click', selector.target.add, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var modalData = {
|
||||
title: '{{ text_add_target }}',
|
||||
url: '{{ target_add }}',
|
||||
campaign_name : '',
|
||||
budget: '25.00',
|
||||
roas: 0,
|
||||
roas_status: false,
|
||||
roas_warning: '{{ text_roas_warning }}',
|
||||
country: '',
|
||||
status: 'active',
|
||||
feeds: makeFeedsHtml({
|
||||
id: id++,
|
||||
language: '',
|
||||
currency: ''
|
||||
})
|
||||
};
|
||||
|
||||
initModal(modalData);
|
||||
});
|
||||
|
||||
$(document).on('click', selector.target.edit, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var data = null;
|
||||
var feeds = '';
|
||||
var target_id = $(this).attr('data-target-id');
|
||||
|
||||
$(targets).each(function(index, target) {
|
||||
if (target.target_id == target_id) {
|
||||
data = target;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
$(data.feeds).each(function(index, feed) {
|
||||
feeds += makeFeedsHtml({
|
||||
id: id++,
|
||||
language: feed.language,
|
||||
currency: feed.currency
|
||||
});
|
||||
});
|
||||
|
||||
var modalData = {
|
||||
title: '{{ text_edit_target }}'.replace(/%s/, data.campaign_name),
|
||||
url: '{{ target_edit }}'.replace(/{target_id}/, target_id),
|
||||
campaign_name : data.campaign_name,
|
||||
budget: data.budget.value,
|
||||
roas: data.roas,
|
||||
roas_status: data.roas_status,
|
||||
roas_warning: data.roas_warning,
|
||||
country: data.country.code,
|
||||
status: data.status,
|
||||
feeds: feeds
|
||||
};
|
||||
|
||||
initModal(modalData);
|
||||
});
|
||||
|
||||
$(document).on('click', selector.target.delete, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (confirm("{{ text_confirm }}")) {
|
||||
var target_id = $(this).attr('data-target-id');
|
||||
|
||||
$(selector.target.container).html('<div class="alert alert-info text-center">{{ text_loading_please_wait }}</div>');
|
||||
|
||||
campaignCreateTestPromise.then(function() {
|
||||
$.ajax({
|
||||
url: '{{ target_delete }}'.replace(/{target_id}/, target_id),
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
complete: function() {
|
||||
refreshTargets();
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
displayError(selector.alerts, '(' + textStatus + ') ' + errorThrown);
|
||||
},
|
||||
success: function(data) {
|
||||
if (data.error) {
|
||||
displayError(selector.alerts, data.error);
|
||||
} else if (data.redirect) {
|
||||
document.location = data.redirect;
|
||||
} else {
|
||||
displaySuccess(data.success);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', selector.feed.add, function(e) {
|
||||
$(selector.feed.container).append(
|
||||
$(makeFeedsHtml({
|
||||
id: id++,
|
||||
language: '',
|
||||
currency: ''
|
||||
}))
|
||||
);
|
||||
});
|
||||
|
||||
$(document).on('click', selector.feed.delete, function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (confirm("{{ text_confirm }}")) {
|
||||
$(this).closest(selector.feed.row).remove();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', selector.target.save, function(e) {
|
||||
var saveButton = this;
|
||||
|
||||
$(selector.target.alerts).empty();
|
||||
$(selector.alerts).empty();
|
||||
|
||||
$(selector.target.save)
|
||||
.text($(selector.target.save).attr('data-loading'))
|
||||
.attr('disabled', true);
|
||||
|
||||
$(selector.target.modal).find('input,select').attr('disabled', true);
|
||||
$(selector.target.modal).find(selector.feed.add).attr('disabled', true);
|
||||
$(selector.target.modal).find(selector.feed.delete).attr('disabled', true);
|
||||
|
||||
$('.text-danger').remove();
|
||||
|
||||
$('.has-error').removeClass('has-error');
|
||||
|
||||
campaignCreateTestPromise.then(function() {
|
||||
$.ajax({
|
||||
url: $(saveButton).attr('data-url'),
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: $(selector.target.modal).find('input,select'),
|
||||
complete: function() {
|
||||
$(selector.target.save)
|
||||
.text($(selector.target.save).attr('data-text'))
|
||||
.attr('disabled', false);
|
||||
|
||||
$(selector.target.modal).find('input,select').attr('disabled', false);
|
||||
$(selector.target.modal).find('[data-original-disabled]').each(function(index, element) {
|
||||
$(element).attr('disabled', $(element).attr('data-original-disabled') == '1');
|
||||
});
|
||||
$(selector.target.modal).find(selector.feed.add).attr('disabled', false);
|
||||
$(selector.target.modal).find(selector.feed.delete).attr('disabled', false);
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
displayError(selector.target.alerts, '(' + textStatus + ') ' + errorThrown);
|
||||
},
|
||||
success: function(data) {
|
||||
if (data.error) {
|
||||
displayError(selector.target.alerts, data.error);
|
||||
|
||||
$(selector.feed.error_type).each(function(index, element) {
|
||||
if (typeof data[$(element).attr('data-error-type')] != 'undefined') {
|
||||
$(element).find('.col-sm-9').append('<div class="text-danger">' + data[$(element).attr('data-error-type')] + '</div>');
|
||||
}
|
||||
});
|
||||
|
||||
// Highlight any found errors
|
||||
$('.text-danger').each(function() {
|
||||
var element = $(saveButton).parent().parent();
|
||||
|
||||
if (element.hasClass('form-group')) {
|
||||
element.addClass('has-error');
|
||||
}
|
||||
});
|
||||
} else if (data.redirect) {
|
||||
document.location = data.redirect;
|
||||
} else if (data.success) {
|
||||
displaySuccess(data.success);
|
||||
|
||||
refreshTargets(function() {
|
||||
$(selector.target.modal).modal('hide');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('change', selector.target.country, function() {
|
||||
var code = $(this).val();
|
||||
|
||||
// Set the feed countries
|
||||
$(allowed_targets).each(function(index, target) {
|
||||
if (target.country.code == code) {
|
||||
$(selector.feed.container).find(selector.feed.language).find('option[value!=""]').remove();
|
||||
|
||||
$(target.languages).each(function(index, language) {
|
||||
$(selector.feed.container).find(selector.feed.language).append('<option value="' + language.code + '" ' + (language.status ? '' : 'disabled') + '>' + language.name + '</option>');
|
||||
});
|
||||
|
||||
$(selector.feed.container).find(selector.feed.language).val(
|
||||
$(selector.feed.container).find(selector.feed.language).attr('data-value')
|
||||
);
|
||||
|
||||
$(selector.feed.container).find(selector.feed.currency).find('option[value!=""]').remove();
|
||||
|
||||
$(target.currencies).each(function(index, currency) {
|
||||
$(selector.feed.container).find(selector.feed.currency).append('<option value="' + currency.code + '" ' + (currency.status ? '' : 'disabled') + '>' + currency.name + '</option>');
|
||||
});
|
||||
|
||||
$(selector.feed.container).find(selector.feed.currency).val(
|
||||
$(selector.feed.container).find(selector.feed.currency).attr('data-value')
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('change', selector.acknowledge, function() {
|
||||
$(selector.save).attr('disabled', $(selector.acknowledge + ':not(:checked)').length > 0);
|
||||
});
|
||||
|
||||
$(document).on('change keyup', selector.target.budget, function() {
|
||||
if (parseFloat($(this).val()) < 10) {
|
||||
$(selector.target.warning_budget).show();
|
||||
} else {
|
||||
$(selector.target.warning_budget).hide();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', selector.save, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$(selector.save).text('{{ text_loading_please_wait }}').attr('disabled', true);
|
||||
$(selector.acknowledge).attr('disabled', true);
|
||||
|
||||
campaignCreateTestPromise.then(function() {
|
||||
$(selector.form).submit();
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
{{ footer }}
|
||||
@@ -0,0 +1,102 @@
|
||||
{{ header }}
|
||||
{{ column_left }}
|
||||
<div id="content">
|
||||
<div class="page-header">
|
||||
<div class="container-fluid">
|
||||
<div class="pull-right">
|
||||
<a href="{{ text_video_tutorial_url_install }}" target="_blank" class="btn btn-info" data-toggle="tooltip" title="{{ button_video_tutorial_install }}"><i class="fa fa-video-camera"></i></a>
|
||||
<a href="{{ cancel }}" class="btn btn-default" data-toggle="tooltip" title="{{ button_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">
|
||||
{% if success %}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-check-circle" aria-hidden="true"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-list-ol"></i> <span>{{ text_panel_heading }}</span></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
|
||||
<input type="hidden" name="advertise_google_checklist_confirmed" value="1" />
|
||||
|
||||
<div class="alert alert-info">
|
||||
{{ text_checklist_intro }}
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-center td-pointer"><input type="checkbox" name="acknowledge[0]" /></td>
|
||||
<td class="text-left">{{ text_checklist_acknowledge_0 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center td-pointer"><input type="checkbox" name="acknowledge[1]" /></td>
|
||||
<td class="text-left">{{ text_checklist_acknowledge_1 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center td-pointer"><input type="checkbox" name="acknowledge[2]" /></td>
|
||||
<td class="text-left">{{ text_checklist_acknowledge_2 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center td-pointer"><input type="checkbox" name="acknowledge[3]" /></td>
|
||||
<td class="text-left">{{ text_checklist_acknowledge_3 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center td-pointer"><input type="checkbox" name="acknowledge[4]" /></td>
|
||||
<td class="text-left">{{ text_checklist_acknowledge_4 }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
<button type="submit" class="btn btn-primary">{{ button_proceed }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
.td-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
$('input[name^=acknowledge]').change(function(e) {
|
||||
$(this).closest('tr').toggleClass('success', $(this).is(':checked'));
|
||||
|
||||
$('button[type="submit"]').attr('disabled', $('input[name^=acknowledge]:not(:checked)').length > 0);
|
||||
}).trigger('change');
|
||||
|
||||
$('input[name^=acknowledge]').closest('td').click(function(e) {
|
||||
if ($(e.target).is('input')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var checkbox = $(this).find('input[name^=acknowledge]').first();
|
||||
|
||||
$(checkbox).prop('checked', !$(checkbox).prop('checked')).trigger('change');
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
{{ footer }}
|
||||
@@ -0,0 +1,168 @@
|
||||
{{ header }}
|
||||
{{ column_left }}
|
||||
<div id="content">
|
||||
<div class="page-header">
|
||||
<div class="container-fluid">
|
||||
<div class="pull-right">
|
||||
<a href="{{ text_video_tutorial_url_install }}" target="_blank" class="btn btn-info" data-toggle="tooltip" title="{{ button_video_tutorial_install }}"><i class="fa fa-video-camera"></i></a>
|
||||
<a href="{{ cancel }}" class="btn btn-default" data-toggle="tooltip" title="{{ button_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">
|
||||
{{ steps }}
|
||||
<div class="alert alert-info alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-info-circle" aria-hidden="true"></i> {{ text_connect_intro }}
|
||||
</div>
|
||||
{% if success %}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-check-circle" aria-hidden="true"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-plug"></i> <span>{{ text_panel_connect }}</span></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
|
||||
<fieldset>
|
||||
<legend>{{ text_extension_settings }}</legend>
|
||||
<div class="form-group">
|
||||
<label for="select-status" class="col-sm-2 control-label">{{ text_status }}</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="advertise_google_status" id="select-status" class="form-control">
|
||||
<option value="1" selected>{{ text_enabled }}</option>
|
||||
<option value="0">{{ text_disabled }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<label for="input-app-id" class="col-sm-2 control-label">{{ text_app_id }}</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" id="input-app-id" class="form-control" name="advertise_google_app_id" autocomplete="off" value="{{ advertise_google_app_id }}" />
|
||||
{% if error_app_id %}
|
||||
<div class="text-danger">{{ error_app_id }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<label for="input-app-secret" class="col-sm-2 control-label">{{ text_app_secret }}</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" id="input-app-secret" class="form-control" name="advertise_google_app_secret" autocomplete="off" value="{{ advertise_google_app_secret }}" />
|
||||
{% if error_app_secret %}
|
||||
<div class="text-danger">{{ error_app_secret }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>{{ text_cron_settings }}</legend>
|
||||
<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_cron_info }}</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label"><span data-toggle="tooltip" data-original-title="{{ help_local_cron }}">{{ text_local_cron }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<input readonly type="text" class="form-control" value="{{ advertise_google_cron_command }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label"><span data-toggle="tooltip" data-original-title="{{ help_remote_cron }}">{{ text_remote_cron }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group">
|
||||
<input readonly type="text" name="advertise_google_cron_url" id="input_advertise_google_cron_url" class="form-control" value="" />
|
||||
<div data-toggle="tooltip" data-original-title="{{ text_refresh_token }}" class="input-group-addon btn btn-primary" id="refresh-cron-token">
|
||||
<i class="fa fa-refresh"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input id="input_advertise_google_cron_token" type="hidden" name="advertise_google_cron_token" value="{{ advertise_google_cron_token }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<label class="col-sm-2 control-label" for="checkbox_advertise_google_cron_acknowledge">{{ entry_setup_confirmation }}</label>
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline">
|
||||
<input id="checkbox_advertise_google_cron_acknowledge" type="checkbox" value="1" {% if advertise_google_cron_acknowledge %} checked {% endif %} name="advertise_google_cron_acknowledge" /> {{ text_acknowledge_cron }}
|
||||
</label>
|
||||
|
||||
{% if error_cron_acknowledge %}
|
||||
<div class="text-danger">{{ error_cron_acknowledge }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="dropdown_advertise_google_cron_email_status"><span data-toggle="tooltip" data-original-title="{{ help_cron_email_status }}">{{ text_cron_email_status }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<select id="dropdown_advertise_google_cron_email_status" name="advertise_google_cron_email_status" class="form-control">
|
||||
<option value="1" {% if advertise_google_cron_email_status == '1' %} selected {% endif %}>{{ text_enabled }}</option>
|
||||
<option value="0" {% if advertise_google_cron_email_status == '0' %} selected {% endif %}>{{ text_disabled }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<label class="col-sm-2 control-label" for="input_advertise_google_cron_email"><span data-toggle="tooltip" data-original-title="{{ help_cron_email }}">{{ text_cron_email }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<input id="input_advertise_google_cron_email" name="advertise_google_cron_email" type="text" class="form-control" value="{{ advertise_google_cron_email }}"/>
|
||||
{% if error_cron_email %}
|
||||
<div class="text-danger">{{ error_cron_email }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="pull-right">
|
||||
<button type="submit" class="btn btn-primary btn-block" id="connect">{{ button_connect }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var selector = {
|
||||
save: '#connect',
|
||||
form: '#form'
|
||||
}
|
||||
|
||||
var randomString = function() {
|
||||
return (Math.random() * 100).toString(16).replace('.', '');
|
||||
}
|
||||
|
||||
var setCronUrl = function() {
|
||||
$('#input_advertise_google_cron_url').val(
|
||||
"{{ advertise_google_cron_url }}".replace('{CRON_TOKEN}', $('#input_advertise_google_cron_token').val())
|
||||
);
|
||||
}
|
||||
|
||||
$(document).on('click', selector.save, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$(selector.save).text('{{ text_connecting }}').attr('disabled', true);
|
||||
|
||||
$(selector.form).submit();
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
setCronUrl();
|
||||
});
|
||||
|
||||
$('#refresh-cron-token').click(function() {
|
||||
$('#input_advertise_google_cron_token').val(randomString() + randomString());
|
||||
setCronUrl();
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
{{ footer }}
|
||||
@@ -0,0 +1,200 @@
|
||||
{{ header }}
|
||||
{{ column_left }}
|
||||
<div id="content">
|
||||
<div class="page-header">
|
||||
<div class="container-fluid">
|
||||
<div class="pull-right">
|
||||
<a href="{{ text_video_tutorial_url_install }}" target="_blank" class="btn btn-info" data-toggle="tooltip" title="{{ button_video_tutorial_install }}"><i class="fa fa-video-camera"></i></a>
|
||||
<a href="{{ cancel }}" class="btn btn-default" data-toggle="tooltip" title="{{ button_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">
|
||||
{% if not from_dashboard %}
|
||||
{{ steps }}
|
||||
{% endif %}
|
||||
{% if success %}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-check-circle" aria-hidden="true"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-tags"></i>
|
||||
<span>
|
||||
{% if from_dashboard %}
|
||||
{{ text_panel_heading_mapping_2 }}
|
||||
{% else %}
|
||||
{{ text_panel_heading_mapping }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
|
||||
<input type="hidden" name="advertise_google_modify_existing" value="0" />
|
||||
|
||||
<p>{{ text_mapping_intro }}</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="width_33">{{ entry_google_product_category }}</th>
|
||||
<th class="width_66">{{ entry_oc_category }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for map in mapping %}
|
||||
<tr>
|
||||
<td class="width_33">
|
||||
{{ map.google_product_category.name }}
|
||||
</td>
|
||||
<td class="width_66 category-select-container">
|
||||
<input type="text" name="category_autocomplete" value="{{ map.oc_category.name }}" class="form-control" />
|
||||
<input type="hidden" name="advertise_google_mapping[{{ map.google_product_category.id }}]" data-google-category-id="{{ map.google_product_category.id }}" value="{{ map.oc_category.category_id }}">
|
||||
<button class="btn btn-danger button-remove"><i class="fa fa-close"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
<button type="submit" class="btn btn-primary" id="proceed">{{ button_proceed }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
.width_33 {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.width_66 {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
.table > tbody > tr > td.category-select-container {
|
||||
padding-right: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-select-container .button-remove {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 8px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var selector = {
|
||||
save: '#proceed',
|
||||
save_modify: '#button-save-modify',
|
||||
save_proceed: '#button-save-proceed',
|
||||
form: '#form',
|
||||
autocomplete: '[name="category_autocomplete"]',
|
||||
category_id: '[data-google-category-id]',
|
||||
remove: '.button-remove',
|
||||
modify_existing: '[name="advertise_google_modify_existing"]'
|
||||
};
|
||||
|
||||
$(selector.autocomplete).each(function(index, element) {
|
||||
$(element).autocomplete({
|
||||
'source': function(request, response) {
|
||||
$.ajax({
|
||||
url: '{{ url_category_autocomplete }}&filter_name=' + encodeURIComponent(request),
|
||||
dataType: 'json',
|
||||
success: function(json) {
|
||||
response($.map(json, function(item) {
|
||||
return {
|
||||
label: item['name'],
|
||||
value: item['category_id']
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
'select': function(item) {
|
||||
$(element).val(item.label);
|
||||
|
||||
$(element).closest('td').find(selector.category_id).val(item.value).trigger('change');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(selector.category_id).change(function(e) {
|
||||
var has_value = $(this).val() != '';
|
||||
|
||||
$(this).closest('td').find(selector.autocomplete).attr('disabled', has_value);
|
||||
$(this).closest('td').find(selector.remove).attr('disabled', !has_value);
|
||||
}).trigger('change');
|
||||
|
||||
$(selector.remove).click(function(e) {
|
||||
$(this).closest('td').find(selector.autocomplete).val('');
|
||||
$(this).closest('td').find(selector.category_id).val('').trigger('change');
|
||||
});
|
||||
|
||||
$(document).on('click', selector.save, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$(selector.save).text('{{ text_loading }}').attr('disabled', true);
|
||||
|
||||
$.ajax({
|
||||
url: '{{ url_mapping_verify }}',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
if (data.submit_directly) {
|
||||
$(selector.modify_existing).val('0');
|
||||
$(selector.form).submit();
|
||||
} else {
|
||||
var modal = $(data.modal_confirmation).modal();
|
||||
|
||||
$(modal).on('hidden.bs.modal', function(e) {
|
||||
$(this).remove();
|
||||
|
||||
$(selector.save).text('{{ button_proceed }}').attr('disabled', false);
|
||||
});
|
||||
|
||||
$(modal).on('shown.bs.modal', function(e) {
|
||||
$(selector.save_proceed).click(function() {
|
||||
$(selector.save_proceed).text('{{ text_loading }}').attr('disabled', true);
|
||||
$(selector.save_modify).attr('disabled', true);
|
||||
$(selector.modify_existing).val('0');
|
||||
|
||||
$(selector.form).submit();
|
||||
});
|
||||
|
||||
$(selector.save_modify).click(function() {
|
||||
$(selector.save_modify).text('{{ text_loading }}').attr('disabled', true);
|
||||
$(selector.save_proceed).attr('disabled', true);
|
||||
$(selector.modify_existing).val('1');
|
||||
|
||||
$(selector.form).submit();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
{{ footer }}
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="modal fade" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<h4 class="modal-title">{{ text_mapping_verify_title }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{ text_mapping_verify_intro }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-warning" id="button-save-modify">{{ button_save_modify }}</button>
|
||||
<button type="button" class="btn btn-primary" id="button-save-proceed">{{ button_save_future }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
{{ header }}
|
||||
{{ column_left }}
|
||||
<div id="content">
|
||||
<div class="page-header">
|
||||
<div class="container-fluid">
|
||||
<div class="pull-right">
|
||||
<a href="{{ text_video_tutorial_url_install }}" target="_blank" class="btn btn-info" data-toggle="tooltip" title="{{ button_video_tutorial_install }}"><i class="fa fa-video-camera"></i></a>
|
||||
<a href="{{ cancel }}" class="btn btn-default" data-toggle="tooltip" title="{{ button_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">
|
||||
{{ steps }}
|
||||
{% if success %}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-check-circle" aria-hidden="true"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><i class="fa fa-user"></i> <span>{{ text_panel_heading_merchant }}</span></h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<p class="col-md-12">{{ text_merchant_intro }}</p>
|
||||
<div class="col-md-12">
|
||||
<label class="control-label"><input type="radio" name="advertise_google_gmc_account_type" value="api" {% if advertise_google_gmc_account_type == "api" %} checked {% endif %} /> {{ text_new_merchant }}</label>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<label class="control-label"><input type="radio" name="advertise_google_gmc_account_type" value="existing" {% if advertise_google_gmc_account_type == "existing" %} checked {% endif %} /> {{ text_existing_merchant }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info text-left">
|
||||
{{ text_merchant_website_claim }}
|
||||
<hr />
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" class="acknowledge" /> {{ text_acknowledge_merchant_tos }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
<button id="proceed" disabled type="submit" class="btn btn-primary">{{ button_proceed }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var selector = {
|
||||
acknowledge: '.acknowledge',
|
||||
save: '#proceed',
|
||||
form: '#form'
|
||||
}
|
||||
|
||||
$(document).on('change', selector.acknowledge, function() {
|
||||
$(selector.save).attr('disabled', $(selector.acknowledge + ':not(:checked)').length > 0);
|
||||
});
|
||||
|
||||
$(selector.acknowledge).trigger('change');
|
||||
|
||||
$(document).on('click', selector.save, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$(selector.save).text('{{ text_loading }}').attr('disabled', true);
|
||||
|
||||
$(selector.form).submit();
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
{{ footer }}
|
||||
@@ -0,0 +1,69 @@
|
||||
{% for product_issue in product_issues %}
|
||||
<h3>{{ product_issue.language_name }}</h3>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">{{ text_color }}</th>
|
||||
<th class="text-left">{{ text_size }}</th>
|
||||
<th class="text-left">{{ text_destination_status }}</th>
|
||||
<th class="text-left">{{ text_data_quality_issues }}</th>
|
||||
<th class="text-left">{{ text_item_level_issues }}</th>
|
||||
<th class="text-left">{{ text_google_expiration_date }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for issue in product_issue.issues %}
|
||||
<tr>
|
||||
<td class="text-left">{{ issue.color }}</td>
|
||||
<td class="text-left">{{ issue.size }}</td>
|
||||
<td class="text-left">
|
||||
{% for status in issue.destination_statuses %}
|
||||
{% if status.approvalPending %}
|
||||
{{ status.destination }}{{ status.destination ? ': ' : '' }}<span class="label label-warning">{{ text_label_pending }}</span><br />
|
||||
{% else %}
|
||||
{% if status.approvalStatus == 'approved' %}
|
||||
{{ status.destination }}{{ status.destination ? ': ' : '' }}<span class="label label-success">{{ text_label_approved }}</span><br />
|
||||
{% elseif status.approvalStatus == 'disapproved' %}
|
||||
{{ status.destination }}{{ status.destination ? ': ' : '' }}<span class="label label-danger">{{ text_label_disapproved }}</span><br />
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="label label-warning">{{ text_label_pending }}</span>
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td class="text-left">
|
||||
{% for quality_issue in issue.data_quality_issues %}
|
||||
{% if quality_issue.severity == 'critical' %}
|
||||
{{ quality_issue.destination }}{{ quality_issue.destination ? ': ' : '' }}<span class="label label-danger">{{ text_label_critical }}</span>
|
||||
{% elseif quality_issue.severity == 'error' %}
|
||||
{{ quality_issue.destination }}{{ quality_issue.destination ? ': ' : '' }}<span class="label label-danger">{{ text_label_error }}</span>
|
||||
{% elseif quality_issue.severity == 'suggestion' %}
|
||||
{{ quality_issue.destination }}{{ quality_issue.destination ? ': ' : '' }}<span class="label label-info">{{ text_label_suggestion }}</span>
|
||||
{% endif %}
|
||||
{{ quality_issue.detail }}
|
||||
{% if not loop.last %}
|
||||
<hr />
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{{ text_na }}
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td class="text-left">
|
||||
{% for item_issue in issue.item_level_issues %}
|
||||
<strong>{{ item_issue.servability }}</strong> {{ item_issue.detail }} <a href="{{ item_issue.documentation }}" target="_blank">{{ text_learn_more }} <i class="fa fa-external-link"></i></a>
|
||||
{% if not loop.last %}
|
||||
<hr />
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{{ text_na }}
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td class="text-left">{{ issue.google_expiration_date }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -0,0 +1,181 @@
|
||||
<style type="text/css">
|
||||
.control-label.control-label-left {
|
||||
text-align:left;
|
||||
padding-bottom:5px;
|
||||
}
|
||||
|
||||
.margin-top-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<form id="form-popup-product">
|
||||
<div class="alert alert-info">
|
||||
{{ text_info_popup_product }}
|
||||
</div>
|
||||
|
||||
<div class="form-horizontal">
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="select-google-product-category" class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_google_product_category }}">{{ entry_google_product_category }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<select name="google_product_category" id="select-google-product-category" class="form-control">
|
||||
{% for id, name in google_product_categories %}
|
||||
<option value="{{ id }}" {{ id == google_product_category ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_product_category %}
|
||||
<div class="text-danger">{{ error_product_category }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="select-color" class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_color }}">{{ entry_color }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<select id="select-color" name="color" class="form-control">
|
||||
{% for id, name in options %}
|
||||
<option value="{{ id }}" {{ id == color ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_color %}
|
||||
<div class="text-danger">{{ error_color }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 margin-top-10">
|
||||
<label for="select-size-system" class="control-label control-label-left"><span data-toggle="tooltip" title="{{ help_size_system }}">{{ entry_size_system }}</span></label>
|
||||
<select id="select-size-system" name="size_system" class="form-control">
|
||||
{% for id, name in size_systems %}
|
||||
<option value="{{ id }}" {{ id == size_system ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_size_system %}
|
||||
<div class="text-danger">{{ error_size_system }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-sm-4 margin-top-10">
|
||||
<label for="select-size-type" class="control-label control-label-left"><span data-toggle="tooltip" title="{{ help_size_type }}">{{ entry_size_type }}</span></label>
|
||||
<select id="select-size-type" name="size_type" class="form-control">
|
||||
{% for id, name in size_types %}
|
||||
<option value="{{ id }}" {{ id == size_type ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_size_type %}
|
||||
<div class="text-danger">{{ error_size_type }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-sm-4 margin-top-10">
|
||||
<label for="select-size" class="control-label control-label-left"><span data-toggle="tooltip" title="{{ help_size }}">{{ entry_size }}</span></label>
|
||||
<select id="select-size" name="size" class="form-control">
|
||||
{% for id, name in options %}
|
||||
<option value="{{ id }}" {{ id == size ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_size %}
|
||||
<div class="text-danger">{{ error_size }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="select-condition" class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_condition }}">{{ entry_condition }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<select name="condition" id="select-condition" class="form-control">
|
||||
{% for id, name in conditions %}
|
||||
<option value="{{ id }}" {{ id == condition ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_condition %}
|
||||
<div class="text-danger">{{ error_condition }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="select-age-group" class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_age_group }}">{{ entry_age_group }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<select name="age_group" id="select-age-group" class="form-control">
|
||||
{% for id, name in age_groups %}
|
||||
<option value="{{ id }}" {{ id == age_group ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_age_group %}
|
||||
<div class="text-danger">{{ error_age_group }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="select-gender" class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_gender }}">{{ entry_gender }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<select name="gender" id="select-gender" class="form-control">
|
||||
{% for id, name in genders %}
|
||||
<option value="{{ id }}" {{ id == gender ? 'selected' }}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if error_gender %}
|
||||
<div class="text-danger">{{ error_gender }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_adult }}">{{ entry_adult }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="adult" value="1" {{ adult ? "checked" }} /> {{ text_yes }}
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="adult" value="0" {{ not adult ? "checked" }} /> {{ text_no }}
|
||||
</label>
|
||||
{% if error_adult %}
|
||||
<div class="text-danger">{{ error_adult }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_multipack }}">{{ entry_multipack }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<input type="number" name="multipack" value="{{ multipack }}" class="form-control" />
|
||||
{% if error_multipack %}
|
||||
<div class="text-danger">{{ error_multipack }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-xs-12 control-label control-label-left"><span data-toggle="tooltip" title="{{ help_is_bundle }}">{{ entry_is_bundle }}</span></label>
|
||||
<div class="col-xs-12">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="is_bundle" value="1" {{ is_bundle ? "checked" }} /> {{ text_yes }}
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="is_bundle" value="0" {{ not is_bundle ? "checked" }} /> {{ text_no }}
|
||||
</label>
|
||||
{% if error_is_bundle %}
|
||||
<div class="text-danger">{{ error_is_bundle }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,34 @@
|
||||
<h3>{{ text_report_date_range }}</h3>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">{{ text_report_campaign_name }}</th>
|
||||
<th class="text-center">{{ text_report_status }}</th>
|
||||
<th class="text-center">{{ text_report_impressions }}</th>
|
||||
<th class="text-center">{{ text_report_clicks }}</th>
|
||||
<th class="text-center">{{ text_report_cost }}</th>
|
||||
<th class="text-center">{{ text_report_conversions }}</th>
|
||||
<th class="text-center">{{ text_report_conversion_value }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for campaign in advertise_google_report_campaigns %}
|
||||
<tr>
|
||||
<td class="text-left">{{ campaign.campaign_name }}</td>
|
||||
<td class="text-center">
|
||||
{% if campaign.status == 'paused' %}
|
||||
<span class="label label-warning">{{ text_label_paused }}</span>
|
||||
{% elseif campaign.status == 'active' %}
|
||||
<span class="label label-success">{{ text_label_active }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">{{ campaign.impressions }}</td>
|
||||
<td class="text-center">{{ campaign.clicks }}</td>
|
||||
<td class="text-center">{{ campaign.cost }}</td>
|
||||
<td class="text-center">{{ campaign.conversions }}</td>
|
||||
<td class="text-center">{{ campaign.conversion_value }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,136 @@
|
||||
<div class="form-horizontal">
|
||||
<fieldset>
|
||||
<legend>{{ text_extension_settings }}</legend>
|
||||
<div class="form-group">
|
||||
<label for="select-status" class="col-sm-2 control-label">{{ text_status }}</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="advertise_google_status" id="select-status" class="form-control">
|
||||
<option value="1" {{ advertise_google_status ? 'selected' }}>{{ text_enabled }}</option>
|
||||
<option value="0" {{ not advertise_google_status ? 'selected' }}>{{ text_disabled }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="select-reporting-interval" class="col-sm-2 control-label">{{ text_reporting_interval }}</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="advertise_google_reporting_interval" id="select-reporting-interval" class="form-control">
|
||||
{% for interval, description in reporting_intervals %}
|
||||
<option value="{{ interval }}" {{ interval == advertise_google_reporting_interval ? 'selected' }}>{{ description }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="select-debug-log" class="col-sm-2 control-label">{{ text_debug_log }}</label>
|
||||
<div class="col-sm-10" id="select-debug-log-container">
|
||||
<select name="advertise_google_debug_log" id="select-debug-log" class="form-control">
|
||||
<option value="0" {{ not advertise_google_debug_log ? 'selected' }}>{{ text_disabled }}</option>
|
||||
<option value="1" {{ advertise_google_debug_log ? 'selected' }}>{{ text_enabled }}</option>
|
||||
</select>
|
||||
<a href="{{ url_debug_log_download }}" id="download-debug-log" data-toggle="tooltip" title="{{ text_download_debug_log }}" class="btn btn-default"><i class="fa fa-download"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">{{ text_connection }}</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_disconnect_reminder }}</div>
|
||||
<div class="form-control-static"><i class="text-success fa fa-circle"></i> {{ text_connected }}</div>
|
||||
<a id="button_disconnect" href="{{ disconnect }}" class="btn btn-default"><i class="fa fa-power-off"></i> {{ button_disconnect }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>{{ text_cron_settings }}</legend>
|
||||
<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_cron_info }}</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label"><span data-toggle="tooltip" data-original-title="{{ help_local_cron }}">{{ text_local_cron }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<input readonly type="text" class="form-control" value="{{ advertise_google_cron_command }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label"><span data-toggle="tooltip" data-original-title="{{ help_remote_cron }}">{{ text_remote_cron }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group">
|
||||
<input readonly type="text" name="advertise_google_cron_url" id="input_advertise_google_cron_url" class="form-control" value="" />
|
||||
<div data-toggle="tooltip" data-original-title="{{ text_refresh_token }}" class="input-group-addon btn btn-primary" id="refresh-cron-token">
|
||||
<i class="fa fa-refresh"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input id="input_advertise_google_cron_token" type="hidden" name="advertise_google_cron_token" value="{{ advertise_google_cron_token }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<label class="col-sm-2 control-label" for="checkbox_advertise_google_cron_acknowledge">{{ entry_setup_confirmation }}</label>
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline">
|
||||
<input id="checkbox_advertise_google_cron_acknowledge" type="checkbox" value="1" {% if advertise_google_cron_acknowledge %} checked {% endif %} name="advertise_google_cron_acknowledge" /> {{ text_acknowledge_cron }}
|
||||
</label>
|
||||
|
||||
{% if error_cron_acknowledge %}
|
||||
<div class="text-danger">{{ error_cron_acknowledge }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="dropdown_advertise_google_cron_email_status"><span data-toggle="tooltip" data-original-title="{{ help_cron_email_status }}">{{ text_cron_email_status }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<select id="dropdown_advertise_google_cron_email_status" name="advertise_google_cron_email_status" class="form-control">
|
||||
<option value="1" {% if advertise_google_cron_email_status == '1' %} selected {% endif %}>{{ text_enabled }}</option>
|
||||
<option value="0" {% if advertise_google_cron_email_status == '0' %} selected {% endif %}>{{ text_disabled }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<label class="col-sm-2 control-label" for="input_advertise_google_cron_email"><span data-toggle="tooltip" data-original-title="{{ help_cron_email }}">{{ text_cron_email }}</span></label>
|
||||
<div class="col-sm-10">
|
||||
<input id="input_advertise_google_cron_email" name="advertise_google_cron_email" type="text" class="form-control" value="{{ advertise_google_cron_email }}"/>
|
||||
{% if error_cron_email %}
|
||||
<div class="text-danger">{{ error_cron_email }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
#select-debug-log-container {
|
||||
position: relative;
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
#download-debug-log {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var randomString = function() {
|
||||
return (Math.random() * 100).toString(16).replace('.', '');
|
||||
}
|
||||
|
||||
var setCronUrl = function() {
|
||||
$('#input_advertise_google_cron_url').val(
|
||||
"{{ advertise_google_cron_url }}".replace('{CRON_TOKEN}', $('#input_advertise_google_cron_token').val())
|
||||
);
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#button_disconnect').click(function(e) {
|
||||
if ($(this).is(':disabled') || !confirm('{{ text_confirm }}')) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
$('#button_disconnect').text('{{ text_disconnecting_please_wait }}').attr('disabled', true);
|
||||
}
|
||||
});
|
||||
|
||||
setCronUrl();
|
||||
});
|
||||
|
||||
$('#refresh-cron-token').click(function() {
|
||||
$('#input_advertise_google_cron_token').val(randomString() + randomString());
|
||||
setCronUrl();
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
@@ -0,0 +1,231 @@
|
||||
{{ header }}
|
||||
{{ column_left }}
|
||||
<div id="content">
|
||||
<div class="page-header">
|
||||
<div class="container-fluid">
|
||||
<div class="pull-right">
|
||||
<a href="{{ text_video_tutorial_url_install }}" target="_blank" class="btn btn-info" data-toggle="tooltip" title="{{ button_video_tutorial_install }}"><i class="fa fa-video-camera"></i></a>
|
||||
<a href="{{ cancel }}" class="btn btn-default" data-toggle="tooltip" title="{{ button_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">
|
||||
{% if not from_dashboard %}
|
||||
{{ steps }}
|
||||
{% endif %}
|
||||
{% if success %}
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-check-circle" aria-hidden="true"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="{{ text_close }}"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
<i class="fa fa-truck"></i>
|
||||
<span>
|
||||
{% if from_dashboard %}
|
||||
{{ text_panel_heading_shipping_taxes_2 }}
|
||||
{% else %}
|
||||
{{ text_panel_heading_shipping_taxes }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
|
||||
<fieldset>
|
||||
<legend>{{ text_shipping_transit_times }}</legend>
|
||||
<div class="form-group required">
|
||||
<label for="input-min-transit-time" class="col-sm-3 control-label">{{ entry_min_transit_time }}</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="number" class="form-control" id="input-min-transit-time" name="advertise_google_shipping_taxes[min_transit_time]" value="{{ advertise_google_shipping_taxes.min_transit_time }}" />
|
||||
{% if error_min_transit_time %}
|
||||
<div class="text-danger">{{ error_min_transit_time }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group required">
|
||||
<label for="input-max-transit-time" class="col-sm-3 control-label">{{ entry_max_transit_time }}</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="number" class="form-control" id="input-max-transit-time" name="advertise_google_shipping_taxes[max_transit_time]" value="{{ advertise_google_shipping_taxes.max_transit_time }}" />
|
||||
{% if error_max_transit_time %}
|
||||
<div class="text-danger">{{ error_max_transit_time }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>{{ text_shipping_services }}</legend>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-3">
|
||||
<label>
|
||||
<input type="radio" name="advertise_google_shipping_taxes[shipping_type]" value="flat" {{ advertise_google_shipping_taxes.shipping_type == 'flat' ? 'checked' }} />
|
||||
{{ text_shipping_flat }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-sm-9" data-shipping-visible-on="flat">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon"><i class="fa fa-dollar"></i></div>
|
||||
<input type="number" class="form-control" name="advertise_google_shipping_taxes[flat_rate]" value="{{ advertise_google_shipping_taxes.flat_rate }}" />
|
||||
<div class="input-group-addon">{{ text_usd }}</div>
|
||||
</div>
|
||||
{% if error_flat_rate %}
|
||||
<div class="text-danger">{{ error_flat_rate }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-3">
|
||||
<label>
|
||||
<input type="radio" name="advertise_google_shipping_taxes[shipping_type]" value="carrier" {{ advertise_google_shipping_taxes.shipping_type == 'carrier' ? 'checked' }} />
|
||||
{{ text_shipping_carrier }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-sm-9" data-shipping-visible-on="carrier">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">{{ text_carrier_postcode }}</div>
|
||||
<input type="text" class="form-control" name="advertise_google_shipping_taxes[carrier_postcode]" value="{{ advertise_google_shipping_taxes.carrier_postcode }}" />
|
||||
</div>
|
||||
{% if error_carrier_postcode %}
|
||||
<div class="text-danger">{{ error_carrier_postcode }}</div>
|
||||
{% endif %}
|
||||
<div class="input-group margin-top-10">
|
||||
<div class="input-group-addon"><span data-toggle="tooltip" title="{{ help_carrier_price_percentage }}">{{ text_carrier_price_percentage }}</span></div>
|
||||
<input type="number" class="form-control" name="advertise_google_shipping_taxes[carrier_price_percentage]" value="{{ advertise_google_shipping_taxes.carrier_price_percentage }}" />
|
||||
<div class="input-group-addon"><i class="fa fa-percent"></i></div>
|
||||
</div>
|
||||
{% if error_carrier_price_percentage %}
|
||||
<div class="text-danger">{{ error_carrier_price_percentage }}</div>
|
||||
{% endif %}
|
||||
{% for carrier in available_carriers %}
|
||||
<fieldset class="margin-top-10">
|
||||
<legend>{{ carrier.name }} ({{ carrier.country }})</legend>
|
||||
{% for service in carrier.services %}
|
||||
<label class="label-block">
|
||||
<input type="checkbox" name="advertise_google_shipping_taxes[carrier][{{ carrier.code }}][{{ service.code }}]" value="1" {{ advertise_google_shipping_taxes.carrier[carrier.code][service.code] == '1' ? 'checked' }} /> {{ service.name }}
|
||||
</label>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label>
|
||||
<input type="radio" name="advertise_google_shipping_taxes[shipping_type]" value="custom" {{ advertise_google_shipping_taxes.shipping_type == 'custom' ? 'checked' }} />
|
||||
{{ text_shipping_custom }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="margin-top-10">
|
||||
<legend>{{ text_taxes }}</legend>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-3">
|
||||
<label>
|
||||
<input type="radio" name="advertise_google_shipping_taxes[tax_type]" value="usa" {{ advertise_google_shipping_taxes.tax_type == 'usa' ? 'checked' }} />
|
||||
{{ text_tax_usa }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-sm-9" data-tax-visible-on="usa">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">{{ text_tax_on_shipping }}</div>
|
||||
<select class="form-control" name="advertise_google_shipping_taxes[tax_on_shipping]">
|
||||
<option value="1" {{ advertise_google_shipping_taxes.tax_on_shipping == '1' ? 'selected' }}>{{ text_enabled }}</option>
|
||||
<option value="0" {{ advertise_google_shipping_taxes.tax_on_shipping == '0' ? 'selected' }}>{{ text_disabled }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<fieldset class="margin-top-10">
|
||||
<legend>{{ text_active_states }}</legend>
|
||||
{% for id, state in states %}
|
||||
<label class="label-block">
|
||||
<input type="checkbox" name="advertise_google_shipping_taxes[tax][]" value="{{ id }}" {{ id in advertise_google_shipping_taxes.tax ? 'checked' }} /> {{ state }}
|
||||
</label>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label>
|
||||
<input type="radio" name="advertise_google_shipping_taxes[tax_type]" value="not_usa" {{ advertise_google_shipping_taxes.tax_type == 'not_usa' ? 'checked' }} />
|
||||
{{ text_tax_not_usa }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label>
|
||||
<input type="radio" name="advertise_google_shipping_taxes[tax_type]" value="custom" {{ advertise_google_shipping_taxes.tax_type == 'custom' ? 'checked' }} />
|
||||
{{ text_tax_custom }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="pull-right">
|
||||
<button type="submit" class="btn btn-primary" id="proceed">{{ button_proceed }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
.label-block {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.margin-top-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var selector = {
|
||||
shipping_type: '[name="advertise_google_shipping_taxes[shipping_type]"]',
|
||||
tax_type: '[name="advertise_google_shipping_taxes[tax_type]"]',
|
||||
save: '#proceed',
|
||||
form: '#form'
|
||||
}
|
||||
|
||||
$(selector.shipping_type).change(function(e) {
|
||||
$('[data-shipping-visible-on]').hide();
|
||||
|
||||
$('[data-shipping-visible-on="' + $(this).val() + '"]').show();
|
||||
});
|
||||
|
||||
$(selector.shipping_type + ':checked').trigger('change');
|
||||
|
||||
$(selector.tax_type).change(function(e) {
|
||||
$('[data-tax-visible-on]').hide();
|
||||
|
||||
$('[data-tax-visible-on="' + $(this).val() + '"]').show();
|
||||
});
|
||||
|
||||
$(selector.tax_type + ':checked').trigger('change');
|
||||
|
||||
$(document).on('click', selector.save, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$(selector.save).text('{{ text_loading }}').attr('disabled', true);
|
||||
|
||||
$(selector.form).submit();
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
{{ footer }}
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="stepper">
|
||||
<input class="stepper__input" id="stepper-3-0" name="stepper-3" type="radio" {{ current_step >= 1 ? "checked" }}/>
|
||||
<div class="stepper__step">
|
||||
<label class="stepper__button">{{ step_connect }}</label>
|
||||
</div>
|
||||
<input class="stepper__input" id="stepper-3-1" name="stepper-3" type="radio" {{ current_step >= 2 ? "checked" }}/>
|
||||
<div class="stepper__step">
|
||||
<label class="stepper__button">{{ step_merchant_account }}</label>
|
||||
</div>
|
||||
<input class="stepper__input" id="stepper-3-2" name="stepper-3" type="radio" {{ current_step >= 3 ? "checked" }}/>
|
||||
<div class="stepper__step">
|
||||
<label class="stepper__button">{{ step_campaigns }}</label>
|
||||
</div>
|
||||
<input class="stepper__input" id="stepper-3-3" name="stepper-3" type="radio" {{ current_step >= 4 ? "checked" }}/>
|
||||
<div class="stepper__step">
|
||||
<label class="stepper__button">{{ step_shipping_taxes }}</label>
|
||||
</div>
|
||||
<input class="stepper__input" id="stepper-3-4" name="stepper-3" type="radio" {{ current_step >= 5 ? "checked" }}/>
|
||||
<div class="stepper__step">
|
||||
<label class="stepper__button">{{ step_mapping }}</label>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user