仙人様

あけましておめでとうございます。

product/product.twigですね。
ありがとうございます。

下記product.twigのどの場所に導入したらいいでしょうか？

色々、聞いてばかりですみません。
宜しくお願い致します。

あと、APIはどうやったらいいですか？

--------------------------------------------------------------------



{% extends 'default_frame.twig' %}

{% set menus = ['product', 'product_edit'] %}

{% block title %}商品管理{% endblock %}
{% block sub_title %}商品登録{% endblock %}

{% form_theme form 'Form/bootstrap_3_horizontal_layout.html.twig' %}

{% block stylesheet %}
<link rel="stylesheet" href="{{ app.config.admin_urlpath }}/assets/css/fileupload/jquery.fileupload.css">
<link rel="stylesheet" href="{{ app.config.admin_urlpath }}/assets/css/fileupload/jquery.fileupload-ui.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
.ui-state-highlight {
height: 148px;
border: dashed 1px #ccc;
background: #fff;
}
</style>
{% endblock stylesheet %}

{% block javascript %}
<script src="{{ app.config.admin_urlpath }}/assets/js/vendor/fileupload/vendor/jquery.ui.widget.js"></script>
<script src="{{ app.config.admin_urlpath }}/assets/js/vendor/fileupload/jquery.iframe-transport.js"></script>
<script src="{{ app.config.admin_urlpath }}/assets/js/vendor/fileupload/jquery.fileupload.js"></script>
<script src="{{ app.config.admin_urlpath }}/assets/js/vendor/fileupload/jquery.fileupload-process.js"></script>
<script src="{{ app.config.admin_urlpath }}/assets/js/vendor/fileupload/jquery.fileupload-validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#thumb").sortable({
cursor: 'move',
opacity: 0.7,
placeholder: 'ui-state-highlight',
update: function (event, ui) {
updateRank();
}
});
{% if has_class == false %}
if ($("#{{ form.class.stock_unlimited.vars.id }}").prop("checked")) {
$("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val('');
} else {
$("#{{ form.class.stock.vars.id }}").removeAttr("disabled");
}
$("#{{ form.class.stock_unlimited.vars.id }}").on("click change", function () {
if ($(this).prop("checked")) {
$("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val('');
} else {
$("#{{ form.class.stock.vars.id }}").removeAttr("disabled");
}
});
{% endif %}
var proto_img = ''
+ '<li class="ui-state-default">'
+ '<img src="__path__" />'
+ '<a class="delete-image">'
+ '<svg class="cb cb-close">'
+ '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cb-close"></use>'
+ '</svg>'
+ '</a>'
+ '</li>';
var proto_add = '{{ form_widget(form.add_images.vars.prototype) }}';
var proto_del = '{{ form_widget(form.delete_images.vars.prototype) }}';
{% for image in form.images %}
var $img = $(proto_img.replace(/__path__/g, '{{ app.config.image_save_urlpath }}/{{ image.vars.value }}'));
var $widget = $('{{ form_widget(image) }}');
$widget.val('{{ image.vars.value }}');
$("#thumb").append($img.append($widget));
{% endfor %}
{% for add_image in form.add_images %}
var $img = $(proto_img.replace(/__path__/g, '{{ app.config.image_temp_urlpath }}/{{ add_image.vars.value }}'));
var $widget = $('{{ form_widget(add_image) }}');
$widget.val('{{ add_image.vars.value }}');
$("#thumb").append($img.append($widget));
{% endfor %}
{% for delete_image in form.delete_images %}
$("#thumb").append('{{ form_widget(delete_image) }}');
{% endfor %}
var hideSvg = function () {
if ($("#thumb li").length > 0) {
$("#icon_no_image").css("display", "none");
} else {
$("#icon_no_image").css("display", "");
}
};
var updateRank = function () {
$("#thumb li").each(function (index) {
$(this).find(".rank_images").remove();
filename = $(this).find("input[type='hidden']").val();
$rank = $('<input type="hidden" class="rank_images" name="rank_images[]" />');
$rank.val(filename + '//' + parseInt(index + 1));
$(this).append($rank);
});
}
hideSvg();
updateRank();
// 画像削除時
var count_del = 0;
$("#thumb").on("click", ".delete-image", function () {
var $new_delete_image = $(proto_del.replace(/__name__/g, count_del));
var src = $(this).prev().attr('src')
.replace('{{ app.config.image_temp_urlpath }}/', '')
.replace('{{ app.config.image_save_urlpath }}/', '');
$new_delete_image.val(src);
$("#thumb").append($new_delete_image);
$(this).parent("li").remove();
hideSvg();
updateRank();
count_del++;
});
var count_add = {{ form.add_images|length|default(0) }};
$('#{{ form.product_image.vars.id }}').fileupload({
url: "{{ url('admin_product_image_add') }}",
type: "post",
dataType: 'json',
done: function (e, data) {
$('#progress').hide();
$.each(data.result.files, function (index, file) {
var path = '{{ app.config.image_temp_urlpath }}/' + file;
var $img = $(proto_img.replace(/__path__/g, path));
var $new_img = $(proto_add.replace(/__name__/g, count_add));
$new_img.val(file);
$child = $img.append($new_img);
$('#thumb').append($child);
count_add++;
});
hideSvg();
updateRank();
},
fail: function (e, data) {
alert('アップロードに失敗しました。');
},
always: function (e, data) {
$('#progress').hide();
$('#progress .progress-bar').width('0%');
},
start: function (e, data) {
$('#progress').show();
},
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 10000000,
maxNumberOfFiles: 10,
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
},
processalways: function (e, data) {
if (data.files.error) {
alert("画像ファイルサイズが大きいか画像ファイルではありません。");
}
}
});
// 画像アップロード
$('#file_upload').on('click', function () {
$('#{{ form.product_image.vars.id }}').click();
});
});

