app/template/user_data/delivery_confirmation.twig line 1

Open in your IDE?
  1. {% extends '@user_data/layout/default_frame.twig' %}
  2. {% block title %}
  3. 納期・発送日確認 | オリジナル缶バッジ/カンバッチ製作【個人小ロットから業務用OEMまで激安印刷】ZEAMI Goods
  4. {% endblock %}
  6. {% block js %}
  7. {# https://www.npmjs.com/package/japanese-holidays #}
  8. <script src="{{ asset('assets/js/holiday_calender.js') }}" type="text/javascript"></script>
  9. <script>
  10. document.addEventListener('DOMContentLoaded', async (event) => {
  11. const today = new Date();
  12. const year = today.getFullYear();
  13. const month = today.getMonth();
  14. const date = today.getDate();
  16. const firstDayOfMonth = new Date(year, month, 1).getDay();
  17. const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
  18. const lastDayOfMonth = new Date(year, month, lastDateOfMonth).getDay();
  19. const lastDateOfPreviousMonth = new Date(year, month, 0).getDate();
  21. const calendarMonth = document.querySelector('.calender_month');
  22. const calendarTable = document.querySelector('.calender_table tbody');
  23. const workingtimes = {{ workingtimes|json_encode|raw }};
  25. const months = [
  26. "1月",
  27. "2月",
  28. "3月",
  29. "4月",
  30. "5月",
  31. "6月",
  32. "7月",
  33. "8月",
  34. "9月",
  35. "10月",
  36. "11月",
  37. "12月"
  38. ];
  40. calendarMonth.textContent = `${year}年${
  41. months[month]
  42. }`;
  44. let calendarHTML = '';
  46. let dateCounter = 1;
  47. let nextMonthDateCounter = 1;
  49. for (let row = 0; row < 6; row++) {
  50. calendarHTML += '<tr class="date">';
  51. for (let day = 0; day < 7; day++) {
  52. if (row === 0 && day < firstDayOfMonth) {
  53. calendarHTML += `<td class="other_month">${
  54. lastDateOfPreviousMonth - firstDayOfMonth + day + 1
  55. }</td>`;
  56. } else if (dateCounter > lastDateOfMonth) {
  57. calendarHTML += `<td class="other_month">${nextMonthDateCounter}</td>`;
  58. nextMonthDateCounter++;
  59. } else {
  60. let className = '';
  61. if (day === 0 || day === 6) {
  62. className = 'rest';
  63. }
  64. if (dateCounter === date && month === today.getMonth() && year === today.getFullYear()) {
  65. className = 'active';
  66. }
  67. const time = new Date(`${year}-${month + 1}-${dateCounter}`);
  68. const holiday = JapaneseHolidays.isHoliday(time);
  69. if (holiday) {
  70. className = 'holiday';
  71. }
  73. let current_date = `${year}-${month + 1}-${dateCounter}`;
  74. for(let i = 0; i < workingtimes.length; i++) {
  75. if((workingtimes[i]['date'].replace('-0', '-') == current_date) && workingtimes[i]['status']) {
  76. className = 'holiday';
  77. } else if((workingtimes[i]['date'].replace('-0', '-') == current_date )&& !workingtimes[i]['status']) {
  78. className = 'working'
  79. }
  80. }
  82. calendarHTML += `<td class="${className}">${dateCounter}</td>`;
  83. dateCounter++;
  84. }
  85. }
  86. calendarHTML += '</tr>';
  87. }
  89. await calendarTable.insertAdjacentHTML('beforeend', calendarHTML);
  90. });
  92. document.addEventListener('DOMContentLoaded', async (event) => {
  93. const today = new Date();
  94. const year = today.getFullYear();
  95. const month = today.getMonth() + 1;
  96. const date = today.getDate();
  98. const firstDayOfMonth = new Date(year, month, 1).getDay();
  99. const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
  100. const lastDayOfMonth = new Date(year, month, lastDateOfMonth).getDay();
  101. const lastDateOfPreviousMonth = new Date(year, month, 0).getDate();
  103. const calendarMonth = document.querySelector('.calender_next_month');
  104. const calendarTable = document.querySelector('.calender_next_table tbody');
  105. const workingtimes = {{ workingtimes|json_encode|raw }};
  107. const months = [
  108. "1月",
  109. "2月",
  110. "3月",
  111. "4月",
  112. "5月",
  113. "6月",
  114. "7月",
  115. "8月",
  116. "9月",
  117. "10月",
  118. "11月",
  119. "12月"
  120. ];
  122. calendarMonth.textContent = month == 12 ? `${year + 1}年${months[0]}` : `${year}年${months[month]}`;
  124. let calendarHTML = '';
  126. let dateCounter = 1;
  127. let nextMonthDateCounter = 1;
  129. for (let row = 0; row < 6; row++) {
  130. calendarHTML += '<tr class="date">';
  131. for (let day = 0; day < 7; day++) {
  132. if (row === 0 && day < firstDayOfMonth) {
  133. calendarHTML += `<td class="other_month">${lastDateOfPreviousMonth - firstDayOfMonth + day + 1}</td>`;
  134. } else if (dateCounter > lastDateOfMonth) {
  135. calendarHTML += `<td class="other_month">${nextMonthDateCounter}</td>`;
  136. nextMonthDateCounter++;
  137. } else {
  138. let className = '';
  139. if (day === 0 || day === 6) {
  140. className = 'rest';
  141. }
  142. if (dateCounter === date && month === today.getMonth() && year === today.getFullYear()) {
  143. className = 'active';
  144. }
  145. const time = month == 12 ? new Date(`${year + 1}-${1}-${dateCounter}`): new Date(`${year}-${month + 1}-${dateCounter}`);
  147. const holiday = JapaneseHolidays.isHoliday(time);
  148. if (holiday) {
  149. className = 'holiday';
  150. }
  151. let current_date = `${year}-${month + 1}-${dateCounter}`;
  152. for(let i = 0; i < workingtimes.length; i++) {
  153. if((workingtimes[i]['date'].replace('-0', '-') == current_date) && workingtimes[i]['status']) {
  154. className = 'holiday';
  155. } else if((workingtimes[i]['date'].replace('-0', '-') == current_date )&& !workingtimes[i]['status']) {
  156. className = 'working'
  157. }
  158. }
  159. calendarHTML += `<td class="${className}">${dateCounter}</td>`;
  160. dateCounter++;
  161. }
  162. }
  163. calendarHTML += '</tr>';
  164. }
  166. calendarTable.insertAdjacentHTML('beforeend', calendarHTML);
  168. const now = new Date();
  169. const checkHoliday = checkIsHoliday(now, workingtimes);
  170. if(checkHoliday) {
  171. $('.working-time').hide();
  172. $('.holiday-time').show();
  173. } else {
  174. $('.holiday-time').hide();
  175. $('.working-time').show();
  176. }
  178. if(checkHoliday) {
  179. let nextBusiness = null;
  180. do {
  181. now.setDate(now.getDate() + 1);
  182. nextBusiness = now;
  183. } while (checkIsHoliday(now, workingtimes));
  185. $('.holiday-time').text('翌営業日『' + formatDateJP(nextBusiness) + '』ご注文確定の場合、下記日程で発送いたします。')
  186. }
  187. });
  189. function checkIsHoliday(date, workingtimes) {
  190. date = formatDate(date);
  191. const now_time = new Date(date);
  192. const holiday = JapaneseHolidays.isHoliday(now_time);
  193. let check = false;
  194. if(holiday) {
  195. check = true;
  196. } else {
  197. check = false;
  198. }
  199. for(let i = 0; i < workingtimes.length; i++) {
  200. if((workingtimes[i]['date'] == date) && workingtimes[i]['status']) {
  201. check = true;
  202. } else if((workingtimes[i]['date'] == date )&& !workingtimes[i]['status']) {
  203. check = false;
  204. }
  205. }
  206. return check;
  207. }
  209. function formatTimeDelivery(totalDay) {
  210. const workingtimes = {{ workingtimes|json_encode|raw }};
  211. let working_time = [];
  212. let holiday_time = [];
  213. for(let i = 0; i < workingtimes.length; i++) {
  214. if(workingtimes[i].status) {
  215. holiday_time.push(workingtimes[i].date);
  216. } else {
  217. working_time.push(workingtimes[i].date);
  218. }
  219. }
  220. const now = new Date();
  221. now.setDate(now.getDate() + 1);
  222. let index = 0;
  223. for(let i = 0; i < totalDay; i++) {
  224. const holiday = JapaneseHolidays.isHoliday(now);
  225. if(holiday || now.getDay() == 6 || now.getDay() == 0) {
  226. if(!working_time.includes(formatDate(now))) {
  227. index++;
  228. }
  229. }
  230. if(holiday_time.includes(formatDate(now))) {
  231. index++;
  232. }
  233. now.setDate(now.getDate() + 1);
  234. }
  235. while((JapaneseHolidays.isHoliday(now) || now.getDay() == 6 || now.getDay() == 0 || holiday_time.includes(formatDate(now))) && !working_time.includes(formatDate(now))) {
  236. now.setDate(now.getDate() + 1);
  237. }
  238. now.setDate(now.getDate() + index);
  239. while((JapaneseHolidays.isHoliday(now) || now.getDay() == 6 || now.getDay() == 0 || holiday_time.includes(formatDate(now))) && !working_time.includes(formatDate(now))) {
  240. now.setDate(now.getDate() + 1);
  241. }
  242. return formatDateJP(now);
  243. }
  245. function formatDate(date) {
  246. const year = date.getFullYear();
  247. const month = String(date.getMonth() + 1).padStart(2, '0');
  248. const day = String(date.getDate()).padStart(2, '0');
  249. return `${year}-${month}-${day}`;
  250. }
  252. function formatDateJP(time) {
  253. const daysOfWeek = ['日', '月', '火', '水', '木', '金', '土'];
  255. const year = time.getFullYear();
  256. const month = time.getMonth() + 1;
  257. const day = time.getDate();
  258. const dayOfWeek = time.getDay();
  260. return `${year}年${month}月${day}日(${daysOfWeek[dayOfWeek]})`;
  261. }
  262. </script>
  263. <script>
  264. $(document).ready(function () {
  265. $('input[type=radio][name=category]').change(function () {
  266. let cate = this.value;
  267. const admin_router = "{{ eccube_config.eccube_admin_route }}";
  268. $.ajax({
  269. url: `/category-products/` + cate,
  270. dataType: 'json', // added data type
  271. success: function (res) {
  272. $('.product-block').show();
  273. let html = '';
  274. for (let i = 0; i < res.products.length; i++) {
  275. html += `
  276. <li class="type_check up moveup">
  277. <label style="display: flex !important"><input type="radio" onchange="handleProductChange(this)" name="product" value="${res.products[i].id}" class="form_check"/>
  278. <span></span>
  279. <div style="text-wrap: wrap;width: 60%;">${res.products[i].name}</div>
  280. </label>
  281. </li>
  282. `;
  283. }
  284. $('.product-list').html(html);
  285. }
  286. });
  287. });
  288. });
  290. function handleProductChange(radio) {
  291. var selectedProductId = radio.value;
  293. $.ajax({
  294. url: `/get_delivery/`+selectedProductId,
  295. dataType: 'json', // added data type
  296. success: function (res) {
  297. $('.add_line').remove();
  298. $('.delivery_confirm').show();
  299. let html = '';
  300. for (let i = 0; i < res.data.length; i++) {
  301. html += `
  302. <tr class="add_line">
  303. <td class="table_headline">
  304. <p>${res.data[i].quantity}</p>
  305. </td>
  306. `;
  307. for(let j = 0; j < res.data[i].options.length; j++) {
  308. if(res.data[i].options[j].deliverty_time == '0') {
  309. html += `
  310. <td>
  311. <p class="delivery_date" style="min-width: 50px">-</p>
  312. </td>
  313. `;
  314. } else {
  315. html += `
  316. <td>
  317. <p class="delivery_date">${res.data[i].options[j].deliverty_time}営業日後発送</p><br>${formatTimeDelivery(res.data[i].options[j].deliverty_time)}
  318. </td>
  319. `;
  320. }
  321. }
  322. html += `
  323. </tr>
  324. `;
  325. }
  326. $('#root-table').after(html);
  327. }
  328. });
  329. }
  331. async function checkStatusDate(date) {
  332. return new Promise((resolve, reject) => {
  333. $.ajax({
  334. url: "{{ url('workingtime_check_status') }}",
  335. method: 'POST',
  336. data: {
  337. date: date,
  338. },
  339. dataType: 'json',
  340. success: function(res) {
  341. resolve(res.result);
  342. },
  343. error: function(err) {
  344. reject(err);
  345. }
  346. });
  347. });
  348. }
  349. </script>
  350. {% endblock %}
  352. {% block content %}
  353. <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  354. <div id="bread_crumbBloc" class="fades">
  355. <ul id="breadCrumb" class="fades">
  356. <li class="up">
  357. <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  358. </li>
  359. <li class="up">納期・発送日確認</li>
  360. </ul>
  361. <!-- ///// #breadCrumb +++++ ///// -->
  362. <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  363. </div>
  366. <!-- ▼▼ MAIN CONTENTS __________________________________________________________________________________________________ ▼▼ -->
  367. <main
  368. id="mainContents" class="">
  371. <!-- // == MAIN ================================================================================ // -->
  372. <section
  373. id="Confirm" class="section_basic full">
  375. <!-- // ++ ページタイトル ++ /////////////////////////////////////////////////////////////// -->
  376. <div id="section_titleBloc" class="fades twolayout_body">
  377. <div id="title_twoLayout">
  378. <h3 class="section_title up">納期・発送日確認</h3>
  379. <p class="title_cap up">ご注文確定の日より、当店から出荷の日をご確認いただけます</p>
  380. <p class="section_note up">デザイン決定後、ご決済いただき次第ご注文確定となります。個人のお客様で銀行振込をご選択の場合、ご入金を確認次第ご注文確定となりますのでご注意ください。
  381. ヤマト運輸をご選択の場合、到着時間帯をご指定可能です。（午前中、14～16時、16～18時、18～20時、19～21時）<br>
  382. 日本国外発送可能　International delivery</p>
  383. </div>
  384. <!-- //// ++++ #title_twoLayout ++++ //// -->
  386. <figure id="titlePic" class="two_layout"><img src="{{ asset('assets/img/delivery/confirm_title_pic.jpg') }}"></figure>
  387. <!-- ///// #section_titleBloc +++++ ///// -->
  388. </div>
  391. <!-- // ++ 営業日カレンダー ++ /////////////////////////////////////////////////////////////// -->
  392. <div id="Calender" class="one_box fades">
  393. <div
  394. class="calender_inner">
  396. <!-- // △△ 見出し ++ △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
  397. <dl id="calender_titleArea" class="fades">
  398. <dt>
  399. <h4 id="calenderHeadline" class="up">
  400. <span>営業日カレンダー</span>
  401. </h4>
  402. </dt>
  403. <dd>
  404. <span id="markClosed" class="up"><img src="{{ asset('assets/img/mark_closed.jpg') }}"></span>休業日</dd>
  405. <!-- //// ++++ #calender_titleArea ++++ //// -->
  406. </dl>
  409. <!-- // △△ カレンダー ++ △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
  410. <ul
  411. id="calenderList">
  413. <!-- ■■ ++ ONE CALENDER ++ ■■ -->
  414. <li class="one_calender">
  415. <h5 class="calender_month">2024年xx月</h5>
  416. <table class="calender_table">
  417. <tbody>
  418. <tr class="title_week">
  419. <th>日</th>
  420. <th>月</th>
  421. <th>火</th>
  422. <th>水</th>
  423. <th>木</th>
  424. <th>金</th>
  425. <th>土</th>
  426. </tr>
  428. </tbody>
  429. </table>
  430. <!-- /// *** .calender_table *** /// -->
  431. </li>
  432. <!-- //// .one_calender **** //// -->
  435. <!-- ■■ ++ ONE CALENDER ++ ■■ -->
  436. <li class="one_calender">
  437. <h5 class="calender_month calender_next_month">2024年xx月</h5>
  438. <table class="calender_table calender_next_table">
  439. <tbody>
  440. <tr class="title_week">
  441. <th>日</th>
  442. <th>月</th>
  443. <th>火</th>
  444. <th>水</th>
  445. <th>木</th>
  446. <th>金</th>
  447. <th>土</th>
  448. </tr>
  450. </tbody>
  451. </table>
  452. <!-- /// *** .calender_table *** /// -->
  453. </li>
  454. <!-- //// .one_calender **** //// -->
  456. <!-- //// ++++ #calender_titleArea ++++ //// -->
  457. </ul>
  458. </div>
  459. </div>
  460. <!-- ///// #Calender +++++ ///// -->
  463. <!-- // ++ 発送日確認 ++ /////////////////////////////////////////////////////////////// -->
  464. <div id="Delivery" class="one_box fades">
  465. <form
  466. action="" class="input_content">
  468. <!-- // △△ カテゴリ ++ △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
  469. <h3 class="section_title up">カテゴリを選択してください</h3>
  470. <ul id="detail_checkList" class="confirm fades">
  472. {% for category in categories %}
  473. <!-- ☆☆ ++ ステッカー ++ ☆☆ -->
  474. <li class="type_check up">
  475. <label><input type="radio" name="category" value="{{ category.id }}" class="form_check"/>
  476. <span>{{category.name}}</span>
  477. </label>
  478. </li>
  479. {% endfor %}
  481. </ul>
  482. <!-- //// ++++ .detail_checkList ++++ //// -->
  485. <!-- // △△ 商品 ++ △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
  486. <h3 class="section_title up product-block" style="display: none">商品を選択してください</h3>
  487. <ul id="detail_checkList" class="product-block product-list confirm fades" style="display: none">
  488. </ul>
  489. <!-- //// ++++ .detail_checkList ++++ //// -->
  492. <!-- // △△ 発送日確認 ++ △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
  493. {% set days = {'Mon': '月', 'Tue': '火', 'Wed': '水', 'Thu': '木', 'Fri': '金', 'Sat': '土', 'Sun': '日'} %}
  494. {% set bussiness_day = "now"|date("D") %}
  495. <div class="delivery_confirm" style="display: none">
  496. <h3 class="section_title up">発送日確認
  497. <p class="section_note up working-time">本日{{ "now"|date("Y年n月j日") }}({{ days[bussiness_day] }})』ご注文確定の場合、下記日程で発送いたします。</p>
  498. <p class="section_note up holiday-time"></p>
  499. </h3>
  501. <div id="tableBox" class="confirm fades">
  502. <table cellpadding="0" cellspacing="0" id="cart_indexTable" class="confirm fades">
  503. <tbody>
  504. <tr id="root-table">
  505. <th class="order_num">
  506. <p>枚数</p>
  507. </th>
  508. <th>
  509. <p>最安値</p>
  510. </th>
  511. <th class="line" colspan="3">
  512. <span></span>
  513. </th>
  514. <th>
  515. <p>最短納期</p>
  516. </th>
  517. </tr>
  519. </tbody>
  520. </table>
  521. <!-- //// ++++ #cart_indexTable ++++ //// -->
  523. <!-- //// ++++ #tableBox ++++ //// -->
  524. </div>
  526. <div class="table_info up">
  527. <span>大口注文はメールでお問い合わせください</span>
  528. </div>
  529. </div>
  530. <!-- //// .table_info **** //// -->
  531. {% if data.product is defined %}
  532. <a href="{{ url('detail_product', {id: data.product.id}) }}" style="text-decoration: none">
  533. <div id="btnSubmit" class="up"><input style="submit" name="submit" value="商品ページへ" class="btn_submit"></div>
  534. </a>
  535. {% endif %}
  537. <!-- // △△ データ作成上のご注意 ++ △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
  538. <aside class="one_box caution_box fades">
  539. <div class="caution_inner">
  540. <h5 class="caution_title up">データ作成上のご注意</h5>
  541. <p class="indent up">◯悪天候・天災及び年末年始は物流の混雑や交通渋滞の影響により1日程度の遅れが生じることがあります。</p>
  542. <p class="indent up">◯配送遅延につきましては当店では一切の責任を負いかねますのであらかじめご了承ください。</p>
  543. <!-- // ** .caution_box ** // -->
  544. </div>
  545. </aside>
  547. </form>
  548. </div>
  549. <!-- ///// #Delivery +++++ ///// -->
  552. <!-- // ++ 店頭引取について ++ /////////////////////////////////////////////////////////////// -->
  553. <dl id="Store" class="one_box">
  554. <dt id="storeLeft">
  555. <article class="one_group">
  556. <h3 class="section_title up">店頭引取について</h3>
  557. <h4 class="guide_headline fades">本社/FACTO_OSAKA [大阪・江坂]</h4>
  558. <p class="flow_notes indent up">◯ 商品お受取時店頭支払（現金・クレジットカード・PayPay・au PAY）</p>
  559. <p class="flow_notes indent up">◯ 店頭引取をご希望の場合は、完成予定日の翌営業日11時からお引取可能。事前のご予約にご協力ください</p>
  560. <!-- //// **** .one_group **** //// -->
  561. </article>
  563. <article class="one_group">
  564. <h4 class="guide_headline fades">アクセスマップ</h4>
  565. <p class="flow_notes up">〒564-0051 大阪府吹田市豊津町21-10 クルーズ江坂第二ビル2F<br>
  566. <span class="nolink">tel 06-6384-8422</span><br>
  567. 営業時間：11:00〜18:00</p>
  568. <!-- //// **** .one_group **** //// -->
  569. </article>
  570. </dt>
  571. <!-- //// +++ #storeLeft ++++ //// -->
  573. <dd id="storeRight">
  574. <figure id="payment-accessMap" class="up">
  575. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3277.868877398006!2d135.4902870757471!3d34.75889572289904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e5b6f9ba168b%3A0x3185ef8a686677c2!2sFACTO_OSAKA!5e0!3m2!1sja!2sjp!4v1713609119019!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  576. <!-- //// #payment-accessMap ++++ //// -->
  577. </figure>
  578. </dd>
  579. <!-- //// +++ #storeRight ++++ //// -->
  581. <!-- ///// #Store +++++ ///// -->
  582. </dl>
  584. </section>
  585. <!-- ///// +++++ #Delivery +++++ ///// -->
  586. <!-- ///// +++++ #mainContents +++++ ///// -->
  587. </main>
  590. <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  591. <div id="bread_crumbBloc" class="fades">
  592. <ul id="breadCrumb" class="fades">
  593. <li class="up">
  594. <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  595. </li>
  596. <li class="up">納期・発送日確認</li>
  597. </ul>
  598. <!-- ///// #breadCrumb +++++ ///// -->
  599. <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  600. </div>
  601. {% endblock %}