{#
Plugin Name: JoolenCategoryIcon4
Copyright(c) joolen inc. All Rights Reserved.
https://www.joolen.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{# アイコン用CSS #}
<style>
.l-categorynav_list_pc .l-categorynav_img{
width: 100%;
max-width: 60px;
}
.l-categorynav_list_pc .l-categorynav_title{
margin-left: 10px;
}
.ec-itemNav__nav li ul li .l-categorynav_list_pc{
position: relative;
min-height: 84px;
display: flex;
align-items: center;
}
.ec-itemNav__nav li ul li .l-categorynav_list_pc .l-categorynav_img{
width: 100%;
max-width: 50px;
}
.ec-itemNav__nav li ul li .l-categorynav_list_pc .l-categorynav_title{
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media only screen and (min-width: 768px){
.ec-itemNav__nav{
text-align: left;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.ec-itemNav__nav li a {
display: flex;
align-items: center;
}
.ec-itemNav__nav li ul li:hover > ul > li{
width: 100%;
}
.ec-itemNav__nav li ul li ul:before{
top: 30px;
}
}
</style>
{# アイコン画像の差し込み #}
<script type="text/javascript">
{% if categoryImages is defined %}
$(function () {
{% for categoryId, categoryImage in categoryImages %}
$("#category_icon_pc_{{ categoryId }}").before('<img src="{{ asset(categoryImage|no_image_product, 'save_image') }}" class="l-categorynav_img">');
{% endfor %}
});
{% endif %}
</script>