Symfony Profiler

{#
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' %}
{% set body_class = 'product_page' %}
{% block stylesheet %}
{% if Product.ProductImage|length > 0 %}
{% set length_per_piece = (150 / Product.ProductImage|length) |round(2, 'floor') %}
{% endif %}
{% if Product.ProductNaireImages|length > 0 %}
{% set naire_length_per_piece = (150 / Product.ProductNaireImages|length) |round(2, 'floor') %}
{% endif %}
{% if Product.ProductGalleries|length > 0 %}
{% set gallery_length_per_piece = (150 / Product.ProductGalleries|length) |round(2, 'floor') %}
{% endif %}
{% if Product.ProductDetailImages|length > 0 %}
{% set detail_image_length_per_piece = (150 / Product.ProductDetailImages|length) |round(2, 'floor') %}
{% endif %}
<style>
{% if Product.ProductImage|length > 0 %}
.bar-item {
width: calc({{ length_per_piece }}%);
background-color: #E2DFD6;
height: 2px;
}
{% endif %}
{% if Product.ProductNaireImages|length > 0 %}
.naire-bar-item {
width: calc({{ naire_length_per_piece }}%);
background-color: #E2DFD6;
height: 2px;
}
{% endif %}
{% if Product.ProductGalleries|length > 0 %}
.gallery-bar-item {
width: calc({{ gallery_length_per_piece }}%);
background-color: #E2DFD6;
height: 2px;
}
{% endif %}
{% if Product.ProductDetailImages|length > 0 %}
.detail-image-bar-item{
width: calc({{ detail_image_length_per_piece }}%);
background-color: #E2DFD6;
height: 2px;
}
{% endif %}
.slider .slick-list {
overflow: visible;
padding: 0;
}
.slider {
max-width: 1008px;
max-height: auto !important;
}
.slick-dots {
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -120px;
bottom: -40px !important;
}
.slider .slick-dots{
width: 100%;
display: flex;
align-items: center;
justify-content:center;
}
.slick-dots li {
list-style-type: none;
width: 80px;
height: 2px;
margin: 0;
background-color:#E2DFD6;
cursor: pointer;
}
.slick-dots li.slick-active {
background-color: #B8914B;
}
.slick-dots li button{
opacity:0;
width: 100%;
}
.slick-dotted.slick-slider{
margin-bottom: 50px;
}
.product-naire-detail__slide ,.product-spec-detail__slide .slick-dotted{
margin-bottom: 0;
}
.product-naire-detail__slide , .product-spec-detail__slide .slick-dots{
margin-bottom: 4px;
}
.slick-slider{
margin-bottom: 0;
}
.product-movie__slide .slick-list{
height:327px;
}
.product-naire-detail__slide .slick-list{
height:630px;
}
@media screen and (max-width: 768px) {
.slick-dots {
width: 120px;
margin: 0 auto;
}
.slick-dots li{
width: 32px;
height: 2px;
}
.product-naire-detail__slide .slick-list{
height:315px;
}
}
</style>
{% endblock %}
{% set productOption = 'productoption' ~ productOptionId %}
{% set productOptionSecond = 'productoption' ~ productOptionSecondId %}
{% block javascript %}
{% if form.productoption1 is defined and form[productOption] is defined %}
<script>
$(function () {
// ページの初期表示時にadd-cartクラスのボタンにdisabled属性を付与
$('.add-cart').attr('disabled', true);
// 初期状態では名入れ方法モーダルを非表示
$('.naire-modal, .naire-modal-second, #naire-unit').hide();
// モーダル外クリックしたときの制御
//$('.naire-modal .naire-close, .naire-modal .naire-modal-overlay').click(function () {
// $('.naire-modal').fadeOut();
//});
$('#productoption1').on('change', function (event) {
// 名入れ選択肢のテキストを取得
var text = $(this).find('option:selected').text();
$('.add-cart').attr('disabled', false);
if (text == "なし") {
$('.naire-modal').fadeOut();
resetNaireMethod();
resetNaireMethodSecond();
} else {
$('.naire-modal').fadeIn();
};
});
var productOptionId = {{ productOptionId }};
$(`input[name='productoption${productOptionId}']`).change(function () {
$('.naire-modal').fadeOut();
var value = $(this).val();
$('#{{ form['productoption' ~ productOptionId].vars.id }}').val(value);
$('#naire-unit').show();
$('#naire-method').show();
$('#naire-method .naire-method-name').text($(this).data('name'));
});
function resetNaireMethod() {
$('#{{ form['productoption' ~ productOptionId].vars.id }}').val('');
$('#naire-method').hide();
$('#naire-method .naire-method-name').text('');
}
{% if form[productOptionSecond] is defined %}
$('#naire-unit-sheets').on('change', function (event) {
if ($(this).find('option:selected').val() == "2") {
$('.naire-modal-second').fadeIn();
} else if ($(this).find('option:selected').val() == "1") {
$('#{{ form['productoption' ~ productOptionSecondId].vars.id }}').val('');
$('#naire-method-second').hide();
$('#naire-method-second .naire-method-second-name').text('');
} else {
$('.naire-modal-second').fadeOut();
}
});
var productOptionSecondId = {{ productOptionSecondId }};
$(`input[name='productoption${productOptionSecondId}']`).change(function () {
$('.naire-modal-second').fadeOut();
var value = $(this).val();
$('#{{ form['productoption' ~ productOptionSecondId].vars.id }}').val(value);
$('#naire-method-second').show();
$('#naire-method-second .naire-method-second-name').text($(this).data('name'));
});
function resetNaireMethodSecond() {
console.log("resetNaireMethodSecond");
$('#{{ form['productoption' ~ productOptionSecondId].vars.id }}').val('');
$('#naire-method-second, #naire-unit').hide();
$('#naire-unit-sheets').val('');
$('#naire-method-second .naire-method-second-name').text('');
}
{% endif %}
});
</script>
{% endif %}
<script>
eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
// 規格2に選択肢を割り当てる。
function fnSetClassCategories(form, classcat_id2_selected) {
var $form = $(form);
var product_id = $form.find('input[name=product_id]').val();
var $sele1 = $form.find('select[name=classcategory_id1]');
var $sele2 = $form.find('select[name=classcategory_id2]');
eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
}
{% if form.classcategory_id2 is defined %}fnSetClassCategories($('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }});
{% elseif form.classcategory_id1 is defined %}
eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);{% endif %}
</script>
<script>
$(function () { // bfcache無効化
$(window).bind('pageshow', function (event) {
if (event.originalEvent.persisted) {
location.reload(true);
}
});
// Core Web Vital の Cumulative Layout Shift(CLS)対策のため
// img タグに width, height が付与されている.
// 630px 未満の画面サイズでは縦横比が壊れるための対策
// see https://github.com/EC-CUBE/ec-cube/pull/5023
$('.ec-grid2__cell').hide();
var removeSize = function () {
$('.slide-item').height('');
$('.slide-item img').removeAttr('width').removeAttr('height').removeAttr('style');
};
var slickInitial = function (slick) {
$('.ec-grid2__cell').fadeIn(1500);
var baseHeight = $(slick.target).height();
var baseWidth = $(slick.target).width();
var rate = baseWidth / baseHeight;
$('.slide-item').height(baseHeight * rate);
// 余白を削除する
// transform を使用することでCLSの影響を受けないようにする
$('.slide-item img').css({
'transform-origin': 'top left',
'transform': 'scaleY(' + rate + ')',
'transition': 'transform .1s'
});
// 正しいサイズに近くなったら属性を解除する
setTimeout(removeSize, 500);
};
$('.item_visual').on('init', slickInitial);
// リサイズ時は CLS の影響を受けないため属性を解除する
$(window).resize(removeSize);
$('.item_visual').slick({
dots: false,
arrows: false,
responsive: [
{
breakpoint: 768,
settings: {
dots: true
}
}
]
});
$('.slideThumb').on('click', function () {
var index = $(this).attr('data-index');
$('.item_visual').slick('slickGoTo', index, false);
})
});
</script>
<script>
$(function () {
$('.add-cart').on('click', function (event) {
{% if form.classcategory_id1 is defined %}
// 規格1フォームの必須チェック
if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
$('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
return true;
} else {
$('#classcategory_id1')[0].setCustomValidity('');
}
{% endif %}
{% if form.classcategory_id2 is defined %}
// 規格2フォームの必須チェック
if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
$('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
return true;
} else {
$('#classcategory_id2')[0].setCustomValidity('');
}
{% endif %}
// 個数フォームのチェック
if ($('#quantity').val() < 1) {
$('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
return true;
} else {
$('#quantity')[0].setCustomValidity('');
}
// 名入れオプションのチェック
var naireOptions = $('.naire-modal-box');
var options = naireOptions.find('label');
var filteredOptions = options.filter(function() {
return $(this).text().indexOf('なし') !== -1;
});
var productOptionId = {{ productOptionId }}
// productoptionの値が空の場合、商品に紐づく"なし"オプションのIDを渡す
if( !$(`#productoption${productOptionId}`).val() ){
$(`#productoption${productOptionId}`).val($(filteredOptions[0]).find('input').val());
}
// 名入れ2枚目オプションのチェック
{% if form[productOptionSecond] is defined %}
var naireSecondOptions = $('.naire-modal-second-box');
var filteredSecondOptions = naireSecondOptions.find('label').filter(function() {
return $(this).text().indexOf('なし') !== -1;
});
// productOptionSecondの値が空の場合、商品に紐づく"なし"オプションのIDを渡す
if( !$(`#productoption${productOptionSecondId}`).val() ){
$(`#productoption${productOptionSecondId}`).val($(filteredSecondOptions[0]).find('input').val());
}
{% endif %}
event.preventDefault();
$form = $('#form1');
$.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').text(this);
});
$('.ec-modal').show()
// カートブロックを更新する
$.ajax({url: "{{ url('block_cart') }}", type: 'GET', dataType: 'html'}).done(function (html) {
$('.ec-headerRole__cart').html(html);
});
}).fail(function (data) {
if ('responseJSON' in data && 'detail' in data.responseJSON) {
alert(data.responseJSON.detail);
} else {
alert('{{ 'front.product.add_cart_error'|trans }}');
}
window.location.reload();
}).always(function (data) { // Buttonを有効にする
$('.add-cart').prop('disabled', false);
});
});
});
$('.ec-modal-wrap').on('click', function (e) { // モーダル内の処理は外側にバブリングさせない
e.stopPropagation();
});
$('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function () {
$('.ec-modal').hide()
});
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{ Product.name }}",
"image": [
{% for img in Product.ProductImage %}
"{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"
{% if not loop.last %},
{% endif %}
{% else %}
"{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
{% endfor %}
],
"description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
{% if Product.code_min %}
"sku": "{{ Product.code_min }}",
{% endif %}
"offers": {
"@type": "Offer",
"url": "{{ url('product_detail', {'id': Product.id}) }}",
"priceCurrency": "{{ eccube_config.currency }}",
"price":
{{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin|number_format : 0}},
"availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
}
}
</script>
<script>
$(document).ready(function(){
$('#question').fadeOut();
$('#NAIRE').fadeOut();
});
$('#detailNav').click(function() {
$('#detail').slideDown();
$('#NAIRE').slideUp();
$('#question').slideUp();
$(this).addClass('bg-[#F0EFEA]');
$('#naireNav').removeClass('bg-[#F0EFEA]');
$('#questionNav').removeClass('bg-[#F0EFEA]');
});
$('#naireNav').click(function() {
$('#detail').slideUp();
$('#NAIRE').slideDown();
$('#question').slideUp();
$(this).addClass('bg-[#F0EFEA]');
$('#detailNav').removeClass('bg-[#F0EFEA]');
$('#questionNav').removeClass('bg-[#F0EFEA]');
});
$('#questionNav').click(function() {
$('#detail').slideUp();
$('#NAIRE').slideUp();
$('#question').slideDown();
$(this).addClass('bg-[#F0EFEA]');
$('#detailNav').removeClass('bg-[#F0EFEA]');
$('#naireNav').removeClass('bg-[#F0EFEA]');
});
</script>
<script>
$(document).ready(function(){
$('#producer').hide();
$('#delivery').hide();
});
$('#producer_slide').click(function() {
var path = $(this).find("path");
if ( path.attr('d') == "M12 4.5v15m7.5-7.5h-15"){
path.attr('d', 'M6 12h12');
} else {
path.attr('d', 'M12 4.5v15m7.5-7.5h-15');
}
$('#producer').slideToggle();
});
$('#delivery_slide').click(function() {
var path = $(this).find("path");
if ( path.attr('d') == "M12 4.5v15m7.5-7.5h-15"){
path.attr('d', 'M6 12h12');
} else {
path.attr('d', 'M12 4.5v15m7.5-7.5h-15');
}
$('#delivery').slideToggle();
});
</script>
<script>
$(function () {
$("#share-menu-button").on('click', function() {
$("#share-menu").fadeToggle();
copyLinkText('リンクをコピー');
});
// メニュー以外をクリックしたらメニューを閉じる
$(document).on('click', function(event) {
if (!$(event.target).closest('#share-menu-button').length && !$(event.target).closest('#share-menu').length) {
$("#share-menu").fadeOut();
copyLinkText('リンクをコピー');
}
});
});
function copyUrl() {
const url = location.href;
navigator.clipboard.writeText(url);
copyLinkText('コピーしました');
setTimeout(function() {
copyLinkText('リンクをコピー');
}, 2000);
}
function openLineShare() {
const lineUrl = 'https://social-plugins.line.me/lineit/share?url=';
const url = location.href;
window.open(`${lineUrl}${url}`)
}
function openMail() {
const url = location.href;
const mailto = `mailto:?body=${url}`;
window.open(mailto);
}
function copyLinkText(text) {
$("#copy-link > span").text(text);
}
</script>
<script>
$(function () {
var $slide = $('.product-detail__slide');
$slide.find('img').on('click', function(event) {
event.stopPropagation();
event.preventDefault();
});
$slide.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots: false,
focusOnSelect: true,
touchThreshold: 20,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots:false
}
}
]
});
var $navigationParent = $('.product-detail__navigation');
$navigationParent.slick({
infinite: true,
slidesToShow: 5,
touchThreshold: 20,
swipeToSlide: true,
});
var $navigationItem = $('.product-detail__navigation .item');
$navigationItem.each(function (index) {
$(this).attr('data-number', index);
});
$navigationItem.eq(0).addClass('current');
function updateNavigation() {
var currentSlide = $slide.slick('slickCurrentSlide');
$navigationItem.removeClass('current');
$navigationItem.eq(currentSlide).addClass('current');
}
$navigationItem.on('click', function () {
var dataIndex = $(this).attr('data-index');
$navigationParent.slick('slickGoTo', dataIndex, false);
$slide.slick('slickGoTo', dataIndex, false);
$('#current-slide').text(`${dataIndex}`);
updateNavigation();
});
$('.bar-item').on('click', function () {
var dataIndex = $(this).attr('data-index');
$slide.slick('slickGoTo', dataIndex, false);
$navigationParent.slick('slickGoTo', dataIndex, false);
updateNavigation();
});
$('.slick-dots button' ).on('click', function () {
var tabIndex = $(this).text();
$navigationParent.slick('slickGoTo', tabIndex - 1, false);
$('#current-slide').text(`${tabIndex}`);
});
$('.nav-button.left').on('click', function () {
$slide.slick('slickPrev');
$navigationParent.slick('slickPrev');
updateNavigation();
});
$('.nav-button.right').on('click', function () {
$slide.slick('slickNext');
$navigationParent.slick('slickNext');
updateNavigation();
});
var $currentSlide = $('#current-slide');
$slide.on('afterChange', function(event, slick, currentSlide){
$currentSlide.text(currentSlide + 1);
var matchingElement = $('[id=bar_' + $currentSlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
matchingElement.siblings('li').removeClass('!bg-[#B8914B]');
});
function initializeGallery() {
var $gallery = $('.product-detail__gallery');
var $galleryNavigation = $('.product-detail__gallery-navigation .item');
var $currentGallerySlide = $('#current-gallery-slide');
// スライダーを初期化する前に破棄
if ($gallery.hasClass('slick-initialized')) {
$gallery.slick('unslick');
}
$gallery.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
});
$galleryNavigation.each(function(index) {
$(this).attr('data-number', index);
});
$galleryNavigation.eq(0).addClass('current');
$galleryNavigation.on('click', function() {
var number = $(this).attr('data-number');
$gallery.slick('slickGoTo', number, false);
updateGalleryNavigation();
});
$('.nav-button.left').on('click', function() {
$gallery.slick('slickPrev');
updateGalleryNavigation();
});
$('.nav-button.right').on('click', function() {
$gallery.slick('slickNext');
updateGalleryNavigation();
});
$gallery.on('afterChange', function(event, slick, currentSlide) {
$currentGallerySlide.text(currentSlide + 1);
var matchingElement = $('[id=bar_' + $currentGallerySlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
matchingElement.siblings('li').removeClass('!bg-[#B8914B]');
});
function updateGalleryNavigation() {
var currentSlide = $gallery.slick('slickCurrentSlide');
$galleryNavigation.removeClass('current');
$galleryNavigation.eq(currentSlide).addClass('current');
}
}
initializeGallery();
// セクションの表示・非表示を切り替える
const sections = [
{ addIcon: '#addIcon', removeIcon: '#removeIcon', details: '#productDetails' },
{ addIcon: '#addSpecIcon', removeIcon: '#removeSpecIcon', details: '#productSpecs' },
{ addIcon: '#addGalleryIcon', removeIcon: '#removeGalleryIcon', details: '#productGalleries', initialize: initializeGallery },
{ addIcon: '#addNoteIcon', removeIcon: '#removeNoteIcon', details: '#notes' }
];
function toggleIcons(section) {
if ($(window).width() <= 768) {
$(section.details).hide();
$(section.addIcon).show();
$(section.removeIcon).hide();
} else {
$(section.details).show();
$(section.addIcon).hide();
$(section.removeIcon).hide();
}
}
sections.forEach(section => {
toggleIcons(section);
});
$('h3').on('click', function () {
// 配下のiconがaddIconかremoveIconであれば、クリック時にtoggleする
const $icon = $(this).find('img');
if ($icon.length > 0) {
const iconId = $icon.attr('id');
const section = sections.find(section => section.addIcon === `#${iconId}` || section.removeIcon === `#${iconId}`);
if (section) {
if ($(section.details).is(':visible')) {
$(section.details).fadeOut();
$(section.removeIcon).hide();
$(section.addIcon).show();
} else {
$(section.details).fadeIn();
$(section.addIcon).hide();
$(section.removeIcon).show();
if (section.initialize) {
section.initialize();
}
}
}
}
});
$(window).on('resize', function() {
sections.forEach(section => toggleIcons(section));
});
});
</script>
<script>
{# ページネーションをクリックしたときにslickGoToするように #}
$(function () {
var $slide = $('.product-spec-detail__slide');
var $navigation = $('.product-spec-detail__navigation .item');
var $currentSlide = $('#current-spec-slide');
$slide.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots: false,
focusOnSelect: true,
touchThreshold: 20,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}
}
]
});
$navigation.each(function (index) {
$(this).attr('data-number', index);
});
$navigation.eq(0).addClass('current');
$navigation.on('click', function () {
var number = $(this).attr('data-number');
$slide.slick('slickGoTo', number, false);
updateNavigation();
});
$('.spec-nav-button.left').on('click', function () {
$slide.slick('slickPrev');
updateNavigation();
});
$('.spec-nav-button.right').on('click', function () {
$slide.slick('slickNext');
updateNavigation();
});
var matchingElement = $('[id=spec-bar_' + $currentSlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
$slide.on('afterChange', function(event, slick, currentSlide){
$currentSlide.text(currentSlide + 1);
var matchingElement = $('[id=spec-bar_' + $currentSlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
matchingElement.siblings('li').removeClass('!bg-[#B8914B]');
});
function updateNavigation() {
var currentSlide = $slide.slick('slickCurrentSlide');
$navigation.removeClass('current');
$navigation.eq(currentSlide).addClass('current');
}
});
</script>
<script>
$(function () {
var $slide = $('.product-naire-detail__slide');
$slide.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots: false,
focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}
}
]
});
var $navigation = $('.product-naire-detail__navigation .item');
$navigation.each(function (index) {
$(this).attr('data-number', index);
});
$navigation.eq(0).addClass('current');
$navigation.on('click', function () {
var number = $(this).attr('data-number');
$slide.slick('slickGoTo', number, false);
updateNavigation();
});
$('.naire-nav-button.left').on('click', function () {
$slide.slick('slickPrev');
updateNavigation();
});
$('.naire-nav-button.right').on('click', function () {
$slide.slick('slickNext');
updateNavigation();
});
var $currentSlide = $('#current-naire-slide');
var matchingElement = $('[id=naire-bar_' + $currentSlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
$slide.on('afterChange', function(event, slick, currentSlide){
$currentSlide.text(currentSlide + 1);
var matchingElement = $('[id=naire-bar_' + $currentSlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
matchingElement.siblings('li').removeClass('!bg-[#B8914B]');
});
function updateNavigation() {
var currentSlide = $slide.slick('slickCurrentSlide');
$navigation.removeClass('current');
$navigation.eq(currentSlide).addClass('current');
}
});
</script>
<script>
$(document).ready(function () {
$('.slider').slick({
dots: true,
dotsClass: "slick-dots",
variableWidth: true,
centerMode: true,
autoplay: true,
autoplaySpeed: 7000,
speed: 1500,
focusOnSelect: true,
infinite: true
});
});
$(document).ready(function () {
$('.relate-feature-slider').slick({
dots: true,
dotsClass: "slick-dots",
variableWidth: true,
centerMode: true,
autoplay: true,
autoplaySpeed: 7000,
speed: 1500,
focusOnSelect: true,
infinite: true
});
});
</script>
<script>
$(function () {
const posts = $ (`.movie_post`);
const showMoreButton = $ (`#movie_show_more`);
let visibleCount = 8;
// 初期表示
posts.slice(0, visibleCount).removeClass('hidden');
showMoreButton.on('click', function () {
visibleCount += 4;
posts.slice(0, visibleCount).removeClass('hidden');
// すべて表示したらボタンを隠す
if (visibleCount >= posts.length) {
showMoreButton.addClass('hidden');
}
});
// 初期状態でボタンを非表示にするか確認
if (visibleCount >= posts.length) {
showMoreButton.addClass('hidden');
}
});
$(function () {
var $slide = $('.product-movie__slide');
var $navigation = $('.product-movie__navigation .movie_item');
$slide.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots:false ,
focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}
}
]
});
var $navigationParent = $('.product-movie__navigation');
$navigationParent.slick({
infinite: true,
slidesToShow: 5,
});
$navigation.each(function (index) {
$(this).attr('data-number', index);
});
$navigation.eq(0).addClass('current');
$navigation.on('click', function () {
var dataIndex = $(this).attr('data-index');
$slide.slick('slickGoTo', dataIndex, false);
$navigationParent.slick('slickGoTo', dataIndex, false);
updateMovieNavigation();
});
$('.gallery-bar').on('click', function () {
var dataIndex = $(this).attr('data-index');
$slide.slick('slickGoTo', dataIndex, false);
$navigationParent.slick('slickGoTo', dataIndex, false);
updateMovieNavigation();
});
$('.movie-nav-button.left').on('click', function () {
$slide.slick('slickPrev');
$navigationParent.slick('slickPrev');
updateMovieNavigation();
});
$('.movie-nav-button.right').on('click', function () {
$slide.slick('slickNext');
$navigationParent.slick('slickNext');
updateMovieNavigation();
});
var $currentSlide = $('#current-movie-slide');
var matchingElement = $('[id=bar_' + $currentSlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
$slide.on('afterChange', function(event, slick, currentSlide){
$currentSlide.text(currentSlide + 1);
var matchingElement = $('[id=bar_' + $currentSlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
matchingElement.siblings('li').removeClass('!bg-[#B8914B]');
});
function updateMovieNavigation() {
var currentSlide = $slide.slick('slickCurrentSlide');
$navigation.removeClass('current');
$navigation.eq(currentSlide).addClass('current');
}
function initializeGallery() {
var $gallery = $('.product-movie__gallery');
var $galleryNavigation = $('.product-movie__gallery-navigation .movie');
var $currentGallerySlide = $('#current-movie-slide');
// スライダーを初期化する前に破棄
if ($gallery.hasClass('slick-initialized')) {
$gallery.slick('unslick');
}
$gallery.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
});
$galleryNavigation.each(function(index) {
$(this).attr('data-number', index);
});
$galleryNavigation.eq(0).addClass('current');
$galleryNavigation.on('click', function() {
var number = $(this).attr('data-number');
$gallery.slick('slickGoTo', number, false);
updateMovieNavigation();
});
$('.movie-nav-button.left').on('click', function() {
$gallery.slick('slickPrev');
updateMovieNavigation();
});
$('.movie-nav-button.right').on('click', function() {
$gallery.slick('slickNext');
updateMovieNavigation();
});
$gallery.on('afterChange', function(event, slick, currentSlide) {
console.log(currentSlide);
$currentGallerySlide.text(currentSlide + 1);
var matchingElement = $('[id=bar_' + $currentGallerySlide.text() + ']');
matchingElement.addClass('!bg-[#B8914B]');
matchingElement.siblings('li').removeClass('!bg-[#B8914B]');
});
function updateMovieNavigation() {
var currentSlide = $gallery.slick('slickCurrentSlide');
$galleryNavigation.removeClass('current');
$galleryNavigation.eq(currentSlide).addClass('current');
}
}
});
</script>
<script>
$(function () {
$('#classcategory_id1').on('change', function (event) {
selectImage($(this));
$price = $('.ec-price__price').text();
$price = $price.replace(/¥|円/g, '');
$('.ec-price__price').text($price);
if ($('#productoption1').find('option:selected').text() == "選択してください" || $(this).find('option:selected').text() == "選択してください") {
$('.add-cart').attr('disabled', true);
};
});
{% if Product.hasProductClass and Product.className2 is defined %}
$('#classcategory_id2').on('change', function (event) {
selectImage($(this));
});
{% endif %}
});
async function selectImage($selector) {
var classcategory_id = Number($selector.val());
const classCategories = {{ class_categories_as_json(Product)|raw }};
var classCategory = null;
var classcategory_id1 = Number($('#classcategory_id1').val());
var classcategory_id2 = Number($('#classcategory_id2').val());
if (classcategory_id2) {
classCategory = classCategories[classcategory_id1][`#${classcategory_id2}`];
} else {
classCategory = classCategories[classcategory_id1]['#'];
}
// 画像が存在する場合は画像を切り替える
if (classCategory.color_image_file_name) {
$('.product-detail__navigation .item').each(function () {
if ($(this).attr('src').includes(classCategory.color_image_file_name)) {
$(this).click();
}
});
}
}
</script>
{% endblock %}
{% block main %}
<div>
<div id="heading" class="mt-10 md:mt-5 mb-16 max-w-[1120px] mx-auto flex flex-col text-[#2F2725] md:text-[14px] xl:w-full md:mb-5">
<div class="max-w-[1120px] w-full mx-auto xl:px-8 mb-16 md:mb-10">
{% for Category in Product.ProductCategories %}
{% if Category.category_id in parentCategoryIds %}
<ul id="breadcrumbs" class="border-[#EFEFEF] py-2 w-full md:text-xs text-sm tracking-widest flex items-center gap-x-1">
<li>
<a href="{{ url('homepage') }}" class="hover">
<span>HOME</span>
</a>
</li>
<span>/</span>
{# 大カテゴリ #}
<li class="flex gap-y-1">
<a href={{ url('product_list') }}?category_id={{ Category.Category.id }} class="hover">
{{Category.Category.name}}
</a>
</li>
<span>/</span>
{# 中カテゴリ #}
{% for children in Category.Category.children %}
{% if children.id in ProductCategoryIds %}
<li>
<a href={{ url('product_list') }}?category_id={{ children.id }} class="hover">
<span>{{children.name}}</span>
</a>
</li>
<span>/</span>
{% endif %}
{% endfor %}
{# 商品名 #}
<li>
<span>{{ Product.name }}</span>
</li>
</ul>
{% endif %}
{% endfor %}
</div>
<div class="flex text-sm gap-[60px] xl:flex-col xl:items-center xl:px-7 xl:gap-5">
<div class="w-[630px] relative md:w-[315px]">
{% if Product.ProductImage is not null %}
<div class="product-detail__slide-container relative">
<div class="nav-button left cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full left-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
</svg>
</div>
<div class="product-detail__slide relative w-full m-0 p-0 md:mx-auto md:w-[315px] md:h-[315px]">
{% for ProductImage in Product.ProductImage %}
<a href="{{ asset(ProductImage, 'save_image') }}" data-lightbox="image-{{ loop.index }}" class="item relative h-[630px] md:h-[315px]">
<img class="absolute top-0 bottom-0 right-0 left-0 w-full md:h-[327px] rounded-md" src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}">
</a>
{% endfor %}
</div>
<div class="nav-button right cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full right-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</div>
</div>
<div class="product-detail__navigation flex overflow-hidden mt-5 md:mt-2.5">
{% for ProductImage in Product.ProductImage %}
<img class="item w-[130px] h-[130px] hover mb-2 cursor-pointer md:w-[65px] md:h-[65px]" src="{{ asset(ProductImage, 'save_image') }}" alt="" data-index="{{ loop.index - 1 }}">
{% endfor %}
</div>
{% if Product.ProductImage|length > 0 %}
<div class="flex items-center justify-between">
<ul class="flex w-[70%]">
{% for i in range(1, Product.ProductImage|length) %}
<li id="bar_{{ i }}" class="bar-item" data-index={{ i }}></li>
{% endfor %}
</ul>
<div class="current-slide-indicator font-notoserif text-right text-sm w-[10%]">
<span id="current-slide" class="mx-0">1</span>/<span id="total-slides">{{ Product.ProductImage|length }}</span>
</div>
</div>
{% endif %}
{% endif %}
</div>
<div class="flex flex-col md:items-center w-[430px] lg:w-full">
{# 商品名 #}
<div class="mb-7 lg:w-full md:mb-4">
<div class="flex gap-[5%] lg:gap-6 lg:flex-col-reverse">
<div class="flex flex-col w-[90%] lg:w-full lg:items-center">
<p class="text-lg md:text-xs font-light tracking-wider md:text-center mb-1">
{{Product.name_kana}}
</p>
<h2 class="text-[42px] md:text-xl font-light tracking-[0.2em] mb-3 md:mb-2 leading-snug">
{{ Product.name }}
</h2>
{% if Categories['Category'] %}
<p class="w-fit text-base sm:text-xs border border-[#AFAFAF] text-center py-1 px-3">{{ Categories['Category'].getName() }}</p>
{% endif %}
</div>
<div class="flex gap-3 lg:ml-auto">
<div class="relative">
<button id="share-menu-button" type="button">
<img src="{{ asset('assets/icon/share-menu.svg') }}" alt="share menu" class="w-[24px] h-[24px] md:w-5 md:h-5 hover">
</button>
<ul id="share-menu" class="hidden absolute -right-4 top-8 bg-white rounded-md w-[140px] border-gray border-[1px] shadow-xl
before:block before:absolute before:content-[''] before:-top-[6px] before:right-[15px]
before:w-3 before:h-3 before:bg-white
before:border-t before:border-l before:border-gray
before:rotate-45 before:z-10">
<li class="hover cursor-pointer flex items-center gap-2 p-2 border-gray border-b-[1px] last:border-b-0" onclick="openLineShare()">
<img class="h-4 w-4" src="{{ asset('assets/icon/LINE_LOGO.svg') }}"/>LINE
</li>
<li class="hover cursor-pointer flex items-center gap-2 p-2 border-gray border-b-[1px] last:border-b-0" onclick="openMail()">
<img class="h-4 w-4" src="{{ asset('assets/icon/mail.svg') }}"/>Eメール
</li>
<li id="copy-link" class="hover cursor-pointer flex items-center gap-2 p-2 border-gray border-b-[1px] last:border-b-0" onclick="copyUrl()">
<img class="h-4 w-4" src="{{ asset('assets/icon/link_share.svg') }}"/><span>リンクをコピー</span>
</li>
</ul>
</div>
{% if BaseInfo.option_favorite_product %}
{% if is_favorite == false %}
<form action="{{ url('product_add_favorite', { id: Product.id} ) }}" method="post" class="w-6 h-6 md:w-5 md:h-5">
<button class="hover" type="submit" id="favorite" class="">
<img src="{{asset('assets/icon/favorite-off.svg')}}" alt="favorite off" class="w-6 h-6 md:w-5 md:h-5">
</button>
</form>
{% else %}
<a class="block hover" href="{{ url('mypage_favorite_delete', { id : Product.id, redirect_path: 'product_detail', product_id: Product.id }) }}" {{ csrf_token_for_anchor() }} data-method="delete">
<img src="{{ asset('assets/icon/favorite-on.svg') }}" alt="favorite on" class="w-6 h-6 md:w-5 md:h-5">
</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
{% if Product.description_detail %}
<p class="mb-5 text-base md:text-sm md:text-center leading-7 lg:mb-3 tracking-[0.2em] font-extralight">{{ Product.description_detail|raw|nl2br }}</p>
{% endif %}
<div class="flex gap-2 mb-3">
{% for ProductClass in Product.ProductClasses %}
<hr style="background-color:{{ProductClass.color_code}}" class="rounded-full w-4 h-4"></hr>
{% endfor %}
</div>
{# 販売価格 #}
<div class="mb-5 flex flex-col md:mb-5">
{% if Product.hasProductClass -%}
{% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
<div class="ec-price">
<span class="ec-price__price price02-default text-[32px] font-light leading-normal md:text-2xl">{{ Product.getPrice02IncTaxMin|number_format }}</span>
<span class="text-sm font-medium">円(税込)</span>
</div>
{% else %}
<div class="ec-price">
<span class="ec-price__price price02-default text-[32px] font-light leading-normal md:text-2xl">{{ Product.getPrice02IncTaxMin|number_format }}
～
{{ Product.getPrice02IncTaxMax|number_format }}</span>
<span class="text-sm font-medium">円(税込)</span>
</div>
{% endif %}
{% else %}
<div class="ec-price">
<span class="ec-price__price price02-default text-[32px] ">{{ Product.getPrice02IncTaxMin|number_format }}</span>
<span class="text-sm font-medium">円(税込)</span>
</div>
{% endif %}
</div>
{% if Product.is_cart_button %}
<p class="text-base md:text-sm leading-7">
こちらの商品は、デザインや仕様上、<br/>
アドバイザーが直接ご案内をさせていただきます。<br/>
下記よりご連絡をお願いいたします。
</p>
{% else %}
<form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1" class="w-full flex flex-col gap-4">
{% if Product.stock_find %}
<div class="flex flex-col gap-3 text-sm xl:gap-[10px]">
{% if form.classcategory_id1 is defined %}
<div class="flex justify-between items-center">
<p class="flex-1 font-medium my-0">カラー</p>
<div class="flex-[4]">
{{ form_widget(form.classcategory_id1, { 'attr': { 'class': 'w-full bg-manakaBeige rounded px-4 py-3 border border-[#E2DFD6]' } })}}
{{ form_errors(form.classcategory_id1) }}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if form.productoption1 is defined %}
<div class="ec-select_inner_container flex justify-between items-center">
{{ form_label(form.productoption1, null, { label_attr: { class: 'flex-1 font-medium my-0' } }) }}
<div class="flex-[4]">
{{ form_widget(form.productoption1, { 'attr': { 'class': 'w-full bg-manakaBeige rounded px-4 py-3 border border-[#E2DFD6]' } })}}
{{ form_errors(form.productoption1) }}
</div>
</div>
{% endif %}
{% if form[productOption] is defined %}
<input
type="hidden" id="{{ form[productOption].vars.id }}"
name="{{ field_name(form[productOption]) }}"
value="{{ field_value(form[productOption]) }}"
>
<div
id="naire-method"
class="hidden"
>
名入れ方法: <span class="naire-method-name underline mr-3 hover" onclick="$('.naire-modal').fadeIn();return false;"></span>
<button class="border border-[#2D969B] text-[#2D969B] py-2 px-4 rounded-[3px] hover md:ml-auto md:mt-4" onclick="$('.naire-modal').fadeIn();return false;">選択し直す</button>
</div>
{% endif %}
{# MEMO: 家景牌のみ名入れ枚数というプルダウンを持つ #}
{% if form[productOptionSecond] is defined %}
<input
type="hidden" id="{{ form[productOptionSecond].vars.id }}"
name="{{ field_name(form[productOptionSecond]) }}"
value="{{ field_value(form[productOptionSecond]) }}"
>
<div
id="naire-method-second"
class="hidden"
>
２枚目　　: <span class="naire-method-second-name underline mr-3 hover" onclick="$('.naire-modal-second').fadeIn();return false;"></span>
<button class="border border-[#2D969B] text-[#2D969B] py-2 px-4 rounded-[3px] hover md:ml-auto md:mt-4" onclick="$('.naire-modal-second').fadeIn();return false;">選択し直す</button>
</div>
{% endif %}
{% if form[productOptionSecond] is defined %}
<div id="naire-unit" class="flex justify-between items-center">
<p class="flex-1 font-medium my-0">名入れ枚数</p>
<div class="flex-[4]">
<select id="naire-unit-sheets" class="w-full bg-manakaBeige rounded px-4 py-3 border border-[#E2DFD6]">
<option value="1">1枚</option>
<option value="2">2枚(+8250円税込)</option>
</select>
{{ form_errors(form[productOptionSecond]) }}
</div>
</div>
{% endif %}
<button type="submit" class="add-cart hover text-sm tracking-wider w-full bg-[#2D969B] text-white disabled:opacity-30 py-4 rounded-[3px] flex gap-2 items-center justify-center mt-[10px]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewbox="0 0 20 21" fill="none">
<mask id="mask0_4374_3496" style="mask-type:alpha" maskunits="userSpaceOnUse" x="0" y="0" width="20" height="21">
<rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_4374_3496)">
<path d="M6.09008 18.0961C5.73858 18.0961 5.44237 17.9756 5.20145 17.7347C4.96052 17.4938 4.84005 17.1976 4.84005 16.8461C4.84005 16.4946 4.96052 16.1984 5.20145 15.9575C5.44237 15.7165 5.73858 15.5961 6.09008 15.5961C6.44156 15.5961 6.73777 15.7165 6.9787 15.9575C7.21962 16.1984 7.34008 16.4946 7.34008 16.8461C7.34008 17.1976 7.21962 17.4938 6.9787 17.7347C6.73777 17.9756 6.44156 18.0961 6.09008 18.0961ZM13.9106 18.0961C13.5591 18.0961 13.2629 17.9756 13.022 17.7347C12.781 17.4938 12.6606 17.1976 12.6606 16.8461C12.6606 16.4946 12.781 16.1984 13.022 15.9575C13.2629 15.7165 13.5591 15.5961 13.9106 15.5961C14.2621 15.5961 14.5583 15.7165 14.7992 15.9575C15.0401 16.1984 15.1606 16.4946 15.1606 16.8461C15.1606 17.1976 15.0401 17.4938 14.7992 17.7347C14.5583 17.9756 14.2621 18.0961 13.9106 18.0961ZM4.90097 5.08325L7.12533 9.76273H12.6542C12.7503 9.76273 12.8358 9.7387 12.9106 9.69063C12.9854 9.64254 13.0495 9.57577 13.1029 9.49031L15.2824 5.53196C15.3465 5.41445 15.3518 5.31029 15.2984 5.21948C15.245 5.12866 15.1542 5.08325 15.026 5.08325H4.90097ZM4.49391 4.24992H15.3433C15.7055 4.24992 15.9779 4.39762 16.1606 4.69302C16.3433 4.98843 16.3529 5.29265 16.1894 5.60569L13.808 9.94544C13.6873 10.1484 13.5305 10.3076 13.3377 10.423C13.1448 10.5384 12.933 10.5961 12.7022 10.5961H6.75033L5.73751 12.455C5.65204 12.5833 5.64937 12.7221 5.72949 12.8717C5.80962 13.0213 5.92981 13.0961 6.09008 13.0961H15.1606V13.9294H6.09008C5.60396 13.9294 5.24125 13.7246 5.00193 13.3148C4.76261 12.9051 4.75674 12.4935 4.9843 12.08L6.23749 9.84607L3.17339 3.41659H1.66699V2.58325H3.70224L4.49391 4.24992Z" fill="white"/>
</g>
</svg>
かごへ追加
</button>
<div class="hidden">
{{ form_row(form.quantity) }}
{{ form_errors(form.quantity) }}
{{ form_row(form.ProductClass) }}
{{ form_errors(form.ProductClass) }}
</div>
</div>
{% endif %}
</form>
</div>
</div>
</div>
<nav class="flex gap-6 justify-center mb-12 xl:mx-auto md:flex-col md:gap-2 md:mb-9">
<a href={{url("user_data",{"route": "showroom"} )}} class="text-manakaGold underline md:text-sm text-center hover">
銀座・横浜ショールームをご案内 >
</a>
<a href=" {{url('contact')}}" class="text-manakaGold underline md:text-sm text-center hover">
お問い合わせ・資料請求はこちら >
</a>
</nav>
{# ページ内リンク #}
<div class="w-[750px] flex items-center mx-auto bg-manakaBeige rounded-md md:rounded-none xl:w-full">
<a href="#concept" class="flex md:flex-col w-1/4 py-7 md:py-[14px] hover items-center justify-center">
<p class="w-full text-center border-r md:text-xs tracking-[4px] ml-1">
コンセプト
<br class="hidden md:block"/>
<i class="fas fa-chevron-down fa-xs mt-1" style="color: #222222;"></i>
</p>
</a>
<a href="#feature" class="flex md:flex-col w-1/4 py-7 md:py-[14px] hover items-center justify-center">
<p class="w-full text-center border-r md:text-xs tracking-[4px] ml-1">
特徴
<br class="hidden md:block"/>
<i class="fas fa-chevron-down fa-xs mt-1" style="color: #222222;"></i>
</p>
</a>
<a href="#movie" class="flex md:flex-col w-1/4 py-7 md:py-[14px] hover items-center justify-center">
<p class="w-full text-center border-r md:text-xs tracking-[4px] ml-1">
写真
<br class="hidden md:block"/>
<i class="fas fa-chevron-down fa-xs mt-1" style="color: #222222;"></i>
</p>
</a>
<a href="#spec" class="flex md:flex-col w-1/4 py-7 md:py-[14px] hover items-center justify-center">
<p class="w-full text-center md:text-xs tracking-[4px] ml-1">
商品仕様
<br class="hidden md:block"/>
<i class="fas fa-chevron-down fa-xs mt-1" style="color: #222222;"></i>
</p>
</a>
</div>
<div class="w-full max-w-[1152px] mx-auto px-6 mb-20 xl:max-w-none font-extralight">
{# コンセプト #}
{% if Product.concept_file_name_pc %}
<section id="concept" class="flex flex-col py-16 border-b border-manakaBeige lg:py-8">
<div class="flex justify-between mb-6 lg:mb-3">
<h2 class="text-[40px] md:text-xl text-start tracking-[0.2em]">コンセプト</h2>
<img src={{asset("assets/img/detail/leaf.png")}} alt="装飾の画像" class="h-[80px] lg:hidden"/>
</div>
<div class="flex gap-16 lg:flex-col lg:items-center lg:gap-4">
<img src={{asset(Product.concept_file_name_pc,'save_image')}} alt="{{Product.concept_alt_text}}" class="w-[630px] h-[430px] rounded-md lg:hidden"/>
<img src={{asset(Product.concept_file_name_sp,'save_image')}} alt="{{Product.concept_alt_text}}" class="w-full rounded-md hidden lg:block"/>
<div class="flex flex-col">
<h3 class="text-3xl md:text-lg tracking-[0.2em] leading-normal md:mb-3 mb-6">{{ Product.concept_caption|raw|nl2br }}</h3>
<p class="leading-[1.875em] md:leading-[1.875em] md:text-xs">{{ Product.concept_content|raw|nl2br }}</p>
<img src={{asset("assets/img/detail/leaf.png")}} alt="装飾の画像" class="hidden lg:block ml-auto w-[60px] h-10"/>
</div>
</div>
</section>
{% endif %}
{# 特徴 #}
{% if Product.ProductFeatures is not null %}
<section id="feature" class="flex flex-col py-16 border-b border-manakaBeige lg:py-8 lg:max-w-[630px] mx-auto">
<div class="flex justify-between mb-6 lg:mb-3">
<h2 class="text-[40px] md:text-xl tracking-[0.2em]">特徴</h2>
</div>
<div class="flex flex-col gap-16 md:gap-10">
{% for ProductFeature in Product.ProductFeatures %}
<div class="flex even:flex-row-reverse lg:even:flex-col gap-16 items-center lg:gap-3 lg:flex-col lg:mx-auto">
<h3 class="text-3xl md:text-lg lg:text-left hidden lg:block w-full tracking-[0.2em]">{{ProductFeature.caption|raw|nl2br}}</h3>
{% if ProductFeature.file_name %}
<img src={{asset(ProductFeature.file_name, 'save_image')}} alt="{{ProductFeature.alt_text}}" class="w-[630px] h-[630px] rounded-md lg:w-full md:h-[315px]"/>
{% endif %}
<div class="flex flex-col gap-6 lg:gap-3">
<h3 class="text-3xl tracking-[0.2em] leading-[40px] md:text-lg lg:text-left lg:hidden">{{ProductFeature.caption|raw|nl2br}}</h3>
<p class="leading-[1.875em] md:leading-[1.875em] md:text-xs">{{ProductFeature.content|raw|nl2br}}</p>
</div>
</div>
{% endfor %}
</div>
{% if Product.audio_file_name %}
<div class="flex lg:flex-col items-center gap-4 border border-[#E2DFD6] p-3">
<p class="text-center w-1/3 md:w-full md:text-xs tracking-widest md:text-start">{{Product.audio_text}}</p>
<audio controls src="{{ asset(Product.audio_file_name, 'temp_image') }}" class="w-2/3 mx-auto md:w-full">商品の音声</audio>
</div>
{% endif %}
</section>
{% endif %}
{# 写真 (ムービーアンドギャラリー) #}
{% if Product.ProductGalleries is not null %}
<section id="movie" class="flex flex-col order-b border-manakaBeige py-16 lg:py-8">
<h2 class="text-[40px] md:text-xl font-light mb-4 lg:mb-3 tracking-[0.2em]">写真</h2>
<div class="flex items-center gap-5 flex-wrap justify-center md:gap-3 md:hidden">
{% for image in Product.ProductGalleries %}
<img src="{{asset(image.file_name, 'save_image')}}" class="movie_post hidden w-[260px] h-[260px] rounded-xl md:w-[157px] md:h-[157px]"/>
{% endfor %}
</div>
<div class="w-[630px] relative lg:w-full hidden md:block">
<div class="product-movie__slide-container relative">
<div class="movie-nav-button left cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full left-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
</svg>
</div>
<div class="product-movie__slide relative w-full m-0 p-0 md:w-[327px] md:h-[327px]">
{% for image in Product.ProductGalleries %}
<img src="{{asset(image.file_name, 'save_image')}}" alt="{{image.alt_text}}" class="movie_item absolute top-0 rounded-md bottom-0 right-0 left-0 object-cover w-full h-[630px] md:w-[327px] md:h-[327px] lg:left-1/2 lg:translate-x-[-50%]"/>
{% endfor %}
</div>
<div class="movie-nav-button right cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full right-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</div>
</div>
<div class="product-movie__navigation flex overflow-hidden mt-5 md:mt-2.5">
{% for image in Product.ProductGalleries %}
<img class="movie_item w-[130px] h-[130px] hover mb-2 cursor-pointer md:w-[65px] md:h-[65px]" src="{{ asset(image.file_name, 'save_image') }}" alt="" data-index="{{ loop.index - 1 }}"/>
{% endfor %}
</div>
{% if Product.ProductGalleries|length > 0 %}
<div class="flex items-center justify-between">
<ul class="flex w-[70%]">
{% for i in range(1, Product.ProductGalleries|length) %}
<li id="bar_{{ i }}" class="gallery-bar gallery-bar-item hover" data-index={{ i - 1 }}></li>
{% endfor %}
</ul>
<div class="current-movie-indicator font-notoserif text-right text-sm mt-2 w-[10%]">
<span id="current-movie-slide" class="mx-0">1</span>/<span id="total-movie">{{ Product.ProductGalleries|length }}</span>
</div>
</div>
{% endif %}
</div>
<button id="movie_show_more" type="button" class="w-[430px] sm:w-full text-sm py-5 border border-black rounded-md mx-auto md:hidden mt-7 mb-10">
＋続きを見る
</button>
{% if Product.ProductMovies %}
<div class="mt-10 flex flex-col gap-4">
{% for movie in Product.ProductMovies %}
<iframe src={{movie.url}} title="YouTube video player" class="w-full h-[430px] lg:h-[215px]"></iframe>
{% endfor %}
</div>
{% endif %}
</section>
{% endif %}
{# 商品仕様 #}
{% if Product.ProductSpecs %}
<section id="spec" class="flex flex-col py-16 lg:py-4">
<h2 class="text-[40px] md:text-xl mb-6 lg:mb-3 tracking-[0.2em]">商品仕様</h2>
<nav id="productDetailNav" class="flex items-center mb-10 md:mb-5">
{% if Product.ProductSpecs %}
<button id="detailNav" class="w-full border border-[#E2DFD6] bg-[#F0EFEA] py-3 hover -mr-[1px] md:h-[50px] md:py-0 flex items-center justify-center tracking-wider">詳細</button>
{% endif %}
{% if Product.ProductNaireImages %}
<button id="naireNav" class="w-full border border-[#E2DFD6] py-3 hover md:h-[50px] -mr-[1px] md:py-0 flex items-center justify-center tracking-wider">名入れ</button>
{% endif %}
{% if Product.ProductFaqs %}
<button id="questionNav" class="w-full border border-[#E2DFD6] py-3 hover md:py-0 md:h-[50px] sm:text-sm flex items-center justify-center tracking-wider">よくある<br class="hidden md:block">ご質問</button>
{% endif %}
</nav>
{# 商品詳細(画像) #}
{% if Product.ProductDetailImages is not null %}
<section id="detail" class="flex gap-14 lg:flex-col lg:justify-center md:gap-6">
<div class="w-[630px] lg:w-full">
<div class="product-spec-detail__slide-container relative">
<div class="spec-nav-button left cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full left-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
</svg> </div>
<div class="product-spec-detail__slide relative m-0 p-0">
{% for ProductImage in Product.ProductDetailImages %}
<div class="item relative h-[630px] md:w-[315px] md:h-[315px]">
<img class="absolute top-0 bottom-0 right-0 left-0 object-cover w-full h-[630px] md:w-[315px] md:h-[315px] lg:left-1/2 lg:translate-x-[-50%]" src="{{ asset(ProductImage.file_name, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}">
</div>
{% endfor %}
</div>
<div class="spec-nav-button right cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full right-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</div>
</div>
{% if Product.ProductDetailImages|length > 0 %}
<div class="flex items-center justify-between mt-2">
<ul class="flex w-[70%]">
{% for i in range(1, Product.ProductDetailImages|length) %}
<li id="spec-bar_{{ i }}" class="detail-image-bar-item"></li>
{% endfor %}
</ul>
<div class="current-slide-indicator font-notoserif text-right text-sm mt-[-8px] w-[10%]">
<span id="current-spec-slide" class="mx-0">1</span>/<span id="total-slides">{{ Product.ProductDetailImages|length }}</span>
</div>
</div>
{% endif %}
</div>
<div class="w-[430px] flex flex-col justify-between lg:mx-auto lg:w-full">
<ul class="flex flex-col lg:justify-center mb-6">
{% for spec in Product.ProductSpecs %}
<li class="flex py-7 md:py-6 pr-4 md:pr-0 border-b border-manakaBeige">
<p class="w-1/4 text-sm ">
{{spec.title}}
</p>
<p class="w-3/4 text-sm tracking-widest leading-6">
{{spec.content|raw|nl2br}}
</p>
</li>
{% endfor %}
</ul>
<a href="#heading" class="w-full border border-[#2D969B] text-center text-[#2D969B] text-sm py-5 tracking-wider rounded-md lg:py-4 hover">
<span class="text-lg font-bold">↑</span>
かごへ戻る
</a>
</div>
</section>
{% endif %}
{# 名入れ #}
{# MEMO: idの値を小文字にするとセレクタが機能しなかった為、大文字にしてある #}
{% if Product.ProductNaireImages|length > 0 %}
<section id="NAIRE" class="flex gap-6 lg:flex-col">
<div class="w-[630px] lg:w-full">
<div class="product-naire-detail__slide-container relative">
<div class="naire-nav-button left cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full left-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
</svg>
</div>
<div class="product-naire-detail__slide relative m-0 p-0 h-[630px] md:w-[315px] md:h-[315px] md:mx-auto">
{% for ProductImage in Product.ProductNaireImages %}
<img class="item absolute top-0 bottom-0 right-0 left-0 object-cover w-full h-[630px] md:w-[315px] md:h-[315px] lg:left-1/2 lg:translate-x-[-50%]" src="{{ asset(ProductImage.file_name, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}"></img>
{% endfor %}
</div>
<div class="naire-nav-button right cursor-pointer absolute top-2/4 z-10 w-[20px] h-[20px] flex text-center items-center justify-center rounded-full right-2 hover">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</div>
</div>
{% if Product.ProductNaireImages|length > 0 %}
<div class="flex items-center justify-between">
<ul class="flex w-[70%]">
{% for i in range(1, Product.ProductNaireImages|length) %}
<li id="naire-bar_{{ i }}" class="naire-bar-item" data-number={{ i }}></li>
{% endfor %}
</ul>
<div class="current-slide-indicator font-notoserif text-right text-sm mt-2 w-[10%]">
<span id="current-naire-slide" class="mx-0">1</span>/<span id="total-slides">{{ Product.ProductNaireImages|length }}</span>
</div>
</div>
{% endif %}
</div>
<div class="w-[430px] flex flex-col lg:mx-auto lg:w-full">
<div class="flex flex-col mb-6">
<div class="flex">
<p class="text-sm tracking-widest leading-6">
{{ Product.naire_content|raw|nl2br }}
</p>
</div>
</div>
<a href="#heading" class="w-full border border-[#2D969B] text-center text-[#2D969B] text-sm py-5 tracking-wider rounded-md lg:py-4 hover">
<span class="text-lg font-bold">↑</span>
かごへ戻る
</a>
</div>
</section>
{% endif %}
{# よくあるご質問 #}
{% if Product.ProductFaqs is not null %}
<section id="question">
<ul class="flex flex-col">
{% for faq in Product.ProductFaqs %}
<li class="flex flex-col gap-5 py-10 md:py-5 border-b-2 border-manakaBeige last:border-none">
<div class="flex items-center gap-8">
<p class="w-20 h-20 bg-manakaBeige py-2 text-center text-[22px] flex items-center justify-center md:text-base md:w-10 md:h-10">Q</p>
<p class="w-full text-xl tracking-[0.075em] mr-6 md:text-base">{{ faq.question|raw|nl2br }}</p>
</div>
<div class="flex gap-8">
<p class="w-20 h-20 border border-manakaBeige py-2 text-center text-[22px] flex items-center justify-center md:text-base md:w-10 md:h-10">A</p>
<div class="w-full flex flex-col">
<p class="w-full text-xl tracking-[0.075em] mr-6 md:text-xs">{{ faq.answer|raw|nl2br }}</p>
</div>
</div>
</li>
{% endfor %}
<a href="#heading" class="w-full max-w-[430px] border border-[#2D969B] text-center text-[#2D969B] text-sm py-5 mx-auto tracking-wider rounded-md lg:py-4 hover mt-10">
<span class="text-lg font-bold">↑</span>
かごへ戻る
</a>
</ul>
</section>
{% endif %}
</section>
{% endif %}
<nav class="flex gap-6 justify-center mb-16 md:flex-col md:gap-2 md:mb-8">
<a href="{{url('user_data',{route:'showroom'})}}" class="text-manakaGold underline md:text-sm text-center hover">
銀座・横浜ショールームをご案内 >
</a>
<a href="{{url('contact')}}" class="text-manakaGold underline md:text-sm text-center hover">
お問い合わせ・資料請求はこちら >
</a>
</nav>
{# 制作者紹介 #}
{% if Product.producer_file_name is not null %}
<div class="border-t border-manakaBeige py-4">
<div id="producer_slide" class="flex items-center hover py-6 md:py-0">
<h2 class="w-full text-center md:text-start text-2xl tracking-widest md:text-xl">制作者紹介</h2>
<div id="producer_toggle_button" class="text-xl border-[0.5px] border-[#707070] w-8 md:w-6 md:h-6 rounded-[50%] p-1 md:text-sm flex items-center justify-center leading-normal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="md:w-4 md:h-4 h-6 w-6 text-[#707070]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
</div>
<div id="producer" class="flex mt-7 md:flex-col justify-center w-full gap-16 md:gap-4">
<img src={{asset(Product.producer_file_name,'save_image')}} class="w-1/2 h-[400px] md:w-full lg:mx-auto sm:h-auto content-cover content-center"/>
<div class="lg:w-full lg:mx-auto">
<p class="mb-5 tracking-widest text-lg lg:text-sm lg:mb-4">{{Product.producer_title}}<p>
<p class="mb-6 text-3xl tracking-widest lg:text-xl">{{Product.producer_name}}</p>
<p class="leading-6 lg:text-xs">{{ Product.producer_content|raw|nl2br }}</p>
</div>
</div>
</div>
{% endif %}
{# 配送・注意事項 #}
{% if Product.delivery_info %}
<div class="py-4 border-y border-manakaBeige">
<div id="delivery_slide" class="flex items-center hover py-6 md:py-0">
<h2 class="w-full text-center md:text-start text-2xl tracking-widest md:text-xl">配送・注意事項</h2>
<div id="delivery_toggle_button" class="text-xl border-[0.5px] border-[#707070] w-8 md:w-6 md:h-6 rounded-[50%] p-1 md:text-sm flex items-center justify-center leading-normal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="md:w-4 md:h-4 h-6 w-6 text-[#707070]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
</div>
<div id="delivery" class="flex flex-col lg:gap-4 py-4">
<div>
<h3 class="text-center text-2xl mb-2 md:text-lg md:text-start">配送</h3>
<div class="">{{ Product.delivery_info|raw|nl2br }}</div>
</div>
<div>
<h3 class="text-center text-2xl mt-6 mb-2 md:text-lg md:text-start">注意事項</h3>
<div class="leading-6 lg:text-sm">{{ Product.delivery_comment|raw|nl2br }}</div>
</div>
</div>
</div>
{% endif %}
{# 関連商品 #}
{% if Product.RelatedProducts|length > 0 %}
<div class="pt-16 md:pt-10 flex flex-col w-full items-center">
<hr class="w-full border-none h-[1px] bg-gray md:w-[100vw] md:ml-[-90vw] md:relative md:left-[50%]">
<div class="flex flex-col items-center w-[1050px] xl:w-full">
<h2 class="text-2xl md:text-lg text-center mb-9 md:mb-3 leading-7 tracking-[0.2em]">
関連商品
</h2>
<ul class="flex overflow-hidden w-full items-center justify-center md:w-[100vw] md:mx-[calc(50%-50vw)] md:px-[calc(50%-50vw)]">
<div class="slider w-[350px] md:w-150px">
{% for RelatedProduct in Product.RelatedProducts %}
{% set CategoryName = Product.ProductCategories[0].Category.name %}
{% set ProductClasses = RelatedProduct.ChildProduct.ProductClasses %}
<div class="slick-slider w-[350px] mx-3 max-w-[350px] md:max-w-[150px] md:w-[150px] shadow-lg">
<li class="flex flex-col items-center w-full h-auto text-center hover">
<a href="{{ url('product_detail', {id : RelatedProduct.ChildProduct.id} ) }}">
<img src="{{ asset(RelatedProduct.ChildProduct.MainListImage|no_image_product, 'save_image') }}" alt="" class="bg-cover w-[350px] h-[350px] md:w-[150px] md:h-[150px] mb-10 md:mb-6">
</a>
<div class="mb-2">
<p class="text-sm font-notoserif tracking-wide md:text-xs">{{RelatedProduct.ChildProduct.name_kana}}</p>
<p class="whitespace-normal overflow-visible font-notoserif text-2xl tracking-[6.4px] md:text-sm">{{RelatedProduct.ChildProduct.name}}</p>
</div>
<div class="flex flex-col">
{# <div class="text-clip overflow-hidden h-14 whitespace-nowrap md:h-6">
<p class="whitespace-normal text-sm text-center leading-7 md:text-[10px]">
{{RelatedProduct.ChildProduct.description_detail|raw|nl2br}}
</p>
</div> #}
<p class="text-sm px-3 py-2 border border-[#AFAFAF] md:text-[10px]">{{ CategoryName }}</p>
<div class="flex gap-2 my-3 justify-center">
{% for ProductClass in ProductClasses %}
<hr style="background-color:{{ProductClass.color_code}}" class="rounded-full w-4 h-4"></hr>
{% endfor %}
</div>
<div class="flex items-baseline gap-1 mb-6">
<p class="text-2xl leading-9 font-regular">
{% if RelatedProduct.ChildProduct.hasProductClass %}
{# {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %} #}
{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|number_format }}
{# {% else %}
{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin| number_format }}<br/>
～<br/>
{{ RelatedProduct.ChildProduct.getPrice02IncTaxMax| number_format}}
{% endif %}
{% else %}
{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin| number_format }} #}
{% endif %}
</p>
<p class="text-xs leading-4 font-medium">円(税込)</p>
</div>
</div>
{# <a href="{{ url('product_detail', {id : RelatedProduct.ChildProduct.id} ) }}" class="w-[258px] block border-black border py-3 rounded-[3px] md:w-[258px] text-sm text-center md:text-xs">詳しくはこちら</a> #}
</li>
</div>
{% endfor %}
</div>
</ul>
</div>
</div>
{% endif %}
</div>
{# 関連特集 #}
{% if Product.ProductRelateFeatures|length > 0 %}
<div class="bg-manakaBeige py-16 md:py-8 mb-20 md:mb-0">
<h2 class="text-2xl md:text-lg text-center mb-9 md:mb-3 leading-7 tracking-[0.2em]">
関連特集
</h2>
<ul class="flex items-center justify-center w-full md:w-[100vw] overflow-hidden">
<div class="slider w-full">
{% for relateFeature in Product.ProductRelateFeatures %}
<div class="relate-feature-slick-slider w-[540px] mx-3 md:!w-[315px]">
<li class="flex flex-col items-center w-[540px] md:w-[315px] shadow-lg hover box-border bg-white mb-5">
<a class="w-full" href={{relateFeature.url}}>
<img src="{{ asset(relateFeature.file_name|no_image_product, 'save_image') }}" alt="{{relateFeature.alt_text}}" class="bg-cover w-[540px] md:w-[315px] h-[324px] md:h-[189px] object-cover">
</a>
<div class="w-full px-10 py-6 md:px-5 md:py-8">
<div class="flex items-center gap-5 mb-5 md:mb-2 mr-auto">
<p class="text-xs">{{relateFeature.date|date('Y/m/d')}}</p>
<p class="border border-[#222] rounded-md px-2 py-1 text-xs">{{relateFeature.category_name}}</p>
</div>
<p class="whitespace-normal overflow-visible font-notoserif text-2xl md:text-base tracking-[6.4px] text-left mb-4 md:mb-1">
{{relateFeature.title}}
</p>
<p class="text-left md:text-xs line-clamp-3">{{relateFeature.thumb_content|raw|nl2br}}</p>
</div>
</li>
</div>
{% endfor %}
</div>
</ul>
</div>
{% endif %}
<div class="flex flex-col justify-center mb-[200px] lg:mb-[100px]">
{# ショールームのご案内 #}
<a href={{url("user_data",{"route": "showroom"} )}} class="block my-16 w-[840px] mx-auto lg:w-full">
<img src="{{ asset('assets/img/list/showroom_pc.jpg') }}" class="h-40 shadow-lg lg:hidden hover"/>
<img src="{{ asset('assets/img/list/showroom_sp.jpg') }}" class="hidden lg:block h-[180px] shadow-lg mx-auto hover"/>
</a>
{# サポートサービス #}
<div class="relative xl:px-[8vw] xl:w-full xl:mx-0 flex items-center justify-center w-full max-w-[1120px] mx-auto">
<div class="gap-10 xl:gap-y-8 flex flex-col items-center justify-center p-20 bg-manakaBeige lg:p-5">
<h3 class="text-center text-[max(1.98vw,28px)] md:text-lg tracking-widest font-extralight">商品選びサポートサービス</h3>
<div class="text-center flex flex-col md:text-xs text-xl gap-y-3">
<p class="leading-relaxed">お客様と故人様の関係にふさわしい<br class="hidden md:block">祈りのかたちを見つけていただくために、<br>
いくつかのサポートサービスをご用意しました。</p>
</div>
<div class="gap-12 flex-wrap flex p-6 lg:p-0 w-full lg:gap-5 lg:flex-col items-center justify-center">
<a href={{url('catalog_confirm')}}>
<img src="{{ asset('assets/img/top/catalog-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-full h-full hover">
</a>
<a href={{url('coordinate_confirm')}}>
<img src="{{ asset('assets/img/top/coordinate-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-full h-full hover">
</a>
<a href={{url('user_data',{route:'pick_up_altar'})}}>
<img src="{{ asset('assets/img/top/takuover-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-full h-full hover">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="ec-modal fixed w-full h-full top-0 left-0 z-10 hidden">
<div class="ec-modal-overlay flex justify-center items-center bg-black/30 w-full h-full">
<div class="ec-modal-wrap relative rounded-sm bg-white w-[max(62vw,800px)] md:w-[87vw] py-10 px-1">
<span class="ec-modal-close cursor-pointer absolute right-5 top-2 h-[30px] w-[20px]">
<span class="ec-icon">
<img src="{{ asset('assets/icon/close.svg') }}" alt=""/>
</span>
</span>
<div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
<div class="ec-modal-box text-center">
<div class="ec-role m-5 flex items-center justify-center gap-10 md:flex-col whitespace-nowrap md:gap-y-4">
<div class="ec-inlineBtn--cancel rounded-[3px] py-3 w-[327px] md:w-[279px] bg-black text-white font-bold cursor-pointer">{{ 'front.product.continue'|trans }}</div>
<a href="{{ url('cart') }}" class="ec-inlineBtn--action hover">
<div class="rounded-[3px] py-3 w-[327px] md:w-[279px] text-black border border-black font-bold bg-red ">
{{ 'common.go_to_cart'|trans }}
</div>
</a>
</div>
</div>
</div>
</div>
</div>
{# 名入れモーダル #}
{% if form[productOption] is defined %}
<div class="naire-modal fixed w-full h-full top-0 left-0 z-10 hidden">
<div class="naire-modal-overlay relative bg-black/30 w-full h-full">
<div class="naire-modal-wrap absolute left-1/2 translate-x-[-50%] top-[20vh] md:top-[10vh] rounded-md overflow-y-auto bg-white min-h-[550px] py-10 px-6 lg:overflow-auto h-[33vw] max-h-[600px] lg:h-[50vw] lg:min-h-[500px] md:max-w-[600px]">
{# <span class="naire-modal-close cursor-pointer absolute right-5 top-2 h-[30px] w-[20px]">
<span class="naire-close">
<img src="{{ asset('assets/icon/close.svg') }}" alt=""/>
</span>
</span> #}
<div id="naire-modal-header" class="text-center text-2xl mb-6 md:text-lg">
{{ '名入れ方法'|trans }}
</div>
<p class="text-base text-center mb-6">選択してください</p>
<div class="naire-modal-box flex mb-6 justify-center lg:flex-col gap-6 mx-auto lg:overflow-auto">
{% for choice in form[productOption].vars.choices%}
{% if choice.label != '名入れなし' %}
<label class="block w-[300px] border-4 p-4 rounded-md hover md:text-xs lg:w-full lg:max-w-[70vw] lg:mx-auto {% if choice.label == 'なし' %} hidden {% endif %}">
<input type="radio" value="{{ choice.value }}" name={{productOption}} data-name="{{ choice.label }}"/>
{{ choice.label }}
{% set OptionImages = choice.data.OptionImages %}
{% if OptionImages|length > 0 %}
<img
class="w-full h-auto"
src="{{ asset(OptionImages.0, 'save_image') }}"
/>
{% elseif choice.label == 'アドバイザーに相談する' %}
<img
class="w-full h-auto mt-10 md:mt-4"
src={{asset("assets/img/contact/coordinate.png")}}
/>
{% endif %}
</label>
{% endif %}
{% endfor %}
</div>
<p class="text-manakaRed text-center">
※名入れにご不安な場合や先祖代々など定型パターンにない形式をご希望の方は、「アドバイザーに相談する」を選択ください。</br>
※「アドバイザーに相談する」を選択した場合は、ご注文確認後に、担当者よりご連絡を差し上げます。
</p>
</div>
</div>
</div>
</div>
{# 家景牌の2枚目用の名入れモーダル #}
{% if form[productOptionSecond] is defined %}
<div class="naire-modal-second fixed w-full h-full top-0 left-0 z-10 hidden">
<div class="naire-modal-overlay relative bg-black/30 w-full h-full">
<div class="naire-modal-wrap absolute left-1/2 translate-x-[-50%] top-[20vh] md:top-[10vh] rounded-md bg-white overflow-y-auto min-h-[550px] py-10 px-6 lg:overflow-auto h-[33vw] max-h-[600px] lg:h-[50vw] lg:min-h-[500px] md:max-w-[600px]">
{# <span class="naire-modal-close cursor-pointer absolute right-5 top-2 h-[30px] w-[20px]">
<span class="naire-close">
<img src="{{ asset('assets/icon/close.svg') }}" alt=""/>
</span>
</span> #}
<div id="naire-modal-header" class="text-center text-2xl mb-6 md:text-lg">
{{ '名入れ方法 2枚目'|trans }}
</div>
<p class="text-base text-center mb-6">選択してください</p>
<div class="naire-modal-second-box flex lg:flex-col gap-6 justify-center mb-6 lg:overflow-auto">
{% for choice in form[productOptionSecond].vars.choices%}
{% if choice.label != '名入れなし' %}
<label class="block w-[300px] hover border-bg-manakaBeige border-4 p-4 rounded-md hover md:text-xs lg:w-full lg:max-w-[70vw] lg:mx-auto {% if choice.label == 'なし' %} hidden {% endif %}">
<input type="radio" value="{{ choice.value }}" name={{productOptionSecond}} data-name="{{ choice.label }}"/>
{{ choice.label }}
{% set OptionImages = choice.data.OptionImages %}
{% if OptionImages|length > 0 %}
<img
class="w-full h-auto"
src="{{ asset(OptionImages.0, 'save_image') }}"
/>
{% elseif choice.label == 'アドバイザーに相談する' %}
<img
class="w-full h-auto mt-20 md:mt-4"
src={{asset("assets/img/contact/coordinate.png")}}
/>
{% endif %}
</label>
{% endif %}
{% endfor %}
</div>
<p class="text-manakaRed text-center">
※名入れにご不安な場合や先祖代々など定型パターンにない形式をご希望の方は、「アドバイザーに相談する」を選択ください。</br>
※「アドバイザーに相談する」を選択した場合は、ご注文確認後に、担当者よりご連絡を差し上げます。
</p>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endblock %}

app/template/default/Product/detail.twig line 1