Page 1 of 1
BUY Now button under each product
Posted: Thu Oct 21, 2010 3:12 am
by dashopinstyle
When products grid is being disaplyed we dont have option to buy that product user has to click n the link can we ADD another button which allows user to buy it before going into another level.
If yes where we can add that line of code and what all we need to modify
thanks in advance
Re: BUY Now button under each product
Posted: Thu Oct 21, 2010 8:35 am
by 5ulo
Try this...
/catalog/view/theme/yourtheme/template/product/category.tpl
paste this code where you want to have buy now button
Code: Select all
<a class="button_buy" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" ><?php echo $button_add_to_cart; ?></a>
Re: BUY Now button under each product
Posted: Sat Oct 23, 2010 12:26 am
by dashopinstyle
This thing works great
add to cart text appears in the right place.
in case I want an image instead of text?
add to cart Image buy now image...
assuming my image name is buynow.jpg in images folder
how do we handle it
Re: BUY Now button under each product
Posted: Sat Oct 23, 2010 1:06 am
by dashopinstyle
i think I will add simple Image tag jst before '</a>'
Re: BUY Now button under each product
Posted: Sat Oct 23, 2010 1:35 am
by dashopinstyle
Code: Select all
<a class="button" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" ><span><?php echo $button_add_to_cart; ?></span></a>
this ads image button
thanks to you
now other problem I am facing is.
some product name are longer and some are smaller
so the price and button are not aligned horizontally
one is up and other is down
is there a way i can align them in one line so that all look aligned or I should add more wors in the name for some products ?
Re: BUY Now button under each product
Posted: Sat Oct 23, 2010 5:05 am
by 5ulo
I think, that you need absolute position in the box. For example i have my own product list style in divs (not in table).
HTML
Code: Select all
<div class="product-block">
<img class="product-image" src="..." />
<h3>Title</h3>
<a class="button">button</a>
</div>
Code: Select all
.product-block {
position: relative;
float: left;
}
.product-block h3 {
position: absolute;
top: XYpx; /*must be min height of the picture*/
}
.product-block a.button {
/*if the element above was absolutly positioned, it is good to absolute position elements after, but it's not necessary*/
position: absolute;
top: XYpx; /*picture height + height of the longest product name*/
}
This is one of the easiest ways. Another way is to cut the long names with PHP.
Re: BUY Now button under each product
Posted: Thu Oct 28, 2010 2:00 am
by dashopinstyle
hi sir sorry
I was not able to do this.
Which files we have to add this code? i added in above file and experimented few things but was not able to get it going
sorry I am new with this, I request you if you can spare some of your precious time and guide me, where I need to add/edit this code it will be very kind of you.
Re: BUY Now button under each product
Posted: Thu Oct 28, 2010 7:06 pm
by 5ulo
What you want to do is not about OpenCart, it's about your CSS skills
Code: Select all
http://www.barelyfitz.com/screencast/html-training/css/positioning/
this is what you need. Look at the tab 4 and 6. That is the right method to have product price and the buy button forever at the bottom of the product block.
Apply this method in category.tpl, special.tpl etc. .. just apply this wherever you want
