Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Cart Icon Rate Topic   - - - - -

 
  • RAVINDRAN
  • Advanced Member
  • Members
  • Join Date: 31-Mar 14
  • 84 posts

Posted 09 February 2015 - 11:17 PM #1

How to change the cart icon on the responsive theme?

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 10 February 2015 - 12:08 AM #2

Hi

go and open in /design/themes/your_skin/templates/addons/my_changes/hooks /checkout/dropdown_title.override.tpl

and copy this code inside

			  {if $smarty.session.cart.amount}
					 <i class="fa fa-shopping-cart fa-lg rng"></i>
					<span class="ty-minicart-title ty-hand">{$smarty.session.cart.amount}&nbsp;{__("items")} {__("for")}&nbsp;{include file="common/price.tpl" value=$smarty.session.cart.display_subtotal}</span>
					<i class="ty-icon-down-micro"></i>
				{else}
					 <i class="fa fa-shopping-cart fa-lg"></i>
					<span class="ty-minicart-title empty-cart ty-hand">{__("cart_is_empty")}</span>
					<i class="ty-icon-down-micro"></i>
				{/if}

and then this file/design/themes/your_skin/templates/addons/my_changes/hooks /index/meta.post.tpl

and add this code

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

IYou will get a small cart . If you like to choose another icon have a look at this page http://fortawesome.g...ome/cheatsheet/ to find the style you want

PS check in Addons screen that the My Changes Addon is enabled, as its disabled by default install.

Fotis
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 15 September 2015 - 10:21 AM #3

Hello Fotis.

There are some way to upload only few icons? instead use whole collection of font "awesome" with those 600 icons?



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 15 September 2015 - 10:28 AM #4

Hello Fotis.

There are some way to upload only few icons? instead use whole collection of font "awesome" with that 600 icons?

 

Hi Rafass

 

you need to use then your own set. You can use icomoon. Browse to the library page and use FontAwesome, you can augment FontAwesome's libary with your custom icons in SVG.

 

Υou can also subset and combine icon fonts using:

  • icnfnt.com (officially supported subsetting of font-awesome icons)
  • fontello.com (create a custom subset from a number of icon fonts that are widely available)

If you want access to the raw svg and .png files, there is a git repo for that: Font-Awesome-SVG-PNG


Fotis


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 15 September 2015 - 02:26 PM #5

Thanks! I've been testing a little with fontello / icommon and others to get the .svg files. 

but the question is, how can I upload and use my own icons in Cscart? in fact I just would like to upload 5 or 6 icons only  8)



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 15 September 2015 - 05:46 PM #6

If you have already been testing the icommon then you know you can create your own set and then you have to invetigate a little bit as there is no official guide on which files you have to upload where.

 

To give a hint you need to look into the design/themes/[your_theme]/media/fonts folder of your active skin. You will find all the icon files and formats you need to have .

 

Fotis


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 15 September 2015 - 05:58 PM #7

Back in 2013 energothemes posted this

 

 

Hello,

We have used http://icomoon.io/app-old/ (the new app has some issues) to add more glyphs to our designs.
Just drag and drop the glyphs.svg file from design/themes/[your_theme]/media/fonts and select what you want to use.

After selecting all the glyphs you want to use click the font button to the bottom of the screen and bind your new glyphs to:
e024 for my account
e044 for cart icon

Download the new fonts and rename them to glyphs.eot/svg/ttf/woff.
Make a backup of the cscart glyphs and then copy the new ones over.

 

Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 15 September 2015 - 07:38 PM #8

*
POPULAR

ok here it is a very comprehesive guide for adding your icons to the ones of CS-Cart. I know its a long one (19 steps!!!) but trust me it works and its no big deal.
 
 
2. Now click on the left at the hamburger icon hit it and from the list click Icon library.
glyph-icons_0016_Layer 1.jpg
 
3. From the sets click add to the IcoMoon - Free
glyph-icons_0015_Layer  2.jpg
 
