app/template/default/Cart/Catalog.twig line 1073

Open in your IDE?
  1. {# @version  EC=CUBE4.1 TWIG
  2.  # @copyright 株式会社 翔 kakeru.co.jp
  3.  # @author
  4.  # 2022年03月21日作成
  5.  #
  6.  # app/template/default/Cart/Catalog.twig
  7.  #
  8.  #
  9.  #
  10.  # カートカタログ
  11.  # 2022/11/30
  12.  #
  13.  #
  14.  #                                                  ≡≡≡┏(＾o＾)┛
  15.  ##############################################################}
  16. {% set Limit = CatalogLimit() %}
  17. {% extends 'default_frame.twig' %}
  19. {% set body_class = 'cart_page' %}
  22. {% block javascript %}
  23. <script>
  24.     function SubWindowOpen(url,name){
  25.         window.open(url, name , "width={{SubWindoWData.width}},height={{SubWindoWData.height}},scrollbars={{SubWindoWData.scroll}}");
  26.     }
  28.     var $form = $('form#catalog_form');
  29.     $(document).ready(function(){
  30.         check_select_count();
  32.         $("input[name='LmOrderOption[catalog][]']").change(function(e) {
  33.             check_select_count();
  34.         });
  35.     });
  37.     function check_select_count(){
  38.         var $checked_list = $("#catalog-list-area input[type=checkbox]:checked");
  39.         var $not_checked_list = $("#catalog-list-area input[type=checkbox]").not(":checked");
  41.         if( $checked_list.length >= {{ Limit.cl_quantity_limit }} ){
  42.             $not_checked_list.prop('disabled', true);
  43.         } else{
  44.             $not_checked_list.prop('disabled', false);
  45.         }
  46.     }
  47. </script>
  48. {% if isMobile %}
  49.     <script>
  50.         function check_input(){
  51.             if( $('input[name="LmOrderOption[catalog][]"]:checked', $form).length == 0 ){
  52.                 showAlertWindow('カタログを選択してください');
  53.                 return false;
  54.             }
  56.             $form.submit();
  57.         }
  58.         function showAlertWindow(msg) {
  59.             last_scroll_top_value = $(document).scrollTop();
  60.             $("#alert-window p.alert-explain").html(msg);
  61.             $("body").css("height", $(window).height());
  62.             $("body").css("overflow", "hidden");
  63.             $("#overlay").css("visibility", "visible");
  64.             $("#alert-window").css("visibility", "visible");
  65.         }
  66.         function closeAlertWindow() {
  67.             $("body").css("height", "auto");
  68.             $("body").css("overflow", "auto");
  69.             $("#overlay").css("visibility", "hidden");
  70.             $("#alert-window").css("visibility", "hidden");
  71.             window.scrollTo(0, last_scroll_top_value);
  72.         }
  73.         $('input[name="LmOrderOption[catalog][]"]').on('change', function(e) {
  74.             if ($('input[name="LmOrderOption[catalog][]"]:checked').length > 0) {
  75.                 $('#cts-float-button').fadeIn(500);
  76.             } else {
  77.                 $('#cts-float-button').fadeOut(500);
  78.             }
  79.         });
  80.     </script>
  81. {% else %}
  82.     <script src="/javascripts/jquery-ui.min.js" type="text/javascript"></script>
  83.     <script src="/javascripts/jquery.efo.js" type="text/javascript"></script>
  84.     <script>
  85.         var efo_elm = $("[class^=efo]").efo({
  86.             confirmation : {
  87.                 enabled : false,
  88.                 form : document.forms.mail_fm
  89.             },
  90.             notification : {
  91.                 enabled : true
  92.             },
  93.             validation : {
  94.                 bind : 'efo_change'
  95.             },
  96.             tooltipping : {
  97.                 enabled : true
  98.             },
  99.             observation : {
  100.                 enabled : true
  101.             }
  102.         }).on('efo_afterValidate', function(event, data){
  103.             if (data.remaining > 0) {
  104.                 $('.btnMask').show();
  105.                 $('.btnNext').hide();
  106.             } else {
  107.                 $('.btnMask').hide();
  108.                 $('.btnNext').show();
  109.             }
  110.         });
  111.         $('input[name="LmOrderOption[catalog][]"]').on('change', function(e) {
  112.             var $checkbox = $(this);
  113.             var $box = $checkbox.closest('.catalog-list-box-inner');
  115.             if( $checkbox.prop('checked') ){
  116.                 $box.addClass('catalog-list-box-selected');
  117.             } else{
  118.                 $box.removeClass('catalog-list-box-selected');
  119.             }
  120.         });
  121.     </script>
  122. {% endif %}
  123. {% endblock %}
  124. {% block stylesheet %}
  125. <link rel="stylesheet" href="/stylesheets/style_estimate.css">
  126. <link rel="stylesheet" href="/stylesheets/stylesheet.css">
  127. <link rel="stylesheet" href="/stylesheets/jquery.efo.css">
  128. {% if isMobile %}
  129.     <link rel="stylesheet" href="/stylesheets/css/sp/common.css">
  130. {% endif %}
  131. <style>
  132.     .red{
  133.         color: red;
  134.     }
  135.     #contents_wrapper{
  136.         width: 990px;
  137.         margin: 0 auto;
  138.     }
  139.     #contents{
  140.         width: 100%;
  141.     }
  142. #stap_area{
  143.     width :100%;
  144.     margin-bottom:20px;
  145. }
  147. #step_area .form{
  148.     width:100%;
  149. }
  150. #step_area .form img{
  151.     width:100%;
  152. }
  153. #step_area .step{
  154.     width:100%;
  155.     margin: 20px auto;
  156.     text-align:center;
  157. }
  161. #CartCatalog #catalog_btn_area{
  162.      visibility:hidden;
  163. }
  164. #CartCatalog .otodoke{
  165.     background-color: #FFFFCC;
  166.     padding: 20px;
  167.     text-align:
  168.     center;
  169.     border: 1px solid #FFFF99;
  170.     margin: 20px auto 30px;
  171.     width: 680px;
  172.     border: 1px solid #FFCD82;
  173.     border-radius: 10px;
  174.     font-size:13px;
  176. }
  177. #CartCatalog .otodoke p.title{
  178. font-weight: bold;
  179. font-size: 16pt;
  181. }
  183. #CartCatalog .CatalogCatagoryLabel{
  184.     font-size: 21px;
  185.     font-weight: bold;
  186.     border-bottom: 2px solid #ffb05c;
  187.     padding: 25px 0 10px 10px;
  188.     letter-spacing: .1em;
  189.     display: block;
  190.     margin-bottom:20px;
  191. }
  193. #CartCatalog ul.CatalogList{
  194.     width:100%;
  195.     margin-bottom:30px;
  196.     /*display: flex;
  197.     display : -webkit-box;
  198.     justify-content: center;
  199.     -webkit-align-items: center;
  200.     align-items: center*/
  201. }
  202. #CartCatalog li.catalog-list-box{
  203.     width: 240px;
  204.     padding: 1px;
  205.     margin-bottom:20px;
  206.     display:inline-block;
  207.     vertical-align: top;
  208.     margin-bottom:20px;
  209.   /*  flex-direction: center; */
  210.     /*float:left;*/
  211.     /*display:-ms-grid;
  212.     display:grid;
  213.     -ms-grid-columns:auto auto auto;
  214.     grid-template-columns:auto auto auto;*/
  216. }
  217. #CartCatalog .catalog-list-box-inner{
  218.     border: solid 1px #B1B2B1;
  219.     height: 100%;
  220.     border-bottom: none;
  221. }
  222. #CartCatalog .catalog-list-box-header{
  223.     background-color:#E5E5E5;
  224. }
  225. #CartCatalog .catalog-list-box-header input{
  226. margin: 15px 10px;
  227.     -webkit-transform: scale(1.4, 1.4);
  228. }
  229. #CartCatalog .catalog-list-box-header span{
  230.     font-size:13px;
  231.     font-weight: bold;
  232.     line-height:1.2;
  233.     padding: 0.3em 0;
  234.     display:inline-block;
  235.     overflow-wrap: break-word;
  236.     width:165px;
  237. }
  238. #CartCatalog .catalog-image{
  239.     padding: 20px 50px;
  240. }
  241. #CartCatalog .catalog-image img{
  242.     width:100%;
  243. }
  244. #CartCatalog .catalog-list-box-comment{
  245.     padding:5px;
  246. }
  247. #CartCatalog .catalog_link_1 a,
  248. #CartCatalog .catalog_link_2 a,
  249. #CartCatalog .catalog_link_3 a{
  250.     display: block;
  251.     width: 90%;
  252.     text-align: center;
  253.     margin: 0 auto 10px;
  254.     text-align: center;
  255.     text-decoration: none;
  256.     font-weight: bold;
  257.     line-height: 2.5;
  258.     border-radius: 6px;
  259.     font-size: 11px;
  260.     background: #177A74;
  261.     color: #fff;
  262. }
  264. #CartCatalog .catalog_link_3 a{
  265. background: #F2910E;
  266. }
  267. #CartCatalog .catalog-list-box-footer{
  268.     border: solid 1px #B1B2B1;
  269.     border-top: none;
  270.     height:110px;
  271.     width:100%;
  272. }
  273. #catalog_btn_area{
  274. margin-bottom:30px;
  275. }
  277. #catalog_btn_area button{
  278. margin-bottom:20px;
  279. }
  282. .foot_message{
  283.     margin-bottom:30px;
  284. }
  285. #footer{
  286.     background-color: #fff;
  287.     border: 0;
  288. }
  289. .ec-layoutRole__footer #footer{
  290.     margin: 0 auto;
  291.     background-color: #EEE;
  292. }
  293. #CartCatalog  #step1-top div{
  294.     padding: 2px 20px;
  295.     width:99%;
  296.     background-color:#98CACB;
  297.     line-height: 28px;
  298.     font-size:18px;
  299.     font-weight:700;
  300.     border-radius:20px;
  301.     color:#333;
  302. }
  303. @media screen and (max-width: 990px) {
  304. #contents_wrapper{
  305. width: 100%;
  306. }
  307. #CartCatalog ul.CatalogList{
  308.  margin: 0 auto 30px;
  309.  max-width:768px
  310. }
  311. }
  312. @media screen and (max-width: 768px) {
  313. #CartCatalog .otodoke{
  314.     width:90%;
  315. }
  316. #CartCatalog ul.CatalogList{
  317.  margin: 0 auto 30px;
  318.  max-width:512px;
  319. }
  320. }
  321. @media screen and (max-width: 512px) {
  322. #CartCatalog li.catalog-list-box{
  323.     width:49%;
  324. }
  325. }
  327. @media screen and (max-width: 460px) {
  328. #CartCatalog .otodoke {
  329.   padding:20px 10px;
  330. }
  331. #CartCatalog .otodoke p.title span{
  332.     display:block;
  333. }
  334. div.step img {
  335.         width: 98%;
  336.     }
  338. }
  340. {% if isMobile %}
  341.     .ec-layoutRole {
  342.         background-color: #eee;
  343.     }
  344.     .ec-layoutRole .ec-layoutRole__contents {
  345.         display: block;
  346.     }
  347.     .sp.ec-role .ec-pageHeader h1 {
  348.         border-top: 0px;
  349.     }
  350.     .ec-layoutRole #header {
  351.         display: block;
  352.         height: auto;
  353.     }
  354.     .ec-layoutRole #header #ut-sp-global-navi h1 {
  355.         font-weight: normal;
  356.         font-size: 10px;
  357.         overflow: hidden;
  358.         margin: 0px;
  359.         float: none;
  360.         padding-left: 10px;
  361.     }
  362.     .ec-layoutRole #contents_wrapper, .ec-layoutRole .ec-layoutRole__footer#footer {
  363.         width: auto;
  364.     }
  365.     .ec-layoutRole #header #logo {
  366.         height: auto;
  367.         padding: 5px 10px;
  368.         background: white;
  369.         float: none;
  370.     }
  371.     .ec-layoutRole #header #logo a {
  372.         height: auto;
  373.         width: auto;
  374.         background-image: unset;
  375.         text-indent: unset;
  376.     }
  377.     .ec-layoutRole #header #logo a img {
  378.         background: white;
  379.     }
  380.     .ec-layoutRole .ec-layoutRole__footer h2 {
  381.         padding-left: 30px;
  382.     }
  383.     .ec-layoutRole .ec-layoutRole__footer #footermenu li {
  384.         border-right-width: 0;
  385.     }
  386.     .ec-layoutRole__main#contents {
  387.         padding: 0px;
  388.         margin: 0px;
  389.     }
  390.     .ec-layoutRole__footer#footer {
  391.         margin-top: 0px;
  392.         margin: 0;
  393.         background-color: white;
  394.     }
  395.     .user_area, #pankuzu  {
  396.         display: none;
  397.     }
  398.     .sp #overlay {
  399.         visibility: hidden;
  400.         position: absolute;
  401.         left: 0;
  402.         top: 0;
  403.         width: 100%;
  404.         height: 100%;
  405.         z-index: 1000;
  406.         background-color: rgba(0, 0, 0, 0.7);
  407.     }
  408.     .sp .alert-window {
  409.         visibility: hidden;
  410.         margin-top: -68px;
  411.         margin-left: -150px;
  412.         z-index: 1001;
  413.         position: absolute;
  414.         top: 0;
  415.         left: 50%;
  416.         top: 50%;
  417.         width: 300px;
  418.     }
  419.     .sp .alert-content {
  420.         background-color: #fff;
  421.         border-radius: 7px;
  422.         border: 1px solid #eee;
  423.         border-top: 0;
  424.         padding: 10px;
  425.     }
  426.     .sp .alert-explain {
  427.         font-size: 16px;
  428.         margin:10px;
  429.         line-height:140%;
  430.         text-align: left;
  431.     }
  432.     .sp .alert-btns {
  433.         font-size: 13px;
  434.         overflow: hidden;
  435.         padding: 10px;
  436.         margin-top: 10px;
  437.     }
  438.     .sp .alert-btn-back {
  439.         display:block;
  440.         border: 1px solid #ccc;
  441.         color: #333;
  442.         text-align: center;
  443.         width: 50%;
  444.         border-radius: 5px;
  445.         float: left;
  446.         margin:0 25%;
  447.         padding: 10px 0;
  448.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e3e3e3), to(#ccc));
  449.         background: -webkit-linear-gradient(to bottom, #e3e3e3, #ccc);
  450.         background: linear-gradient(to bottom, #e3e3e3, #ccc);
  451.         background: #ccc\9;
  452.     }
  453.     .sp #heading-title {
  454.         position: relative;
  455.         overflow: initial;
  456.         color: #fff;
  457.         background-color: #958064;
  458.         text-shadow: none;
  459.         padding-left: 15px;
  460.     }
  461.     .sp #heading-title:after {
  462.         content: "";
  463.         position: absolute;
  464.         display: block;
  465.         width: 0;
  466.         height: 0;
  467.         bottom: -7px;
  468.         border-top: 7px solid #958064;
  469.         border-left: 7px solid transparent;
  470.         border-right: 7px solid transparent;
  471.     }
  472.     .sp #cts-float-button {
  473.         display: none;
  474.         position: fixed;
  475.         bottom: 50px;
  476.         left: 0px;
  477.         box-sizing: border-box;
  478.         width: 100%;
  479.         margin: 0;
  480.         padding: 15px 10px;
  481.         background: rgba(0,0,0,0.8);
  482.         z-index: 99;
  483.     }
  484.     .sp #cts-float-button button {
  485.         display: block;
  486.         padding: 13px 0;
  487.         font-size: 14px;
  488.         font-weight: bold;
  489.         color: #fff;
  490.         background-image: -moz-linear-gradient(top, #fcc10f 0%, #f68408 100%);
  491.         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcc10f), color-stop(100%, #f68408));
  492.         background-image: -webkit-linear-gradient(top, #fcc10f 0%, #f68408 100%);
  493.         background-image: -o-linear-gradient(top, #fcc10f 0%, #f68408 100%);
  494.         background-image: -ms-linear-gradient(top, #fcc10f 0%, #f68408 100%);
  495.         background-image: linear-gradient(to bottom, #fcc10f 0%,#f68408 100%);
  496.         text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
  497.         border-radius: 4px;
  498.         width: 100%;
  499.     }
  500.     .sp #catalog-list-area > * {
  501.         box-sizing: border-box;
  502.     }
  503.     .sp #catalog-list-area .catalog-category-block {
  504.         border: 1px solid #c3b5a0;
  505.         background: #fff;
  506.         margin-bottom: 20px;
  507.         font-size: 12px;
  508.         overflow: hidden;
  509.         border-radius: 8px;
  510.         padding-bottom: 4px;
  511.     }
  512.     .sp #catalog-list-area .catalog-category-label {
  513.         font-size: 15px;
  514.         font-weight: bold;
  515.         letter-spacing: .1em;
  516.         display: block;
  517.         background: #daebeb;
  518.         padding: .6em;
  519.         border-bottom: 1px solid #c3b5a0;
  520.     }
  521.     .sp #catalog-list-area .catalog-list {
  522.         display: flex;
  523.         flex-wrap: wrap;
  524.         justify-content: space-between;
  525.     }
  526.     .sp #catalog-list-area .catalog-list:after,
  527.     .sp #catalog-list-area .catalog-list > li {
  528.         width: 48%;
  529.         padding: 1%;
  530.     }
  531.     .sp #catalog-list-area .catalog-list:after {
  532.         content: '';
  533.         display: block;
  534.         order: 1;
  535.     }
  536.     .sp #catalog-list-area .catalog-list li {
  538.     }
  539.     .sp #catalog-list-area .catalog-list-box-inner {
  540.         border: solid 1px #B1B2B1;
  541.         height: 100%;
  542.         display: flex;
  543.         flex-direction: column;
  544.         justify-content: space-between;
  545.     }
  546.     .sp #catalog-list-area .catalog-list-box-inner.catalog-list-box-selected {
  547.         background: #ddfcc0;
  548.     }
  549.     .sp #catalog-list-area .catalog-list-box-header {
  550.         background: #E5E5E5;
  551.     }
  552.     .sp #catalog-list-area .catalog-list-box-header-inner {
  553.         display: flex;
  554.         align-items: center;
  555.     }
  556.     .sp #catalog-list-area .catalog-list-box-checkbox-wrap input {
  557.         margin: 14px;
  558.     }
  559.     .sp #catalog-list-area .catalog-list-box-checkbox-wrap input:disabled {
  560.         opacity: .2;
  561.     }
  562.     .sp #catalog-list-area .catalog-list-box-checkbox-wrap input.catalog-checkbox-unselectable {
  563.         opacity: 0;
  564.     }
  565.     .sp #catalog-list-area .catalog-list-box-title {
  566.         padding: .3em 0;
  567.         line-height: 1.2;
  568.         font-weight: bold;
  569.         font-size: 12px;
  570.         letter-spacing: 1px;
  571.     }
  572.     .sp #catalog-list-area .catalog-list-box-image {
  573.         padding: 10px 40px;
  574.     }
  575.     .sp #catalog-list-area .catalog-list-box-image img {
  576.         object-fit: contain;
  577.         width: 100%;
  578.         max-height: 100%;
  579.     }
  580.     .sp #catalog-list-area .catalog-list-box-comment, #catalog-list-area .catalog-list-box-footer {
  581.         padding: 0 1em;
  582.     }
  583.     .sp #catalog-list-area .catalog-list-box-comment p {
  584.         font-size: 9px;
  585.     }
  586.     .sp #catalog-list-area .catalog-list-box-comment .catalog-icon {
  587.         display: flex;
  588.         justify-content: space-between;
  589.     }
  590.     .sp #catalog-list-area .catalog-list-box-comment .catalog-icon img {
  591.         width: 32%;
  592.     }
  594.     .sp #catalog-list-area .catalog-list-box-footer {
  595.         margin: .2em 0 .8em 0;
  596.     }
  597.     .sp #catalog-list-area .catalog-list-box-link {
  598.         display: flex;
  599.         flex-direction: column;
  600.         justify-content: space-between;
  601.     }
  602.     .sp #catalog-list-area .catalog-list-box-link:after,
  603.     .sp #catalog-list-area .catalog-list-box-link:before {
  604.         content: '';
  605.         order: 1;
  606.     }
  607.     .sp #catalog-list-area .catalog-list-box-link > li .catalog-link {
  608.         display: table;
  609.         margin: .2em 0;
  610.         height: 28px;
  611.         width: 100%;
  612.     }
  613.     .sp #catalog-list-area .catalog-list-box-link a {
  614.         display: table-cell;
  615.         width: 100%;
  616.         height: 100%;
  617.         text-align: center;
  618.         position: relative;
  619.         letter-spacing: -1px;
  620.         text-decoration: none;
  621.         font-weight: bold;
  622.         line-height: 1;
  623.         border-radius: 6px;
  624.         vertical-align: middle;
  625.         font-size: 9px;
  626.     }
  627.     .sp #catalog-list-area .catalog-list-box-link a:after {
  628.         content: '▶︎';
  629.         display: block;
  630.         position: absolute;
  631.         top: 32%;
  632.         right: .8em;
  633.     }
  634.     .sp #catalog-list-area .catalog-list-box-link a.catalog-list-box-link-type-01,
  635.     .sp #catalog-list-area .catalog-list-box-link a.catalog-list-box-link-type-02 {
  636.         background: #177A74;
  637.         color: #fff;
  638.     }
  639.     .sp #catalog-list-area .catalog-list-box-link a.catalog-list-box-link-type-03 {
  640.         background: #F2910E;
  641.         color: #000;
  642.     }
  643.     .sp .catalog-box {
  644.         padding: 10px;
  645.         background-color: #eee;
  646.     }
  647.     .sp#CartCatalog .catalog-list-box-header input{
  648.         -webkit-transform: none;
  649.     }
  650.     .sp#CartCatalog .catalog-list-box-header span {
  651.         width: auto;
  652.     }
  653.     .sp#CartCatalog .catalog-list-box-footer {
  654.         border: none;
  655.         height: auto;
  656.     }
  657.     .sp#CartCatalog li.catalog-list-box {
  658.         margin-bottom: 0px;
  659.     }
  660.     .sp .cancel-btn {
  661.         margin-top: 10px;
  662.     }
  663.     .sp #btns {
  664.         border: 1px dotted #ccc;
  665.         border-left: 0;
  666.         border-right: 0;
  667.         font-size: 13px;
  668.         padding: 10px;
  669.     }
  670.     .sp #btns #btn-next {
  671.         margin: 0 auto;
  672.         line-height: 25px;
  673.         height: 50px;
  674.         font-size: 18px;
  675.         border: 1px solid #ff8f00;
  676.         width: 100%;
  677.         border-radius: 5px;
  678.         -webkit-box-sizing: border-box;
  679.         -moz-box-sizing: border-box;
  680.         -o-box-sizing: border-box;
  681.         -ms-box-sizing: border-box;
  682.         background: #ff8f00;
  683.         color: white;
  684.         font-weight: bold;
  685.     }
  686.     .sp .cancel-btn .ec-blockBtn--cancel {
  687.         border-radius: 4px;
  688.         height: 50px;
  689.         line-height: 50px;
  690.     }
  691.     .sp .opinion-box {
  692.         margin-bottom: 15px;
  693.     }
  694.     .sp .catalog-box .alert-danger {
  695.         font-size: 14px;
  696.         letter-spacing: 1px;
  697.         margin-bottom: 10px;
  698.         padding: 10px;
  699.     }
  700. {% else %}
  701.     .pc {
  702.         color: black;
  703.     }
  704.     .pc .limit-message {
  705.         margin: 20px 0px 10px 0px;
  706.         font-weight: bold;
  707.     }
  708.     .pc#CartCatalog .catalog-list-box-header span{
  709.         width: auto;
  710.     }
  711.     .pc .catalog-box {
  712.         cursor: pointer;
  713.         width: 33.3%;
  714.     }
  715.     .pc .alert {
  716.         position: relative;
  717.         padding: .75rem 1.25rem;
  718.         margin-bottom: 1rem;
  719.         border: 1px solid transparent;
  720.         border-radius: .25rem;
  721.     }
  722.     .pc .alert-danger {
  723.         color: #721c24;
  724.         background-color: #f8d7da;
  725.         border-color: #f5c6cb;
  726.         font-size: 14px;
  727.         padding: 1.25rem 1.25rem;
  728.     }
  729.     .pc button {
  730.         background-color: transparent;
  731.     }
  732.     .pc .clearfix:after {
  733.         content:" ";
  734.         display:block;
  735.         clear:both;
  736.     }
  737.     .pc .btnBack, .btnMask, .btnNext {
  738.         border: none;
  739.         cursor: pointer;
  740.     }
  741.     .pc #catalog-list-area > * {
  742.         box-sizing: border-box;
  743.     }
  744.     .pc #catalog-list-area .catalog-category-label {
  745.         font-size: 21px;
  746.         font-weight: bold;
  747.         border-bottom: 2px solid #ffb05c;
  748.         padding: 25px 0 10px 10px;
  749.         letter-spacing: .1em;
  750.         display: block;
  751.     }
  752.     .pc #catalog-list-area .catalog-list {
  753.         display: flex;
  754.         flex-wrap: wrap;
  755.         justify-content: space-between;
  756.     }
  757.     .pc #catalog-list-area .catalog-list:before,
  758.     .pc #catalog-list-area .catalog-list:after,
  759.     .pc #catalog-list-area .catalog-list > li {
  760.         width: 25%;
  761.         padding: 1%;
  762.     }
  763.     .pc #catalog-list-area .catalog-list:before,
  764.     .pc #catalog-list-area .catalog-list:after {
  765.         content: '';
  766.         display: block;
  767.         order: 1;
  768.     }
  769.     .pc #catalog-list-area .catalog-list li {
  771.     }
  772.     .pc #catalog-list-area .catalog-list-box-inner {
  773.         border: solid 1px #B1B2B1;
  774.         height: 100%;
  775.         display: flex;
  776.         flex-direction: column;
  777.         justify-content: space-between;
  778.     }
  779.     .pc #catalog-list-area .catalog-list-box-inner.catalog-list-box-selected,
  780.     .pc #catalog-list-area .catalog-list-box-inner.catalog-list-box-selected:hover {
  781.         background: #ddfcc0;
  782.     }
  783.     .pc #catalog-list-area .catalog-list-box-inner:hover {
  784.         background: #ddd;
  785.     }
  786.     .pc #catalog-list-area .catalog-list-box-header {
  787.         background: #E5E5E5;
  788.     }
  789.     .pc #catalog-list-area .catalog-list-box-header-inner {
  790.         display: flex;
  791.         align-items: center;
  792.     }
  793.     .pc #catalog-list-area .catalog-list-box-checkbox-wrap input {
  794.         margin: 14px;
  795.         -webkit-transform: scale(1.4, 1.4);
  796.     }
  797.     .pc #catalog-list-area .catalog-list-box-checkbox-wrap input.catalog-checkbox-unselectable {
  798.         opacity: 0;
  799.     }
  800.     .pc #catalog-list-area .catalog-list-box-title {
  801.         padding: .3em 0;
  802.         line-height: 1.2;
  803.         font-weight: bold;
  804.     }
  805.     .pc #catalog-list-area .catalog-list-box-image {
  806.         padding: 20px 50px;
  807.     }
  808.     .pc #catalog-list-area .catalog-list-box-image img {
  809.         object-fit: contain;
  810.         width: 100%;
  811.         max-height: 100%;
  812.     }
  813.     .pc #catalog-list-area .catalog-list-box-comment, #catalog-list-area .catalog-list-box-footer {
  814.         padding: 0 1em;
  815.     }
  816.     .pc #catalog-list-area .catalog-list-box-comment p {
  817.         font-size: 11px;
  818.         line-height: 1.4;
  819.         font-weight: normal;
  820.     }
  821.     .pc #catalog-list-area .catalog-list-box-footer {
  822.         margin: .2em 0 .8em 0;
  823.     }
  824.     .pc #catalog-list-area .catalog-list-box-link {
  825.         display: flex;
  826.         flex-direction: column;
  827.         justify-content: space-between;
  828.     }
  829.     .pc #catalog-list-area .catalog-list-box-link:after,
  830.     .pc #catalog-list-area .catalog-list-box-link:before {
  831.         content: '';
  832.         order: 1;
  833.     }
  834.     .pc #catalog-list-area .catalog-list-box-link > li .catalog-link {
  835.         display: table;
  836.         margin: .2em 0;
  837.         height: 28px;
  838.         width: 100%;
  839.     }
  840.     .pc #catalog-list-area .catalog-list-box-link a {
  841.         display: table-cell;
  842.         width: 100%;
  843.         height: 100%;
  844.         text-align: center;
  845.         position: relative;
  846.         letter-spacing: -1px;
  847.         text-decoration: none;
  848.         font-weight: bold;
  849.         line-height: 1;
  850.         border-radius: 6px;
  851.         vertical-align: middle;
  852.         font-size: 11px;
  853.     }
  854.     .pc #catalog-list-area .catalog-list-box-link a:after {
  855.         content: '▶︎';
  856.         display: block;
  857.         position: absolute;
  858.         top: 32%;
  859.         right: .8em;
  860.     }
  861.     .pc #catalog-list-area .catalog-list-box-link a.catalog-list-box-link-type-01,
  862.     .pc #catalog-list-area .catalog-list-box-link a.catalog-list-box-link-type-02 {
  863.         background: #177A74;
  864.         color: #fff;
  865.     }
  866.     .pc #catalog-list-area .catalog-list-box-link a.catalog-list-box-link-type-03 {
  867.         background: #F2910E;
  868.         color: #000;
  869.     }
  870.     .pc .catalog-box {
  871.         padding: 10px;
  872.         background-color: #eee;
  873.     }
  874.     .pc#CartCatalog .catalog-list-box-header input{
  875.         -webkit-transform: scale(1.4, 1.4);
  876.     }
  877.     .pc#CartCatalog .catalog-list-box-header span {
  878.         width: auto;
  879.     }
  880.     .pc#CartCatalog .catalog-list-box-footer {
  881.         border: none;
  882.         height: auto;
  883.     }
  884.     .pc#CartCatalog li.catalog-list-box {
  885.         margin-bottom: 0px;
  886.     }
  887.     .pc #catalog-list-area .admin-zaiko-count {
  888.         display: block;
  889.         color: red;
  890.         text-align: center;
  891.     }
  892.     .pc .catalog-bottom-box {
  893.         margin-top: 20px;
  894.     }
  895.     .pc .foot_message {
  896.         float: left;
  897.     }
  898.     .pc .catalog_btn_area {
  899.         float: right;
  900.     }
  901.     .pc#CartCatalog #catalog_btn_area {
  902.         visibility: visible;
  903.     }
  904.     
  905.     /* EC-CUBEレイアウト用 ID=29 【LM】カタログ申し込みページ用レイアウト */
  906.     #header {
  907.         width: 100%;
  908.         height: 100%;
  909.         color: black;
  910.     }
  911.     #header #logo a {
  912.         background-image: none !important;
  913.         text-indent: 0 !important;
  914.     }
  915.     .ec-layoutRole__footer#footer {
  916.         max-width: 100%;
  917.         margin: 0 auto;
  918.         border: 1px solid #D3D0C1;
  919.         background: #eee;
  920.     }
  921.     .item-count {
  922.         color: black;
  923.     }
  924.     .return-shipping {
  925.         color: black;
  926.     }
  927. {% endif %}
  928. </style>
  929. {% endblock %}
  930. {% block main %}
  931. {% if isMobile %}
  932.     <div id="CartCatalog" class="sp">
  933.         <div id="overlay"></div>
  934.         <div id="alert-window" class="alert-window">
  935.             <div class="alert-content">
  936.                 <p class="alert-explain"></p>
  937.                 <div class="alert-btns">
  938.                     <a class="alert-btn-back" onclick="closeAlertWindow();" href="javascript:void(0);">OK</a>
  939.                 </div>
  940.             </div>
  941.         </div>
  942.         <div class="title-h2">
  943.             <img class="ico-circle" src="{{ GetConfig('CFIMG_URL') }}/public_images/sp/ico_circle.png" alt="カタログ申し込み">
  944.             <h2>カタログ申し込み</h2>
  945.         </div>
  946.         <h2 id="heading-title">
  947.             <span>{{ Limit.cl_quantity_limit }}冊まで選択できます</span>
  948.         </h2>
  949.         <div class="clearfix" style="padding: 2%;">
  950.             <a href="/contact/fax/" style="float:left;width:49%;">
  951.                 <img src="{{ GetConfig('CFIMG_URL') }}/public_images/order/banner_fax_01.jpg" alt="お気軽にFAXください" style="width:100%;">
  952.             </a>
  953.             <a href="tel:0120-115-116" style="float:left;width:49%;margin-left:2%;">
  954.                 <img src="{{ GetConfig('CFIMG_URL') }}/public_images/order/banner_freedial_02.jpg" alt="お気軽にお電話ください" style="width:100%;">
  955.             </a>
  956.         </div>
  958.         <div class="catalog-box">
  959.             {% set CatalogMessage = CatalogValidation() %}
  960.             {% if  CatalogMessage %}
  961.                 <div class="alert alert-danger">
  962.                     {{ CatalogMessage }}
  963.                 </div>
  964.             {% endif %}
  965.                 {% if CatalogData is not null %}
  966.                     <form name="form" id="catalog_form" class="" method="post" action="{{ url('cart_buystep',{'cart_key':CatalogCartKey}) }}">
  967.                         <input type="hidden" name="OlToken" value="{{ OlToken('catalog') }}" />
  968.                         <div id="catalog-list-area">
  969.                             {% for LabelId,Label in CatalogCategoryLabel %}
  970.                                 {% if CatalogData[LabelId] is defined %}
  971.                                     <div class="catalog-category-block">
  972.                                         <span class="catalog-category-label">{{ Label }}</span>
  973.                                         <ul class="catalog-list">
  974.                                             {% set Catalogs = CatalogData[LabelId] %}
  975.                                             {% for CatalogId,Catalog in Catalogs %}
  976.                                                 <li class="catalog-list-box" data-catalog-id="{{ CatalogId }}" id="catalog-list-box-{{CatalogId}}">
  977.                                                     <div class="catalog-list-box-inner">
  978.                                                         <label for="CatalogList_{{Catalog.catalog_id }}">
  979.                                                             <div class="catalog-list-box-header">
  980.                                                                 <div class="catalog-list-box-header-inner">
  981.                                                                     <span class="catalog-list-box-checkbox-wrap">
  982.                                                                         <input
  983.                                                                             id="CatalogList_{{Catalog.catalog_id }}"
  984.                                                                             class="select"
  985.                                                                             type="checkbox"
  986.                                                                             name="LmOrderOption[catalog][]"
  987.                                                                             value="{{ Catalog.catalog_id }}"
  988.                                                                             {{ CatalogChecked(Catalog.catalog_id) }}
  989.                                                                         >
  990.                                                                     </span>
  991.                                                                     <span class="catalog-list-box-title">{{ Catalog.catalog_title }}</span>
  992.                                                                 </div>
  993.                                                             </div>
  994.                                                             <div class="catalog-list-box-body">
  995.                                                                 <div class="catalog-list-box-image">
  996.                                                                     <img src="https://img0.land-mark.biz/kanri_img/images/catalog_image/{{ Catalog.catalog_id }}.jpg" alert="{{ Catalog.catalog_title }}">
  997.                                                                 </div>
  998.                                                                 <div class="catalog-list-box-comment">
  999.                                                                     <p>{{ Catalog.catalog_comment|raw}}</p>
  1000.                                                                 </div>
  1001.                                                             </div>
  1002.                                                         </label>
  1003.                                                         <div class="catalog-list-box-footer">
  1004.                                                             <ul class="catalog-list-box-link">
  1005.                                                                 {% set CatalogNum = '01' %}
  1006.                                                                 {% set CatalogKbn = Catalog.catalog_textlink_variation %}
  1007.                                                                 {% set CatalogUrl = Catalog.catalog_textlink_url%}
  1008.                                                                 {% if CatalogKbn %}<li>{{ include('Cart/Parts/CatalogLink.twig') }}</li>{% endif %}
  1010.                                                                 {% set CatalogNum = '02' %}
  1011.                                                                 {% set CatalogKbn = Catalog.catalog_textlink_variation2 %}
  1012.                                                                 {% set CatalogUrl = Catalog.catalog_textlink_url2 %}
  1013.                                                                 {% if CatalogKbn %}<li>{{ include('Cart/Parts/CatalogLink.twig') }}</li>{% endif %}
  1015.                                                                 {% set CatalogNum = '03' %}
  1016.                                                                 {% set CatalogKbn = Catalog.catalog_textlink_variation3 %}
  1017.                                                                 {% set CatalogUrl = Catalog.catalog_textlink_url3 %}
  1018.                                                                 {% if CatalogKbn %}<li>{{ include('Cart/Parts/CatalogLink.twig') }}</li>{% endif %}
  1019.                                                             </ul>
  1020.                                                         </div>
  1021.                                                     </div>
  1022.                                                 </li>
  1023.                                             {% endfor  %}
  1024.                                         </ul>
  1025.                                     </div>
  1026.                                 {% endif %}
  1027.                             {% endfor %}
  1028.                         </div>
  1030.                         <h2 id="receipt">ご意見・ご希望</h2>
  1031.                         <div class="content opinion-box">
  1032.                             <div class="content-wrapper">
  1033.                                 <div class="input-box-last">
  1034.                                     <div class="item-name">
  1035.                                         ご意見・ご希望&nbsp;<span class="not_required">任意</span>
  1036.                                     </div>
  1037.                                     <div id="item-content-comment">
  1038.                                         <textarea style="width: 100%; box-sizing: border-box;" name="LmOrderOption[message]" rows=5 cols=70>{{ GetLmOrderOption('message') }}</textarea>
  1039.                                     </div>
  1040.                                 </div>
  1041.                             </div>
  1042.                         </div>
  1044.                         {% if is_granted('ROLE_USER') %}
  1045.                             <div id="btns">
  1046.                                 {% if CatalogMessage is empty %}
  1047.                                     <div class="btn-wrapper" style="width:100%;">
  1048.                                         <input type="button" id="btn-next" value="確認" onclick="check_input();">
  1049.                                     </div>
  1050.                                 {% endif %}
  1051.                                 <div class="cancel-btn">
  1052.                                     <a class="ec-blockBtn--cancel" href="{{ url('remove_cart_item', {'mode': 'catalog', 'Token': OlToken('RemoveCartItme')}) }}">{{ 'front.cart_catalog.button02'|trans }}</a>
  1053.                                 </div>
  1054.                             </div>
  1055.                         {% else %}
  1056.                             <div><img src="{{ GetConfig('CFIMG_URL') }}/public_images/image_dt/btn_catalog_next.gif" style="width: 100%;" onclick="check_input();" alt="お客様情報を入力する"></div>
  1057.                             <div class="cancel-btn">
  1058.                                 <a class="ec-blockBtn--cancel" href="{{ url('remove_cart_item', {'mode': 'catalog', 'Token': OlToken('RemoveCartItme')}) }}">{{ 'front.cart_catalog.button02'|trans }}</a>
  1059.                             </div>
  1060.                         {% endif %}
  1061.                         {% if CatalogMessage is empty %}
  1062.                             <div id="cts-float-button">
  1063.                                 <button type="button" onclick="check_input();">カタログ請求手続きへ</button>
  1064.                             </div>
  1065.                         {% endif %}
  1066.                     </form>
  1067.                 {% endif %}
  1068.         </div>
  1069.     </div>
  1070. {% else %}
  1071.     <div id="CartCatalog" class="pc">
  1072.         {{ include('Cart/Parts/Step.twig') }}
  1073.         {% set CatalogMessage = CatalogValidation() %}
  1074.         {% if  CatalogMessage %}
  1075.             <div class="alert alert-danger">
  1076.                 {{ CatalogMessage }}
  1077.             </div>
  1078.         {% endif %}
  1079.         <div class="otodoke">
  1080.             {% set noukiSchedule = GetCatalogNoukiSchedule() %}
  1081.             <p class="title">{{'front.cart_catalog.message01'|trans}}<span class="red">{{ noukiSchedule | date('n月j日') }}（{{noukiSchedule| date('Y/m/d')|jweek}}）</span></p>
  1082.             <p class="red">{{'front.cart_catalog.message02'|trans}}</p>
  1083.             <p>{{'front.cart_catalog.message03'|trans}}</p>
  1084.         </div>
  1085.         {{ include('Shopping/alert.twig', { 'error_only': true }) }}
  1086.        <div class="">
  1087.                 {% if CatalogData is not null %}
  1088.                     <form name="form" id="form_cart" class="" method="post" action="{{ url('cart_buystep',{'cart_key':CatalogCartKey}) }}">
  1089.                         <input type="hidden" name="OlToken" value="{{ OlToken('catalog') }}" />
  1090.                         <div class="">
  1091.                             <div class="ec-cartTable">
  1092.                                 <div id="step1-top" >
  1093.                                     <img src="{{ GetConfig('CFIMG_URL') }}/public_images/sample/title_sub1.gif" alt="カタログ選択" width="990" />
  1095.                                 </div>
  1096.                                 <p class="limit-message">
  1097.                                     <strong>{{ 'front.cart_catalog.message08'|trans }}</strong><span class="red">{{ CatalogLimitMessage(Limit.cl_quantity_limit) }}</span>
  1098.                                 </p>
  1100.                                 <div id="catalog-list-area" class="efo-required efo-select" data-efo-validation='{"min":1, "max":"{{ Limit.cl_quantity_limit }}"}'>
  1101.                                     {% for LabelId,Label in CatalogCategoryLabel %}
  1102.                                         {% if CatalogData[LabelId] is defined %}
  1103.                                             <div class="catalog-category-block" id="{{ Label }}">
  1104.                                                 <span class="catalog-category-label">{{ Label }}</span>
  1105.                                                 <ul class="catalog-list">
  1106.                                                     {% set Catalogs = CatalogData[LabelId] %}
  1107.                                                     {% for CatalogId,Catalog in Catalogs %}
  1108.                                                         <li class="catalog-list-box" data-catalog-id="{{ CatalogId }}" id="catalog-list-box-{{CatalogId}}">
  1109.                                                             <div class="catalog-list-box-inner">
  1110.                                                                 <label for="CatalogList_{{Catalog.catalog_id }}">
  1111.                                                                     <div class="catalog-list-box-header">
  1112.                                                                         <div class="catalog-list-box-header-inner">
  1113.                                                                                 <span class="catalog-list-box-checkbox-wrap">
  1114.                                                                                     <input
  1115.                                                                                         id="CatalogList_{{Catalog.catalog_id }}"
  1116.                                                                                         class="select"
  1117.                                                                                         type="checkbox"
  1118.                                                                                         name="LmOrderOption[catalog][]"
  1119.                                                                                         value="{{ Catalog.catalog_id }}"
  1120.                                                                                         {{ CatalogChecked(Catalog.catalog_id) }}
  1121.                                                                                     >
  1122.                                                                                 </span>
  1123.                                                                             <span class="catalog-list-box-title">{{ Catalog.catalog_title }}</span>
  1124.                                                                         </div>
  1125.                                                                     </div>
  1126.                                                                     <div class="catalog-list-box-body">
  1127.                                                                         <div class="catalog-list-box-image">
  1128.                                                                             <img src="https://img0.land-mark.biz/kanri_img/images/catalog_image/{{ Catalog.catalog_id }}.jpg" alert="{{ Catalog.catalog_title }}">
  1129.                                                                         </div>
  1130.                                                                         <div class="catalog-list-box-comment">
  1131.                                                                             <p>{{ Catalog.catalog_comment|raw}}</p>
  1132.                                                                         </div>
  1133.                                                                     </div>
  1134.                                                                 </label>
  1135.                                                                 <div class="catalog-list-box-footer">
  1136.                                                                     <ul class="catalog-list-box-link">
  1137.                                                                         {% set CatalogNum = '01' %}
  1138.                                                                         {% set CatalogKbn = Catalog.catalog_textlink_variation %}
  1139.                                                                         {% set CatalogUrl = Catalog.catalog_textlink_url%}
  1140.                                                                         {% if CatalogKbn %}<li>{{ include('Cart/Parts/CatalogLink.twig') }}</li>{% endif %}
  1142.                                                                         {% set CatalogNum = '02' %}
  1143.                                                                         {% set CatalogKbn = Catalog.catalog_textlink_variation2 %}
  1144.                                                                         {% set CatalogUrl = Catalog.catalog_textlink_url2 %}
  1145.                                                                         {% if CatalogKbn %}<li>{{ include('Cart/Parts/CatalogLink.twig') }}</li>{% endif %}
  1147.                                                                         {% set CatalogNum = '03' %}
  1148.                                                                         {% set CatalogKbn = Catalog.catalog_textlink_variation3 %}
  1149.                                                                         {% set CatalogUrl = Catalog.catalog_textlink_url3 %}
  1150.                                                                         {% if CatalogKbn %}<li>{{ include('Cart/Parts/CatalogLink.twig') }}</li>{% endif %}
  1151.                                                                     </ul>
  1152.                                                                 </div>
  1153.                                                             </div>
  1154.                                                         </li>
  1155.                                                     {% endfor  %}
  1156.                                                 </ul>
  1157.                                             </div>
  1158.                                         {% endif %}
  1159.                                     {% endfor %}
  1160.                                 </div>
  1161.                             </div>
  1162.                         </div>
  1164.                         <div class="catalog-bottom-box clearfix">
  1165.                             <div class="foot_message">
  1166.                                 <p>{{ 'front.cart_catalog.message04'|trans|raw}}</p>
  1167.                                 <p>{{ 'front.cart_catalog.message05'|trans|raw}}</p>
  1168.                                 <p>{{ 'front.cart_catalog.message06'|trans|raw}}</p>
  1169.                             </div>
  1170.                             {% if CatalogMessage is empty %}
  1171.                                 <div class="catalog_btn_area">
  1172.                                     <button id="btn01-mask" class="btnMask" type="button">
  1173.                                         <img src="{{ GetConfig('CFIMG_URL') }}/public_images/regi/btn_kakunin_off.gif" width="205" height="45" alt="未入力、もしくは入力間違いの必須項目があります。"/>
  1174.                                     </button>
  1176.                                     <button id="btn01" class="btnNext" type="submit">
  1177.                                         <img src="{{ GetConfig('CFIMG_URL') }}/public_images/sample/btn_select.png" alt="確認画面へ進む" />
  1178.                                     </button>
  1179.                                 </div>
  1180.                             {% endif %}
  1181.                         </div>
  1183.                         <div id="catalog_btn_area" class="ec-cartRole__actions">
  1184.                             <a class="ec-blockBtn--cancel" href="{{ url('remove_cart_item', {'mode': 'catalog', 'Token': OlToken('RemoveCartItme')}) }}">{{ 'front.cart_catalog.button02'|trans }}</a>
  1185.                         </div>
  1186.                     </form>
  1187.                 {% endif %}
  1188.         </div>
  1189.     </div>
  1190. {% endif %}
  1191. {% endblock %}