app/Plugin/PiaMailmagHistory/Resource/template/admin/Product/mailmag_widget.twig line 1

Open in your IDE?
  1. {#
  2. * Plugin Name : PiaMailmagHistory
  3. *
  4. * 商品メルマガ配信管理プラグイン
  5. * 管理画面商品編集ページ用ウィジェット
  6. #}
  8. <div class="row mb-3" id="pia-mailmag-widget">
  9.     <div class="col-3">
  10.         <div class="d-inline-block">
  11.             <span>商品メルマガ配信</span>
  12.         </div>
  13.     </div>
  14.     <div class="col mb-2">
  15.         <div class="row mb-2 align-items-center">
  16.             <div class="col-auto">
  17.                 <i class="fa fa-calendar" aria-hidden="true"></i>
  18.                 <input type="date" class="form-control d-inline-block" style="width:auto;" id="pia-mailmag-release-date"
  19.                        value="{{ pia_mailmag_release_date ? pia_mailmag_release_date|date('Y-m-d') : '' }}">
  20.             </div>
  21.             <div class="col-auto">
  22.                 <button type="button" class="btn btn-sm btn-ec-regular" id="pia-mailmag-release-date-save">発売日を保存</button>
  23.             </div>
  24.             <div class="col-auto">
  25.                 <span id="pia-mailmag-release-date-message" class="text-success" style="display:none;">保存しました</span>
  26.             </div>
  27.         </div>
  28.         <div class="d-flex flex-wrap" id="pia-mailmag-boxes" style="gap:8px;">
  29.             {% for box in pia_mailmag_boxes %}
  30.                 <div class="pia-mailmag-box text-center" style="background-color:{{ box.bg_color }};">
  31.                     <div class="pia-mailmag-box-label">{{ box.label }}</div>
  32.                     <div class="pia-mailmag-box-date">{{ box.date_label }}</div>
  33.                     <div class="pia-mailmag-box-status">{{ box.status_label }}</div>
  34.                 </div>
  35.             {% endfor %}
  36.         </div>
  37.         <div class="mt-2">
  38.             <span class="text-muted" style="font-size:85%;">※配信済みへの変更は「商品メルマガ配信 &gt; 配信設定」から行ってください。</span>
  39.         </div>
  40.         <div class="mt-2">
  41.             <a href="{{ url('pia_mailmag_history_product_send') }}?product_id={{ pia_mailmag_product_id }}" class="btn btn-sm btn-ec-regular" target="_blank">
  42.                 この商品のメルマガを配信する
  43.             </a>
  44.         </div>
  45.     </div>
  46. </div>
  48. <style>
  49. #pia-mailmag-widget .pia-mailmag-box {
  50.     width: 100px;
  51.     padding: 8px 6px;
  52.     border: 1px solid #ccc;
  53.     border-radius: 4px;
  54.     color: #444;
  55. }
  56. #pia-mailmag-widget .pia-mailmag-box-label {
  57.     font-size: 85%;
  58.     font-weight: bold;
  59.     color: #444;
  60. }
  61. #pia-mailmag-widget .pia-mailmag-box-date {
  62.     font-size: 85%;
  63.     color: #444;
  64.     margin-bottom: 2px;
  65. }
  66. #pia-mailmag-widget .pia-mailmag-box-status {
  67.     font-size: 85%;
  68.     color: #444;
  69. }
  70. </style>
  72. <script>
  73. $(function () {
  74.     $('#pia-mailmag-release-date-save').on('click', function () {
  75.         var releaseDate = $('#pia-mailmag-release-date').val();
  76.         $.post('{{ url('pia_mailmag_history_release_date_save') }}', {
  77.             product_id: {{ pia_mailmag_product_id }},
  78.             release_date: releaseDate
  79.         }).done(function (res) {
  80.             if (res.status) {
  81.                 var $boxes = $('#pia-mailmag-boxes');
  82.                 $boxes.empty();
  83.                 $.each(res.boxes, function (i, box) {
  84.                     $boxes.append(
  85.                         '<div class="pia-mailmag-box text-center" style="background-color:' + box.bg_color + ';">' +
  86.                         '<div class="pia-mailmag-box-label">' + box.label + '</div>' +
  87.                         '<div class="pia-mailmag-box-date">' + box.date_label + '</div>' +
  88.                         '<div class="pia-mailmag-box-status">' + box.status_label + '</div>' +
  89.                         '</div>'
  90.                     );
  91.                 });
  92.                 $('#pia-mailmag-release-date-message').stop(true, true).show().fadeOut(2000);
  93.             }
  94.         });
  95.     });
  96. });
  97. </script>