Opencart renk resim eşleştirme

Opencart renk resim eşleştirme
Opencart renk resim eşleştirme

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.

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.

İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*