Без опису
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

productdetails_old.js 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. const mainPhoto = $('.productDetailsMain > img');
  2. let currentTypeModal = null;
  3. function onClickHandler(e) {
  4. $(e).parent().find('.borderselector').removeClass('borderselector');
  5. $(e).addClass('borderselector')
  6. }
  7. function setProductData(data) {
  8. if (!data) return;
  9. const productname = data.displayName;
  10. $('.productname').html(data.displayName)
  11. const type = data.productType;
  12. switch (type) {
  13. case 'ram':
  14. // setRamProduct(data.type)
  15. setProductRam_new(data.type)
  16. break;
  17. default:
  18. break;
  19. }
  20. }
  21. // new
  22. function setProductRam_new(data){
  23. const {name,specs} = data;
  24. $('.productname').html(name);
  25. let parent = $('.memory-parent').find('.borderselector').html();
  26. let ramTech = parent.trim().toLowerCase()
  27. genrateChildMem(ramTech);
  28. }
  29. function getChildHTML(name,isTrue,attr){
  30. let data_attr = attr;
  31. if(data_attr == undefined){
  32. return ` <div data-${attr}="${attr}" type="button" onclick="onClickHandler(this)" class="specsmallcard-mini ${isTrue?'borderselector':''} card small-font p-3" data-version="${name}">
  33. ${name}
  34. </div>`;
  35. }else{
  36. return ` <div data-${attr}="${attr}" type="button" onclick="onClickHandler(this)" class="specsmallcard-mini ${isTrue?'borderselector':''} card small-font p-3" data-gb="${name}">
  37. ${name}
  38. </div>`;
  39. }
  40. }
  41. function computerSizeClick(obj){
  42. $(`[data-computersize="computersize"]`).off().click(function (e){
  43. let size = $(e.target).html().trim().toLowerCase();
  44. setPrice(size);
  45. // if(size == '16gb'){
  46. // const str = './dist/assets/imgs/Home_new/Home_Carousel_2.png';
  47. // $('.productDetailsMain > img').attr('src',str);
  48. // }
  49. })
  50. // console.log($($(`[data-computersize="computersize"]`)[0]).html().trim().toLowerCase());
  51. function setPrice(size){
  52. let namehelper = $('.ramtech').find('.borderselector').html().trim().toLowerCase();
  53. let devHelper = $('.memorycontainer').find('.borderselector').html().trim().toLowerCase();
  54. let name = '';
  55. let realName = '';
  56. let imgURL = '';
  57. if(namehelper === 'ddr4' && devHelper === 'desktop'){
  58. name = 'priceddr4d'
  59. }else if(namehelper === 'ddr5' && devHelper === 'desktop'){
  60. name = 'priceddr5d'
  61. }else if(namehelper === 'ddr4' && devHelper === 'laptop'){
  62. name = 'priceddr4l'
  63. }else {
  64. name = 'priceddr5l'
  65. }
  66. if(size == '16gb'){
  67. $('.price').html(obj[name][1]);
  68. $('.productname').html(obj[`${name}name`][1]);
  69. $('.productDetailsMain img').attr('src',obj[`${name}img`][1])
  70. }else if(size == '32gb'){
  71. $('.price').html(obj[name][2]);
  72. $('.productname').html(obj[`${name}name`][2]);
  73. $('.productDetailsMain img').attr('src',obj[`${name}img`][2])
  74. }else{
  75. $('.price').html(obj[name][0]);
  76. $('.productname').html(obj[`${name}name`][0]);
  77. $('.productDetailsMain img').attr('src',obj[`${name}img`][0]);
  78. }
  79. }
  80. let size = $($(`[data-computersize="computersize"]`)[0]).html().trim().toLowerCase();
  81. setPrice(size);
  82. }
  83. function genrateChildMem(ramTech,attr){
  84. let remTechArr = obj[ramTech];
  85. let items = '';
  86. for(let i=0;i<remTechArr.length;i++){
  87. items += getChildHTML(remTechArr[i],i==0,attr);
  88. }
  89. $('.ramtech').html(items);
  90. $(`[data-${attr}="${attr}"]`).off().click(function (e){
  91. let ram = $(e.target).html().trim().toLowerCase();
  92. const ans = obj[ram];
  93. let html ='';
  94. for(let i=0;i<ans.length;i++){
  95. html += getChildHTML(ans[i],i==0,'computersize')
  96. }
  97. $('.computersize').html(html);
  98. computerSizeClick(obj);
  99. })
  100. const ans = obj[remTechArr[0].toLowerCase()];
  101. let html ='';
  102. for(let i=0;i<ans.length;i++){
  103. html += getChildHTML(ans[i],i==0,'computersize')
  104. }
  105. $('.computersize').html(html);
  106. computerSizeClick(obj);
  107. }
  108. $('.memorycontainer').click(function (e){
  109. const type = $(e.target).data('type');
  110. if(type !== 'memory-desktop' && type !== 'memory-laptop') return;
  111. $(e.target).parent().find('.borderselector').removeClass('borderselector');
  112. $(e.target).addClass('borderselector');
  113. if(type == 'memory-desktop'){
  114. debugger;
  115. genrateChildMem('desktop','ramtech');
  116. }else{
  117. genrateChildMem('laptop','ramtech');
  118. }
  119. })
  120. // new end
  121. function init() {
  122. $('.product-item-gallery > img').each(function (i, el) {
  123. $(el).click(function (e) {
  124. $('.product-item-gallery.active-gallery-img').removeClass('active-gallery-img');
  125. let src = $(e.target).attr('src');
  126. $(e.target).parent().addClass('active-gallery-img');
  127. mainPhoto.attr('src', src);
  128. })
  129. })
  130. // const data = getDataProduct();
  131. setProductRam_new(obj);
  132. // setProductItemData(rams);
  133. }
  134. let obj = {
  135. name:'ORA3',
  136. desktop:['DDR4','DDR5'],
  137. laptop:['DDR4','DDR5'],
  138. ddr4:['8GB','16GB','32GB'],
  139. ddr5:['8GB','16GB','32GB'],
  140. priceddr4l:[2990, 4750, 8450],
  141. priceddr5l:[5150, 7800, 13900],
  142. priceddr4d:[2990, 4750, 9450],
  143. priceddr5d:[5800, 7600, 15500],
  144. priceddr4lname:['ORA 8GB DDR4 3200MHz Laptop RAM','ORA 16GB DDR4 3200MHz Laptop RAM','ORA 32GB DDR4 3200MHz Laptop RAM'],
  145. priceddr5lname:['ORA 8GB DDR5 4800MHz Laptop RAM','ORA 16GB DDR5 4800MHz Laptop RAM','ORA 32GB DDR5 4800MHz Laptop RAM'],
  146. priceddr4dname:['ORA 8GB DDR4 3200MHz Desktop RAM','ORA 16GB DDR4 3200MHz Desktop RAM','ORA 32GB DDR4 3200MHz Desktop RAM'],
  147. priceddr5dname:['ORA 8GB DDR5 4800MHz Desktop RAM','ORA 16GB DDR5 4800MHz Desktop RAM','ORA 32GB DDR5 4800MHz Desktop RAM'],
  148. priceddr4limg:['../dist/assets/imgs/accessiories/ram/ddr4-laptop.jpg','../dist/assets/imgs/accessiories/ram/ddr4-laptop.jpg', '../dist/assets/imgs/accessiories/ram/ddr4-laptop.jpg'],
  149. priceddr5limg:['../dist/assets/imgs/accessiories/ram/ddr5-laptop.jpg', '../dist/assets/imgs/accessiories/ram/ddr5-laptop.jpg', '../dist/assets/imgs/accessiories/ram/ddr5-laptop.jpg'],
  150. priceddr4dimg:['../dist/assets/imgs/accessiories/ram/ddr4-desktop.jpg', '../dist/assets/imgs/accessiories/ram/ddr4-desktop.jpg','../dist/assets/imgs/accessiories/ram/ddr4-desktop.jpg'],
  151. priceddr5dimg:['../dist/assets/imgs/accessiories/ram/ddr5-desktop.jpg','../dist/assets/imgs/accessiories/ram/ddr5-desktop.jpg','../dist/assets/imgs/accessiories/ram/ddr5-desktop.jpg'],
  152. }
  153. init();
  154. // function startDetails(){
  155. // let productId = window.location.search.split('=')[1];
  156. // console.log(productId);
  157. // getProductDetails(productId);
  158. // function getParentHTML(name,productid,id){
  159. // return `<div class="pb-2 $${name?.replace(" ",'')}-parent">
  160. // <h5 class="py-2 smallHeadingProductDetails">${name}</h5>
  161. // <div class="d-flex gap-2 ${id}container" data-tagid="${id}">
  162. // </div>
  163. // </div>`;
  164. // }
  165. // async function getProductDetails(id){
  166. // let res = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/producttagname/productid/${id}`);
  167. // res = JSON.parse(res.data.result);
  168. // console.log(res);
  169. // let html = '';
  170. // for(let i=0;i<res.length;i++){
  171. // const {parentattribute,tagid,productid} = res[i];
  172. // debugger;
  173. // html += getParentHTML(parentattribute,productid,tagid);
  174. // }
  175. // $('#spec-container-details').html(html);
  176. // }
  177. // }
  178. // startDetails();