{% extends 'default_frame.twig' %}
{% set body_class = 'blog_page' %}
{% set wrap_class = 'blogDwrap' %}
{% set footerBrandListFlg = true %}
{% block stylesheet %}
<link rel="stylesheet" href="{{ asset('assets/css/contents.css') }}">
{% endblock stylesheet %}
{% block javascript %}
<script>
eccube.productsClassCategories = {
{% for CategoryRecommendProduct in Pickup %}
{% set Product = CategoryRecommendProduct %}
"{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
{% endfor %}
};
$(function() {
$('.add-cart').on('click', function(event) {
// 規格1フォームの必須チェック
var $classcategory = $(this).parents('form').find('select[name="classcategory_id1"]');
if ($classcategory.length) {
if ($classcategory.val() == '__unselected' || $classcategory.val() == '') {
$classcategory[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
return true;
} else {
$classcategory[0].setCustomValidity('');
}
}
// 規格2フォームの必須チェック
var $classcategory2 = $(this).parents('form').find('select[name="classcategory_id2"]');
if ($classcategory2.length) {
if ($classcategory2.val() == '__unselected' || $classcategory2.val() == '') {
$classcategory2[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
return true;
} else {
$classcategory2[0].setCustomValidity('');
}
}
// 個数フォームのチェック
var $quantity = $(this).parents('form').find('[name="quantity"]');
if ($quantity.val() < 1) {
$quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
return true;
} else {
$quantity[0].setCustomValidity('');
}
event.preventDefault();
$form = $(this).parents('form');
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
dataType: 'json',
beforeSend: function(xhr, settings) {
// Buttonを無効にする
$('.add-cart').prop('disabled', true);
}
}).done(function(data) {
// レスポンス内のメッセージをalertで表示
$.each(data.messages, function() {
$('#ec-modal-header').html(this);
});
$('#ec-modal-checkbox').prop('checked', true);
// カートブロックを更新する
$.ajax({
url: "{{ url('block_cart') }}",
type: 'GET',
dataType: 'html'
}).done(function(response) {
let res = JSON.parse(response);
$('.cart_number').text(res.totalQuantity);
});
}).fail(function(data) {
alert('{{ 'カートへの追加に失敗しました。'|trans }}');
}).always(function(data) {
// Buttonを有効にする
$('.add-cart').prop('disabled', false);
});
});
$('.slider').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: false,
loop: true,
slidesToShow: 3,
prevArrow: false,
nextArrow: false,
variableWidth: true,
responsive: [
{
breakpoint: 1179,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
}
}]
});
});
</script>
{% endblock %}
{% block main %}
{{ include('Block/header_shop.twig') }}
<div class="conts">
<h2 class="h2Normal">BLOG</h2>
<p class="txt14 ls6 tarS mt25P">ブログ</p>
</div>
<!-- MAINVISUAL -->
{% if Blog.thumbnail is not empty %}
<div class="mainVisualBlogD pcShow">
<div class="c-blog-thumbnail--wrapper">
<div class="c-blog-thumbnail" style="background-image: url('{{ Blog.thumbnail }}')"></div>
</div>
</div>
<div class="mainVisual spShow">
<img src="{{ Blog.thumbnail }}" alt="">
</div>
{% endif %}
<!-- BLOG -->
<section class="blogD">
<div class="conts2">
<p class="txt13 ls10">{{ Blog.date }}</p>
<p class="txtBig mt40P mb40P">{{ Blog.title|raw }}</p>
<div class="txtWrap mb40P blog-content">
{{ Blog.content|raw|nl2br }}
</div>
</div>
</section>
<div class="bgColor">
<!-- PICKUP ITEMS -->
<section class="pickupItems">
<h2 class="h2Normal mt60P mb40">PICKUP ITEMS</h2>
<div class="flexWrap slider">
{% for CategoryRecommendProduct in Pickup if Pickup %}
{% set Product = CategoryRecommendProduct %}
<div class="flex">
{% set pickup_url = asset(Product.mainFileName|no_image_product, "save_image") %}
<a href="{{ url('product_detail', {'id': Product.id}) }}" class="pickup-image" style="background-image:url('{{ pickup_url }}')"></a>
{% set brand = '' %}
{% for ProductCategory in Product.ProductCategories %}
{% if ProductCategory.Category.Parent and ProductCategory.Category.Parent.id == '3' %}
{% set brand = ProductCategory.Category.name %}
{% endif %}
{% endfor %}
<div class="flexTxt">
<p class="txt12 ls6">{{ brand }}</p>
<p class="txt18 ls6 mt15 mb20">{{ Product.name }}</p>
<p class="txt14 ls6">Price: {{ Product.getPrice02IncTaxMin|price }}</p>
<a href="{{ url('product_detail', {'id': Product.id}) }}" class="buttonC mt-20">DETAIL</a>
</div>
</div>
{% endfor %}
</div>
<div class="ec-modal">
<input type="checkbox" id="ec-modal-checkbox" class="checkbox">
<div class="ec-modal-overlay">
<label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
<div class="ec-modal-wrap">
<label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
<div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
<div class="ec-modal-box">
<div class="ec-role">
<label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</label>
<a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- NAVIGATION -->
<div class="flex nav blog-navigation">
{% if Blog.prev_link %}
<a href="{{ Blog.prev_link }}">
<div class="flex button2">
<div>
<i class="fas fa-chevron-left"></i>
</div>
<div>
<p>前へ</p>
</div>
</div>
</a>
{% endif %}
<div>
<a href="{{ url('blog_list', {'shop': shop}) }}" class="button2 buttonCustom">一覧へ戻る</a>
</div>
{% if Blog.next_link %}
<a href="{{ Blog.next_link }}">
<div class="flex button2">
<div>
<p>次へ</p>
</div>
<div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
</a>
{% endif %}
</div>
{% endblock %}