Merhabalar sizlere bugün Opencart renk resim eşleştirme işlemleri için basit bir kod örneği ile nasıl yapılır bunu aktaracağım.
Bu işlemi kullanmamızın amacı ise ayakkabı,tşört vb. ürünleri seçtiğimiz zaman ilgili resmin aktif olarak gelmesi için kullanabiliriz.
Not : bu yapı 2.1.1 üzerinde denenmiş olup, çalışmasından sonra paylaşılmıştır.
mysql alter kodu
ALTER TABLE `oc_product_image` ADD `data_attr` VARCHAR(255) NULL DEFAULT NULL AFTER `image`;
# admin/controller/catalog/product edit
## line 1391
// renk seçenek
$getProductFieldOption = $this->model_catalog_product->getProductFieldOption($this->request->get['product_id'],'name','Renk');
if(isset($getProductFieldOption))
{
$data['getProductFieldOption'] = array();
// $getProductFieldOption;
foreach ( $getProductFieldOption as $key => $item )
{
$data['getProductFieldOption'][] = $item['name'];
}
}# admin/model/catalog/product.php
## line 454
public function getProductFieldOption($product_id,$field,$type)
{
$sql = "SELECT * FROM " . DB_PREFIX . "option_description WHERE $field like '$type'";
$query = $this->db->query($sql); if(isset($query->row))
{
$opSql = "SELECT (SELECT name FROM " . DB_PREFIX . "option_value_description as ovd WHERE ovd.option_value_id = pov.option_value_id) as name FROM " . DB_PREFIX . "product_option_value as pov where pov.product_id like $product_id and pov.option_id like ".$query->row['option_id']."";
$opQry = $this->db->query($opSql);
return $opQry->rows;
}
}template için eklenecek kod
$(document).ready(function() {
//renk seçim işlemleri.
$('label[for^=option-value]').click(function(e){
var _click = $(this);
console.log(_click.children('img').attr('alt'));
if($('div.left').find('a[data-attr="'+_click.children('img').attr('alt')+'"]').length > 0)
{
//
$('ul.image_carousel').find('a').data('attr', _click.children('img').attr('alt'))[0].click();
$('div.left').find('a[data-attr="'+_click.children('img').attr('alt')+'"]')[0].click();
} else {
$('div.image-additional').find('a:not(data-attr)').click();
}
});
});OWL Carousel Eklentisini Kullananlar için
$('label[for^=option-value]').click(function(e){
var _click = $(this);
var _index = $('ul#slideshow_product').find('a[data-attr="'+_click.children('img').attr('alt')+'"]').closest('div').index();
//
if(_index != '-1') //
{
var carousel = $("#slideshow_product");
carousel.owlCarousel({stopOnHover: true,pagination: true, autoPlay: false,navigation: false,paginationSpeed : 500,singleItem:true,});
carousel.trigger('owl.goTo', _index) //
}
});Opencart renk resim eşleştirme
Yukarıdaki adımları izledikten sonra sıkıntısız bir şekilde renk resim eşleştirme işlemleriniz olacaktır.
Fakat kodu kendinize göre jquery tarafını düzenlemeniz gerekebilir. Benim baz aldığım class’lar farklı olabilir.
Nerelerde Kullanabiliriz.
Bu sistem genelde medikal sistemlerinde, tekstil sitelerinde vb. gibi yerlerde kullanabilirsiniz.
Nasıl Çalışıyor
Yukarıdaki kodumuz sizin resimleriniz ile ürününüze eklediğiniz renk seçenekleri ile eşleştirme yapılıyor.
Kullanıcı ürüne geldiğinde sizin ürüne belirttiğiniz renk tablosundan rengi seçmesinin ardından eşleştirmiş olduğunuz rengi aktif hale getiriyor.
Opencart Nedir ?
Opencart işini internet ortamına taşımak ve e-ticaret yapmak isteyen kullanıcılar için geliştirilmiş PHP tabanlı, açık kaynak kodlu ve ücretsiz bir e-ticaret platformudur. Açık kaynak kodlu olması sebebiyle geliştirilebilir bir web sitesi altyapısı sunması ve kullanıcı dostu ara yüzüyle e-ticaret sektörü için en çok tercih edilen hazır scriptler arasında yer almaktadır.
