A Smarter Combo Box

[Bill Dalton]

Most of my products have multiple colors and the default color selector works perfectly. However I have a few products that are available in one color only. I’m hoping there is a way of using CSS to change the Combo Box to a static text box, or even better just show the text, for example the text “Red”. And have the color add to the cart just like it would when I use the regular combo box.

 

In this thread, A Smarter Color Picker, it really opened my eyes to what is possible using CSS.

http://www.prestasho...r-color-picker/

 

So I need a way to identify the product to selectively apply the change.

 

I need the CSS that will make the change.

 

Or I need to be told this is not possible.

Edited February 11, 2013 by Bill Dalton (see edit history)

[yaniv14]

I think that the only way to do it is with js modification

if I understand you question

[Bill Dalton]

Here is the page,

http://test12.uniform.ca/avida-scrub-sets/26-abt10-3m-scotchgard-button-front-scrub-set.html

 

The color is Royal Blue.

 

Rather than 1 color in a combo box, it would be more elegant to have the color displayed without the selector property of a combo box. If it could be changed to a text box that would be great. A border-less text box would be even better.

 

A js script might be good ...

[Whispar1]

The site is looking great Bill!

 

Taking from the color-picker example you posted

http://test12.unifor...trast-trim.html

 

To keep everything consistent throughout the product pages, would it be an option to just have the blue color box, even if that is the only color it comes in? This way, as visitors are going through your products and are used to seeing the color-picker on each item, they will assume that is the only color in which it is available. Would save you the headache of trying to figure out how to do what you want to do (although it is a nice idea) but I think yaniv is correct. It would need a js mod to look for products with only one combination and then display the text in the color available.

 

The other option you may have is to fool it and create an image (like you did for the striped swatches)

 

Not sure if this helps, but maybe food for thought.

Edited February 9, 2013 by Whispar1 (see edit history)

[Bill Dalton]

Yeah, I do agree I should turn on the color picker as a signal to the customer. And yeah, the way it is now really isn't a problem. In fact this is pretty much the way I've done it for 10 years using HTML. I'm clueless with JS and CSS so I'm hoping someone can drop their knowledge into this thread. Everything is always easy ... once you how.

[Bill Dalton]

yaniv14, you were right. Although CSS can be used it is not the full solution to making a smarter Prestashop Combo Box.

 

I now have a js solution that works very well. I'll post it here. Perhaps someone else can make use of it.

 

In your theme product.js find

 

//init the price in relation of the selected attributes
if (typeof productHasAttributes != 'undefined' && productHasAttributes)
 findCombination(true);
else if (typeof productHasAttributes != 'undefined' && !productHasAttributes)
 refreshProductImages(0);
//
$('a#resetImages').click(function() {
 updateColorSelect(0);
});
$('.thickbox').fancybox({
 'hideOnContentClick': true,
 'transitionIn' : 'elastic',
 'transitionOut' : 'elastic'
});

 

Add to the bottom this code;

 

$('#attributes select option:only-child').each(function(){
var txt = $(this).html();
$(this).closest('select').replaceWith('<span class="one_attribute">'+ txt +'</span>');
 });

 

So the whole thing ends up like this;

 

//init the price in relation of the selected attributes
if (typeof productHasAttributes != 'undefined' && productHasAttributes)
 findCombination(true);
else if (typeof productHasAttributes != 'undefined' && !productHasAttributes)
 refreshProductImages(0);
//
$('a#resetImages').click(function() {
 updateColorSelect(0);
});
$('.thickbox').fancybox({
 'hideOnContentClick': true,
 'transitionIn' : 'elastic',
 'transitionOut' : 'elastic'
});
$('#attributes select option:only-child').each(function(){
var txt = $(this).html();
$(this).closest('select').replaceWith('<span class="one_attribute">'+ txt +'</span>');
 });

 

Then, to pretty it up add this to your theme global.css; (you can just put it at the bottom of the file or wherever you want) You'll need to change the px setting to match your layout.

 

/* Product with one attribute. Replacing select with text */
#attributes .one_attribute {
height: 21px;
float: right;
display: block;
width: 150px;
padding: 3px 7px 0 0;
vertical-align: top;
}

Edited February 11, 2013 by Bill Dalton (see edit history)

[Bill Dalton]

The js solution works very well. But code is fired by events, and it is very important to fire code at the best event. To do that you can use js, css and your tpl.

 

The following solution modifies code in your product.tpl, globle.css and product.js

 

If you have tried the js solution above you will need to comment that code out and make this change to product.js

 

Find code that looks like;

// search the combinations' case of attributes and update displaying of availability, prices, ecotax, and image
function findCombination(firstTime)
{
$('#minimal_quantity_wanted_p').fadeOut();
$('#quantity_wanted').val(1);
//create a temporary 'choice' array containing the choices of the customer
var choice = new Array();
$('div#attributes select').each(function(){
 choice.push($(this).val());
});

 

And insert this code to the bottom;

$('div#attributes input[type=hidden]').each(function(){
  choice.push($(this).val());
 });

 

The following solution requires the same change to globle.css made in my previous post, so please add;

(change the px settings to match your layout)

/* Product with one attribute. Replacing select with text */
#attributes .one_attribute {
height: 21px;
float: right;
display: block;
width: 150px;
padding: 3px 7px 0 0;
vertical-align: top;
}

 

In your theme product.tpl find code that looks like;

 

<select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
	  {foreach from=$group.attributes key=id_attribute item=group_attribute}
	   <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}"> {$group_attribute|escape:'htmlall':'UTF-8'}</option>
	  {/foreach}
	 </select>

 

Replace that code with the following;

{if (count($group.attributes) == 1)}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
   <input type="hidden" name="{$groupName}" value="{$id_attribute}" />
	<span class="one_attribute">{$group_attribute|escape:'htmlall':'UTF-8'}</span>
  {/foreach
{else}
  <select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
    {foreach from=$group.attributes key=id_attribute item=group_attribute}
   <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}"> {$group_attribute|escape:'htmlall':'UTF-8'}</option>
  {/foreach}
</select>
{/if}

 

I tested this on PS v1.4.9.1 and PS v1.5.3.1

 

All of the above code is thanks to razaro.

http://www.prestasho...r/45807-razaro/

Edited February 11, 2013 by Bill Dalton (see edit history)

[yaniv14]

did you try it only with smarty count function without js modification?

[Bill Dalton]

No, and I hope anyone who can improve on this or change it in anyway will post their changes. All are Welcome!

 

You can see it work here, see the combo box changes from a selector to a box if only one item is available. In this case, Royal Blue.

http://test12.uniform.ca/avida-scrub-sets/26-abt10-3m-scotchgard-button-front-scrub-set.html

[yaniv14]

I think this is a good & simple solution, i don't think i could do it better.

we are lucky to have Razaro with us

 

p.s: did you check that your are getting the attribute value when you proceed with the order?

[Bill Dalton]

did you check that your are getting the attribute value when you proceed with the order?

 

Right!

 

Yes, works great.