Icons in wishlist and compare list button in v4.0.x

Store Builder Questions
1

HI fellows



integrating the bootstrap glyphicons in CS-Cart is a great feature for v4.0.x.



Lets see how we can use this not only in html blocks but also in store buttons like wishlist and compare list buttons.





I first create a file for the buttons hook in product screen like:



design/themes/basic/templates/addons/my_changes/hooks/products/buttons_block.overrride.tpl



I then copy the content form the hook “products:buttons_block” in :



design/themes/basic/templates/common/product_data.tpl and just insert in


{if $separate_buttons}</div><div class="add-to-compare">{/if}
```<br />
<br />
the  [b]icon-th-list[/b] at the end like this<br />
<br />
```php
{if $separate_buttons}</div><div class="add-to-compare icon-th-list">{/if}
```<br />
<br />
<br />
Same thing for thje wish list line<br />
<br />
```php
 <{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish "> 
```<br />
<br />
by adding i[b]con-star-empty[/b] at the end like this  <br />
<br />
```php
<{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish icon-star-empty">
```<br />
<br />
<br />
<br />
Then a little css in your design/themes/basic/templates/addons/my_changes/hooks/index/my_style.css (or whatever you liek to call it)<br />
<br />
```php
<br />
.icon-star-empty:before {<br />
	color: #FFFFFF;<br />
	content: "";<br />
	float: left;<br />
	font-size: 17px;<br />
	padding: 7px 11px 0 8px;<br />
}<br />
.add-buttons-wrap .add-to-wish {<br />
	display: inline;<br />
	margin: 0 0 2px;<br />
}<br />
<br />
<br />
.wish-link.text-button {<br />
<br />
<br />
	background-color: #585858 !important;<br />
	border: 1px solid #000000;<br />
	border-radius: 6px;<br />
	color: #FFFFFF;<br />
	display: block;<br />
	font-size: 9px;<br />
	margin: 5px 0;<br />
	padding: 9px 11px 8px;<br />
	text-decoration: none;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
.add-buttons-wrap .add-to-compare .text-button {<br />
<br />
<br />
	background-color: #2294C8 !important;<br />
	border: 1px solid #166587;<br />
	border-radius: 6px;<br />
	color: #FFFFFF;<br />
	display: block;<br />
	margin: 0;<br />
	padding: 8px 5px 7px;<br />
	text-decoration: none;<br />
	width: 196px;<br />
}
```<br />
<br />
Thats it!<br />
<br />
This is what you get<br />
<br />
[attachment=7399:glyphs.jpg]<br />
<br />
Have fun playing with glyphicons. See the whole list in [url="http://marcoceppi.github.io/bootstrap-glyphicons/"]http://marcoceppi.gi...rap-glyphicons/[/url]<br />
<br />
Fotis<p><a href="127.0.0.1/uploads/monthly_11_2013/post-11524-0-91649500-1384731419.jpg">glyphs.jpg</a></p>
2

It the same method used for the 4.2.4 version i have? Because i canot find the path design/themes/basic/templates/addons/ it goes design/themes/responsive/templates/addons



Thanks in advance

3

Hi prelude



havent test it to 42x yet but I think the css3 method with :before would work much better that this early attempt.



I will try this and let you know



Fotis

4

Ok prelude



here is the new CSS3 way you need to work with.


  1. OPen a new folder in design\themes\responsive\templates\addons\my_changes\hooks\index\meta.post.tpl



    and add this

```php


```

Then add to your custom CSS field in VIsula Theme Editor this csscode for adding an icon to buy button (in this case the cart with + sign)

```php
.ty-product-block__button .ty-btn__primary.ty-btn__big.ty-btn__add-to-cart::before {
content: "\f217";
font-family: FontAwesome;
font-size: 18px;
padding-right: 10px;
}
```

You need to clean the cache before you see this.

The key to this is the css :before. You can find the code for all font awesome icons here by using the UTF-8 code.
[url="http://astronautweb.co/snippet/font-awesome/"]http://astronautweb....t/font-awesome/[/url]

So if you know the css class for the element you want to add the icon, you put the :before and then the rest of the css code you like.

Thats the result


[img]http://i62.tinypic.com/xarm1c.png[/img]


Hope this helps

Fotis
5

Thanks that helped