Bir script yaziyorum. Urun ozellikleri cok cesitli mesela Select ile 3 tane urun ozelligi var ve bu ozellige ait renkler de olacak..
Ornek olarak http://www.infurn.com/en/boerge-mogensen-armchair-2334 bu sitede Configure your product: kismina bakarsaniz. 2 tane select kisim var ve bu select icindeki value degerlerine ait renkler var.
Ben yapisal olarak bunu nasil yapabilirim. Fikir verebilecek ustadlar mevcutmu acaba? Ucretli ucretsiz scriptin o kismini hallederim diyen olursa öyle de yapabiliriz.
Yazdigim Scriptte Ürün Özellikleri Hakkinda Yardim
5
●592
- 29-04-2013, 12:06:02Olay PHP'den ziyade AJAX yeteneğinize bakıyor. Örneğin jQuery ile ajax kullanacaksanız, $.ajax ya da $.post gibi bir metot ile arkaplanda bir php dosyasına veri gönderip dönen sonuçları, sayfada istediğiniz bir noktaya işleyeceksiniz. Genel mantık budur ancak biz yine de örnek verdiğiniz siteden yola çıkalım ve neler yapmışlar bir bakalım:
Ajax post gönderilen adres : http://www.infurn.com/files/xajax/product.php
Gönderilen parametreler: xjxfun=get_variation_dropdown_x&xjxr=1367226056362 &xjxargs[]=4683&xjxargs[]=94&xjxargs[]=1&xjxargs[]=319
Gelen cevabı alacaksınız ve parse edip istediğiniz bir noktaya yerleştireceksiniz:
<?xml version="1.0" encoding="utf-8" ?><xjx><cmd n="as" t="v94" p="innerHTML"><![CDATA[<div style="clear:both"></div> <script type="text/javascript"> var stored_var = ""; var in_product_id = ''; function do_var_selection(value , from_select) { var split_values = value.split("~"); $('.angles').fadeOut(); $('#no_pic').fadeOut(1); //$('#galery_stage_no_pics').fadeOut(1); $('#material_prev'+split_values[5]+' img').attr('src','/images/micro/'+split_values[4]+'/--/--.jpg'); ///media.php?ID='+split_values[4]+'&folder=micro $('#variations #v'+split_values[5]+' img').removeClass('active'); $('#prev_image'+split_values[5]+'_'+split_values[4]).addClass('active'); $('#vnm'+split_values[5]).html(split_values[1]); $('#zoom').fadeOut(1); if(split_values[3] != "") { document.getElementById('galery_large_media_id').value = split_values[2]; $('#zoom').fadeIn(1); $('#large_image').attr("onclick","xajax_dsp_form('show_media_lightbox', document.getElementById('galery_large_media_id').value );"); } else { $('#large_image').attr('onclick',''); } if(split_values[2] != "" && 0 < 2) { /* infotext = 0; document.getElementById('large_image').src = '/media.php?ID='+split_values[2]+'&folder=standard'; infotext ++; new_images = ''; for(i=10; i < 15; i++) { if(split_values[i] > 0) { new_images += '<div onClick="document.getElementById(\'galery_large_media_id\').value = '+split_values[i]+'; document.getElementById(\'large_image\').src=\'/media.php?ID='+split_values[i]+'&folder=standard\';document.getElementById(\'galery_stage\').style.display=\'block\'" class="angles brighter" id="thumb'+split_values[i]+'"><center><img src="/media.php?ID='+split_values[i]+'&folder=thumb" height="64" style="height:64px" class="cursor" title="" alt=""></center></div>'; $('#zoom').fadeIn(1); infotext ++; } } $('#galery_stage_micros div').prepend(new_images); if(infotext == 0) { //$('#galery_stage_no_pics').fadeIn(); } */ } else { //document.getElementById('large_image').src = '/files/css/888/a/no_picture.png'; document.getElementById('large_image').src = '/images/standard/'+default_image+'/--/--.jpg'; //'/media.php?ID='+default_image+'&folder=standard' $('#retina').css("background-image", "url('/images/large/"+default_image+"/--/--.jpg')"); //'/media.php?ID="+default_image+"&folder=large' //$('#no_pic').fadeIn(); //$('#galery_stage_no_pics').fadeIn(); } //xajax_get_variation_dropdown_x('4683|'+split_values[0],'94|'); document.getElementById('selected'+split_values[5]).innerHTML = split_values[1]; //document.getElementById('varselect94').value=''; $('#makro'+split_values[5]).attr('src','/images/standard/'+split_values[4]+'/--/--.jpg'); //'/media.php?ID='+split_values[4]+'&folder=standard' if(from_select != "true") { $('#selected_sub'+split_values[5]).val(stored_var); } xajax_get_variation_dropdown_x(split_values[8]+split_values[0], split_values[7]+split_values[6],null,in_product_id,true); } var activearea = 'spacerarea'; var leftpos = 0; moveright = 0; var act_var_img = false; function highlight_var_img(id) { if(act_var_img != false) { document.getElementById('thumb'+act_var_img).className = 'gal_inactive'; } document.getElementById('thumb'+id).className = 'gal_active'; act_var_img = id; } function slide_right(count,slideid) { if( leftpos < (58*count-280)*-1) { clearInterval(moveright); document.getElementById('img_slide_right_1').src='/files/css/020/a/spacer.gif'; } else { leftpos -=2; document.getElementById('innerslide'+slideid).style.marginLeft = leftpos+'px'; document.getElementById('img_slide_left_1').src='/files/css/020/a/skip-left-1.gif'; //document.getElementById('innerslide').style.left = leftpos+'px'; } } function slide_left(slideid) { if( leftpos == 0) { clearInterval(moveright); document.getElementById('img_slide_left_1').src='/files/css/020/a/spacer.gif'; } else { leftpos +=2; document.getElementById('innerslide'+slideid).style.marginLeft = leftpos+'px'; document.getElementById('img_slide_right_1').src='/files/css/020/a/skip-right-1.gif'; } } function start_slide(direction, count, slideid) { if(direction =='right') { moveright = setInterval("slide_right("+count+","+slideid+")",10); } else { moveleft = setInterval("slide_left("+slideid+")",10); } } </script> <div style="clear:both"></div> <img onmouseover="show_mat_detail('45550')" rel="4683|347 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45550/cdn_45550.jpg" class="cursor active " width="25" height="25" id="prev_image94_45550" onclick="do_var_selection('347~Black~~~45550~94~23~94|~4683|~0~~~~~','true')"/> <img onmouseover="show_mat_detail('46624')" rel="4683|350 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/46624/cdn_46624.jpg" class="cursor " width="25" height="25" id="prev_image94_46624" onclick="do_var_selection('350~Cognac~~~46624~94~23~94|~4683|~0~~~~~','true')"/> <img onmouseover="show_mat_detail('45558')" rel="4683|351 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn2.infurn.com/images/micro/45558/cdn_45558.jpg" class="cursor " width="25" height="25" id="prev_image94_45558" onclick="do_var_selection('351~yellow~~~45558~94~23~94|~4683|~0~~~~~','true')"/> <img onmouseover="show_mat_detail('45557')" rel="4683|352 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn4.infurn.com/images/micro/45557/cdn_45557.jpg" class="cursor " width="25" height="25" id="prev_image94_45557" onclick="do_var_selection('352~White~~~45557~94~23~94|~4683|~0~~~~~','true')"/> <img onmouseover="show_mat_detail('45554')" rel="4683|353 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45554/cdn_45554.jpg" class="cursor " width="25" height="25" id="prev_image94_45554" onclick="do_var_selection('353~Cream~~~45554~94~23~94|~4683|~0~~~~~','true')"/> <img onmouseover="show_mat_detail('45555')" rel="4683|354 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45555/cdn_45555.jpg" class="cursor " width="25" height="25" id="prev_image94_45555" onclick="do_var_selection('354~Red~~~45555~94~23~94|~4683|~0~~~~~','true')"/> <img onmouseover="show_mat_detail('45553')" rel="4683|356 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45553/cdn_45553.jpg" class="cursor " width="25" height="25" id="prev_image94_45553" onclick="do_var_selection('356~Coffee-brown~~~45553~94~23~94|~4683|~0~29191~29192~29193~29194~29195','true')"/> <img onmouseover="show_mat_detail('45552')" rel="4683|385 gliech " onmouseout="hide_mat_detail()" title="" src="http://cdn1.infurn.com/images/micro/45552/cdn_45552.jpg" class="cursor " width="25" height="25" id="prev_image94_45552" onclick="do_var_selection('385~Camel~~~45552~94~23~94|~4683|~0~~~~~','true')"/> <div style="clear:both"></div> <span id="nm94" class="nm">You selected: <span id="vnm94">Black</span></span> <script type="text/javascript"> stored_var = '347~Black~~~45550~94~23~94|~4683|~0~~~~~`Array.13'; //xajax_get_variation_dropdown_x('4683|347', '94|23'); //do_var_selection(stored_var); </script> <div style="float:right; display:none;"> <div id="material_canvas94" style="width:710px;overflow:hidden;height:480px; position:absolute; left:50%; margin-left:-365px; top:-800px; background:#9f9f9f; padding:10px"> <div style="height:480px; background:#000000"> <div id="selected94" style="padding:10px; text-align:center;color:#FFFFFF">Camel</div> <div style="width:500px; height:250px; border:1px solid #9f9f9f; margin:10px 100px; overflow:hidden; background:#FFFFFF"><center><img id="makro94" src="http://cdn1.infurn.com/images/original/45550/cdn_45550.jpg" rel="0" height="250"/></center></div> <div style="width:350px; float:left"><a onclick="$('#material_canvas94').css('top','-800px'); $('#confirmdiv').remove()" class="abort">Cancel</a></div> <div style="width:350px; float:right"><a onclick="do_var_selection(stored_var);$('#material_canvas94').css('top','-800px'); $('#confirmdiv').remove()" class="apply">Apply</a></div> <div style="clear:both"></div> <div id="slider" style="margin:20px 10px 10px 10px; height:120px; overflow-y:auto" class=""> <div style=" " id="innerslide4683"> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn1.infurn.com/images/orginal/45550/cdn_45550.jpg');document.getElementById('selected94').innerHTML='Black';stored_var = '347~Black~~~45550~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb347"> <img id="img347" src="http://cdn3.infurn.com/images/thumb/45550/cdn_45550.jpg" height="50" width="50" class="cursor" title="Black" alt="Black"></div></div> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn4.infurn.com/images/orginal/46624/cdn_46624.jpg');document.getElementById('selected94').innerHTML='Cognac';stored_var = '350~Cognac~~~46624~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb350"> <img id="img350" src="http://cdn4.infurn.com/images/thumb/46624/cdn_46624.jpg" height="50" width="50" class="cursor" title="Cognac" alt="Cognac"></div></div> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn4.infurn.com/images/orginal/45558/cdn_45558.jpg');document.getElementById('selected94').innerHTML='yellow';stored_var = '351~yellow~~~45558~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb351"> <img id="img351" src="http://cdn1.infurn.com/images/thumb/45558/cdn_45558.jpg" height="50" width="50" class="cursor" title="yellow" alt="yellow"></div></div> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn1.infurn.com/images/orginal/45557/cdn_45557.jpg');document.getElementById('selected94').innerHTML='White';stored_var = '352~White~~~45557~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb352"> <img id="img352" src="http://cdn4.infurn.com/images/thumb/45557/cdn_45557.jpg" height="50" width="50" class="cursor" title="White" alt="White"></div></div> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn2.infurn.com/images/orginal/45554/cdn_45554.jpg');document.getElementById('selected94').innerHTML='Cream';stored_var = '353~Cream~~~45554~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb353"> <img id="img353" src="http://cdn1.infurn.com/images/thumb/45554/cdn_45554.jpg" height="50" width="50" class="cursor" title="Cream" alt="Cream"></div></div> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn4.infurn.com/images/orginal/45555/cdn_45555.jpg');document.getElementById('selected94').innerHTML='Red';stored_var = '354~Red~~~45555~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb354"> <img id="img354" src="http://cdn3.infurn.com/images/thumb/45555/cdn_45555.jpg" height="50" width="50" class="cursor" title="Red" alt="Red"></div></div> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn3.infurn.com/images/orginal/45553/cdn_45553.jpg');document.getElementById('selected94').innerHTML='Coffee-brown';stored_var = '356~Coffee-brown~~~45553~94~23~94|~4683|~0~29191~29192~29193~29194~29195';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb356"> <img id="img356" src="http://cdn1.infurn.com/images/thumb/45553/cdn_45553.jpg" height="50" width="50" class="cursor" title="Coffee-brown" alt="Coffee-brown"></div></div> <div class="div_50"><div onMouseOver="" onMouseOut="" onClick="$('#makro94').attr('src','http://cdn1.infurn.com/images/orginal/45552/cdn_45552.jpg');document.getElementById('selected94').innerHTML='Camel';stored_var = '385~Camel~~~45552~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);" class="gal_inactive" id="thumb385"> <img id="img385" src="http://cdn3.infurn.com/images/thumb/45552/cdn_45552.jpg" height="50" width="50" class="cursor" title="Camel" alt="Camel"></div></div> </div> </div> </div> </div> </div> <div style="clear:both; height:10px;"></div> <div id="v94|23"></div><div style="clear:both"></div>]]></cmd><cmd n="js">document.getElementById('option').selected='true'</cmd><cmd n="js">$('.line2').fadeIn()</cmd><cmd n="as" t="strikeprice" p="innerHTML"><![CDATA[£1,219.00]]></cmd><cmd n="as" t="campdiffprice" p="innerHTML"><![CDATA[£969]]></cmd><cmd n="as" t="savep" p="innerHTML">0.03%</cmd><cmd n="js">document.getElementById('discont').src = '/files/css/008/a/percent/_84_org.png'</cmd><cmd n="js"><![CDATA[document.getElementById('large_image').src = '/media.php?ID='+default_image+'&folder=standard']]></cmd><cmd n="js"><![CDATA[$('#retina').css('background-image', 'url("/media.php?ID=default_image&folder=large")')]]></cmd><cmd n="js">$('#sgn_img').html('')</cmd><cmd n="js">$('#no_pic').fadeIn(1)</cmd><cmd n="js">$('#galery_stage_no_pics').fadeIn(1)</cmd><cmd n="js">$('#galery_stage_micros #var_imgs').html('')</cmd><cmd n="js">$('#all_imgs div').fadeIn(1)</cmd><cmd n="js">$('#all_imgs img').fadeIn(1)</cmd><cmd n="js">$('#all_imgs').fadeIn(1)</cmd><cmd n="js">$('#galery_stage_micros').fadeIn(1)</cmd><cmd n="js">$('#var_imgs').html('')</cmd><cmd n="as" t="price" p="innerHTML"><![CDATA[£969]]></cmd><cmd n="as" t="campprice" p="innerHTML"><![CDATA[£969]]></cmd><cmd n="js">$('#navision_id').val('**230319AB04EZ09****')</cmd></xjx> - 29-04-2013, 12:25:55Şu an seyahat halinde olduğum için ayrıntılı düşünmedim ancak şöyle bir yapı oluştu kafamda...Selçuk adlı üyeden alıntı: mesajı görüntüle
Ürün Ekleme sayfasında, öncelikle ürünün genel özelliklerini ekletirdim. Ardından Ürüne konfigürasyon seçeneği ekle gibi bir kısım yapardım ve orada örneğin;
* wood başlığı altında hangi ağaç tipi seçeneklerinin olduğunu seçerdim. (bunlar da veritabanında kayıtlı olabilir.)
* daha sonra ağaç tipi ihtimalleri gelirdi ve o ürünün hangi ağaç tiplerinde çeşitleri olduğunu checkbox ile seçerdim.
* Wood mantığı ile aynı şekilde Covering başlığı altında deri tipi seçeneklerini listelerdim.
* Seçilen deri tipi seçeneğinin altında yine olabilecek tüm ihtimaller listelenirdi ve ben o ürünün olabilecek deri tipi özelliklerini checkbox ile seçerdim.
* Daha sonra bunları bir formdan alıp bir diziye alır, json_encode() ile işleyip konfigürasyonlar isimli bir tabloya yazardım
-urun_id
-urun_konfigurasyon
Örneğin ürünün id değeri 1453, 1905, 1923 olan üç ürün olsun. Tablo içeriği şu şekilde olur:
-- urun_id -- urun_konfigurasyon
-- 1453 -- {"wood":["1","22","123"],"covering":["443","242","423"]}
-- 1905 -- {"wood":["32","4222","12233"],"covering":["42343","2452","1423"]}
-- 1923 -- {"wood":["5123","2232","1213"],"covering":["44233","22342","4223"]}
urun_konfigurasyon sutunundaki sayılar, checkboxtan gelen özelliklerin veritabanındaki id değerleri - 29-04-2013, 12:28:07tesekkurler hocam bende json seklinde dusunmustum simdi sekillendi kafamda tesekkurler ustad.bayGaReZ adlı üyeden alıntı: mesajı görüntüle
- 29-04-2013, 12:29:57Önemli değil ancak üzerinde biraz daha düşünmek gerekebilir, tamamen ilk bakışta aklıma gelenler bunlar.. Akışı kağıda döküp, performans bazlı da düşünmek gerek..
Selçuk adlı üyeden alıntı: mesajı görüntüle
