Moving elements on the Product detail page

[chubster]

Hi

Im looking to have a similar look as Wigs & Pieces site regards positioning of Price, options, Qty and add to basket button. I assume this is done in custom html > product detail but have to admit i do not know where to start I knows nothing about html.

Any pointers would be much appreciated

[chubster]

I also like if possible to include a link to the "Write a review" in the same area as Add to basket etc ?

[Dave]

The two areas you want to look at are product detail page and %product_action within the custom HTML tab of your default template. If you click the view default HTML link it will give you some further information but basically you can copy the default into the boxes and anything you do in there will override the default. If you make a mess just clear the boxes and it will revert to the default.

You will see it uses variables to display the relevant information and its pretty obvious what they are. Suggest for starters you have a little play moving these variables about and see what impact it has. If you are still struggling then let us know.

[chubster]

Ah..Cheers Dave, didnt even think of looking in Product Action. Im off to play

[chubster]

Ok...Im nearly there I think. But the quantity box as is is not transfering what is entered over to the basket....if I enter 2 it only sends one ???

And if anyone sees anything else that shouldnt be there please shout

Code in Product Detail:

<h1>%product_title</h1>
[IF product_message]%product_message[/IF]
<div class="p">
<table class="grid">
<tr>
<td width="50%" align="center" style="padding-left: 10px; padding-right: 10px;" id="product_images">
<p>%product_images</p>
</td>
<td><img src="/images/spacerv.gif" alt=""></td><td class="vertical"><img src="/images/spacerv.gif" alt=""></td>
<td width="50%" align="left" style="padding-left: 10px" id="product_details">
[IF product_options]%product_options[/IF]
[IF product_action]%product_action[/IF]
[IF product_attributes]%product_attributes[/IF]
[IF product_availability]%product_availability[/IF]
[IF product_related]%product_related[/IF]
[IF product_brandlogo]<p align="center">%product_brandlogo</p>[/IF]
[IF product_brandcontent]%product_brandcontent[/IF]
[IF product_additional]%product_additional[/IF]
</td>
</tr>
</table>
</div>
[IF product_discount]<hr />
%product_discount[/IF]
[IF product_content]<hr />
%product_content[/IF]
[IF product_alsobought]<hr />
%product_alsobought[/IF]
[IF product_buttons]<hr />
%product_buttons[/IF]

Code in %product_action:

[QUOTE]<div class="p2" id="order">
<table class="alternate">
<tr>
<td align="left" style="padding: 5px 10px">
%product_price
[IF product_vat]<span class="gap">%product_vat</span>[/IF]
[IF product_incexc]<span class="gap">%product_incexc</span>[/IF]
[IF product_points]<span class="gap">%product_points</span>[/IF]
</td>
<td width="100px"><strong>Qty: </strong><input type="text" size="2" name="quantity" value="1"> </td>
<td align="right" style="padding: 5px 10px" id="add">
[IF product_quantity]%product_quantity
<span class="gap">[/IF]
%product_add
[IF product_quantity]</span>[/IF]
</td>
</tr>
</table>
[IF product_notify]%product_notify[/IF]
</div>
[IF product_unavailable]%product_unavailable[/IF]QUOTE]

[chubster]

[QUOTE=chubster;15988]Ok...Im nearly there I think. But the quantity box as is is not transfering what is entered over to the basket....if I enter 2 it only sends one ???

Any thoughts on this anyone ? Try it here

[Red Devil]

Enter 0 and it transfer 1. Its not recognising what you enter.

[chubster]

I know....any ideas how to fix ?

[Rich]

If in doubt, always return to the default HTML. The variable %product_quantity gets translated into the quantity box, the variable %product_add is the button.

You have turned off the quantity box in configuration, which means that %product_quantity gets turned into a hidden field with a quantity of 1. The extra HTML you've put in for the quantity box means that there are 2 quantity fields on the page.

Either remove your own code and turn the quantity box back on, or remove the %product_quantity variable (I'd recommend the first option).

[chubster]

Ok...Thanks Rich, I will revert back to default but would really like the word "Qty" to show before the quantity field. Just makes it a bit more obvious. How would I actually achieve this ?

[chubster]

Ah...Ok done it I think !

Could someone look over my code and make sure all is OK

<div class="p2" id="order">
<table class="alternate">
<tr>
<td align="left" style="padding: 5px 10px">
%product_price
[IF product_vat]<span class="gap">%product_vat</span>[/IF]
[IF product_incexc]<span class="gap">%product_incexc</span>[/IF]
[IF product_points]<span class="gap">%product_points</span>[/IF]
</td>
<td width="100px"><strong>Qty: </strong><input type="text" size="2" name="quantity" value="1"> </td>
<td align="right" style="padding: 5px 10px" id="add">
<span class="gap">
%product_add
[IF product_quantity]</span>[/IF]
</td>
</tr>
</table>
[IF product_notify]%product_notify[/IF]
</div>
[IF product_unavailable]%product_unavailable[/IF]

[Rich]

As this might be useful for other users, here is the replacement code for putting the "quantity" box and the "add to basket" button on the same line in the %product_action box (Template Editor: Custom HTML tab):

<div class="p2" id="order">
<table class="alternate">
<tr>
<td align="left" style="padding: 10px; width: 100%;">
%product_price
[IF product_vat]<span class="gap">%product_vat</span>[/IF]
[IF product_incexc]<span class="gap">%product_incexc</span>[/IF]
[IF product_points]<span class="gap">%product_points</span>[/IF]
</td>
<td align="right" style="padding: 10px; padding-right: 0px;" nowrap>
[IF product_quantity]%product_quantity[/IF]
</td>
<td align="right" style="padding: 10px; padding-left: 0px;" id="add" nowrap>
<div style="padding-left: 5px">%product_add</div>
</td>
</tr>
</table>
[IF product_notify]%product_notify[/IF]
</div>
[IF product_unavailable]%product_unavailable[/IF]

If you require a "Qty:" prefix, replace:

[IF product_quantity]%product_quantity[/IF]

With:

[IF product_quantity]<b>Qty:</b> %product_quantity[/IF]

[chubster]

Thanks Rich.....