app/template/default/Product/components/set_product.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2. <style>
  3. /*                    .pots_section ul{
  4.         display: flex;
  5.         margin-top: 40px;
  6.     }
  8.     .pots_section li{
  9.         width: 200px;
  10.         height: 200px;
  11.         margin-right: 20px;
  12.         cursor: pointer
  14.     }
  15.     .pots_section li img{
  16.         width: 150px;
  17.         height: 150px
  18.     }*/
  20. </style>
  21. {% endblock %}     
  22. {% block javascript %}
  23. <script>
  24.     $(window).on('load',function(){
  26.         let val = $('#form1').find('[name="_token"]').val()
  28.         $('#form2').find('[name="_token"]').val(val)
  29.     });
  33.     $(window).on('load',function(){
  34.         radio_show();
  35.         radio_selected();
  37.     })
  39.     function radio_selected(){
  40.         let set_data = $('#set_block').data('id')
  41.         $('#pot_'+set_data).prop("checked",true)
  42.         $('#pot_'+set_data).parent('li').addClass('selected')
  43.     }
  44.     function radio_show(){
  45.         $('.pots_list').find('li').each(function(){
  46.             $(this).find('input').on('change',function(){
  47.                 let val = $(this).val()
  48.                 let set_data = $('#set_block').data('id')
  50.                 //セットエリアの表示・非表示
  51.                 if(Number(val) !== Number(set_data)){
  52.                     $('#set_block').addClass('none')
  53.                     $('[data-name="show_btn"]').removeClass('none')
  54.                 }else{
  55.                     $('#set_block').removeClass('none')
  56.                     $('[data-name="show_btn"]').addClass('none')
  57.                 }
  59.                 //選択済みの表示・非表示
  60.                 $('.pots_list').find('li').removeClass('selected')
  61.                 $(this).parent('li').addClass('selected')
  63.             })
  65.         });
  66.     }
  68. </script>
  69. <script type="text/javascript">
  70. document.addEventListener('DOMContentLoaded', function() {
  71.     document.querySelector('#form_selected').addEventListener('submit', function(e) {
  72.         var radios = document.querySelectorAll('input[type="radio"]');
  73.         var hasChecked = false;
  75.         for (var i = 0; i < radios.length; i++) {
  76.             if (radios[i].checked) {
  77.                 hasChecked = true;
  78.                 break;
  79.             }
  80.         }
  82.         if (!hasChecked) {
  83.             e.preventDefault();
  84.             alert('お好みの商品をご選択ください。');
  85.         }
  86.     });
  87. });
  88. </script>
  89. {% endblock javascript %}
  91. {% set sets = get_set_product(Product.id,Product.ProductCategories) %}
  93. {% if(sets['option_product'][0] is not defined  ) %}
  94. {% else %}
  96.     <div class="add_option_wrap maxWid mbPad " id="add_option"> 
  97.         <div class="wrap">
  99.             <div class="heading">
  100.                 {{ sets.option_name}}とセットで購入する
  101.             </div>
  102.             <div class="inner">
  104.                             {{ include_dispatch('Product/components/set_product/set_product_selected.twig') }}
  106.                 {% if(sets['set_show'] == "true"  ) %}
  107.                     {# {% else %} #}
  108.                             {{ include_dispatch('Product/components/set_product/set_product_result.twig') }}
  110.                     {% endif %}
  112.                 </div>
  113.             </div>
  114.         </div>
  116.     {% endif %}