[solved] Color Picker through Quantity Line on Product Page

[Smijn1]

Hi,

 

As you can see in the image attached, when I add a lot of colors to choose from to a product, the color boxes are on a new line but there is no room made for them, so they just appear through the quantity line. Can I make the 'box'/'line' for the color picker higher so that 2 lines of colors can be displayed without issues like this?

 

I'm using PS 1.5.4.1, this is the piece of code where the color picker is included in the product.tpl file:

  <!-- hidden datas -->
  <p class="hidden">
<input type="hidden" name="token" value="{$static_token}" />
<input type="hidden" name="id_product" value="{$product->id|intval}" id="product_page_product_id" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="id_product_attribute" id="idCombination" value="" />
  </p>
  <div class="product_attributes">
{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="15" height="15" /><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}

 

Thanks.

Edited September 1, 2013 by Smijn1 (see edit history)

[vekia]

this problem is related to the CSS styles not to the html language. is there any chance to test your website? if so, please share the url. then it will be much easier to debug

[PascalVG]

Hi Smijn,

As Vekia said, it's easier if you have a URL to share, but probably you can change this piece of css code:

 

in file /themes/<your theme folder>/css/product.css, find this piece of code:

 

#attributes .attribute_list #color_to_pick_list {

list-style-type:none;

width:125px;

height: XXpx; <-- add some value XX here that makes it look nice...

}

 

If this doesn't work, please share the URL. Then we can check directly on your page.

pascal

[Smijn1]

Hi, thank you for your response.

 

click here to view the problem in a test product on my website.

 

The solution you mentioned didn't work for me..

Edited September 1, 2013 by Smijn1 (see edit history)

[vekia]

remove height from:

 

#attributes fieldset {
background: url(../../../img_white/dashed_w.png) repeat-x scroll left top transparent;
float: left;
height: 22px;
padding-bottom: 6px;
padding-top: 9px;
width: 295px;
}

 

it's a part of file: http://www.piercing-groothandel.nl/presta/themes/parfum_store/css/modules/stylechanger/StyleC_1.css

line: ~1655

 

effect:

[Smijn1]

Awesome, thanks so very much! I'm very happy with it

[vekia]

glad to hear that i could help you a little in this case

so, everything works as you expected?

[Smijn1]

Yep, looks great this way!