<style>
.hsd-badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: {{ font_rate }}%;
font-weight: 700;
line-height: 1;
color: {{ font_color }};
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: {{ back_color }};
border-radius: 10px;
position: relative;
vertical-align: text-bottom;
}
</style>
<script>
$(function () {
{% if is_show == 1 and is_listpage == 1 %}
{% for key, value in discount_rate %}
{% if value['has_product_class'] == 1 %}
var pcc_ritu{{ key }} = { {{ value['product_class_id_ritu'] }} };
$('.ec-shelfGrid').find('li').eq({{ key }}).find('select').change(function(){
var product_class_id = $('#ProductClass{{ value['product_id'] }}').val();
if( product_class_id != '' ){
var ritu = pcc_ritu{{ key }}[product_class_id];
if( ritu > 0 && ritu <= 100 ){
$('.ec-shelfGrid').find('li').eq({{ key }}).find('.price02-default').append('<span class="hsd-badge" style="left: 3px;">{{ bef_txt }}' + ritu + '%{{ aft_txt }}</span>');
}
}
});
{% else %}
{% if value['discount_rate_1'] > 0 and value['discount_rate_2'] > 0 and value['discount_rate_1'] != value['discount_rate_2'] %}
$('.ec-shelfGrid').find('li').eq({{ key }}).find('.price02-default').after('<span class="hsd-badge">{{ bef_txt }}{{ value['discount_rate_1'] }}%{{ aft_txt }}</span> 〜 <span class="hsd-badge">{{ value['discount_rate_2'] }}%{{ aft_txt }}</span>');
{% elseif value['discount_rate_1'] > 0 and value['discount_rate_1'] <= 100 %}
$('.ec-shelfGrid').find('li').eq({{ key }}).find('.price02-default').append('<span class="hsd-badge">{{ bef_txt }}{{ value['discount_rate_1'] }}%{{ aft_txt }}</span>');
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
});
</script>