Geen omschrijving
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.js 5.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. function indexInit(){
  2. function init(){
  3. initData();
  4. }
  5. async function initData(){
  6. const ids = await getProductIdService();
  7. if(!ids) return;
  8. let dataAcc = [];
  9. for(let i=0;i<ids.length;i++){
  10. let currId = ids[i];
  11. let {productid} = currId;
  12. let resData =await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${productid}`,true);
  13. if(resData.isError){
  14. alert(resData.errorMsg.message);
  15. return;
  16. }
  17. let res = resData.response;
  18. res = JSON.parse(res.result);
  19. dataAcc = [...dataAcc,...res.slice(0, 4)];
  20. }
  21. shuffleArray(dataAcc);
  22. let html = '';
  23. for(let i=0;i<dataAcc.length;i++){
  24. html += getCardHTML({...dataAcc[i],img:dataAcc[i].itemimageurl})
  25. }
  26. $('.slider-hero').html(html);
  27. initSlider();
  28. $('.topproductbtn').click(function (e){
  29. let productid = $(e.target).data('productid');
  30. let itemid = $(e.target).data('itemid');
  31. let name = $(e.target).data('name');
  32. debugger;
  33. window.location.href = `/productdetails.html?productId=${productid}#itemid=${itemid}`;
  34. });
  35. }
  36. function initSlider(){
  37. $('.slider-hero').slick({
  38. dots: false,
  39. lazyLoad: 'ondemand',
  40. // autoplay: true,
  41. // autoplaySpeed: 1000,
  42. slidesToShow: 4,
  43. slidesToScroll: 1,
  44. responsive: [
  45. {
  46. breakpoint: 1024,
  47. settings: {
  48. slidesToShow: 3,
  49. slidesToScroll: 3,
  50. infinite: true,
  51. }
  52. },
  53. {
  54. breakpoint: 600,
  55. settings: {
  56. slidesToShow: 2,
  57. slidesToScroll: 2
  58. }
  59. },
  60. {
  61. breakpoint: 480,
  62. settings: {
  63. slidesToShow: 1,
  64. slidesToScroll: 1
  65. }
  66. },
  67. {
  68. breakpoint: 1199,
  69. settings: {
  70. slidesToShow: 5,
  71. slidesToScroll: 1,
  72. }
  73. },
  74. {
  75. breakpoint: 991,
  76. settings: {
  77. slidesToShow: 3,
  78. slidesToScroll: 1,
  79. }
  80. },
  81. {
  82. breakpoint: 767,
  83. settings: {
  84. slidesToShow: 3,
  85. slidesToScroll: 1,
  86. }
  87. },
  88. {
  89. breakpoint: 575,
  90. settings: {
  91. autoplay: true,
  92. slidesToShow: 3,
  93. }
  94. }
  95. // You can unslick at a given breakpoint now by adding:
  96. // settings: "unslick"
  97. // instead of a settings object
  98. ]
  99. });
  100. $(".slick-prev").addClass("btn text-white");
  101. $(".slick-next").addClass("btn text-white");
  102. $(".slick-prev").html("←");
  103. $(".slick-next").html("→")
  104. }
  105. function getCardHTML({itemname,img,sku,itemid,productid}){
  106. let defaultImg = img ? imgServerNameBuild(img): `./dist/assets/imgs/nophoto.png`;
  107. return ` <div class="card h-100 mx-1 text-center bg-gray-4 border-0">
  108. <div class="card-body h-100 pt-5 px-5">
  109. <div class="d-flex flex-column h-100 justify-content-between">
  110. <img src="${defaultImg}" class="w-100"/>
  111. <p class="mb-0 fs-7 py-2">${itemname}</p>
  112. <p class="fw-600 text-primary fs-9 mb-0 topproductbtn" data-name="${itemname}" data-sku="${sku}" data-productid="${productid}" data-itemid="${itemid}">Buy Now</p>
  113. </div>
  114. </div>
  115. </div>`;
  116. return ` <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
  117. <div class="card-body">
  118. <img src="${defaultImg}" class="w-100"/>
  119. <p class="mb-0 fs-7 py-2">${itemname}</p>
  120. <p class="fw-600 text-primary mb-0" data-sku="${sku}" data-productid="${productid}" data-itemid="${itemid}">Buy Now</p>
  121. </div>
  122. </div>`;
  123. }
  124. function getProductIdService(){
  125. return new Promise(async (reslove,reject)=>{
  126. let resData =await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getallproducts`,true);
  127. if(resData.isError){
  128. alert(resData.errorMsg.message);
  129. return;
  130. }
  131. let res = resData.response;
  132. res = JSON.parse(res.result);
  133. let resultItem = [];
  134. for(let i=0;i<res.length;i++){
  135. if(resultItem.length == 2) break;
  136. if(res[i].productname.includes('RAM ORA')||res[i].productname.includes('SSD ORA')){
  137. resultItem.push(res[i]);
  138. }
  139. }
  140. return reslove(resultItem)
  141. });
  142. }
  143. init();
  144. }
  145. indexInit();