src/views/shop/item-detail.twig
{% if item.data.itm_data.soldout is not defined or not item.data.itm_data.soldout %}
<script type="text/javascript" language="javascript">
$( function() {
$( '#addtoshoppingcartsubmit' ).click(function() {
$.ajax( {
url : '/_misc/update-cart.html?ajax', // your ajax file
type : 'post',
data: $( "#addtoshoppingcart" ).serialize(),
success : function( resp ) {
infoboxhtml = $('#infobox_new' , resp);
if (infoboxhtml[0].innerHTML === 'REQUIRED FIELD MISSING' || infoboxhtml[0].innerHTML === 'NO ACTION TAKEN' || infoboxhtml[0].innerHTML === 'ITEMNOTFOUND' || infoboxhtml[0].innerHTML === 'NO ITEMNO OR AMOUNT') {
$('#item-detail-infobox').html("{{ T("itemdetail_submit_error") }}");
$('#item-detail-infobox-buttons').html('<button type="button" class="pure-button button-orange" data-dismiss="modal">{{ T("itemdetail_continue_shopping") }}!</button>');
} else {
$('#shoppingcartamount').html($('#shoppingcartamount_new' , resp).html());
$('#shoppingcartinfo').html($('#shoppingcartinfo_new' , resp).html());
infoboxhtmlnew = '{{ T("itemdetail_added_to_cart") }}';
$('#item-detail-infobox').html(infoboxhtmlnew);
$('#item-detail-infobox-buttons').html('<button type="button" class="pure-button button-orange" data-dismiss="modal">{{ T("itemdetail_continue_shopping") }}!</button>' +
' <a href="/_misc/shoppingcart.html"class="pure-button button-green">{{ T("itemdetail_goto_cart") }}</a>');
}
}
});
});
});
</script>
{% endif %}
<div class="pure-u-4-5">
<h2 id="item-detail-title">
{% if item.data.itml_name_override|trim == '' %}
{{item.data.itm_name}}
{% else %}
{{item.data.itml_name_override}}
{% endif %}
</h2>
</div><div
class="pure-u-1-5" id="item-detail-no">{{ T("itemdetail_number") }} {{item.data.itm_no}}</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
<div class="pure-u-1" id="item-detail-img-main">
<img
src="{{ ImgURL('/_img/items/'~item.data.itm_img, 336) }}"
srcset="{{ ImgURL('/_img/items/'~item.data.itm_img, 400) }} 400w, {{ ImgURL('/_img/items/'~item.data.itm_img, 100) }} 100w, {{ ImgURL('/_img/items/'~item.data.itm_img, 200) }} 200w, {{ ImgURL('/_img/items/'~item.data.itm_img, 300) }} 300w"
class="pure-u-1" id="item-detail-img-main-img">
</div>
<script type="text/javascript">
function chimg(img, srcset){
document.getElementById('item-detail-img-main').innerHTML='<img src="'+img+'" srcset="'+srcset+'" alt="" class="pure-u-1" id="item-detail-img-main-img">';
}
function chimgold (img) {
window.document.images["item-detail-img-main-img"].src = img;
}
</script>
<ul id="item-detail-img-thumbs">
<li class="pure-u-1-3"><img
src="{{ ImgURL('/_img/items/'~item.data.itm_img, 336) }}"
onclick="chimg('{{ ImgURL('/_img/items/'~item.data.itm_img, 336) }}', '{{ ImgURL('/_img/items/'~item.data.itm_img, 100) }} 100w, {{ ImgURL('/_img/items/'~item.data.itm_img, 200) }} 200w, {{ ImgURL('/_img/items/'~item.data.itm_img, 300) }} 300w, {{ ImgURL('/_img/items/'~item.data.itm_img, 400) }} 400w')"
srcset="{{ ImgURL('/_img/items/'~item.data.itm_img, 100) }} 100w, {{ ImgURL('/_img/items/'~item.data.itm_img, 200) }} 200w, {{ ImgURL('/_img/items/'~item.data.itm_img, 300) }} 300w, {{ ImgURL('/_img/items/'~item.data.itm_img, 400) }} 400w"
class="pointer"></li>{%
for detailimg in item.data.itm_data.detailimg %}<li
class="pure-u-1-3"><img
src="{{ ImgURL('/_img/items/'~detailimg, 336) }}"
onclick="chimg('{{ ImgURL('/_img/items/'~detailimg, 336) }}', '{{ ImgURL('/_img/items/'~detailimg, 100) }} 100w, {{ ImgURL('/_img/items/'~detailimg, 200) }} 200w, {{ ImgURL('/_img/items/'~detailimg, 300) }} 300w, {{ ImgURL('/_img/items/'~detailimg, 400) }} 400w')"
srcset="{{ ImgURL('/_img/items/'~detailimg, 100) }} 100w, {{ ImgURL('/_img/items/'~detailimg, 200) }} 200w, {{ ImgURL('/_img/items/'~detailimg, 300) }} 300w, {{ ImgURL('/_img/items/'~detailimg, 400) }} 400w"
class="pointer"></li>{% endfor %}
</ul>
</div><div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
<form id="addtoshoppingcart" method="POST" target="/_misc/update-cart.html" class="pure-form pure-form-stacked">
<input type="hidden" name="action" value="add">
<div id="item-detail-text">
{{item.data.itml_text1}}
<p>{% if item.data.itm_data.soldout is not defined or not item.data.itm_data.soldout %}
{% if item.data.itm_data.size is defined %}
{% set itemsizes = item.data.itm_data.size|split('|') %}
{% endif %}
<input type="hidden" name="itemno" value="{{item.data.itm_no}}">
<div class="pure-u-1-2">{% if itemsizes is defined %}
<label class="block">{{ T("itemdetail_label_size") }}</label>
{{ macro.select('size', itemsizes, '', 'item-detail-size', 'block') }}
{% endif %}</div><div class="pure-u-1-2"><div id="item-detail-amount-cont">
<label class="block">{{ T("itemdetail_label_amount") }}</label>
{{ macro.select('amount', orderamounts, '', 'item-detail-amount', 'block') }}
{% if pageconfig.itemindex == 'A01' %}
<select name="additionalitems">
<option value="">nur Artikel</option>
<option value="0004">plus 0002</option>
<option value="0004~0005">plus 0004 und 0005</option>
</select>
{% endif %}
</div></div>{% endif %}
</p>
<div class="pure-u-1-2">
</div><div class="pure-u-1-2">
<div
id="item-detail-price-cont">
<h4 id="item-detail-price">
{% if item.data.pricedata.netto_sale is defined and (item.data.pricedata.netto_rebated is not defined or item.data.pricedata.netto_sale < item.data.pricedata.netto_rebated) %}
{#Angebotspreis:<br>#}
{#Netto: {{item.data.pricedata.netto_sale|number_format(numberformat_decimals, numberformat_decimal_point, numberformat_thousands_seperator)}} {{currency}}<br>#}
{#Brutto: #}<span class="salesprice">{{item.data.pricedata.brutto_sale|number_format(numberformat_decimals, numberformat_decimal_point, numberformat_thousands_seperator)}} {{currency}}</span>
{% endif %}
{% if item.data.pricedata.netto_rebated is defined and (item.data.pricedata.netto_sale is not defined or item.data.pricedata.netto_rebated < item.data.pricedata.netto_sale) %}
{#Ihr Preis:<br>#}
{#Netto: {{item.data.pricedata.netto_rebated|number_format(numberformat_decimals, numberformat_decimal_point, numberformat_thousands_seperator)}} {{currency}}<br>#}
{#Brutto: #}{{item.data.pricedata.brutto_rebated|number_format(numberformat_decimals, numberformat_decimal_point, numberformat_thousands_seperator)}} {{currency}}
{% endif %}
{{ item.data.pricedata.netto_sale is defined or item.data.pricedata.netto_rebated is defined ? ' <span class="sale-listprice">' : '' }}
{#Netto: {{item.data.pricedata.netto_list|number_format(numberformat_decimals, numberformat_decimal_point, numberformat_thousands_seperator)}} {{currency}}<br>#}
{#Brutto: #}{{item.data.pricedata.brutto_list|number_format(numberformat_decimals, numberformat_decimal_point, numberformat_thousands_seperator)}} {{currency}}
{{ item.data.pricedata.netto_sale is defined or item.data.pricedata.netto_rebated is defined ? '</span>' : '' }}
</h4>
{% if item.data.itm_data.soldout is not defined or not item.data.itm_data.soldout %}
<button data-target="#modal-cart" type="button" class="pure-button pure-u-23-24 pure-u-md-1 button-orange button-head" data-toggle="modal" id="addtoshoppingcartsubmit">
{{ T("itemdetail_button_submit") }}
</button>
{% else %}
{{ T("itemdetail_soldout") }}
{% endif %}
</div></div>
</div>
</form>
</div>
<!-- MODAL BOX CART -->
<div class="modal fade" id="modal-cart" tabindex="-1" role="dialog" aria-labelledby="addToCart" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="item-detail-infobox"></h4>
</div>
<div class="modal-footer" id="item-detail-infobox-buttons"></div>
</div>
</div>
</div>
<!-- /MODAL BOX CART -->