Link to live demo

Hi all
How can I add a button next to add to cart that will link to a live demo of the web template for sale.

Thanks James

To make things easyer then creating new field in product admin, use one of the data fields that you curently dont use for you type of website (like sku or product location).
Then to call it use this tutorial by Qphoria http://forum.opencart.com/viewtopic.php?t=11892
To add the button , in the product.tpl , next to the add to cart button , add the new button , probably with the same class, under href="echo the field you using"(considering that in admin in the field you use , you insert the hole link, including http)

I hope I was clear enough.

All the respect!

florinsith wrote:To make things easyer then creating new field in product admin, use one of the data fields that you curently dont use for you type of website (like sku or product location).
Then to call it use this tutorial by Qphoria viewtopic.php?t=11892
To add the button , in the product.tpl , next to the add to cart button , add the new button , probably with the same class, under href="echo the field you using"(considering that in admin in the field you use , you insert the hole link, including http)

I hope I was clear enough.

All the respect!

Thanks for that i done what is said in the tutorial and that added the ( SKU:) to the product page under Model. But how would i add a image button next to the add to cart button? What code do i add the and were do i add it?

Thanks for your help James.

Okay , I dont think you understood me.
Is good now that you brought the sku on product page , but not there you will display it.

Where is the code for the add to cart button , next to it add new one like this
<a class="button" href="echo the sku"> Live demo</a>

And in admin , in the sku field insert the link for demo.

All the respect!

florinsith wrote:Okay , I dont think you understood me.
Is good now that you brought the sku on product page , but not there you will display it.

Where is the code for the add to cart button , next to it add new one like this
<a class="button" href="echo the sku"> Live demo</a>

And in admin , in the sku field insert the link for demo.

All the respect!

Hi i have got the button live button onto the page but cant set the hyperlink. i have put http://www.google.co.uk/ (just for testing) But when i click on the live demo button it will take me to http://www.************.co.uk/echo the sku

Thank you for the help I have just started with php & HTML so still trying to work it all out.

By echo the sku , I meant to put that code that calls the sku. So in href"="just put the code for sku"

All the respect!

florinsith wrote:By echo the sku , I meant to put that code that calls the sku. So in href"="just put the code for sku"

All the respect!

I have been playing around with it for days now and still cant get it to work. is there and way you could take a look at the 2 files? ( product.tpl and product.php )

This is the code i have in for the button <a class="button"sku"> Live demo</a>

Thank you for your help its greatly appreciated

James

Okay , so you followed the tutorial from Qphoria, and added tha simple line in the product.php.

Now , in the product.tpl insert this exact line next to the one for add to cart

florinsith wrote:Okay , so you followed the tutorial from Qphoria, and added tha simple line in the product.php.

Now , in the product.tpl insert this exact line next to the one for add to cart

Code: Select all

 <a class="button" href="<?php echo $product_info['sku']; ?>">Live demo</a>  

Thats done it all working great now thank you.
Just one more thing what code do i add to get the link to open in new window?

<a href="<?php echo $product_info['sku']; ?>live demo</a> ??

You notice the change. All the respect!

florinsith wrote:

Code: Select all

<a class="button" target="_blank" href="<?php echo $product_info['sku']; ?>">Live demo</a> 

You notice the change. All the respect!

Thank you florinsith all working.

Sorry to be a pain but coud i just ask you how would i size the live demo button i havd just added? Its a bit smaller that the add to card button now and i would like to make it the same size.

Thanks again for all your help James.

In the stylesheet.css , find the class button , then copy it and rename to button2 , and style it differently(make the padding values bigger) , the in product.tpl , give to the demo button , the class button2.

All the respect!

florinsith wrote:In the stylesheet.css , find the class button , then copy it and rename to button2 , and style it differently(make the padding values bigger) , the in product.tpl , give to the demo button , the class button2.

All the respect!

Now the button is not showing the smae in all browsers.

Please show the code that you added in the stylesheet for button2 class.

florinsith wrote:Please show the code that you added in the stylesheet for button2 class.

Ok this is the code that is in the css.

}
.button_add_small, a.button_add_small:visited {
margin-top: 3px;
background: url('../image/button_add_small.png') no-repeat left center transparent;
padding:5px;
text-decoration: none;
cursor:pointer;

And this is the code i added.

}
.button2, a.button2:visited {
margin-top: 3px;
background: url('../image/button_add_small.png') no-repeat left center transparent;
padding:5px;
text-decoration: none;
cursor:pointer

And this is the code i added to the fpl file

<a class="button2" target="_blank" href="<?php echo $product_info['sku']; ?>">Live demo</a>

Thank you James.

You copied the wrong button, just replace the code added by you with the one above. Change the padding for left an right to make it wider , and you should also change the button background.

All the respect!

florinsith wrote:

Code: Select all

.button2 {
	padding-left: 8px;
	display: inline-block;
	margin-right: 5px;
	background: url('../image/button_left.png') top left no-repeat;
	text-decoration: none;
	color:#FFF;
}
.button2 span {
	color: #FFF;
	display: block;
	padding: 4px 12px 5px 5px;
	background: url('../image/button_right.png') top right no-repeat;
}

You copied the wrong button, just replace the code added by you with the one above. Change the padding for left an right to make it wider , and you should also change the button background.

All the respect!

I have done what you said but now the full buttion as gone.

Here is a link to the site http://www.templateplus.co.uk/index.php ... duct_id=58
its the button next to the add to cart.
Its showing in Ie but in FF its smaller

Thanks James

You could have lead with the fact that you are using a custom theme. It shows very well for me anyway. I thoungh that you are reffering at the width , not the height. In the tpl , just use the same class that is for the add to cart button. And the live demo text include it in <span>(I forgot about that one).

All the respect!

florinsith wrote:You could have lead with the fact that you are using a custom theme. It shows very well for me anyway. I thoungh that you are reffering at the width , not the height. In the tpl , just use the same class that is for the add to cart button. And the live demo text include it in <span>(I forgot about that one).

All the respect!

Im sorry to be a pain in the a** but you have lost me. what is <span> what code do i add and were do i add it now.

this is the code i know have in the stylesheet.css file for the add to cart button

}
.button_add_small, a.button_add_small:visited {
margin-top: 3px;
background: url('../image/button_add_small.png') no-repeat left center transparent;
padding:5px;
text-decoration: none;
cursor:pointer;

do i just copy and paste that again but change the .button_add_small, a.button_add_small:visited { to .button2_add_small, a.button_add_small:visited {

and what do i now paste into the tpl file. <a class="button2" target="_blank" href="<?php echo $product_info['sku']; ?>">Live demo</a>

im sorry to do your head in but like i said its all now to me.

Post the exact code of your add to cart button here. Leave the css alone.

All the respect!