TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajaxified product modification tabs

Browse Source
This commit is contained in:
franck
2013-09-21 16:51:51 +02:00
parent bb9e1d6999
commit 72a2cdfd75
10 changed files with 329 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
templates/admin/default/ajax/product-attributes-tab.html Normal file
View File

@@ -0,0 +1,207 @@
{loop name="product_edit" type="product" visible="*" id=$product_id backend_context="1" lang=$edit_language_id}
<div class="form-container">
<div class="row">
<div class="col-md-12">
<p></p> {* <---- FIXME Lame ! *}
<form method="POST" class="clearfix" action="{url path="/admin/product/$ID/set-product-template"}" id="product_template_form">
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="current_tab" value="attributes" />
<div class="row">
<div class="col-md-12">
<div class="well">
<p>{intl
l="To use features or attributes on this product, please select a product template. You can define product templates in the <a href=\"%tpl_mgmt_url\" target=\"tpl_window\">configuration section</a> of the administration."
tpl_mgmt_url={url path='/admin/configuration/templates'}
}
</p>
<label for="template_id" class="control-label">
{intl l='Current product template'} :
</label>
<div class="input-group">
<select required="required" name="template_id" id="template_id" class="form-control">
<option value="0">{intl l='Do not use a product template'}</option>
{loop name="product_template_select" type="template"}
<option value="{$ID}" {if $TEMPLATE == $ID}selected="selected"{/if}>{$NAME}</option>
{/loop}
</select>
<span class="input-group-btn" id="apply_template_button">
<button class="btn btn-default btn-primary action-btn" type="submit">{intl l="Apply this template"}</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
{* Check if a product template is defined *}
{loop name="product_template" type="template" id={$TEMPLATE|default:0}}{/loop}
{ifloop rel="product_template"}
<div class="row">
<div class="col-md-12">
<p class="title title-without-tabs">{intl l='Product Attributes and Features'}</p>
<form method="POST" action="{url path="/admin/product/$ID/update-attributes-and-features"}" id="attribute_form">
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="current_tab" value="attributes" />
{include
file = "includes/inner-form-toolbar.html"
hide_submit_buttons = false
page_url = "{url path='/admin/products/update' product_id=$ID}"
close_url = "{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
}
{* -- Begin attributes management ------------------------------- *}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<p class="title title-without-tabs">{intl l='Product Attributes'}</p>
<p>{intl
l="You can change attributes and their positions in <a href=\"%tpl_mgmt_url\" target=\"tpl_window\">the template configuration page</a>."
tpl_mgmt_url={url path='/admin/configuration/templates/update' template_id=$TEMPLATE}
}
</p>
<div class="alert alert-danger">Please code me baby, oh yeah ! Code me NOW !</div>
</div>
</div>
</div>
{* -- Begin features management ---------------------------------- *}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<p class="title title-without-tabs">{intl l='Product Features'}</p>
<p>{intl
l="You can change feature products and their positions in <a href=\"%tpl_mgmt_url\" target=\"tpl_window\">the template configuration page</a>."
tpl_mgmt_url={url path='/admin/configuration/templates/update' template_id=$TEMPLATE}
}
</p>
<div class="table-responsive">
<table class="table table-striped table-condensed table-left-aligned">
<thead>
<tr>
<th>{intl l='Feature Name'}</th>
<th>{intl l='Feature value for this product'}</th>
{module_include location='product_features_table_header'}
</tr>
</thead>
<tbody>
{loop name="product-features" type="feature" order="manual" product=$product_id backend_context="1" lang="$edit_language_id"}
<tr>
<td>{$TITLE}</td>
<td>
{* Multiple values *}
{ifloop rel="product-features-av"}
{* load all selected values in an array to speed up things a little *}
{$selected = array()}
{loop name="free-text-value" exclude_free_text="true" type="feature_value" product=$product_id feature=$ID backend_context="1" lang="$edit_language_id"}
{$selected[] = $FEATURE_AV_ID}
{/loop}
{capture "select_options"}
{loop name="product-features-av" type="feature-availability" feature=$ID order="manual" backend_context="1" lang="$edit_language_id"}
<option value="{$ID}" {if in_array($ID, $selected)}selected="selected"{/if}>{$TITLE}</option>
{$options_count = $LOOP_COUNT} {* LOOP_COUNT is only available inside the loop ! *}
{/loop}
{/capture}
<div class="input-form">
<select multiple="multiple" name="feature_value[{$ID}][]" id="feature_value_{$ID}" size="{$options_count}" class="form-control">
{$smarty.capture.select_options nofilter}
</select>
</div>
<span class="help-block text-right">
{intl l='Use ctrl+clic to select more than one value. You can also <a href="#" class="clear_feature_value" data-id="%id">clear selected values</a>.' id=$ID}
</span>
{/ifloop}
{* Free text *}
{elseloop rel="product-features-av"}
{* Get the free text value *}
{loop name="free-text-value" exclude_feature_availability="1" type="feature_value" product=$product_id feature=$ID backend_context="1" lang="$edit_language_id"}
{$feature_value=$FREE_TEXT_VALUE}
{/loop}
<input type="text" id="feature_text_value_{$ID}" name="feature_text_value[{$ID}]" title="{intl l='Enter here the feature value as free text'}" placeholder="{intl l='Feature value'}" class="form-control" value="{$feature_value|default:''}">
{/elseloop}
</td>
{module_include location='product_features_table_row'}
</tr>
{/loop}
{elseloop rel="product-features"}
<tr>
<td colspan="2">
<div class="alert alert-info">
{intl l="This product template does not contains any features"}
</div>
</td>
</tr>
{/elseloop}
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
{/ifloop}
{elseloop rel="product_template"}
<div class="row">
<div class="col-md-12">
<p></p> {* <---- FIXME Lame ! *}
<div class="alert alert-info">
{intl l="This product is not attached to any product template. If you want to use features or attributes on this product, please select the proper template. You can define product templates in the Configuration section."}
</div>
</div>
</div>
{/elseloop}
</div>
{/loop}
<script>
$(function() {
// Unselect all options in attribute + feature tab
$('.clear_feature_value').click(function(event){
$('#feature_value_' + $(this).data('id') + ' option').prop('selected', false);
event.preventDefault();
});
});
</script>

