{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}
{% block javascript %}
<script>
var targetList = [];
targetList[0] = [];
targetList[1] = [];
targetList[2] = [];
targetList[3] = [];
targetList[4] = [];
targetList[0][0] = $('#assistant-01-01');
targetList[1][0] = $('#assistant-02-01');
targetList[2][0] = $('#assistant-03-01');
targetList[2][1] = $('#assistant-03-02');
targetList[2][2] = $('#assistant-03-03');
targetList[3][0] = $('#assistant-04-01');
targetList[3][1] = $('#assistant-04-02');
targetList[3][2] = $('#assistant-04-03');
targetList[3][3] = $('#assistant-04-04');
targetList[4][0] = $('#assistant-05-01');
targetList[4][1] = $('#assistant-05-02');
targetList[4][2] = $('#assistant-05-03');
targetList[4][3] = $('#assistant-05-04');
targetList[4][4] = $('#assistant-05-05');
targetList[4][5] = $('#assistant-05-06');
targetList[4][6] = $('#assistant-05-07');
targetList[4][7] = $('#assistant-05-08');
targetList[4][8] = $('#assistant-05-09');
var jsButton = $('.js-assistant-button');
var jsSupportButton = $('#js-assistant-support');
var reqParam = {
status:'',
material:'',
use:'',
type:'',
};
var jsProgress = $('#js-progress');
var jsProgressItem = jsProgress.find('li');
var jsPanels = $('#js-panel-wrap');
$(window).on('load', function() {
jsPanels.css({height:jsPanels.outerHeight()});
});
var assistantHistory = [];
assistantHistory[0] = targetList[0][0];
var currentStep = 1;
jsButton.on('click', function(e) {
var dVal = $(this).data('val');
var dStep = $(this).data('step');
var dLayer = $(this).data('layer');
if(dVal) {
showProducts(dVal);
}
currentStep = dStep;
assistantHistory[assistantHistory.length - 1].removeClass('current');
assistantHistory.push(targetList[dStep - 1][dLayer - 1]);
targetList[dStep - 1][dLayer - 1].addClass('selected current');
changeProgressItem(dStep);
});
jsProgressItem.on('click', function(e) {
var nextStep = $(this).index('.ec-progress__item') + 1;
var backCount = currentStep - nextStep;
if (backCount <= 0) {
return;
}
for(i = 0; i < backCount; i++) {
backHistory();
}
});
function changeProgressItem(dStep) {
if(dStep !== 5) {
jsProgressItem.each(function(i, elem) {
self = $(elem);
self.removeClass('is-completed').removeClass('is-complete');
if(i == dStep - 1) {
self.addClass('is-complete');
} else if(i < dStep - 1) {
self.addClass('is-completed');
} else if(i > dStep - 1) {
}
});
if(jsSupportButton.css('display') == 'none') {
jsSupportButton.fadeIn();
}
} else {
jsProgress.slideUp('500');
jsSupportButton.fadeOut();
}
var position = 0;
var speed = 300;
$("html,body").animate({scrollTop:position},speed);
changeHeight();
}
function changeHeight() {
var currentHeight = assistantHistory[assistantHistory.length - 1].outerHeight();
jsPanels.css({height:currentHeight});
}
function backHistory() {
var currentHistory = assistantHistory.pop();
currentHistory.removeClass('selected').removeClass('current');
var nextItem = assistantHistory[assistantHistory.length - 1];
nextItem.addClass('current');
currentStep = nextItem.data('step');
changeProgressItem(currentStep);
if(currentStep !== 5 && jsProgress.css('display') == 'none') {
jsProgress.slideDown('500');
}
}
window.history.pushState(null, "", window.location.href);
window.onpopstate = function() {
if(assistantHistory.length > 1) {
window.history.pushState(null, "", window.location.href);
backHistory();
}
};
function showProducts(catId) {
var products = $('.assistant-product');
products.css('display','none');
products.each(function(i){
var dataCat = $(this).data('cat').split('|');
if(dataCat.indexOf(String(catId)) !== -1) {
$(this).css('display','flex');
}
})
}
//function getProducts(catId) {
// $form = $('#form1');
// $input = $('#category_id');
// $input.val(catId);
//
// $.ajax({
// url: "url('get_list')",
// type: 'GET',
// data: $form.serialize(),
// dataType: 'json'
// }).done(function(data) {
// console.log(data);
// }).fail(function() {
// console.log(data);
// alert('更新に失敗しました。入力内容を確認してください。');
// }).always(function(data) {
// console.log('done');
// });
//}
</script>
{% endblock javascript %}
{% block main %}
<section class="rf-assistant-section">
<div class="container">
<h1 class="assistant-title"><img src="{{ asset('assets/img/assist-title.png', 'user_data') }}" alt="お布団アシスタント"></h1>
<div id="js-progress" class="ec-cartRole__progress">
<ul class="ec-progress">
<li class="ec-progress__item is-complete">
<div class="ec-progress__number">1</div>
<div class="ec-progress__label">状態</div>
</li>
<li class="ec-progress__item">
<div class="ec-progress__number">2</div>
<div class="ec-progress__label">中身の素材</div>
</li>
<li class="ec-progress__item">
<div class="ec-progress__number">3</div>
<div class="ec-progress__label">用途</div>
</li>
<li class="ec-progress__item">
<div class="ec-progress__number">4</div>
<div class="ec-progress__label">種類</div>
</li>
</ul>
</div>
<div class="assistant-area" id="js-swipe-area">
<div id="js-panel-wrap" class="assistant-panels">
<div id="assistant-01-01" class="assistant-panel current" data-step="1">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">今お使いのふとんは<br class="d-block d-md-none">どのような状態ですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="2" data-layer="1">
<div class="assistant-button-icon assistant-button-icon-01"><img src="{{ asset('assets/img/assist-01-01.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-text">ボリュームがない</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="2" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-01-02.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-text">５年以上使っている</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="2" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-01-03.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-text">色が変色している</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="2" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-01-04.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-text">中素材が吹き出している</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="2" data-layer="1">
<div class="assistant-button-icon assistant-button-icon-05"><img src="{{ asset('assets/img/assist-01-05.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-text">臭いが気になる</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="2" data-layer="1">
<div class="assistant-button-text">その他</div>
</a>
</div>
</div>
</div>
<div id="assistant-02-01" class="assistant-panel assistant-panel-child" data-step="2">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">そのふとんの中身の素材は<br class="d-block d-md-none">何ですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="3" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-02-01.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">羽 毛</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="3" data-layer="2">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-02-02.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">羊 毛</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="3" data-layer="3">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-02-03.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">わ た</div>
</a>
</div>
</div>
<p class="assistant-desc">※ふとんの品質表示タグをご確認ください。</p>
</div>
<div id="assistant-03-01" class="assistant-panel assistant-panel-child" data-step="3">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">そのふとんの用途は<br class="d-block d-md-none">どちらですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="4" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-03-01.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">掛ふとん</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button assistant-button-disable">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-03-02.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">敷ふとん</div>
</a>
</div>
</div>
</div>
<div id="assistant-03-02" class="assistant-panel assistant-panel-child" data-step="3">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">そのふとんの用途は<br class="d-block d-md-none">どちらですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button assistant-button-disable" >
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-03-01.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">掛ふとん</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="4" data-layer="2">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-03-02.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">敷ふとん</div>
</a>
</div>
</div>
</div>
<div id="assistant-03-03" class="assistant-panel assistant-panel-child" data-step="3">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">そのふとんの用途は<br class="d-block d-md-none">どちらですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="4" data-layer="3">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-03-01.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">掛ふとん</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-step="4" data-layer="4">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-03-02.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">敷ふとん</div>
</a>
</div>
</div>
</div>
<div id="assistant-04-01" class="assistant-panel assistant-panel-child" data-step="4">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">そのふとんの種類は<br class="d-block d-md-none">どれですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="3" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-06.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">本掛ふとん</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="9" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-08.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">肌掛ふとん</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button assistant-button-disable">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-07.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">合掛ふとん</div>
</a>
</div>
</div>
<p class="assistant-desc">※ふとんの品質表示タグをご確認ください。</p>
</div>
<div id="assistant-04-02" class="assistant-panel assistant-panel-child" data-step="4">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">仕上げたい硬さの種類は<br class="d-block d-md-none">どれですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="6" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-01.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">キルト<br class="d-none d-md-block">薄敷ふとん<br>（軽い仕上がり）</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="8" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-02.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">硬わたキルト<br class="d-none d-md-block">敷ふとん<br>（硬めの仕上がり）</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="30" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-03.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">硬わたダイヤキルト<br class="d-none d-md-block">敷ふとん<br>（ふっくら仕上がり）</div>
</a>
</div>
</div>
</div>
<div id="assistant-04-03" class="assistant-panel assistant-panel-child" data-step="4">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">そのふとんの種類は<br class="d-block d-md-none">どれですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="7" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-06.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">本掛ふとん</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button assistant-button-disable">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-08.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">肌掛ふとん</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button assistant-button-disable">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-07.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">合掛ふとん</div>
</a>
</div>
</div>
<p class="assistant-desc">※ふとんの品質表示タグをご確認ください。</p>
</div>
<div id="assistant-04-04" class="assistant-panel assistant-panel-child" data-step="4">
<div class="rf-lp-title-ornament">
<h2 class="assistant-panel-title">仕上げたい硬さの種類は<br class="d-block d-md-none">どれですか?</h2>
</div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="19" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-04.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">敷ふとん<br>（ふわふわ感のある<br class="d-block d-md-none">仕上がり）</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button js-assistant-button" data-val="20" data-step="5" data-layer="1">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-04-05.png', 'user_data') }}" alt=""></div>
<div class="assistant-button-large-text">硬わた敷ふとん<br>（硬めの仕上がり）</div>
</a>
</div>
</div>
</div>
<div id="assistant-05-01" class="assistant-panel assistant-panel-child" data-step="5">
<div class="rf-lp-title-ornament assistant-complete-title-area">
<h2 class="assistant-complete-title">あなたのふとんへの<br class="d-block d-md-none">おすすめリフォームは<br class="d-block d-md-none">こちら</h2>
</div>
<div id="assistant-results" class="row gutter-15 rf-product-panels">
{% for Product in Products %}
{% if Product.status.id == 1 %}
<article class="col-12 col-md-6 assistant-product" data-cat="{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{%- if loop.last == true %}{{ Category.id }}|{% endif -%}{% endfor %}{% endfor %}">
<div class="rf-product-panel">
<div class="rf-product-img"><img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt=""></div>
<div class="rf-product-info">
<h2 class="rf-product-title">
{{ Product.name | product_title | raw }}
</h2>
{% if Product.ProductCategories is not empty %}
<div class="rf-product-tags">
{% for ProductCategory in Product.ProductCategories %}
{% for Category in ProductCategory.Category.path %}
{%- if loop.last == true %}
<div class="rf-product-tag">{{ Category.name }}</div>
{% endif -%}
{% endfor %}
{% endfor %}
{% for Tag in Product.Tags %}
<div class="rf-product-tag">{{ Tag }}</div>
{% endfor %}
</div>
{% endif %}
<div class="rf-product-text">{{ Product.description_detail }}</div>
<div class="rf-product-price">
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
{{ Product.getPrice02IncTaxMin|price }}
{% else %}
{{ Product.getPrice02IncTaxMin|price }} ～ {#{ Product.getPrice02IncTaxMax|price }#}
{% endif %}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
{% endif %}
<span class="rf-product-tax">税込</span>
</div>
<div class="rf-product-button">
<a class="rf-main-button" href="{{ url('product_detail', {'id': Product.id}) }}">詳しくはこちら</a>
</div>
</div>
</div>
</article>
{% endif %}
{% endfor %}
</div>
</div>
<div id="assistant-05-09" class="assistant-panel assistant-panel-child" data-step="5">
<div class="assistant-support-title"><img src="{{ asset('assets/img/assist-support-title.png', 'user_data') }}" alt=""></div>
<div class="assistant-buttons row">
<div class="col-md-6 col-12">
<a class="assistant-button" href="{{ url('contact') }}">
<div class="assistant-button-large-text">フォームによるお問い合わせ</div>
</a>
</div>
<div class="col-md-6 col-12">
<a class="assistant-button" href="https://liff.line.me/1645278921-kWRPP32q/?accountId=255xcebu">
<div class="assistant-button-large-text">LINEによるお問い合わせ</div>
</a>
</div>
</div>
</div>
</div>
<div class="assistant-other row">
<div class="col-md-6 col-12">
<a id="js-assistant-support" class="assistant-button js-assistant-button" data-step="5" data-layer="9">
<div class="assistant-button-icon"><img src="{{ asset('assets/img/assist-contact.png', 'user_data') }}" alt=""></div>
よくわからないので<br>サポートに問い合わせる
</a>
</div>
</div>
</div>
</div>
</section>
{% endblock %}