Няма описание
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.

productdetails.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
  1. function startDetails(){
  2. // http://127.0.0.1:5502/productdetails.html?productId=106633230000024
  3. if(window.location.search.split('=')[0] == ''){
  4. window.location.href = "/notfound.html";
  5. return;
  6. }
  7. debugger;
  8. let productId = window.location.href.split('=')[1].split('&')[0].split('#')[0];
  9. console.log(productId);
  10. let itemtagscombinationRes = null;
  11. let labels = {};
  12. let isThereInLabel = {};
  13. let currentComb = null;
  14. let group = {};
  15. let loadingActions = {
  16. addLoader(){
  17. $('.loadingCall').removeClass('d-none');
  18. $('.mainContanierProduct').addClass('d-none');
  19. },
  20. removeLoader(){
  21. $('.loadingCall').addClass('d-none');
  22. $('.mainContanierProduct').removeClass('d-none');
  23. }
  24. }
  25. let currentClick = null;
  26. if(productId){
  27. loadingActions.addLoader();
  28. updateProductId(productId);
  29. getProductDetails(productId);
  30. appendSpecs(productId)
  31. }else{
  32. window.location.href = "/notfound.html"
  33. }
  34. function updateProductId(val){
  35. $('#productidtag').val(val);
  36. }
  37. function updateItemId(val){
  38. $('#itemidtag').val(val);
  39. }
  40. let specification_wrap_action = {
  41. remove(){
  42. $('.specification-wrap').addClass('d-none');
  43. },
  44. add(){
  45. $('.specification-wrap').removeClass('d-none');
  46. }
  47. }
  48. let description_action = {
  49. addVal(value){
  50. $('.description-wrap > p').html(value);
  51. },
  52. removeVal(value){
  53. $('.description-wrap > p').html('');
  54. }
  55. }
  56. function getSpecsItemHTML({name,des,itemid,id}){
  57. return `<div id="${id}" data-specitemid="${itemid}" class="">
  58. <div class="row border-bottom">
  59. <div class="col-sm-6 bg-gray-3 py-2">
  60. ${name}
  61. </div>
  62. <div class="col-sm-6 py-2">
  63. ${des}
  64. </div>
  65. </div>
  66. </div>`;
  67. return ` <tr id="${id}" data-specitemid="${itemid}">
  68. <td style="width:200px">${name}</td>
  69. <td class="">${des}</td>
  70. </tr>`;
  71. }
  72. // function getSpecsItemHTML({name,des,itemid,id}){
  73. // return ` <tr id="${id}" data-specitemid="${itemid}">
  74. // <td style="width:200px">${name}</td>
  75. // <td class="">${des}</td>
  76. // </tr>`;
  77. // }
  78. async function appendSpecs(id){
  79. let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemspecifications/itemid/${id}`,true);
  80. if(resData.isError){
  81. $('.productdetailstabs').addClass('d-none');
  82. $('.specContainerleft').html('')
  83. $('.specContainerRight').html('')
  84. return;
  85. }
  86. $('.productdetailstabs ').removeClass('d-none');
  87. const res = resData.response;
  88. console.log(JSON.parse(res.result));
  89. const data = JSON.parse(res.result);
  90. console.log(data);
  91. let html = '';
  92. let leftHtml = '';
  93. let rightHtml = '';
  94. if(data.length == 0){
  95. $('.productdetailstabs ').addClass('d-none');
  96. $('.specContainerleft').html('')
  97. $('.specContainerRight').html('')
  98. return;
  99. }
  100. for(let i=0;i<data.length;i++){
  101. const {specificationname,specificationitemid,itemid,description} = data[i];
  102. if((i+1)%2 == 0){
  103. rightHtml += getSpecsItemHTML({
  104. name:specificationname,id:specificationitemid,itemid,des:description
  105. })
  106. }else{
  107. leftHtml += getSpecsItemHTML({
  108. name:specificationname,id:specificationitemid,itemid,des:description
  109. });
  110. }
  111. }
  112. $('.specContainerleft').html(leftHtml)
  113. $('.specContainerRight').html(rightHtml)
  114. }
  115. function getParentHTML(name,productid,id,isMain){
  116. return `<div class="pb-2 $${name?.replace(" ",'')}-parent">
  117. <h5 class="py-2 smallHeadingProductDetails">${name}</h5>
  118. <div class="d-flex gap-2 flex-wrap ${id}container" data-tagid="${id}">
  119. </div>
  120. </div>`;
  121. }
  122. function onClickHandler(e) {
  123. $(e).parent().find('.borderselector').removeClass('borderselector');
  124. $(e).addClass('borderselector')
  125. }
  126. function getChildHTML(tagid,name,isTrue){
  127. return `
  128. <div data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="specsmallcard optiontaganwi ${isTrue?'borderselector':''} card small-font cursor-pointer p-3">
  129. ${name}
  130. </div>
  131. `
  132. }
  133. function addeventlisteners(){
  134. $('.optiontaganwi').each(function (i,el){
  135. $(el).click(function (e){
  136. $('#quantity').val(1)
  137. $(e.target).parent().find('.borderselector').removeClass('borderselector');
  138. $(e.target).addClass('borderselector')
  139. searchComb();
  140. currentClick = e.target;
  141. // getAllCombination();
  142. })
  143. });
  144. }
  145. function updateDetailsByObj(obj){
  146. $('.productname').html(obj.itemname);
  147. let [currencySymbol, amount] = getCurrencySymbol(obj?.pricelist||0);
  148. $('.price').html(obj.pricelist ?`${currencySymbol}${amount}`:'');
  149. appendSpecs(obj.itemid)
  150. $('#skudetailitem').val(obj.sku)
  151. $('.des_productdes').html(obj.itemdescription);
  152. $('#addtocart').attr('data-qty',obj.quantity);
  153. let defaultImg = obj.itemimageurl ? imgServerNameBuild(obj.itemimageurl): `./dist/assets/imgs/nophoto.png`;
  154. console.log(obj.itemimageurl,'obj.itemimageurlobj.itemimageurlobj.itemimageurl');
  155. $('.productDetailsMain > img').attr('src',defaultImg);
  156. updateItemId(obj.itemid);
  157. debugger;
  158. if (!obj.pricelist || !obj.quantity) {
  159. $('.buynow').attr('disabled', true);
  160. $('#addtocart').attr('disabled', true);
  161. } else {
  162. $('.buynow').attr('disabled', false);
  163. $('#addtocart').attr('disabled', false);
  164. }
  165. }
  166. function searchComb(){
  167. let valuesSelected = [];
  168. $('#addtocart').removeClass('disabled');
  169. $('.msgErrorDetailsItem').addClass('d-none');
  170. $('.borderselector').each(function (i,el){
  171. let val = $(el).html();
  172. valuesSelected.push(val.trim());
  173. });
  174. let labelRecord = {};
  175. for(let label in labels){
  176. labelRecord[label] = false;
  177. }
  178. console.log(labelRecord);
  179. specification_wrap_action.add();
  180. console.log(group);
  181. let unFiler = null;
  182. for(let i=0;i<itemtagscombinationRes.length;i++){
  183. const currItem = itemtagscombinationRes[i];
  184. const {tagnames} = currItem;
  185. let isTrue = true;
  186. let labelFilter = labelRecord;
  187. for(let i=0;i<valuesSelected.length;i++){
  188. if(!tagnames.includes(valuesSelected[i])){
  189. isTrue = false
  190. unFiler = labelFilter;
  191. break;
  192. }
  193. labelFilter[group[valuesSelected[i]]] = true;
  194. }
  195. if(isTrue){
  196. console.log(itemtagscombinationRes[i],'itemtagscombinationRes[i]');
  197. const {quantity} = itemtagscombinationRes[i];
  198. if(quantity>=$('#quantity').val() && quantity>=1){
  199. currentComb = itemtagscombinationRes[i];
  200. // $('.productname').html(itemtagscombinationRes[i].itemname)
  201. // $('.price').html(itemtagscombinationRes[i].pricelist);
  202. // location.hash = itemtagscombinationRes[i].itemname.trim();
  203. // appendSpecs(itemtagscombinationRes[i].itemid)
  204. history.replaceState(null, null, `#itemid=${itemtagscombinationRes[i].itemid}#${itemtagscombinationRes[i].itemname.trim()}`);
  205. // $('#skudetailitem').val(itemtagscombinationRes[i].sku)
  206. // $('.des_productdes').html(itemtagscombinationRes[i].itemdescription);
  207. updateDetailsByObj(itemtagscombinationRes[i]);
  208. }else{
  209. let name = itemtagscombinationRes[i].itemname.split('-')[0];
  210. $('#addtocart').addClass('disabled');
  211. $('.buynow').attr('disabled', true);
  212. let itemsName = name;
  213. $('.borderselector').each(function (i,e){
  214. itemsName += ` ${$(e).html().trim()}`;
  215. });
  216. updateItemId(null);
  217. specification_wrap_action.remove();
  218. $('#skudetailitem').val(-1)
  219. $('.productname').html(itemsName)
  220. history.replaceState(null, null, `#`);
  221. $('.msgErrorDetailsItem').removeClass('d-none');
  222. $('.des_productdes').html('');
  223. $('.price').html('');
  224. }
  225. initAddToCart()
  226. return;
  227. }
  228. }
  229. let name = itemtagscombinationRes[0].itemname.split('-')[0];
  230. let itemsName = name;
  231. $('.borderselector').each(function (i,e){
  232. itemsName += `- ${$(e).html().trim()}`;
  233. })
  234. specification_wrap_action.remove();
  235. $('.productname').html(itemsName)
  236. $('#skudetailitem').val(-1)
  237. $('.price').html('');
  238. $('#addtocart').addClass('disabled');
  239. $('.buynow').attr('disabled', true);
  240. $('.msgErrorDetailsItem').removeClass('d-none');
  241. initAddToCart()
  242. }
  243. function getAllCombination(){
  244. const currClickAttr = $(currentClick).html().trim();
  245. let isThere = [];
  246. for(let item in isThereInLabel){
  247. let {tagnames} = isThereInLabel[item];
  248. if(tagnames.includes(currClickAttr)){
  249. isThere.push( isThereInLabel[item])
  250. }
  251. }
  252. let selected = [];
  253. $('.borderselector').each(function (i,e){
  254. selected.push($(e).html().trim())
  255. });
  256. // console.log(selected);
  257. // console.log(isThere);
  258. let ishashObj = {};
  259. for(let i=0;i<isThere.length;i++){
  260. let {tagnames,tagids} = isThere[i];
  261. tagnames = tagnames.split('|');
  262. tagids = tagids.split('|');
  263. for(let j=0;j<tagnames.length;j++){
  264. if(!ishashObj[tagnames[j]]){
  265. ishashObj[tagnames[j]] = tagids[j];
  266. }
  267. }
  268. }
  269. // console.log(ishashObj);
  270. // for(let i=0;i<itemtagscombinationRes.length;i++){
  271. // }
  272. }
  273. async function getProductDetails(id){
  274. // let res = await getStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/productid/${id}`);
  275. let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/productattributelist/productid/${id}`,true);
  276. console.log(resData,'resDataresDataresDataresDataresData');
  277. if(resData.isError){
  278. loadingActions.removeLoader();
  279. alert(resData.errorMsg.message);
  280. return;
  281. }
  282. let res = resData.response;
  283. res = JSON.parse(res.result);
  284. // console.log(res);
  285. if(!res) {
  286. loadingActions.removeLoader();
  287. return;
  288. };
  289. let html = '';
  290. for(let i=0;i<res.length;i++){
  291. const currItem = res[i];
  292. // parenttagid means under what label
  293. // tag id means it know unquie id
  294. const {parentattribute,parenttagid,tagid,attribute,productid} = currItem;
  295. if(labels[parentattribute]){
  296. labels[parentattribute].items.push({
  297. attribute,
  298. tagid:tagid
  299. });
  300. }else{
  301. labels[parentattribute] = {
  302. id:parenttagid,
  303. items:[{
  304. attribute,
  305. tagid:tagid
  306. }]
  307. };
  308. html += getParentHTML(parentattribute,productid,parenttagid,i==0);
  309. }
  310. }
  311. $('#spec-container-details').html(html);
  312. // console.log(labels,'labels');
  313. let childIds = [];
  314. for(let item in labels){
  315. let {id,items} = labels[item];
  316. // $(`[data-tagid=${id}]`)
  317. let html = '';
  318. for(let i=0;i<items.length;i++){
  319. const {attribute,tagid} = items[i]
  320. childIds.push(tagid);
  321. group[attribute] = item;
  322. html += getChildHTML(tagid,attribute,i==0);
  323. }
  324. $(`[data-tagid="${id}"]`).html(html);
  325. }
  326. // itemtagscombinationRes = await API_SERVICES_ACTIONS.getAPIService(`pis/v4/bizgaze/integrations/products/getitemwithoutbranch/productid/${id}`,true);
  327. itemtagscombinationRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`,true);
  328. itemtagscombinationRes = JSON.parse(itemtagscombinationRes.response.result);
  329. console.log(itemtagscombinationRes);
  330. let valuesSelected = [];
  331. $('.borderselector').each(function (i,el){
  332. let val = $(el).html();
  333. valuesSelected.push(val.trim());
  334. });
  335. let searchParams = window.location.search.split("&");
  336. let skuId = window.location.hash.split('#')[1].split('=')[1];
  337. // skuId = skuId.split('=')[1]
  338. let isGo = true;
  339. for(let i=0;i<itemtagscombinationRes.length;i++){
  340. const currItem = itemtagscombinationRes[i];
  341. const {tagnames,sku,itemid} = currItem;
  342. isThereInLabel[tagnames] = itemtagscombinationRes[i];
  343. let isTrue = true;
  344. if(isGo){
  345. // for(let i=0;i<valuesSelected.length;i++){
  346. // if(!tagnames.includes(valuesSelected[i])){
  347. // isTrue = false
  348. // }
  349. // }
  350. if(skuId != itemid){
  351. isTrue = false
  352. }
  353. if(isTrue){
  354. console.log(itemtagscombinationRes[i],'itemtagscombinationRes[i]');
  355. currentComb = itemtagscombinationRes[i];
  356. // location.hash = itemtagscombinationRes[i].itemname.trim();
  357. // $('.productname').html(itemtagscombinationRes[i].itemname);
  358. // $('#skudetailitem').val(itemtagscombinationRes[i].sku)
  359. // $('.price').html(itemtagscombinationRes[i].pricelist)
  360. // appendSpecs(itemtagscombinationRes[i].itemid);
  361. // $('.des_productdes').html(itemtagscombinationRes[i].itemdescription);
  362. updateDetailsByObj(itemtagscombinationRes[i]);
  363. isGo = false;
  364. let {tagnames,tagids,pricelist} = itemtagscombinationRes[i];
  365. tagids = tagids.split('|');
  366. tagnames = tagnames.split('|');
  367. $('.optiontaganwi').removeClass('borderselector');
  368. for(let i=0;i<tagids.length;i++){
  369. $(`[data-tagiditem="${tagids[i]}"]`).addClass('borderselector');
  370. }
  371. // tagiditem
  372. }
  373. }
  374. }
  375. if(isGo){
  376. if(itemtagscombinationRes.length === 0){
  377. loadingActions.removeLoader();
  378. toasterHelper("error","Something went wrong!",`toast-top-right`)
  379. return;
  380. }
  381. console.log(itemtagscombinationRes[0]);
  382. let {tagnames,tagids,pricelist} = itemtagscombinationRes[0];
  383. tagids = tagids.split('|');
  384. tagnames = tagnames.split('|');
  385. $('.optiontaganwi').removeClass('borderselector');
  386. currentComb = itemtagscombinationRes[0];
  387. // updateItemId(itemtagscombinationRes[0].itemid);
  388. for(let i=0;i<tagids.length;i++){
  389. $(`[data-type="${tagids[i]}-${tagnames[i]}"]`).addClass('borderselector');
  390. }
  391. // $('.price').html(pricelist);
  392. // $('.des_productdes').html(itemtagscombinationRes[0].itemdescription);
  393. // appendSpecs(itemtagscombinationRes[0].itemid);
  394. updateDetailsByObj(itemtagscombinationRes[0]);
  395. //console.log(childIds);
  396. //
  397. }
  398. //getAllCombination(valuesSelected)
  399. // for(let i=0;i<itemtagscombinationRes.length;i++){
  400. // const {tagnames} = itemtagscombinationRes[i];
  401. // }
  402. $('#spec-container-details').children().find('.specsmallcard').removeClass('specsmallcard');
  403. addeventlisteners();
  404. loadingActions.removeLoader();
  405. return;
  406. // let resTwo = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`);
  407. //let html = '';
  408. let attributesObj = {};
  409. for(let i=0;i<res.length;i++){
  410. const {parentattribute,tagid,productid} = res[i];
  411. // let attributes = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/parenttagid/${tagid}`);
  412. // attributesObj[tagid] = JSON.parse(attributes.data.result);
  413. // console.log(attributes.data.result,tagid);
  414. html += getParentHTML(parentattribute,productid,tagid,i==0);
  415. }
  416. $('#spec-container-details').html(html);
  417. // let attributes = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/parenttagid/${tagid}`);
  418. return;
  419. for(let attr in attributesObj){
  420. const arr = attributesObj[attr];
  421. let html = '';
  422. for(let i=0;i<arr.length;i++){
  423. const {attribute,tagid} = arr[i];
  424. html += getChildHTML(tagid,attribute,i==0);
  425. }
  426. $(`[data-tagid="${attr}"]`).html(html);
  427. }
  428. let defaultValues = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/sellableitemlist/productid/${id}`);
  429. defaultValues = JSON.parse(defaultValues.data.result);
  430. let {itemname,price} = defaultValues[0];
  431. $('.productname').html(itemname);
  432. $('.price').html(price)
  433. $('#spec-container-details').children().slice(1).find('.specsmallcard').removeClass('specsmallcard');
  434. // getQuantityById(id)
  435. }
  436. }
  437. startDetails();