| View previous topic :: View next topic |
| Author |
Message |
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
 Posted: Tue Jul 20, 2010 8:14 am GMT Post subject: Overlay Product Images? |
 |
|
Hello,
I'd love to be able to easily add a special overlay onto product images for items that are for sale so that they stand out --
something to look like this:
using a technique like this:
http://www.tjkdesign.com/articles/png_overlay_with_no_extra_markup.asp
Is there anything I can do to make this possible without having to change out all the small product images every time we put them on/off sale?
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
 |
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 1309
|
| Posted: Tue Jul 20, 2010 11:08 am GMT Post subject: |
|
|
| Quote: |
| I'd love to be able to easily add a special overlay onto product images for items that are for sale so that they stand out |
To lay an "on sale" image over your product image, you could construct your brief product template similar to this:
| Code: |
<div class="product_wrapper">
<div class="product_image_wrapper" style="position: relative;">
<img src="blowout.gif" style="position: absolute; z-index: 20;">
<a href="..."><img src="product_image.gif" style="position: absolute; z-index: 10;"></a>
</div>
[Product name, price, etc go here]
</div> |
In the above example, the product image and blowout image are in a relatively positioned div.
Each image inside that div is absolutely positioned.
CSS rules can be applied to the images to position them as desired (z-index, top, left).
Additionally, SearchFit is able to add these indicators automatically on a per product basis. The indicators are added if the product belongs to a certain product group. See this page for more information:
http://www.searchfit.com/blog/ecommerce/custom_ecommerceproduct_display.htm
The related section is: Use Product Groups to Add Special Indicators |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Tue Jul 20, 2010 12:42 pm GMT Post subject: |
|
|
Thanks, Ed - This looks like exactly what I was looking for! I'll give it a try.
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Wed Jul 21, 2010 7:33 am GMT Post subject: |
|
|
So can i combine the 2 answers you gave me somehow to overlay the product image only on the products that i add to a group? I'm having trouble understanding how to go about this...
Our current brief product template is:
| Code: |
<div class="brief-main-box">
<div class="brief-inner-box">
<div class="brief-box-border">
<div class="brief-image"><a href="AUTO_GENERATED_PRODUCT_URL_DETAILED"><img src="AUTO_GENERATED_PRODUCT_IMAGE_SMALL_URL" border="0" alt="AUTO_GENERATED_PRODUCT_NAME_ONLY"></a></div>
<div class="b-p-name"><a class="product_name" href="AUTO_GENERATED_PRODUCT_URL_DETAILED">AUTO_GENERATED_PRODUCT_NAME</a></div>
<div class="b-p-brieftext">AUTO_GENERATED_PRODUCT_DESCR</div>
<div class="b-p-price-box">AUTO_GENERATED_PRODUCT_PRICE_FINAL</div>
<div class="b-p--buttons"><a href="AUTO_GENERATED_PRODUCT_URL_DETAILED"><img src="images_templ/more-breif.jpg" class="left"></a><a href="" onclick="AUTO_GENERATED_PRODUCT_URL_MOVE2CART"><img src="images_templ/add-to-bag.jpg" hspace="2" class="right"></a></div>
</div>
</div>
</div>
|
I created a gif for the overlay image here - http://www.sjcreationsinc.com/images_templ/SaleOver.gif
Thanks for the help,
Elizabeth
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 1309
|
| Posted: Wed Jul 21, 2010 7:49 am GMT Post subject: |
|
|
Using your code example, here more specific instructions:
1. Add a rule to your Main CSS:
| Code: |
| .brief-image {position: relative;} |
2. The product image and blowout image are in a relatively positioned div:
Put this anywhere inside "<div class="brief-image">"
| Code: |
| <img src="images_templ/SaleOver.gif" style="position: absolute; top: 0; left: 0;"> |
3. Add CSS rules for the link surrounding the product image to give it absolute positioning. In the code below (... and above), I added a style attribute, but it would be better to add a class attribute (and put the related styles on your main CSS).
| Code: |
| <a style="position: absolute; top: 0; left: 0;" href="AUTO_GENERATED_PRODUCT_URL_DETAILED"><img src="AUTO_GENERATED_PRODUCT_IMAGE_SMALL_URL" border="0" alt="AUTO_GENERATED_PRODUCT_NAME_ONLY"></a> |
Please try this and let me know if it works. Once you have it working, I can show you how to add the "SaleOver.gif" images in an automatic fashion. |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Wed Jul 21, 2010 8:02 am GMT Post subject: |
|
|
Hi, I just tried it - it did not work - the image is in the top corner of the page, not in the box...what did i do wrong??
http://www.sjcreationsinc.com/a_la_carte_162_ctg.htm
| Code: |
<div class="brief-main-box">
<div class="brief-inner-box">
<div class="brief-box-border">
<div class="brief-image">
<a style="position: absolute; top: 0; left: 0;" href="AUTO_GENERATED_PRODUCT_URL_DETAILED"><img src="AUTO_GENERATED_PRODUCT_IMAGE_SMALL_URL" border="0" alt="AUTO_GENERATED_PRODUCT_NAME_ONLY"></a>
<img src="images_templ/SaleOver.gif" style="position: absolute; top: 0; left: 0;">
</div>
<div class="b-p-name"><a class="product_name" href="AUTO_GENERATED_PRODUCT_URL_DETAILED">AUTO_GENERATED_PRODUCT_NAME</a></div>
<div class="b-p-brieftext">AUTO_GENERATED_PRODUCT_DESCR</div>
<div class="b-p-price-box">AUTO_GENERATED_PRODUCT_PRICE_FINAL</div>
<div class="b-p--buttons"><a href="AUTO_GENERATED_PRODUCT_URL_DETAILED"><img src="images_templ/more-breif.jpg" class="left"></a><a href="" onclick="AUTO_GENERATED_PRODUCT_URL_MOVE2CART"><img src="images_templ/add-to-bag.jpg" hspace="2" class="right"></a></div>
</div>
</div>
</div>
|
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Wed Jul 21, 2010 8:02 am GMT Post subject: |
|
|
Hi, I just tried it - it did not work - the image is in the top corner of the page, not in the box...what did i do wrong??
http://www.sjcreationsinc.com/a_la_carte_162_ctg.htm
| Code: |
<div class="brief-main-box">
<div class="brief-inner-box">
<div class="brief-box-border">
<div class="brief-image">
<a style="position: absolute; top: 0; left: 0;" href="AUTO_GENERATED_PRODUCT_URL_DETAILED"><img src="AUTO_GENERATED_PRODUCT_IMAGE_SMALL_URL" border="0" alt="AUTO_GENERATED_PRODUCT_NAME_ONLY"></a>
<img src="images_templ/SaleOver.gif" style="position: absolute; top: 0; left: 0;">
</div>
<div class="b-p-name"><a class="product_name" href="AUTO_GENERATED_PRODUCT_URL_DETAILED">AUTO_GENERATED_PRODUCT_NAME</a></div>
<div class="b-p-brieftext">AUTO_GENERATED_PRODUCT_DESCR</div>
<div class="b-p-price-box">AUTO_GENERATED_PRODUCT_PRICE_FINAL</div>
<div class="b-p--buttons"><a href="AUTO_GENERATED_PRODUCT_URL_DETAILED"><img src="images_templ/more-breif.jpg" class="left"></a><a href="" onclick="AUTO_GENERATED_PRODUCT_URL_MOVE2CART"><img src="images_templ/add-to-bag.jpg" hspace="2" class="right"></a></div>
</div>
</div>
</div>
|
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 1309
|
| Posted: Wed Jul 21, 2010 8:05 am GMT Post subject: |
|
|
Please check to see if you have the following CSS rule (you should have this):
| Code: |
| .brief-image {position: relative;} |
The absolutely position "sale" image and (product image) link must reside within the first parent element which is relatively positioned. |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Wed Jul 21, 2010 8:07 am GMT Post subject: |
|
|
Ok sorry must have not updated it or something. Now it's working!
How do I apply to select products only?
thank you!
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 1309
|
| Posted: Wed Jul 21, 2010 8:14 am GMT Post subject: |
|
|
To apply the icon to selected products only:
1. Add all the products that should have the "sale" icon to a Product Group.
Hint: the fastest way to do this is to add products to the Product Group by adding a comma separated list of SKUs (to the Product SKU's text area on the Product Groups Screen). To do this, you must check the "Add Products by SKU" checkbox on the Product Groups screen.
An even faster way is to use an "intelligent product group", but I'm guessing that this may not be possible in your case because you are adding indicators to "Sale" items. You could only use an intelligent product group for Sale Items if all products whose list price is higher than selling price qualifies as a sale item.
2. In your code, replace this:
| Code: |
| <img src="images_templ/SaleOver.gif" style="position: absolute; top: 0; left: 0;"> |
With this:
| Code: |
| DYNAMIC_INCLUDE(PRODUCT_IF_IN_GROUP, productGroupId=XX, inGroupHTML=<img src="images_templ/SaleOver.gif" style="position: absolute; top: 0; left: 0;">, notInGroupHTML=) |
Replace XX with the ID of the product group. |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Wed Jul 21, 2010 8:34 am GMT Post subject: |
|
|
Ok one more question!
I just went back and changed the group to include the main source product, rather than product links (hoping that the banner would show up on both the main product page and the sale page which has product links), but it only works when I add product links to the product group. Any idea why?
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
stanley@searchfit
2
Joined: 23 Jan 2003
Posts: 6423
Location: Austin, TX
|
| Posted: Wed Jul 21, 2010 8:53 am GMT Post subject: |
|
|
Ed, It is a great feature, I like the way that store can dynamically mark product images with different overlays. Great Job!!
Elizabeth, looks like the PRODUCT_IF_IN_GROUP does not handle product links automatically. I will try to see if we can change that in the release coming in a week or so.
Also, I am trying the URL
http://www.sjcreationsinc.com/fragrance_of_the_month_185_ctg.htm
with FireFox and the images look shifted a little bit. Please, ALWAYS test with both IE and FF.
_________________
Stanley Stanev
SearchFit Architect
www.searchfit.com
www.searchfit.us.com
www.stanev.com
www.yordanova.com
Last edited by stanley@searchfit on Wed Jul 21, 2010 9:02 am GMT; edited 1 time in total |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Wed Jul 21, 2010 8:57 am GMT Post subject: |
|
|
That would be great if you could allow it to handle links automatically - what a timesaver!
Thanks for pointing that out about Firefox - I was trying to move the images over a little and nothing was happening in Chrome, but looks like it did work in Firefox. I fixed it!
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
stanley@searchfit
2
Joined: 23 Jan 2003
Posts: 6423
Location: Austin, TX
|
|
| Back to top |
|
|
stanley@searchfit
2
Joined: 23 Jan 2003
Posts: 6423
Location: Austin, TX
|
| Posted: Wed Jul 21, 2010 3:10 pm GMT Post subject: |
|
|
Just to let you know that the following change is coming with the pending release:
- CHANGE: The dynamic keyword DYNAMIC_INCLUDE(PRODUCT_IF_IN_GROUP, productGroupId=X, ...) has been enhanced to include all product links to the products in the group. This allows the store owner to just add the main products in the group and leave the engine to care about the related product links.
_________________
Stanley Stanev
SearchFit Architect
www.searchfit.com
www.searchfit.us.com
www.stanev.com
www.yordanova.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Mon Aug 02, 2010 8:15 am GMT Post subject: |
|
|
Hi there, any idea when will this change take place?
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
stanley@searchfit
2
Joined: 23 Jan 2003
Posts: 6423
Location: Austin, TX
|
| Posted: Mon Aug 02, 2010 8:22 am GMT Post subject: |
|
|
Yes, the enhancement is completed, we finalized our v8.13 release and our sys admins will start upgrading all customers with v8.13 today and tomorrow. We will send an email once the upgrade is completed.
_________________
Stanley Stanev
SearchFit Architect
www.searchfit.com
www.searchfit.us.com
www.stanev.com
www.yordanova.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Mon Aug 02, 2010 8:24 am GMT Post subject: |
|
|
Sounds great, thank you.
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Thu Aug 05, 2010 7:57 am GMT Post subject: |
|
|
Hi there - seems like after the update was finished lots of my products now have the sale banner (i did not put any additional products into the product group that gets the banner)?
Any ideas what happened?
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
stanley@searchfit
2
Joined: 23 Jan 2003
Posts: 6423
Location: Austin, TX
|
| Posted: Thu Aug 05, 2010 11:29 am GMT Post subject: |
|
|
Yes, by default now all SF empty intelligent groups are auto populated with the products from the same specified category structure.
To change that, just edit an intelligent product group and change the "Resolve Empty Result" to No.
_________________
Stanley Stanev
SearchFit Architect
www.searchfit.com
www.searchfit.us.com
www.stanev.com
www.yordanova.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Thu Aug 05, 2010 12:17 pm GMT Post subject: |
|
|
Hi Stanley -
I'm defining my group manually, not using the intelligent groups.
Here's an example of where it is happening: http://www.sjcreationsinc.com/body_butter_154_ctg.htm
Only the "coconut" is in the product group that should be getting the sale banner - I don't know why it's on all except one of them now.
thanks, Elizabeth
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
stanley@searchfit
2
Joined: 23 Jan 2003
Posts: 6423
Location: Austin, TX
|
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Fri Aug 06, 2010 4:15 am GMT Post subject: |
|
|
Much better, thank you!
And yes you are right, I just have not put those other items marked "sale" in the group...Thanks for the catch!
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Wed Nov 03, 2010 12:48 pm GMT Post subject: |
|
|
Hello -
Any idea why a couple of the products in the product group are not showing the overlay image?
http://www.sjcreationsinc.com/fragrance_of_the_month_185_ctg.htm
They all appear to be in the product group, but 2 of the products are not showing the "sale" image. It seems like all the metal caddies do not show the banner?
Thanks!
Elizabeth
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
stanley@searchfit
2
Joined: 23 Jan 2003
Posts: 6423
Location: Austin, TX
|
| Posted: Wed Nov 03, 2010 2:38 pm GMT Post subject: |
|
|
The thing is that adding a product link to a group of products does not make the regular product belong to the same group. The opposite is true though, making the regular product part of the group makes all product links automatically belong to the same group. So in your case, it is enough to remove the product links from the group and add the regular products.
_________________
Stanley Stanev
SearchFit Architect
www.searchfit.com
www.searchfit.us.com
www.stanev.com
www.yordanova.com |
|
| Back to top |
|
|
sjcreations
2
Joined: 27 May 2009
Posts: 141
Location: Encinitas, CA
|
| Posted: Thu Nov 04, 2010 4:13 am GMT Post subject: |
|
|
thank you, fixed it!
_________________
www.sjcreationsinc.com |
|
| Back to top |
|
|
|