4. You will get back to the previous screen where  now you have the library in a grid.
glyph-icons_0014_Layer 3.jpg
 
5. Click on the backet in the top toolbar and select and drag to delete as many icons you dont need from this set.
glyph-icons_0012_Layer 6.jpg
 
6. Now go to the small hamburger menu on the right side of the icon grids and click form the list import to Set.
glyph-icons_0011_Layer 7.jpg
 
7. You will have to alredy have downloadedthe original CS-Cart glyphs.svg file in design/themes/[your_theme]/media/fonts and click on it.
glyph-icons_0010_Layer 8.jpg
 
8. Now you have your new set. Old CS-Cart Icons plus your new ones
glyph-icons_0009_Layer 9.jpg
 
9. Now you need to select all of them. Go to the smal hamburger menu of the icosn grid on the right again and hit Select all
glyph-icons_0008_Layer 10.jpg
 
10. At the page bottom you have on the right a big button called Generate font. Hit it.
glyph-icons_0007_Layer 11.jpg
 
11. In the new screen you can click on the bottom right corner again DOWNLOAD
glyph-icons_0006_Layer 13.jpg
 
12. Your new icons are ready, now we need to change CS-Cart. Dont close that page we are going to need it later!
glyph-icons_0005_Layer 14.jpg
 
13. Open and extract from the file icomoon.zip the folder 
 
14. Rename all files like the ones from the folder design/themes/[your_theme]/media/fonts (glyphs.eot/svg/ttf/woff).
 
15. Delete all files in folder design/themes/[your_theme]/media/fonts (after you have copied them to a safe place!) and upload all the new renamed files from the folder fonts.
 
16. Now for the tricky part. You need to add some line in the file /design/themes/[your_theme]/css/tygh/icons.less, so go on and open it with a text editor.
 
17. Add at the end of the file the new icons we just added from the library. The names can be whatever you like, jsut dont use any existing classes.
glyph-icons_0004_Layer 15.jpg
The format is like 
.ty-icon-googlepl:before {content: "\e605";
}
 
The name googlepl is the name I am setting for this icon and the part "\e605" you can get it from the page we have left opened in icomoon in step 12
 
18. So in order to find the code for the new icon you go to the download page in icomoon page and look for the icon you need . the code is under the icon (e605)
glyph-icons_0003_Layer 16.jpg
 
19. Now for the final step for this to work. Go to line 40 of the opened file icons.less. You need to add the new icon class there, preferbly at the very bottom of this statement right before the closing  bracket - don't forget to put a comma at the one before the your new class, it wont work- so .ty-icon-googlepl and hit save.
glyph-icons_0002_Layer 17.jpg
 
That's it. Just clean your store cache (use admin.php?cc&ctpl) and now you can add your new icon by using the same technic as in the social bar for example
glyph-icons_0001_Layer 18.jpg
 
<div class="ty-social-link google+">
    <a href="https://twitter.com"><iclass="ty-icon-googlepl"></i> Google+</a>
</div>
 
glyph-icons_0000_Layer 19.jpg
 
This should work on all 4x versions. The guide was made on latest version 434
 
Important: when you import the new icons in the cs-cart Set in step 7, there is the possibility to change the existing code of CS-Cart, if a Free Icomoon has the same code. So you might get a Pinterest Icon instead of Twitter (see the final image of the store I left that in purpose) because the have the same code and Icomoon wins on that.
 
I would open the CS-Cart svg file and check if the icons I have choosen have the same code with some existing icons. You can then change those codes in the last step before download (step 11).
 
Offcourse this is also the way to change the existing icons of CS-Cart, by replacing the code of a new icon with the code of an existing CS-Cart icon.
 
I hope this will get handy for those who want to make a small difference.
 
Fotis

Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 16 September 2015 - 10:18 AM #9

b4OvasU.gif

 

