Development suggestion: tag img above product (Low Cost, Promo, New, Stock off)

Started by lipes, February 26, 2012, 20:39:47 PM

Previous topic - Next topic

lipes

1 - it's possible to add an image tag over the product image with a special tag mode...
for example ...
if the product is new.... we could got a "new image" tag over that roduct image...
if the product is in "off stock" or "outlet" .... we have another image for this options.
If the product is on "special offer" or "promotion" ... another image with that tag....
and so on .....

Or in another way we could have this options like the availability images for each product .. in the product description lines .. ?! would only duplicate the code in administration zone... to do something like this, right?!


2) In the image above you could see that I've made an circles around the price cents, it is possible to have a solution that changes the price cents, from 10.00€ to 10.00€ or 10.00

Adding just the <sup> </ sup> or the <sub> </ sub> tag, or minimizing the CENTS with the CSS font-size....
Is there any possibility to add this in any particular file?

Examples of sites that have this feature in the prices
http://www.electrodepot.fr/
http://www.cobrason.com/


(old post here)
http://forum.virtuemart.net/index.php?topic=96322.msg316637#msg316637
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

flo31

Hey,

for the second feature, you can do this little hack :

in administrator/components/com_virtuemart/helpers/currencydisplay.php

at line around 309 you have :

$product_price[$name] = $this->priceDisplay($product_price[$name],0,false,$this->_priceConfig[$name][1]);


Just paste this code after the line


$temp = explode(",", $product_price[$name]);
$tmp = explode(" ", $temp[1]);
$afterComa = "<sup>".$tmp[1].$tmp[0]."</sup>";
$product_price[$name] = $temp[0].$afterComa;


and you will have the price like http://www.electrodepot.fr/

If you want the price like http://www.cobrason.com/

Paste this instead

$temp = explode(",", $product_price[$name]);
$tmp = explode(" ", $temp[1]);
$afterComa = '<span style="font-size:10px">'.$tmp[0]."</span><sup>".$tmp[1]."</sup>";
$product_price[$name] = $temp[0].",".$afterComa;


I hope this helps ;)

PRO



I use this in the category page to display "Free Shipping on this Item" When the weight is set to 0
<?php if ($product->product_weight == 0) { ?>
                  <div class="redtext font10">Free Shipping on This Item </div>
               <?php    }?>

Here are some for the product page, but you can modify them by changing $this->   to $product->
http://forum.virtuemart.net/index.php?topic=92756.msg305223#msg305223



<?php  if ($product->product_special == 1){
$image_class='special';}?>



//wrap the image in a div and assign a class to it, and then add the overlay with css
<div class="<?php echo $image_class ?>">
<?php /** @todo make image popup */
                     echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
                  ?></div>


css
.special{background:URL to image;z-index:1000;THEN ADJUST THE POSITION}
.special browseProductImage{z-index:999}

lipes

flo31: Many Thanks! :D
BanquetTables.pro , thanks.. i will try to see what i could do with your code.

Another question related is.... It's possible to create a specific image, and something that detects the "cheapest" or "Low Cost" product price in each categorie ??

for example (in your site) for "Outdoor Furniture" (or in any another categorie) .. with this option activated will detect the lowest price and will add an "low cost" image over that product specific product...
If we add any new product that have lowest price .. this "compare" the price in that product categorie and automatic changes the "low cost img" to this new product ...

VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

PRO

Quote from: prolipes on February 27, 2012, 21:14:39 PM
BanquetTables.pro , thanks.. i will try to see what i could do with your code.

Another question related is.... It's possible to create a specific image that detects the "cheapest" or "Low Cost" product price in each categorie ??

for example (in your site) for "Outdoor Furniture" (or in any another categorie) .. with this option activated will detect the lowest price and will add an "low cost" image over that product specific product...
If we add anya new product that have lowest price .. this "compare" the price in that product categorie and automatic changes the "low cost img" to this new product ...

an image cannot detect anything. A php function would have to be written to do it, and then manipulate the html output.

Possible yes, but I wont do it.


lipes

ehehe of course that an image doesnt detect anything .. i'm not well explained, sorry :)
it's a php function.. so its an ideia/suggestion to VM like in the title of this topic :P
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

Cleanshooter

Quote from: prolipes on February 26, 2012, 20:39:47 PM
1 - it's possible to add an image tag over the product image with a special tag mode...
for example ...
if the product is new.... we could got a "new image" tag over that roduct image...
if the product is in "off stock" or "outlet" .... we have another image for this options.
If the product is on "special offer" or "promotion" ... another image with that tag....
and so on .....
(old post here)
http://forum.virtuemart.net/index.php?topic=96322.msg316637#msg316637

