knitting

Author Topic: SORTED: Inline thumb images in child product list  (Read 12179 times)

davcraiguk

  • Beginner
  • *
  • Posts: 5
SORTED: Inline thumb images in child product list
« on: February 20, 2009, 12:52:44 pm »
I am surprised this not requested more often. I would like to know how to do this.

So far I've added one line to the addtocart_list_single.tpl.php namely <?php echo $product['product_image'] ?> here...

Quote
foreach( $products as $product ) {       
    foreach( $product as $attr => $val ) {
        // Using this we make all the variables available in the template
        // translated example: $this->set( 'product_name', $product_name );
        $this->set( $attr, $val );
    }
    ?>
    <div class="vmCartChild<?php echo $cls_suffix." ".$product['bgcolor'].$cls_suffix ?>">
        <div class="vmCartChildElement<?php echo $cls_suffix ?>">

<?php echo $product['product_image'] ?>
            <input type="hidden" name="prod_id[]" value="<?php echo $product['product_id'] ?>" />
            <input type="hidden" name="product_id" value="<?php echo $product['parent_id'] ?>" />
            <?php if( $child_link ) : ?>

This displays the thumb image inline OK with the 'View full size image' link. All I really want is the thumb image on its own - no link. Can this be done.

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Inline thumb images in child product list - sort of...
« Reply #1 on: February 20, 2009, 18:00:39 pm »
I only set the thumbnail with the full image link!

You would have to alter ps_product_attribute to include it per child image.

Line 605 change from

Code: [Select]
$products[$ci]['product_image'] = $product_image ;

to

Code: [Select]
$products[$ci]['product_image'] = $product_image ;
$products[$ci]['child_thumb_image'] = $product_thumb_image ;

This ensures that an image for each child is built.

In your template you would then use $product['child_thumb_image']
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

davcraiguk

  • Beginner
  • *
  • Posts: 5
RESOLVED: Inline thumb images in child product list
« Reply #2 on: February 23, 2009, 05:19:45 am »
Thanks Mark,

Now got this sorted...heres how.

1. do what Mark said in above post

2. Backup and edit /components/com_virtuemart/themes/'yourtemplatename'/templates/product_details/includes/addtocart_list_single.tpl.php

3. Add this below line 31

Code: [Select]
<img src = "<?php echo JURI::base().'components/com_virtuemart/shop_image/product/'.$product['child_thumb_image'?>"/>
I had to resize the thumb images to 30x30 in order for them look appropriate. Using a third image 30x30 leaving the 90x90 thumbs for use in other areas of the shop would be useful. Not worked out how to do that yet.

marcosartore

  • Beginner
  • *
  • Posts: 6
Re: SORTED: Inline thumb images in child product list
« Reply #3 on: June 04, 2009, 00:51:19 am »
Hello,
I also wish to display a thumb image near each product name in the list of child items.
I did what above stated but did not work for this purpose. I always get one single thumb image at the top left of the child list. If I click on the child item name the thumb image changes to that of the selected item and can be enlarged (by the way, the child name can be clicked but is not appearing like a real link, not hand-style pointer when mouse is over).
Can you please advice on how to get each child image near the respective item name in the child list selection table ?
Thanks a lot in advance,
Marco

davcraiguk

  • Beginner
  • *
  • Posts: 5
Re: SORTED: Inline thumb images in child product list
« Reply #4 on: June 04, 2009, 05:52:32 am »
Hi Marco

Did you alter the code as in Mark's post? The one before mine. Both need to be done fot it to work. Mark's post alters ps_product_attribute.php and mine alters addtocart_list_single.tpl.php.

Also its easy to overlook at first glance that the variable names are slightly different $product_thumb_image and $product_image

David

marcosartore

  • Beginner
  • *
  • Posts: 6
Re: SORTED: Inline thumb images in child product list
« Reply #5 on: June 16, 2009, 11:01:42 am »
Hi,
many thanks for your answer. I am sorry to get back only now, I did not receive any email notification :-(

So I have done what Mark suggested, namely changed line 605 of ps_product_attribute.php AND I have done your modification below line 31 of addtocart_list_single.tpl.php.
The first file is located at administrator/components/com_virtuemart/classes/ps_product_attribute.php
The second at /components/com_virtuemart/themes/default/templates/product_details/includes/addtocart_list_single.tpl.php

When I select a product with child products in the frontend I get the list and one single image at the top left. This is actually the thumbnail of the first child product of the list and varies if I click over another child product name in the list (although the mouse over does not display any hand-cursor, so that for the final user it would be difficult to try and click those names...).
In other words I cannot see the list of images near the child names.
What am I missing ?

One last note which may be useful: I am using different templates in the website at different pages. In the one of Virtuemart it is the standard JA_purity template. But under /components/com_virtuemart/themes/ I find just one single subdir named "default". Is this correct ?

Attached is the screenshot of my child product list.

Thanks for your help,
Marco


marcosartore

  • Beginner
  • *
  • Posts: 6
Re: SORTED: Inline thumb images in child product list
« Reply #6 on: July 01, 2009, 05:09:03 am »
I have myself figured out how to solve the issue I have asked about, i.e. showing the thumbnail image of child items in the child item list, near each item name.
I reply to myself for the benefit of other users who may experience the same need.

In order to display the item image in the child item list you have to modify the file addtocart_list_multi.tpl.php located at /htdocs/components/com_virtuemart/themes/'your_template_name'/templates/product_details/includes.
Add this line below line 45:

Code: [Select]
<?php echo $product['product_image'?>
(that is just before this line:

Code: [Select]
<span class="vmChildDetail<?php echo $cls_suffix ?>" style="float: left;width :20%;" /> )

That's it.
Regards,
Marco

Apple7

  • Beginner
  • *
  • Posts: 10
Re: SORTED: Inline thumb images in child product list
« Reply #7 on: September 18, 2009, 03:01:05 am »
Thank you so much, marcosartore!

Your solution worked 100% for me.
I neded to have childproducts of different colores pictures displayed with no cart functions - catalog only mode.

prajn

  • Beginner
  • *
  • Posts: 6
Re: SORTED: Inline thumb images in child product list
« Reply #8 on: November 24, 2009, 12:54:28 pm »
BIG THANKS Marco !

tracer

  • Beginner
  • *
  • Posts: 5
Re: SORTED: Inline thumb images in child product list
« Reply #9 on: December 17, 2009, 09:30:36 am »
BTW .. I found the fix for the missing hand

themes/default/theme.css

I added cursor: hand; to the bottom of the list for vmChildDetail -- about line 293

from:
Code: [Select]
.vmChildDetail { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;

to
Code: [Select]
.vmChildDetail { /* Child Detail, description , attributes ,price, quantity etc */
vertical-align: middle;
margin-top: 6px;
cursor: hand;

gtelegadis

  • Beginner
  • *
  • Posts: 18
Re: SORTED: Inline thumb images in child product list
« Reply #10 on: December 19, 2009, 20:23:44 pm »
Thanks - this was a HUUUUGGE help.

One issue though that I found.  When adding the image to the child item row, the bottom of the image starts flush with the child name, which is centered vertically on the row.  Note that the price, quantity, and quantity arrows are bottom aligned vertically.  When not using child images, it's not much of an aesthetic issue, but when adding images the image size is generally larger and inevitably will increase the row height.  If the image were bottom aligned (similar to the price, quantity, and quantity arrows, it will help reduce the row height per child.  This is especially useful when having a number of child rows, to reduce unnecessary scrolling for the customer.

Does anyone know how to get the image we've just created per the above hack to bottom align in each row?  I've attached an example of the issue with my cart.

Thanks in advance.

velodesign

  • Beginner
  • *
  • Posts: 4
Re: SORTED: Inline thumb images in child product list
« Reply #11 on: September 20, 2010, 01:02:39 am »
Hi!

I have a similar problem, but I need to list all of child products thumbs, with name of the attribute and action for the child product details (like in dropdown) but on an other position and the "add to cart button" and the "quantity field" needs to placed on there original position. So, i gave an absolute position for the .vmCartDetails in theme.css, and it works fine with dropdown list, but with dropdown i can't list the thumb images, and i havent a select list, only the name of attribute and images.

I attached an image how its want to be look like and how its displayed now with dropdown...

gtelegadis

  • Beginner
  • *
  • Posts: 18
Re: SORTED: Inline thumb images in child product list
« Reply #12 on: September 20, 2010, 08:54:55 am »
I would love to get mine working like yours (where the person clicks the swatch color and the main photo changes to that child photo).  Can you post your solution when you figure this out to both the theme.css and to getting teh swatch images to change the product image?  Thanks.

velodesign

  • Beginner
  • *
  • Posts: 4
Re: SORTED: Inline thumb images in child product list
« Reply #13 on: September 23, 2010, 18:32:06 pm »
well, i give a href tag to the images, what redirect to the child product.
in davcraiguk answer, he wrote

Quote
Add this below line 31

Code: [Select]
<img src = "<?php echo JURI::base().'components/com_virtuemart/shop_image/product/'.$product['child_thumb_image'?>"/>

so if you want to link to the child products flypage add this code below line 31
Code: [Select]
<a href=<?php echo 'index.php?option=com_virtuemart&amp;page=shop.product_details&amp;
flypage=' 
$product['flypage'] . '&amp;Itemid=' $product['Itemid'] . 'category_id='$product['category_id']. '&amp;product_id='$product['product_id']; ?>
>
<img src="<?php echo JURI::base().'components/com_virtuemart/shop_image/product/'.$product['child_thumb_image'?>" /></a>

now i only need a solution for quantity box placing because now quantity boxes placed near the child products thumb images list instead of that remain near the add to cart button... I hope I was understandable :D

gtelegadis

  • Beginner
  • *
  • Posts: 18
Re: SORTED: Inline thumb images in child product list
« Reply #14 on: September 24, 2010, 07:20:32 am »
If you are under time pressure, you may want to contact this guy Reggie who I've used in the past and does some great custom mods for vm.  He already has a swatch mod he did for another customer that could probably be used with little work.  Worth a try - here is the link to the swatch mod he did:

http://www.lowmips.com/joomla/index.php?option=com_idoblog&task=viewpost&id=33&Itemid=14

VirtueMart Forum

Re: SORTED: Inline thumb images in child product list
« Reply #14 on: September 24, 2010, 07:20:32 am »