Thanks Fotis! 8)    



 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 16 September 2015 - 12:26 PM #10

I've created my first icons 

Fantastic tuto!  8)

R4WZ5Ly.png



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 16 September 2015 - 12:56 PM #11

I've created my first icons 

Fantastic tuto!  8)

R4WZ5Ly.png

I am Happy this could help you!

 

;)


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 24 September 2015 - 06:29 PM #12

Following this great tutorial I've successfully uploaded new icons, but I'm still facing problems to change the icon of the cart...

To change it is necessary change the classes with my changes in

/design/themes/your_skin/templates/addons/my_changes/hooks /checkout/dropdown_title.override.tpl as you explain above fotis?



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 24 September 2015 - 06:50 PM #13

Following this great tutorial I've successfully uploaded new icons, but I'm still facing problems to change the icon of the cart...

To change it is necessary change the classes with my changes in

/design/themes/your_skin/templates/addons/my_changes/hooks /checkout/dropdown_title.override.tpl as you explain above fotis?

Hi again

 

they key to this is that part

 

Important: when you import the new icons in the cs-cart Set in step 7, there is the possibility to change the existing code of CS-Cart, if a Free Icomoon has the same code. So you might get a Pinterest Icon instead of Twitter (see the final image of the store I left that in purpose) because the have the same code and Icomoon wins on that.
 
I would open the CS-Cart svg file and check if the icons I have choosen have the same code with some existing icons. You can then change those codes in the last step before download (step 11).
 
Offcourse this is also the way to change the existing icons of CS-Cart, by replacing the code of a new icon with the code of an existing CS-Cart icon.

 

 

So you just have to find the class name\code for the existing cart icon, delete it from the icomoo list and rename the new icon you created with the same code as the exisitng icon. After thatfollow the steps from 11 to the end and you will get your new Cart icon.

 

Thats it

 

Fotis


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Rafass
  • Senior Member
  • Members
  • Join Date: 16-Jan 14
  • 304 posts

Posted 25 September 2015 - 07:49 AM #14

Thanks for your kind explanations Fotis. I'll try to do that.

--

Is funny how difficult and problematic is change a simple icon.

Now I'll have to waste a lot of time trying to delete that icon, the logo of @CSCART well done.

Well nightmare. 

Don't know why they put that icon there... really.



 
  • parodius420
  • Senior Member
  • Members
  • Join Date: 03-Dec 11
  • 603 posts

Posted 03 May 2016 - 08:01 AM #15

I got to step 3.  Step 4 does not exist as far as I can tell?  Also, can you upload your own custom ones on there?



 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 915 posts

Posted 27 August 2017 - 10:53 AM #16

Bumping this topic...  Fotis are IcoMoon fonts already a part of CS Cart since V4.4 ??


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 27 August 2017 - 11:16 AM #17

Hi
No Its a Customized version integrated but you can still use this method to integrated your icons.

Fotis
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 915 posts

Posted 27 August 2017 - 08:23 PM #18

Fotis,

 

Is there a risk that by following your procedure that you may loose the icon already in place in the theme that we use ?

 

PS

 

a real shame / sham that there is no CS Cart icon while there is one for Magento and Prestashop.

I am also missing icons for the new and highly improved social media platforms like Gab.ai, Minds.com and Bitchute.com

 

The legacy social media kartel of Google, Facebook, Twitter and Microsoft need some competition also in terms of icons.


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1414 posts

Posted 27 August 2017 - 09:01 PM #19

Well you can always add the full set via meta method. So this way you will have CS-Cart and the whole set.
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • smobilesoft
  • Newbie
  • Trial users
  • Join Date: 21-Nov 17
  • 1 posts

Posted 21 November 2017 - 10:42 AM #20

Geia sou Foti

 

There is no /design/themes/[your_theme]/css/tygh/icons.less file any more.

 

 

 

Well you can always add the full set via meta method. So this way you will have CS-Cart and the whole set.