Need Help With Color Picker

[Bill Dalton]

I can’t seem to get Color Picker to display in 1.5.2.0.

 

It is set to Color and not drop down. But it shows up as drop down no matter what.

 

In version 1.4.7 I could choose to have color as a drop down box and turn on color picker. But in 1.5.2.0 I don’t see that option. I’m just getting a drop down box on my page and not getting the color picker. Am I missing something? Or could this be related to a TM theme I’m using?

[razaro]

Probably it is TM theme, you can try default theme just in case.

And link to your website would help or to TM theme.

[Bill Dalton]

Thanks for the reply. Here is a link,

http://bdalton.ca/en/5-ipod-touch.html

[razaro]

Yes it is theme issue, but they say it build with and for version 1.5.0.17.

 

You can try to replace code in product.tpl that is responsible for attributes

   {if isset($groups)}
   {foreach from=$groups key=id_attribute_group item=group}
   {if $group.attributes|@count}

 {assign var="groupName" value="group_$id_attribute_group"}
			    <label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'}:</label>
			    <div class="clear"></div>
 <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>
 <div class="clear"></div>

   {/if}
   {/foreach}
   {/if}

This part is from your theme and you could try to replace it with code

from default theme

   {if isset($groups)}
   <!-- attributes -->
   <div id="attributes">
   {foreach from=$groups key=id_attribute_group item=group}
 {if $group.attributes|@count}
  <fieldset class="attribute_fieldset">
   <label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
   {assign var="groupName" value="group_$id_attribute_group"}
   <div class="attribute_list">
   {if ($group.group_type == 'select')}
    <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{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>
   {elseif ($group.group_type == 'color')}
    <ul id="color_to_pick_list" class="clearfix">
	 {assign var="default_colorpicker" value=""}
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <li{if $group.default == $id_attribute} class="selected"{/if}>
	  <a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	   {if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
	    <img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br>
	   {/if}
	  </a>
	 </li>
	 {if ($group.default == $id_attribute)}
	  {$default_colorpicker = $id_attribute}
	 {/if}
	 {/foreach}
    </ul>
    <input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
   {elseif ($group.group_type == 'radio')}
    {foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	 {$group_attribute|escape:'htmlall':'UTF-8'}<br/>
    {/foreach}
   {/if}
   </div>
  </fieldset>
 {/if}
   {/foreach}
   </div>
  {/if}

But not sure if it will work, because it would probably some css styles have to be added

and also maybe some code in product.js.

[Bill Dalton]

Thanks. I did try and replace the code but it didn't change.

 

I also removed the CSS files and that didn't work. Could I be missing something in the BO? I know in version 1.4.7 color picker had to be turned on. but in 1.5.2 I don't see anything to turn on color picker.

[razaro]

I think you copied code in wrong place.

You enter it somewhere around line 88 in middle of JavaScript code

which cause error on page. But code that need to be replaced is around line 252 after

	    <div id="attributes">

   {if $priceDisplay == 2}
 <br />
 <span id="pretaxe_price"><span id="pretaxe_price_display">{convertPrice price=$product->getPrice(false, $smarty.const.NULL)}</span> {l s='tax excl.'}</span>
   {/if}
	    <div class="clearblock"></div>

 

And you don't need anything more in BO because code for colors is there now, just in wrong place.

[Bill Dalton]

Thanks for the help razaro, but I'm having trouble matching up with your line.

 

I've attached a copy of my product.tpl. I'd really appreciate if you could trouble to look.

product.zip

[Bill Dalton]

I fixed it! Turns out the code was commented out. I didn't notice because I thought it would look like this <!-- and Dreamweaver always greys out the code. But it was commented out using *} and that wasn't making Dreamweaver grey the code and I didn't notice that they were killing the code.

 

Thanks for your help razaro. You were right, it was the TM theme.

[razaro]

Sorry about confusion, I looked at code from product.tpl of original theme
which is different then yours. Try tpl file from attachment.

Edit: yes I see that now also and if that works for you, then you don't need those changes in code.
And now I see it would be required to use few functions from product.js or whole file. And that maybe
cause some other issues.

Edited October 23, 2015 by razaro (see edit history)

[Bill Dalton]

Thanks razaro, I have the color picker now displaying. But it doesn't work. Looks real pretty, but just doesn't work. I did try your product page, but it did not work. Thank you for trying.

 

So .. I can now see the color picker but it will not work. I tried regenerating the combo's but that did not fix it.

[razaro]

It doesn't work because of JavaScript.

Code where you remove comments calls JavaScript function that does not exist.

It cause error and don't work.

 

Try this: backup current product.tpl and product.js in theme js folder.

Then use tpl I attached and copy product.js from default theme.

 

If that does not work out return code to state before all changes.

You could also try TM support but they probably tell you to downgrade your shop :-)

And you wouldn't do that.

[Bill Dalton]

Tried but no luck. I cleared the cache and all that. I'll keep at it. Just need to find the missing code. Might need some paid help.

[Bill Dalton]

In PS V1.4.7 you could setup the color picker to automatically work with a drop down selector. It was a great feature. When you click on a color the drop down box would change to the matching color. This was very easy to do in that version. But it seems that has changed in PS V1.5. Now you can have either the drop down or the color picker but not both. Is that correct?

 

For example, here is a link to PS V1.4.7 and you can see how I would like the color picker to work with a color drop down box.

http://roxor.ca/en/tops/48-424t.html

 

Perhaps having both seems redundant. But I think it give the customer more feedback on the color “Names” and great choice for the customer to choose from.

[Bill Dalton]

razaro, thanks for fixing,

http://bdalton.ca/en/5-ipod-touch.html

[Bill Dalton]

razaro, I had a chance to look at what you did. I would NEVER have fixed it on my own. I see the changes you made in product.tpl, global.css and product.js using a file compare program Winmerg. You are good. Thanks again.

[novedadesmty]

Hi. I have the same theme and I wonder how to make it look like your site, with the list and color picker. I downloaded the product.tpk attached and compare it with the default and make the changes. Also copy and paste product.js (from default theme) to the actual theme but didnt work. Do I need to make any change to global.css ? my website is www.novedadesmty.com and the theme is the same from TM whines theme 1.5.x Thanks, I will really appreciate your help.