[SOLVED] ddSlick product options images and #button-cart val

Quote

Post by newbiee » Mon Jan 27, 2014 10:30 pm

Hello,

I'm implementing ddSlick dropdown images (http://designwithpc.com/Plugins/ddSlick) into product options.

I'm using select->option HTML object to provide a safe layer when JS is disabled / ddSlick not loaded..

I was able to add the images and styles: http://jdem.cz/9k779 (via "make it slick" function), but I have a problem with data validation when adding a product into cart because the selectedData is not transfered into the cart add() function (index.php?route=checkout/cart/add -> /controller/checkout/cart.php function add()).

I've even tried adding one default option into select with selected attribute, but still the card can't see it is selected when using ddSlick:

Code: Select all

<select><option value="23" selected="selected">value23</option></select>
(above example works for options not using ddSlick)

How does the card determine that some option has been selected?

How should I send the selected option to cart?

Code: Select all

ddslick({onSelected: function(data){alert(data.selectedData.value);}, })
Last edited by newbiee on Tue Jan 28, 2014 2:04 am, edited 1 time in total.
newbiee
Newbie
Posts
5
Joined
Thu Oct 24, 2013 1:01 am
Top

Re: ddSlick product options images and #button-cart validati

Quote

Post by clorne » Mon Jan 27, 2014 11:08 pm

Have a look at
http://www.opencart.com/index.php?route ... n_id=10256
for ideas

For demo go to:

http://ocextensions.co.uk/demo/product1
clorne
Active Member
Posts
164
Joined
Fri Dec 23, 2011 6:03 pm
Top

Re: ddSlick product options images and #button-cart validati

Quote

Post by newbiee » Tue Jan 28, 2014 12:58 am

Thanks for advice! The problem is, that DEMO works, but uses totally different version of the extension. And the extension doesn't work..

In DEMO there is:

Code: Select all

$('.Manufacturers').ddslick({
showSelectedHTML: false,
  onSelected: function(data){
    b(data.selectedData.value, data.selectedData.description);
  }
   });
b() function saves values to cookies but I can't see how they edited the OpenCart core to use those cookies (cart.php).

Code: Select all

function b(c,d){
    document.cookie="optionzz=" + c;
    document.cookie="namezz=" + d;
	$.ajax({
		url: 'index.php?route=product/product/add',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}
			}
			if (json['success']) {
				$('.opprice').html ('Price:' + json['total']);
                                $('.price-tax').html ('Ex Tax: ' + json['tax']);
                            html = '';
                            $.each(json.oprice, function(i, object) {
                                                           html += object;
                                                                 });
                              $('.pandc').html(html);
		                          }
	    }
	});
}
newbiee
Newbie
Posts
5
Joined
Thu Oct 24, 2013 1:01 am
Top

Re: ddSlick product options images and #button-cart validati

Quote

Post by newbiee » Tue Jan 28, 2014 2:03 am

I have found the solution!

When validating, OpenCart looks for element with name="option[current_option_number_here]".

ddSlick has for this situations input with class "dd-selected-value" so you only need to change the element from:

Code: Select all

<input class="dd-selected-value" value="22" type="hidden">
to

Code: Select all

<input class="dd-selected-value" name="option[228]" value="22" type="hidden">
It can be done with jQuery:

Code: Select all

<script type="text/javascript">
$("select[name='option[<?php echo $option['product_option_id']; ?>]']").ddslick({width: 180, onSelected: function(data){
   $('#option-<?php echo $option['product_option_id']; ?> .dd-selected-value').attr("name", "option[<?php echo $option['product_option_id']; ?>]");
}, });
</script>
newbiee
Newbie
Posts
5
Joined
Thu Oct 24, 2013 1:01 am
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: Amazon [Bot] and 19 guests