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

Store Builder in detail Hints & Modifications
#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}

{/if}



the icon-th-list at the end like this


{if $separate_buttons}

{/if}





Same thing for thje wish list line


<{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish ">



by adding icon-star-empty at the end like this


<{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish icon-star-empty">







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)



.icon-star-empty:before {
color: #FFFFFF;
content: "";
float: left;
font-size: 17px;
padding: 7px 11px 0 8px;
}
.add-buttons-wrap .add-to-wish {
display: inline;
margin: 0 0 2px;
}


.wish-link.text-button {


background-color: #585858 !important;
border: 1px solid #000000;
border-radius: 6px;
color: #FFFFFF;
display: block;
font-size: 9px;
margin: 5px 0;
padding: 9px 11px 8px;
text-decoration: none;
}






.add-buttons-wrap .add-to-compare .text-button {


background-color: #2294C8 !important;
border: 1px solid #166587;
border-radius: 6px;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 5px 7px;
text-decoration: none;
width: 196px;
}



Thats it!



This is what you get



[attachment=7399:glyphs.jpg]



Have fun playing with glyphicons. See the whole list in http://marcoceppi.gi…rap-glyphicons/



Fotis

glyphs.jpg

#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