$(document).on('page:beforein', '.page[data-name="item"]', async function (e) {

  console.log('app item ready')

  var iId = e.detail.route.params.id;

  var cId = e.detail.route.params.c1;

  console.log(iId+'; '+cId)

  

  //console.log(cId)

  let js = JSON.parse(localStorage.getItem('s23_data_item'));

  let dt2 = js.item.data[iId];  

  console.log(dt2)

  //console.log(dt)

  //console.log(dt.data.length)

  let strTitle=dt2.kodeunik;

  //console.log(strTitle)

  $$("#item_title").html(strTitle);

  let strHtml = `

    <div class="separator-small"></div>

    `;

  strHtml +=`

<div class="container">

  <div class="swiper-container image-slider" id="it345wg">

    <div class="swiper-pagination"></div>

    <div class="swiper-wrapper" id="dynamic-img"> 

    <div class="swiper-slide">

      <img src="`+dt2.images[0].url+`" width="100%" style="height:auto;">

   </div>

    <div class="swiper-slide">

      <img src="`+dt2.images[1].url+`" width="100%" style="height:auto;">

   </div>

    <div class="swiper-slide">

      <img src="`+dt2.images[2].url+`" width="100%" style="height:auto;">

   </div>

    </div>

  </div>

</div>

    `;

    strHtml +=`

<div class="detail-title mt-2">

  <div class="container">

   <div class="tag-category">

      <span class="mr-2">`+dt2.jenis+`</span> <span>`+dt2.kategori+`</span>

   </div>

    <p class="price-item"><sup>Rp</sup>`+dt2.price_idr_s+` <sup>juta</sup></p>



    <!-- separator -->

    <div class="separator-small"></div>

   <!-- end separator -->



    <p class="title-item title-item-large">`+dt2.title+`</p>

    <!-- separator -->



    <div class="separator-small"></div>

   <!-- end separator -->



    <div class="short-info">

      <p class="text-small">Published : <span>12 April 2020</span></p>

      <p class="text-small">Viewed : <span>560</span></p>

   </div>



    <!-- separator -->

    <div class="separator-small"></div>

   <!-- end separator -->



    <div class="item-detail-action">

      <ul>

        <li><a href="#"><ion-icon name="heart-outline" role="img" class="md hydrated"></ion-icon></a></li>

        <li><a href="#"><ion-icon name="warning-outline" role="img" class="md hydrated"></ion-icon></a></li>

        <li><a href="#"><ion-icon name="share-social-outline" role="img" class="md hydrated"></ion-icon></a></li>

     </ul>

   </div>



    <!-- divider -->

    <div class="divider-h"></div>

   <!-- end divider -->



  </div>

</div>

    `;

    strHtml += `

      `;

  $$("#item_content").html(strHtml); 

  init_swiper('#it345wg');

  

});