function fnClass(action) {
document.form1.action = action;
document.form1.submit();
return false;
}

</script>
{% endblock javascript %}

{% block main %}
<form role="form" name="form1" id="form1" method="post" action="" novalidate enctype="multipart/form-data">
{{ form_widget(form._token) }}
<div class="row" id="aside_wrap">
<div id="detail_wrap" class="col-md-9">
<div id="detail_box" class="box form-horizontal">
<div id="detail_box__header" class="box-header">
<h3 class="box-title">基本情報</h3>
</div><!-- /.box-header -->
<div id="detail_box__body" class="box-body">

{# 商品ID #}
{% if Product.id %}
<div id="detail_box__id" class="form-group">
<label class="col-sm-3 col-lg-2 control-label">商品ID</label>
<div class="col-sm-9 col-lg-10 padT07">{{ Product.id }}</div>
</div>
{% endif %}


{{ form_row(form.name) }}
{% if has_class == false %}
{{ form_row(form.class.product_type, { attr : { class : 'form-inline padT07' } } ) }}
{% endif %}

<div id="detail_box__image" class="form-group">
<label class="col-sm-2 control-label" for="admin_product_product_image">
{{ form.product_image.vars.label }}<br>
<span class="small">620px以上推奨</span>
</label>
<div id="detail_files_box" class="col-sm-9 col-lg-10">
<div class="photo_files" id="drag-drop-area">
<svg id="icon_no_image" class="cb cb-photo no-image"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cb-photo"></use></svg>
<ul id="thumb" class="clearfix"></ul>
</div>
</div>
</div>
<div class="form-group marB30">
<div id="detail_box__file_upload" class="col-sm-offset-2 col-sm-9 col-lg-10 ">

<div id="progress" class="progress progress-striped active" style="display:none;">
<div class="progress-bar progress-bar-info"></div>
</div>

{{ form_widget(form.product_image, { attr : { accept : 'image/*', style : 'display:none;' } }) }}
<a id="file_upload" class="with-icon">
<svg class="cb cb-plus"> <use xlink:href="#cb-plus" /></svg>ファイルをアップロード
</a>

</div>
</div>

<div id="detail_description_box" class="form-group">
{{ form_label(form.description_detail) }}
<div id="detail_description_box__detail" class="col-sm-9 col-lg-10">
{{ form_widget(form.description_detail) }}
<div id="detail_description_box__list" class="accordion marT15 marB20"><a id="detail_description_box__list_toggle" class="toggle with-icon"><svg class="cb cb-plus icon_plus"> <use xlink:href="#cb-plus" /></svg>一覧コメントを追加</a>
<div class="accpanel padT08">
{{ form_widget(form.description_list) }}
</div>
</div>
</div>
</div>

{% if has_class == false %}
<div id="detail_box__price" class="form-group">
{{ form_label(form.class.price02) }}

<div id="detail_box__price02" class="col-sm-3 col-lg-3">
{{ form_widget(form.class.price02) }}
{{ form_errors(form.class.price02) }}
<div id="detail_box__price01" class="accordion marT15 marB20"><a class="toggle with-icon"><svg class="cb cb-plus icon_plus"> <use xlink:href="#cb-plus" /></svg>通常価格を追加</a>

<input type='text' id='dollars' value=''>
<div class="accpanel padT08">
{{ form_widget(form.class.price01) }}
{{ form_errors(form.class.price01) }}
</div>
</div>
</div>
</div>

<div id="detail_box__stock" class="form-group">
{{ form_label(form.class.stock) }}
<div class="col-sm-9 col-lg-10">
<div class="row">
<div id="detail_box__unlimited" class="col-xs-12 form-inline">
{{ form_widget(form.class.stock) }}
{{ form_errors(form.class.stock) }}
{{ form_widget(form.class.stock_unlimited) }}
{{ form_errors(form.class.stock_unlimited) }}
</div>
</div>

</div>
</div>
{% endif %}

<div id="detail_category_box" class="form-group">
{{ form_label(form.Category) }}
<div class="col-sm-9 col-lg-10">
<div class="accordion marT05">
<a id="detail_category_box__toggle" class="toggle with-icon"><svg class="cb cb-plus icon_plus"> <use xlink:href="#cb-plus" /></svg>カテゴリを選択</a>
<div id="detail_category_box__list" class="accpanel padT08{% if form.Category.vars.valid == false %} has-error{% endif %}">
{{ form_widget(form.Category) }}
{{ form_errors(form.Category) }}
</div>
</div>
</div>
</div>

<div id="detail_tag_box" class="form-group">
{{ form_label(form.Tag) }}
<div class="col-sm-9 col-lg-10">
<div class="accordion marT05">
<a id="detail_tags_box__toggle" class="toggle with-icon"><svg class="cb cb-plus icon_plus"> <use xlink:href="#cb-plus" /></svg>{{ 'Tag'|trans }}を選択</a>
<div id="detail_tags_box__list" class="accpanel padT08">
{{ form_widget(form.Tag) }}
{{ form_errors(form.Tag) }}
</div>
</div>
</div>
</div>

<div class="extra-form">
{% for f in form.getIterator %}
{% if f.vars.name matches '[^plg*]' %}
{{ form_row(f) }}
{% endif %}
{% endfor %}
</div>

</div><!-- /.box-body -->
</div><!-- /.box -->

<div id="sub_detail_box" class="box accordion form-horizontal">
<div id="sub_detail_box__toggle" class="box-header toggle">
<h3 class="box-title">詳細な設定<svg class="cb cb-angle-down icon_down"> <use xlink:href="#cb-angle-down" /></svg></h3>
</div><!-- /.box-header -->
<div id="sub_detail_box__body" class="box-body accpanel">

{% if has_class == false %}
{{ form_row(form.class.code) }}
{{ form_row(form.class.sale_limit) }}
{% endif %}

{{ form_row(form.search_word) }}
{% if has_class == false %}
{{ form_row(form.class.delivery_date) }}
{% if BaseInfo.option_product_delivery_fee %}
<div id="sub_detail_box__delivery_fee" class="form-group">
{{ form_label(form.class.delivery_fee) }}
<div class="col-sm-3 col-lg-3">
{{ form_widget(form.class.delivery_fee) }}
</div>
</div>
{% endif %}
{% if BaseInfo.option_product_tax_rule %}
<div id="sub_detail_box__tax_rate" class="form-group">
{{ form_label(form.class.tax_rate) }}
<div class="col-sm-3 col-lg-3">
{{ form_widget(form.class.tax_rate) }}
</div>
</div>
{% endif %}
{% endif %}

</div>
</div>

<div id="free_box" class="box accordion">
<div id="free_box__body_toggle" class="box-header toggle">
<h3 class="box-title">フリーエリア<svg class="cb cb-angle-down icon_down"> <use xlink:href="#cb-angle-down" /></svg></h3>
</div><!-- /.box-header -->
<div id="free_box__body" class="box-body accpanel">
{{ form_widget(form.free_area, {id: 'wysiwyg-area'}) }}
</div>
</div>

<div id="detail_box__footer" class="row hidden-xs hidden-sm">
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 text-center btn_area">
<p><a href="{{ url('admin_product_page', { page_no : app.session.get('eccube.admin.product.search.page_no')|default('1') } ) }}?resume=1">検索画面に戻る</a></p>
</div>
</div>

</div><!-- /.col -->

<div id="common_box" class="col-md-3">
<div class="col_inner" id="aside_column">
<div id="common_button_box" class="box no-header">
<div id="common_button_box__body" class="box-body">
<div id="common_button_box__status" class="row">
<div class="col-xs-12">
<div class="form-group">
{{ form_widget(form.Status) }}
{{ form_errors(form.Status) }}
</div>
</div>
</div>
<div id="common_button_box__insert_button" class="row text-center">
<div class="col-sm-6 col-sm-offset-3 col-md-12 col-md-offset-0">
<button type="submit" class="btn btn-primary btn-block btn-lg prevention-btn prevention-mask" >商品を登録</button>
</div>
</div>
<div id="common_button_box__class_set_button" class="row text-center with-border">
<div class="col-sm-6 col-sm-offset-3 col-md-12 col-md-offset-0">
{% if id is null %}
<button class="btn btn-default btn-block btn-sm" disabled>
規格設定
</button>
{% else %}
<button class="btn btn-default btn-block btn-sm" onclick="fnClass('{{ url('admin_product_product_class', { 'id' : id }) }}');return false;">
規格設定
</button>
{% endif %}
</div>
</div>
<div id="common_button_box__operation_button" class="row text-center with-border">
<div class="col-sm-6 col-sm-offset-3 col-md-12 col-md-offset-0">
<ul class="col-3">
{% if id is null %}
<li>
<button class="btn btn-default btn-block btn-sm" disabled>
確認
</button>
</li>
<li>
<button class="btn btn-default btn-block btn-sm" disabled>
複製
</button>
</li>
<li>
<button class="btn btn-default btn-block btn-sm" disabled>
削除
</button>
</li>
{% else %}
<li>
<a class="btn btn-default btn-block btn-sm" href="{{ url('admin_product_product_display', {'id' : id}) }}" target="_blank">
確認
</a>
</li>
<li>
<a class="btn btn-default btn-block btn-sm" href="{{ url('admin_product_product_copy', {'id' : Product.id}) }}" {{ csrf_token_for_anchor() }} data-method="post" data-message="この商品情報を複製してもよろしいですか？">
複製
</a>
</li>
<li>
<a class="btn btn-default btn-block btn-sm" href="{{ url('admin_product_product_delete', {'id' : Product.id}) }}" {{ csrf_token_for_anchor() }} data-method="delete" data-message="この商品情報を削除してもよろしいですか？">
削除
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</div><!-- /.box-body -->
</div><!-- /.box -->

<div id="common_date_info_box" class="box no-header">
<div id="common_date_info_box__body" class="box-body update-area">
<p><svg class="cb cb-clock"> <use xlink:href="#cb-clock" /></svg>登録日：{{ Product.create_date|date_format }}</p>
<p><svg class="cb cb-clock"> <use xlink:href="#cb-clock" /></svg>更新日：{{ Product.update_date|date_format }}</p>
</div>
</div><!-- /.box -->

<div id="common_shop_note_box" class="box">
<div id="common_shop_note_box__header" class="box-header">
<h3 class="box-title">ショップ用メモ欄</h3>
</div><!-- /.box-header -->
<div id="common_shop_note_box__body" class="box-body">
{{ form_widget(form.note) }}
</div>
</div>
</div>
</div><!-- /.col -->

</div>
</form>

{% endblock %}