114
templates/admin/default/ajax/product-general-tab.html Normal file
View File

@@ -0,0 +1,114 @@
{loop name="product_edit" type="product" visible="*" id=$product_id backend_context="1" lang=$edit_language_id}
<div class="form-container">
{form name="thelia.admin.product.modification"}
<form method="POST" action="{url path='/admin/products/save'}" {form_enctype form=$form} class="clearfix">
{include
file = "includes/inner-form-toolbar.html"
hide_submit_buttons = false
page_url = "{url path='/admin/products/update' product_id=$ID}"
close_url = "{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
}
{* Be sure to get the product ID, even if the form could not be validated *}
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="current_tab" value="general" />
{form_hidden_fields form=$form}
{form_field form=$form field='id'}
<input type="hidden" name="{$name}" value="{$value}" />
{/form_field}
{form_field form=$form field='success_url'}
<input type="hidden" name="{$name}" value="{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}" />
{/form_field}
{form_field form=$form field='locale'}
<input type="hidden" name="{$name}" value="{$edit_language_locale}" />
{/form_field}
{if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
<div class="form-group">
<label class="control-label">
{intl l='Product reference'} :
</label>
<div class="well well-sm">{$REF}</div>
{form_field form=$form field='ref'}
<input type="hidden" name="{$name}" value="{$value}" />
{/form_field}
</div>
{include file="includes/standard-description-form-fields.html"}
{form_field form=$form field='url'}
<div class="form-group {if $error}has-error{/if}">
<label for="{$label_attr.for}" class="control-label">
{intl l="{$label}"} :
</label>
<input type="text" id="{$label_attr.for}" required="required" name="{$name}" value="{$value}" title="{intl l='Rewritten URL'}" placeholder="{intl l='Rewriten URL'}" class="form-control">
</div>
{/form_field}
<div class="row">
<div class="col-md-6">
{form_field form=$form field='default_category'}
<div class="form-group {if $error}has-error{/if}">
<label for="{$label_attr.for}" class="control-label">
{intl l="{$label}"} :
</label>
<select id="{$label_attr.for}" required="required" name="{$name}" class="form-control">
<option value="0">{intl l="Top level"}</option>
{loop name="cat-parent" type="category-tree" category="0" visible="*" product="0"}
<option value="{$ID}" style="padding-left: {3 + $LEVEL * 20}px" {if $DEFAULT_CATEGORY == $ID}selected="selected"{/if}>{$TITLE}</option>
{/loop}
</select>
<span class="help-block">{intl l='You can attach this product to more categories in the details tab.'}</span>
</div>
{/form_field}
</div>
<div class="col-md-6">
{form_field form=$form field='visible'}
<div class="form-group {if $error}has-error{/if}">
<label for="{$label_attr.for}" class="control-label">{intl l='Visibility'}</label>
<div class="checkbox">
<label>
<input type="checkbox" id="{$label_attr.for}" name="{$name}" value="1" {if $value != 0}checked="checked"{/if}>
{$label}
</label>
</div>
</div>
{/form_field}
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="control-group">
<label>&nbsp;</label>
<div class="controls">
<p>{intl l='Product created on %date_create. Last modification: %date_change' date_create="{format_date date=$CREATE_DATE}" date_change="{format_date date=$UPDATE_DATE}"}</p>
</div>
</div>
</div>
</div>
</form>
{/form}
</div>
{/loop}

408
templates/admin/default/ajax/product-related-tab.html Normal file
View File

@@ -0,0 +1,408 @@
{loop name="product_edit" type="product" visible="*" id=$product_id backend_context="1" lang=$edit_language_id}
<div class="form-container">
{include
file = "includes/inner-form-toolbar.html"
hide_submit_buttons = true
page_url = "{url path='/admin/products/update' product_id=$ID}"
close_url = "{url path='/admin/categories' category_id=$DEFAULT_CATEGORY}"
}
{* -- Begin related content management -- *}
<div class="col-md-6">
<div class="form-group">
<form method="POST" action="{url path='/admin/products/content/add'}" id="related_content_form">
<p class="title title-without-tabs">{intl l='Related content'}</p>
<p>{intl l='You can attach here some content to this product'}</p>
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="current_tab" value="related" />
{ifloop rel="folders"}
<div class="form-group">
<select name="folder_id" id="folder_id" class="form-control">
<option value="">{intl l='Select a folder...'}</option>
{loop name="folders" type="folder-tree" folder="0" backend_context="1" lang="$edit_language_id"}
<option value="{$ID}" style="padding-left: {3 + $LEVEL * 20}px">{$TITLE}</option>
{/loop}
</select>
<span class="help-block">{intl l='Select a folder to get its content'}</span>
</div>
<div id="content_selector" class="hide">
<div class="input-group">
<select required="required" name="content_id" id="content_id" class="form-control">
<option value="">{intl l='Select a folder content...'}</option>
</select>
<span class="input-group-btn" id="content_add_button">
<button class="btn btn-default btn-primary action-btn" type="submit"><span class="glyphicon glyphicon-plus-sign"></span></button>
</span>
</div>
<span class="help-block">{intl l='Select a content and click (+) to add it to this product'}</span>
</div>
<div id="content_selector_empty" class="hide">
<div class="alert alert-info">
{intl l="No available content in this folder"}
</div>
</div>
{/ifloop}
{elseloop rel="folders"}
<div class="alert alert-info">{intl l="No folders found"}</div>
{/elseloop}
</form>
</div>
<div class="table-responsive">
<table class="table table-striped table-condensed table-left-aligned">
<thead>
<tr>
<th>{intl l='ID'}</th>
<th>{intl l='Content title'}</th>
{module_include location='product_contents_table_header'}
<th class="actions">{intl l="Actions"}</th>
</tr>
</thead>
<tbody>
{loop name="assigned_contents" type="associated_content" product="$product_id" backend_context="1" lang="$edit_language_id"}
<tr>
<td>{$ID}</td>
<td>
{$TITLE}
</td>
{module_include location='product_contents_table_row'}
<td class="actions">
<div class="btn-group">
{loop type="auth" name="can_create" roles="ADMIN" permissions="admin.configuration.product.content.delete"}
<a class="btn btn-default btn-xs delete-content" title="{intl l='Delete this content'}" href="#delete_content_dialog" data-id="{$ID}" data-toggle="modal">
<span class="glyphicon glyphicon-trash"></span>
</a>
{/loop}
</div>
</td>
</tr>
{/loop}
{elseloop rel="assigned_contents"}
<tr>
<td colspan="3">
<div class="alert alert-info">
{intl l="This product contains no contents"}
</div>
</td>
</tr>
{/elseloop}
</tbody>
</table>
</div>
</div>
{* -- End related content management ---- *}
{* -- Begin accessories management ------ *}
<div class="col-md-6">
<div class="form-group">
<form method="POST" action="{url path='/admin/products/accessory/add'}" id="accessory_form">
<p class="title title-without-tabs">{intl l='Product accessories'}</p>
<p>{intl l='Define here this product\'s accessories'}</p>
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="current_tab" value="related" />
{ifloop rel="categories"}
<div class="form-group">
<select name="accessory_category_id" id="accessory_category_id" class="form-control">
<option value="">{intl l='Select a category...'}</option>
{loop name="categories" type="category-tree" category="0" backend_context="1" lang="$edit_language_id"}
<option value="{$ID}" style="padding-left: {3 + $LEVEL * 20}px">{$TITLE}</option>
{/loop}
</select>
<span class="help-block">{intl l='Select a category to get its products'}</span>
</div>
<div id="accessory_selector" class="hide">
<div class="input-group">
<select required="required" name="accessory_id" id="accessory_id" class="form-control">
<option value="">{intl l='Select a product...'}</option>
</select>
<span class="input-group-btn" id="accessory_add_button">
<button class="btn btn-default btn-primary action-btn" type="submit"><span class="glyphicon glyphicon-plus-sign"></span></button>
</span>
</div>
<span class="help-block">{intl l='Select a product and click (+) to add it as an accessory'}</span>
</div>
<div id="accessory_selector_empty" class="hide">
<div class="alert alert-info">
{intl l="No available product in this category"}
</div>
</div>
{/ifloop}
{elseloop rel="categories"}
<div class="alert alert-info">{intl l="No categories found"}</div>
{/elseloop}
</form>
</div>
<div class="table-responsive">
<table class="table table-striped table-condensed table-left-aligned">
<thead>
<tr>
<th>{intl l='ID'}</th>
<th>{intl l='Accessory title'}</th>
<th class="text-center">{intl l='Position'}</th>
{module_include location='product_accessories_table_header'}
<th class="actions">{intl l="Actions"}</th>
</tr>
</thead>
<tbody>
{loop name="assigned_accessories" order="accessory" type="accessory" product="$product_id" backend_context="1" lang="$edit_language_id"}
<tr>
<td>{$ID}</td>
<td>
{$TITLE}
</td>
<td class="text-center">
{admin_position_block
permission="admin.products.edit"
path={url path='/admin/product/update-accessory-position' product_id=$product_id current_tab="related"}
url_parameter="accessory_id"
in_place_edit_class="accessoryPositionChange"
position=$POSITION
id=$ID
}
</td>
{module_include location='product_accessories_table_row'}
<td class="actions">
<div class="btn-group">
{loop type="auth" name="can_create" roles="ADMIN" permissions="admin.configuration.product.accessory.delete"}
<a class="btn btn-default btn-xs delete-accessory" title="{intl l='Delete this accessory'}" href="#delete_accessory_dialog" data-id="{$ID}" data-toggle="modal">
<span class="glyphicon glyphicon-trash"></span>
</a>
{/loop}
</div>
</td>
</tr>
{/loop}
{elseloop rel="assigned_accessories"}
<tr>
<td colspan="4">
<div class="alert alert-info">
{intl l="This product contains no accessories"}
</div>
</td>
</tr>
{/elseloop}
</tbody>
</table>
</div>
</div>
{* -- End accessories management -------- *}
</div>
{* Delete related content confirmation dialog *}
{capture "delete_content_dialog"}
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="content_id" id="content_delete_id" value="" />
<input type="hidden" name="folder_id" id="folder_delete_id" value="" />
<input type="hidden" name="current_tab" value="related" />
{/capture}
{include
file = "includes/generic-confirm-dialog.html"
dialog_id = "delete_content_dialog"
dialog_title = {intl l="Remove related content"}
dialog_message = {intl l="Do you really want to remove this related content from the product ?"}
form_action = {url path='/admin/products/content/delete'}
form_content = {$smarty.capture.delete_content_dialog nofilter}
}
{* Delete accessory confirmation dialog *}
{capture "delete_accessory_dialog"}
<input type="hidden" name="product_id" value="{$product_id}" />
<input type="hidden" name="accessory_id" id="accessory_delete_id" value="" />
<input type="hidden" name="accessory_category_id" id="accessory_category_delete_id" value="" />
<input type="hidden" name="current_tab" value="related" />
{/capture}
{include
file = "includes/generic-confirm-dialog.html"
dialog_id = "delete_accessory_dialog"
dialog_title = {intl l="Remove an accessory"}
dialog_message = {intl l="Do you really want to remove this accessory from the product ?"}
form_action = {url path='/admin/products/accessory/delete'}
form_content = {$smarty.capture.delete_accessory_dialog nofilter}
}
<script>
$(function() {
// Set proper content ID in delete content from
$('a.delete-content').click(function(ev) {
$('#content_delete_id').val($(this).data('id'));
$('#folder_delete_id').val($('#folder_id').val());
});
// Set proper content ID in accessory delete from
$('a.delete-accessory').click(function(ev) {
$('#accessory_delete_id').val($(this).data('id'));
$('#accessory_category_delete_id').val($('#accessory_category_id').val());
});
// Load content on folder selection
$('#folder_id').change(function(event) {
var val = $(this).val();
if (val != "") {
$.ajax({
url : '{url path="/admin/product/$product_id/available-content/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#content_id :not(:first-child)').remove();
var have_content = false;
$.each(json, function(idx, value) {
$('#content_id').append($('<option>').text(value.title).attr('value', value.id));
have_content = true; // Lame...
});
if (have_content) {
$('#content_selector_empty').addClass('hide');
$('#content_selector').removeClass('hide');
}
else {
$('#content_selector_empty').removeClass('hide');
$('#content_selector').addClass('hide');
}
}
});
}
else {
$('#content_selector_empty').addClass('hide');
$('#content_selector').addClass('hide');
}
});
// Load content on folder selection
$('#accessory_category_id').change(function(event) {
var val = $(this).val();
if (val != "") {
$.ajax({
url : '{url path="/admin/product/$product_id/available-accessories/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#accessory_id :not(:first-child)').remove();
var have_content = false;
$.each(json, function(idx, value) {
$('#accessory_id').append($('<option>').text(value.title).attr('value', value.id));
have_content = true; // Lame...
});
if (have_content) {
$('#accessory_selector_empty').addClass('hide');
$('#accessory_selector').removeClass('hide');
}
else {
$('#accessory_selector_empty').removeClass('hide');
$('#accessory_selector').addClass('hide');
}
}
});
}
else {
$('#accessory_selector_empty').addClass('hide');
$('#accessory_selector').addClass('hide');
}
});
{* Inline editing of accessory position using bootstrap-editable *}
$('.accessoryPositionChange').editable({
type : 'text',
title : '{intl l="Enter new accessory position"}',
mode : 'popup',
inputclass : 'input-mini',
placement : 'left',
success : function(response, newValue) {
// The URL template
var url = "{url noamp='1' path='/admin/product/update-accessory-position' accessory_id='__ID__' position='__POS__' product_id=$product_id current_tab='related' }";
// Perform subtitutions
url = url.replace('__ID__', $(this).data('id')).replace('__POS__', newValue);
// Reload the page
location.href = url;
}
});
// Initialize folder (id={$folder_id}) select value
{if $folder_id != 0}
$('#folder_id').val("{$folder_id}").change();
{/if}
// Initialize folder (id={$folder_id}) select value
{if $accessory_category_id != 0}
$('#accessory_category_id').val("{$accessory_category_id}").change();
{/if}
// Unselect all options in attribute + feature tab
$('.clear_feature_value').click(function(event){
$('#feature_value_' + $(this).data('id') + ' option').prop('selected', false);
event.preventDefault();
});
});
</script>
{/loop}