<script>
$(function () {
$('#RelatedProduct-product_area').appendTo($('#relatedproduct_area'));
var productsSlider = null;
$('#RelatedProduct-product_area .carousel-prev').click(function () {
if (productsSlider)
productsSlider.prev();
});
$('#RelatedProduct-product_area .carousel-next').click(function () {
if (productsSlider)
productsSlider.next();
});
var parpage = 4;
resizeFnc();
$(window).resize(function () {
resizeFnc();
});
function resizeFnc() {
var pp = 4;
if ($(window).width() <= 767) {
pp = 3;
} else if ($(window).width() <= 999) {
pp = 3;
}
if (parpage != pp) {
parpage = pp;
// clients-slider
//clientsSlider = clientsSliderChange(clientsSlider, pp);
//products-slider
if (parpage == 2) {
productsSlider = productsSliderChange(productsSlider, 1);
} else if (parpage == 3) {
productsSlider = productsSliderChange(productsSlider, 2);
} else {
productsSlider.destroy(true);
productsSlider = null;
}
}
}
function productsSliderChange(productsSlider, pp) {
if (productsSlider) {
productsSlider.destroy(true);
productsSlider = null;
}
productsSlider = new Siema({
selector: '.products-slider',
duration: 400,
easing: 'ease-out',
perPage: pp,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onInit: () => { },
onChange: () => { },
});
return productsSlider;
}
});
</script>
<style>
#RelatedProduct-product_area {
background: #FFFFFF;
padding: 40px 0;
}
#RelatedProduct-product_area h2 {
font-size: 42px;
letter-spacing: 1px;
font-weight: 400;
display: block;
margin-bottom: 15px;
color: #e52128;
text-align: center;
text-transform: uppercase;
}
#RelatedProduct-product_area .desc {
font-size: 20px;
line-height: 28px;
color: #9d9fa2;
text-align: center;
padding-bottom: 30px;
}
#RelatedProduct-product_area .carousel .slider-item img {
margin: 0 auto;
width: 350px;
max-width:100%;
}
#RelatedProduct-product_area .carousel .slider-item h3 {
color: #e52128;
font-size: 16px;
line-height: 22px;
margin-bottom: 4px;
text-align: center;
}
#RelatedProduct-product_area .carousel-heading {
display: none;
}
#RelatedProduct-product_area .carousel-next, #RelatedProduct-product_area .carousel-prev {
height: 30px;
width: 30px;
background-color: #1d90fb;
cursor: pointer;
margin-left: 5px;
transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
position: absolute;
top: 0px;
border-radius: 1px;
-webkit-border-radius: 1px;
-o-border-radius: 1px;
-moz-border-radius: 1px;
text-align: center;
z-index: 10;
}
#RelatedProduct-product_area .carousel-next:hover, #RelatedProduct-product_area .carousel-prev:hover {
background-color: #56ADFF;
}
#RelatedProduct-product_area .carousel-prev {
right: 38px;
padding-right: 1px;
}
#RelatedProduct-product_area .carousel-next {
right: 0px;
padding-left: 1px;
}
#RelatedProduct-product_area .carousel-next i, #RelatedProduct-product_area .carousel-prev i {
color: #fff;
font-size: 24px;
line-height: 30px;
}
#RelatedProduct-product_area .sale_price .price {
color: red;
font-size: 16px;
}
#RelatedProduct-product_area .regular-price p {
display: inline-block;
}
#RelatedProduct-product_area .price-box,
#RelatedProduct-product_area .actions {
text-align: center;
}
#RelatedProduct-product_area .product-info {
text-align: center;
font-weight:bold;
margin:0;
}
#RelatedProduct-product_area .button {
background: #ff0000;
margin-bottom:10px;
}
#RelatedProduct-product_area .button:hover {
background: #cc0000;
}
#RelatedProduct-product_area .button.learn-more {
background-color:#0886fb;
}
#RelatedProduct-product_area .button.learn-more:hover {
background-color:#00d3f3;
color:#ffffff;
}
#RelatedProduct-product_area .button {
height: 33px;
line-height: 33px;
padding: 0 10px;
min-width: 140px;
box-sizing: content-box;
}
@media only screen and (max-width: 999px) {
#RelatedProduct-product_area .flexbox {
display: block;
}
#RelatedProduct-product_area .carousel-heading {
display: block;
}
#RelatedProduct-product_area span.price.price01_default {
font-size:10px;
}
#RelatedProduct-product_area .container {
padding: 30px 0;
max-width: 600px;
}
}
@media only screen and (max-width: 767px) {
#RelatedProduct-product_area .button {
min-width: 80%;
}
#RelatedProduct-product_area .carousel .slider-item h3 {
font-size:10px;
line-height: 14px;
margin-bottom: 0;
}
#RelatedProduct-product_area span.price.price01_default {
font-size:8px;
}
#RelatedProduct-product_area p.normal_price {
margin: -7px 5px;
position: absolute;
}
#RelatedProduct-product_area .product-info {
font-size:10px;
font-weight:normal;
margin: 0 0 3px 0;
}
#RelatedProduct-product_area .container {
padding: 10px 0;
max-width: 300px;
min-width: 300px;
}
}
/*Review Area*/
#RelatedProduct-product_area .carousel .slider-item .review_score img{
display: inline-block;
vertical-align: unset;
max-width:inherit;
width:22px;
}
#RelatedProduct-product_area .carousel .slider-item #review_area .review_list .recommend_level img {
display: block;
float: left;
margin-right: 1px;
max-width:25px;
max-height:25px;
}
#RelatedProduct-product_area .carousel .slider-item h3.review_score {
font-size: 14px;
line-height: 21px;
color:#636363;
}
</style>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
<h2>関連商品</h2>
<div class="carousel-outer">
<div class="carousel-wrap">
<div class="container flexbox">
<div class="carousel-heading">
<a class="carousel-prev" href="#!"><i class="fa fa-angle-left"></i></a>
<a class="carousel-next" href="#!"><i class="fa fa-angle-right"></i></a>
</div>
<div class="row carousel flexbox products-slider">
{% for RelatedProduct in Product.RelatedProducts %}
{% set ChildProduct = RelatedProduct.ChildProduct %}
{% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
{% set campaignProduct, newProduct, limitedProduct = false, false, false %}
{% for ProductTag in RelatedProduct.ChildProduct.ProductTag %}
{% if ProductTag.Tag.id == 100 %}
{% set campaignProduct = true %}
{% elseif ProductTag.Tag.id == 1 %}
{% set newProduct = true %}
{% elseif ProductTag.Tag.id == 3 %}
{% set limitedProduct = true %}
{% endif %}
{% endfor %}
<div class="slider-item">
{% if campaignProduct == true %}
<p class="ec-shelfGrid__item-image campaignProduct">
{% elseif newProduct == true %}
<p class="ec-shelfGrid__item-image newProduct">
{% elseif limitedProduct == true %}
<p class="ec-shelfGrid__item-image limitedProduct">
{% else %}
<p class="ec-shelfGrid__item-image">
{% endif %}
<img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}" alt="{{ RelatedProduct.ChildProduct.name }}">
</p>
<h3 class="light">{{ RelatedProduct.ChildProduct.name }}</h3>
<p class="product-info">{{ RelatedProduct.content|raw }}</p>
<div class="price-box">
<span class="regular-price">
{% if RelatedProduct.ChildProduct.hasProductClass -%}
{% if RelatedProduct.ChildProduct.getPrice01Min is not null and RelatedProduct.ChildProduct.getPrice01IncTaxMin == RelatedProduct.ChildProduct.getPrice01IncTaxMax %}
<p class="normal_price">
<span class="price price01_default">{{ RelatedProduct.ChildProduct.getPrice01IncTaxMin|price }}</span>
<span class="inctax">(税込)</span>
</p>
{% elseif RelatedProduct.ChildProduct.getPrice01Min is not null and RelatedProduct.ChildProduct.getPrice01Max is not null %}
<p class="normal_price">
<span class="price price01_default">{{ RelatedProduct.ChildProduct.getPrice01IncTaxMin|price }} ~ {{ RelatedProduct.ChildProduct.getPrice01IncTaxMax|price}}</span>
<span class="inctax">(税込)</span>
</p>
{% endif %}
{% else -%}
{% if RelatedProduct.ChildProduct.getPrice01Max is not null %}
<p class="normal_price">
<span class="price price01_default">{{ RelatedProduct.ChildProduct.getPrice01IncTaxMin|price }}</span>
<span class="inctax">(税込)</span>
</p>
{% endif %}
{% endif -%}
{% if RelatedProduct.ChildProduct.hasProductClass %}
{% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
<p class="sale_price text-primary">
<span class="price price02_default">{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}</span>
<span class="inctax">(税込)</span>
</p>
{% else %}
<p class="sale_price text-primary">
<span class="price price02_default">{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ~ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}</span>
<span class="inctax">(税込)</span>
</p>
{% endif %}
{% else %}
<p class="sale_price text-primary">
<span class="price price02_default">{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}</span>
<span class="inctax">(税込)</span>
</p>
{% endif %}
</span>
</div>
<!-- REVIEW AREA -->
{% import('@CustomerReview42/Block/customer_review4_recommend_macro.twig') as recommend_macro %}
{% set review_list = repository('Plugin\\CustomerReview42\\Entity\\CustomerReviewTotal').getRecommend(ChildProduct.id) %}
{% set reviewer_total = 0 %}
{% set review_total_point = 0 %}
{% set count = 5 %}
{% for i in review_list %}
{% set reviewer_total = reviewer_total + i %}
{% set review_total_point = review_total_point + i * count %}
{% set count = count - 1 %}
{% endfor %}
{% set review_point = reviewer_total == 0 ? 0 : (review_total_point / reviewer_total) %}
{% if 0 < reviewer_total %}
<div id="plg_customer_review{{ChildProduct.id}}" class="review-layoutRole product_list">
<h3 class="review_score" data-id="{{ ChildProduct.id }}" data-avg="{{ review_point }}" data-num="{{ reviewer_total }}" data-starsize="22" data-imgbase="{{ asset('aneros/img/products/') }}">
<span class="review_all_score_image" style="display: inline-block"></span><br />
<span class="review_all_score"><a href="{{ url('product_detail', {'id': ChildProduct.id}) }}#review_area"></a></span>
</h3>
</div>
{% endif %}
<script>
$(function () {
if ( $('#plg_customer_review_anchor{{ChildProduct.id}}').length) {
$('#plg_customer_review{{ChildProduct.id}}').insertAfter($('#plg_customer_review_anchor{{ChildProduct.id}}'));
} else if ( $('#productForm{{ChildProduct.id}}').length) {
$('#plg_customer_review{{ChildProduct.id}}').insertBefore($('#productForm{{ChildProduct.id}}'));
} else {
$('#plg_customer_review{{ChildProduct.id}}').hide();
}
});
</script>
<!-- REVIEW AREA END -->
<div class="actions" id="productForm{{ ChildProduct.id }}">
<a class="button btn-cart learn-more related-more-info" title="商品詳細" href="{{ url('product_detail', {'id': RelatedProduct.ChildProduct.id}) }}" id="{{ RelatedProduct.ChildProduct.name }}">
商品詳細
</a>
{% if RelatedProduct.ChildProduct.stock_find %}
{% if RelatedProduct.ChildProduct.hasProductClass %}
{#<a class="button btn-cart learn-more" title="商品詳細" href="{{ url('product_detail', {'id': RelatedProduct.ChildProduct.id}) }}">
<span>
<span>商品詳細</span>
</span>
</a>#}
{% else %}
<button type="button" title="カゴに入れる" class="button btn-cart one-click-add-cart related-add-cart"
data-action="{{ url('product_add_cart', {id:Product.id}) }}"
data-product_id="{{ RelatedProduct.ChildProduct.id }}" data-product_name="{{ RelatedProduct.ChildProduct.name }}" data-product_img="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}"
data-product_class="{{ RelatedProduct.ChildProduct.ProductClasses[0].id }}"
data-token="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" id="{{ RelatedProduct.ChildProduct.name }}">
カゴに入れる
</button>
{% endif %}
{% else %}
{% set arrivemail = true %}
{% for ProductTag in RelatedProduct.ChildProduct.ProductTag %}
{% if ProductTag.Tag.id == 99 %}
{% set arrivemail = false %}
{% endif %}
{% endfor %}
{% if arrivemail %}
<button type="button" data-productid="{{ RelatedProduct.ChildProduct.id }}" data-productname="{{ RelatedProduct.ChildProduct.name }}" title="入荷お知らせ" class="button btn-cart add-to-mail">
<span>入荷お知らせ</span>
</button>
{% else %}
<button type="button" title="在庫切れ" class="button btn-cart add-to-cart-out">
<span>在庫切れ</span>
</button>
{% endif %}
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>