Help with Layout - Show Products as a radio list /w images

Hey Guys,

The store I'm setting up has many products that are singular products with many colours.

Currently I've set up a new product for each colour variation.

(Category: Clothes -> Red Cloth, Blue Cloth, Orange Cloth, Ninja Cloth).

To me it's not very user friendly because of all the clinking, and it doesn't look great.

Is it possible to have it so when someone goes to my "Category Cloth" page, all they see is a tabled view of all products in that category, and a box underneath each product to enter in how much they want?

I looked into attributes, but there seems to be a lot of people having problems with them (in regards to stock etc.).

Any help with getting me what i'm looking for would rock.

Thanks.

As you're an ASP.NET developer, I'll talk as slowly and as simply as I can :laugh:

The best way of offering products that have a variety of colours, sizes, choice options... is by using the ATTRIBUTES feature you describe.

There is a module called "Stock by Attributes" that will allow stock management for different sizes / colours / choice options, etc.

(I understand that this module was coded by someone who is NOT a ASP.NET developer, so it should work perfectly! :laugh::laugh:)

Ohhh look at that humor :)

My wife will be running the shop. The reason I was moving away from Attributes is they seem a bit complicated and convoluted for the average user.

I'll play with attributes some more to see if i can get a good fit on them. Thanks for the help.

Humour aside... I think you'll find attributes the most appropriate way to configure your product offerings.

Much will depend on how you set your products up first. You'll find that there's often something to be said for balancing actual products with the array of available attributes.

What do I mean by this... ?

Consider clothing... T-Shirts in particular.

It would be possible to have a single product called: T-Shirts

Then, its attributes may include:-

Colour
Size
V-neck
Round-neck
Collars
Long-sleeved
Short-sleeved
Fleecy Interior
Smooth Interior
... ect, etc

The list of attributes is getting a little long and unwieldy, so it may be better to have a CATEGORY called T-Shirts, and, several T-shirt PRODUCTS, where the PRIMARY variances are part of the product, not the attributes:-

CATEGORY T-SHIRTS
|- V-neck Long-sleeved
|- V-neck Short-sleeved
|- Round-neck Long-sleeved
|- Round-neck Short-sleeved

This eliminates the need now for 4 attributes...

Thanks so much!

I Installed this and got the attribute (colour) for a single product and it works great.

IS there any way to have the attribute image above that radio button that's listed?

Currently they're on 2 seperated sections in the page layout:

class="optionName back">bumGenius Colours</h4>

<div class="back"> <input name="id[1]" value="1" id="attrib-1-1" type="radio"><label class="attribsRadioButton zero" for="attrib-1-1">Blossom</label><br> <input name="id[1]" value="2" id="attrib-1-2" type="radio"><label class="attribsRadioButton zero" for="attrib-1-2">Butternut</label><br> <input name="id[1]" value="4" id="attrib-1-4" type="radio"><label class="attribsRadioButton zero" for="attrib-1-4">Grasshopper</label><br> <input name="id[1]" value="3" id="attrib-1-3" type="radio"><label class="attribsRadioButton zero" for="attrib-1-3">Twilight</label><br>

<input name="id[1]" value="5" id="attrib-1-5" type="radio"><label class="attribsRadioButton zero" for="attrib-1-5">White</label><br>

</div> <br class="clearBoth"> </div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius%20-%20Blossom.gif" alt="" width="255" height="255"><br>Blossom</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius%20-%20Butternut.gif" alt="" width="255" height="255"><br>Butternut</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius.gif" alt="" width="250" height="250"><br>Grasshopper</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius%20-%20Twilight.gif" alt="" width="255" height="255"><br>Twilight</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius%20-%20White.gif" alt="" width="255" height="255"><br>White</div> <br class="clearBoth"> </div>

Is there any easy way to group those, if not i'll just modify the .PHP file.

<wishes there was an edit option>

Is there a way to show stock under each attribute? Rather than show "Total Stock: 23" i can show the exact stock per attribute?

There is a "stock by attributes" module. I don't use it but check it out. It's in the downloads section...

Yea - I installed it and it works great, however i'm trying to figure out how to get it to display the way I want it.

in my: tpl_modules_attributes.php in the inclues/templates/[TEMPLATE]/templates folder, it has:

<div class="wrapperAttribsOptions"> <h4 class="optionName back"><?php echo $options_name[$i]; ?></h4> <div class="back"><?php echo "\n" . $options_menu[$i]; ?></div> </div> <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?> <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div> <?php } ?> <?php if ($options_attributes_image[$i] != '') { ?> <br class="clearBoth" /> <?php echo $options_attributes_image[$i]; ?> <?php } ?> <br class="clearBoth" />

---

$options_attributes_image[$i] contains the entire HTML of:
<br class="clearBoth">

<div class="attribImg"><img src="images/attributes/bumGenius%20-%20Blossom.gif" alt="" width="255" height="255"><br>Blossom</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius%20-%20Butternut.gif" alt="" width="255" height="255"><br>Butternut</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius.gif" alt="" width="250" height="250"><br>Grasshopper</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius%20-%20Twilight.gif" alt="" width="255" height="255"><br>Twilight</div> <br class="clearBoth"> <div class="attribImg"><img src="images/attributes/bumGenius%20-%20White.gif" alt="" width="255" height="255"><br>White</div> <br class="clearBoth">

Where can I go to edit that so I can force it to dipslay the way I want it to?

IS there any way to have the attribute image above that radio button that's listed?

Page 187 of the Manual shows exactly how to do what you want.
If you don't have it, it goes something like:

Admin > Catalog > Option Name Manager

Click 'Edit' for the Attribute in question.

Although one can do many things in this area, this is specific to your question:

Image Styles:
0= Images Below Option Names
1= Element, Image and Option Value
2= Element, Image and Option Name Below
3= Option Name Below Element and Image
4= Element Below Image and Option Name
5= Element Above Image and Option Name

"Element" in this case is the Radio Button and for "Attribute Style for Radio Buttons/Checkbox:" #4 should work for you.

Thank you so much!

Do you know if there's a way with "Stock By Attribute" to show # of Stock under each element?

Your welcome for the help. I haven't used that Module but maybe someone will come along who can better answer questions about it. There is probably a Support Thread for it, if you do some searching.

i also have questions how to manage my attribute image.

for example, i had 1 product, option name is SIZE. option value is S, M, L

then at attribute controller, i selected this product.

and added one image by one image for S, M, L.

Now, on description page, i configed drop-down menu for SIZE.

but all 3 images were shown on description page.

Any setting ,i can , let say , choose size: M, description page only shows
size M photo, not all 3 images were here all together.

any advice will be appreciated. thank you.