Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 Technical
 Advanced Tips and Tricks - NO QUESTIONS PLEASE
 Add image overlay on new products
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Phil
ECT Moderator

United Kingdom
7127 Posts

Posted - 01/07/2020 :  04:03:25  
Recently I had a client who wanted any new product they added from the admin to automatically display an image overlay 'NEW' over the product and detail image, for example as per Andy's post - https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=110777

Examples



I explained that it can't really be done automatically without major modifications to the ECT core files so I pointed them to the css method where you can target a product using the product ID and css, which is a great feature, especially when you want to hide elements on certain products.

They said it was far too much work to do this everytime they added a new product which to be fair it is, and they asked me if I could come up with a better solution.

So I came up with this solution using one of the custom fields, where all the client has to do is enter one character in the admin custom field to display his 'New' image overlays as above.

The way it works is using jquery and a snippet of code added in the editable head region of the product.php/asp and the productdetail.php/asp pages

Requirements:
You must be using the css layout and you'll need to have custom1 just before the 'productimage' on both entries in the includes.php/asp
You must have a call to jquery in the <head> section of all your pages -
<script "//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Here's the procedure:

1.add the following to your vsadmin/includes.php/asp (this is for PHP):

$productpagelayout='custom1,productimage, addtocart, productid, sku, productname, manufacturer, discounts, reviewstars, instock, description, options, listprice, price, currency, quantity, dateadded';

$detailpagelayout='navigation, checkoutbutton,custom1,productimage, productid, manufacturer, sku, productname, discounts, instock, description, listprice, price, quantity, currency, dateadded, options, addtocart, previousnext, emailfriend, reviews, socialmedia';

$admincustomlabel1="New product enter * "; // the label for the custom field in the admin

$customquickupdate="pCustom1"; // adds the custom field to the quick entry drop down list

2. Add the following code to your product.php/asp and proddetail.php/asp files and upload your overlay images to the images directory on the server.

add to products.php
<script>
$(document).ready(function() {
$('div.prodcustom1:contains("*")').css('background','url("images/new.png")');
$('div.prodcustom1:contains("*")').css('background-repeat','no-repeat');
});
</script>

add to proddetail.php

<script>
$(document).ready(function() {
$('div.detailcustom1:contains("*")').css('background','url("images/new-large.png")');
$('div.detailcustom1:contains("*")').css('background-repeat','no-repeat');
$('div.csprodcustom1:contains("*")').css('background','url("images/new-large.png")');
$('div.csprodcustom1:contains("*")').css('background-repeat','no-repeat');
});
</script>

(if you have lots of static pages I would add all that code to your dwt file)

3. Add to your css file (you may have to alter this to suit your exact requirements)

div.prodcustom1,div.csprodcustom1{ position:relative;width:95%;height:50px;color:#fff;margin-bottom: -40px;margin-left:20px;}
div.detailcustom1{ float:left;width:99%;height:80px;color:#fff;margin-left:-10px;margin-bottom: -30px;position:relative;z-index:10;}

Please note! The heights of 50px and 80px are set to those values based on the height of the small and large overlay images, and the colour #fff is set to the background colour of the page so the * character is invisible.

That's it! So when you add a new product and you want the 'NEW' image overlay to appear all you have to do is enter the character * in the custom field in the admin. If you want to add the 'NEW' image to multiple existing products you can add the * character using the quick entry feature.

This will not be overwritten by software updates. If you're not too comfortable implementing this feature just click on my name and send me an email.



* Database Migrations and Conversions*
* ASP to PHP Cart Conversions*

*Contact Us*
*Buy The PHP Capture Card Plugin*
*Rate Our Services/View Our Feedback*

Edited by - Phil on 01/07/2020 04:52:47
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000