The only way I have accomplished this is by going into the thumbnail image directory (stories/virtuemart/product/resized) and modifying the thumbnails directly.  I've added little "New" tags to all my new products by downloading the auto-generated thumbnails then using a Photoshop action to apply it to each image.

I do like the idea of adding a tag/class/id to a div or something in the top corner of all thumbs that you could assign special markers though. Maybe in the future we'll be able to add it with out directly changing the image.
- Cleanshooter

PRO

Create an individual image class for EACH product

<div class="category_image img<?php echo $product->virtuemart_product_id ?>"
<?php /** @todo make image popup */
                     echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
                  ?></div>

This will create a class like this   imgPRODUCT_ID
So if a product id is 21. The class would be    img21

Then, you can do all the assigning you want, and NOT by featured etc.

You can do

img21, img35, img66{background:featured.png }

simbus82

Quote from: Cleanshooter on February 28, 2012, 23:28:44 PM
Quote from: prolipes on February 26, 2012, 20:39:47 PM
1 - it's possible to add an image tag over the product image with a special tag mode...
for example ...
if the product is new.... we could got a "new image" tag over that roduct image...
if the product is in "off stock" or "outlet" .... we have another image for this options.
If the product is on "special offer" or "promotion" ... another image with that tag....
and so on .....
(old post here)
http://forum.virtuemart.net/index.php?topic=96322.msg316637#msg316637

The only way I have accomplished this is by going into the thumbnail image directory (stories/virtuemart/product/resized) and modifying the thumbnails directly.  I've added little "New" tags to all my new products by downloading the auto-generated thumbnails then using a Photoshop action to apply it to each image.

I do like the idea of adding a tag/class/id to a div or something in the top corner of all thumbs that you could assign special markers though. Maybe in the future we'll be able to add it with out directly changing the image.

Lot's of ecommerce has this function: for the first time i think we can simply add some checkbox in admin product edit page like "new" "promo" and "reccomemended" that are 3 for example.

Then in the file that steup the view of image we can add some "divs" for tag images, with an "if" that check if the product has some checkboxes enabled. If is enable the checkbox for new, the div is visibile and we see "new" in the thumbs in category view and in product detail.

I know to add graphically some checkboxes in admin and the divs in product detail o thumb :D but i don't know how to "store" the state of checkbox and then how to read them from the views in backend.
Joomla! 2.5.16 & VM 2.0.24b

lipes

Simbus82 to do that its here explained (i think): http://forum.virtuemart.net/index.php?topic=94044.msg308760#msg308760
(i dont know if exist another way.. it will be good if we add in future that Option/funtion in the Product Back End .. )

UPDATE: simbus82: Did you find the solution ?
I think that with custom fields you can do that to. Try to see it here: http://forum.virtuemart.net/index.php?topic=99225.msg327903#msg327903

Can you give me an example ( internet website ) of what you want to do ?

I'll want to do in future something like this: http://www.cobrason.com/sony-kdl-26ex320-b.html

in the products they have this kind of images:
etc.. etc...
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

PRO

Quote from: lipes on April 26, 2012, 16:48:09 PM
Simbus82 to do that its here explained (i think): http://forum.virtuemart.net/index.php?topic=94044.msg308760#msg308760
(i dont know if exist another way.. it will be good if we add in future that Option/funtion in the Product Back End .. )

UPDATE: simbus82: Did you find the solution ?
I think that with custom fields you can do that to. Try to see it here: http://forum.virtuemart.net/index.php?topic=99225.msg327903#msg327903

Can you give me an example ( internet website ) of what you want to do ?

I'll want to do in future something like this: http://www.cobrason.com/sony-kdl-26ex320-b.html

in the products they have this kind of images:
etc.. etc...

for HD etc.
http://forum.virtuemart.net/index.php?topic=99225.msg327877#msg327877

Geppux

Quote from: PRO on February 27, 2012, 20:01:05 PM


I use this in the category page to display "Free Shipping on this Item" When the weight is set to 0
<?php if ($product->product_weight == 0) { ?>
                  <div class="redtext font10">Free Shipping on This Item </div>
               <?php    }?>

Here are some for the product page, but you can modify them by changing $this->   to $product->
http://forum.virtuemart.net/index.php?topic=92756.msg305223#msg305223



<?php  if ($product->product_special == 1){
$image_class='special';}?>



//wrap the image in a div and assign a class to it, and then add the overlay with css
<div class="<?php echo $image_class ?>">
<?php /** @todo make image popup */
                     echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
                  ?></div>


css
.special{background:URL to image;z-index:1000;THEN ADJUST THE POSITION}
.special browseProductImage{z-index:999}

Sorry PRO could you tell me where I have to insert the code? Or now there is any plugin that make this, seen that a loto of time is past from this last post? Thank you.

Giuseppe