Színválasztó helyének módos

[gubtan]

Sziasztok!

 

A színválasztót szeretném áthelyezni méghozzá úgy, hogy a képek alatt jelenjen meg vízszintesen. A könnyebb érthetőség kedvéért a mellékelt képen a piros téglalap jelölné az új helyet.

 

Van ötletek a megoldásra?

 

A rendszer 1.4.8.2.

 

Válaszaitokat előre is köszönöm!

[pattila01]

légyszi dobj privátban egy linket erről

[pattila01]

köszi nem kell már megtaláltam.

 

A tetemad/product.tpl-ben ez a blokk felel a kívánt részért (213 sor körül):

 

<div id="color_picker">
  <p>{l s='Pick a color:' js=1}</p>
  <div class="clear"></div>
  <ul id="color_to_pick_list">
  {foreach from=$colors key='id_attribute' item='color'}
   <li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
  {/foreach}
  </ul>
  <div class="clear"></div>
 </div>

 

Ezt a <div> blokkot kell oda rakni ahova pozicionálni szeretnéd.

[gubtan]

Köszönöm!

 

Ok, de hogy tudom a képek alá tenni, hol tudom a pozícionálást megcsinálni?

[pattila01]

Hát példának okáért:

 

a fent említett kódblokkot (egészítsük ki az ifekkel) tehát így:

 

{if isset($colors) && $colors}
 <!-- colors -->
 <div id="color_picker">
  <p>{l s='Pick a color:' js=1}</p>
  <div class="clear"></div>
  <ul id="color_to_pick_list">
  {foreach from=$colors key='id_attribute' item='color'}
<li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
  {/foreach}
  </ul>
  <div class="clear"></div>
 </div>
 {/if}

 

tedd a 186.sor után, bele a usefull links blokkba:

 

<!-- usefull links-->
 <ul id="usefull_link_block">
  {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
  <li><a href="javascript:print();">{l s='Print'}</a><br class="clear" /></li>
  {if $have_image && !$jqZoomEnabled}
  <li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>
  {/if}
 </ul>
</div>

 

tehát egybetéve így legyen:

<!-- usefull links-->
 <ul id="usefull_link_block">
  {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
  <li><a href="javascript:print();">{l s='Print'}</a><br class="clear" /></li>
  {if $have_image && !$jqZoomEnabled}
  <li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>
  {/if}
 </ul>
	 {if isset($colors) && $colors}
 <!-- colors -->
 <div id="color_picker">
  <p>{l s='Pick a color:' js=1}</p>
  <div class="clear"></div>
  <ul id="color_to_pick_list">
  {foreach from=$colors key='id_attribute' item='color'}
<li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
  {/foreach}
  </ul>
  <div class="clear"></div>
 </div>
 {/if}
</div>

 

Természetesen az adminban a force compile-t be kell kapcsolnod ahhoz hogy lásd a változást.

Ha betetted, és már ott jelenik meg ahol gondoltad, akkor érdemes css-ben utánaigazítani, ami a /themes/prestashop/css/product.css -ben lesz valahol az 50-es sorban ( #primary_block #color_picker ).

 

Nekem egy default teszt shopon alap témánál a fenti dolgokat eszközölve így néz ki:

Edited August 15, 2013 by pattila01 (see edit history)

[pattila01]

vagy:

ha esetleg az egész color_picker kódblokkot a primary_block záró div-je mögé (fölé) teszed, akkor így fog kinézni:

[gubtan]

Hurrrráááááááá!

 

MŰKÖDIK!

 

NAGYON SZÉPEN KÖSZÖNÖM!