LaughingHorse Posted December 15, 2015 Share Posted December 15, 2015 I'm wondering how I can make the cart icon and the amount in the cart size bigger, and maybe a different color. Possibly add the words "Click Here for your cart" under the cart icon. We have had several 3rd parties say it is very hard to find their cart when they want to go back to it. Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 15, 2015 Share Posted December 15, 2015 The shopping cart icon is from the Font-Awesome system, and the browser sees this as a regular character. As such, a span tag can be used to affect it's appearance.In the Foundation skin template box.basket.php:Find: <div class="text-right"><a href="#" id="basket-summary" class="button white small"><i class="fa fa-shopping-cart"></i> {$CART_TOTAL}</a></div> Change to: <div class="text-right"> <a href="#" id="basket-summary" class="button white small"> <span style="color:red;font-size:1.25rem;"> <i class="fa fa-shopping-cart"></i> {$CART_TOTAL} </span> </a> </div>The styling on the <span> can be as elaborate as you want -- including CSS3 Text Effects! Quote Link to comment Share on other sites More sharing options...
LaughingHorse Posted December 15, 2015 Author Share Posted December 15, 2015 Is there a bigger cart icon?And if I want to add some text below the cart, would I just use the <p></p> tags?And put it below the{include file='templates/box.basket.content.php'} line? Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted December 15, 2015 Share Posted December 15, 2015 As I understand it, you can change the size of the cart icon by changing 1.25rem to something larger to suit yourself. But you will eventually reach a size that messes up the whole logo/session/cart look. You would then need to reconsider the number of columns/rows your logo takes up.<span style="color:red;font-size:1.25rem;">" Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 16, 2015 Share Posted December 16, 2015 (edited) "Is there a bigger cart icon?"There is no other cart icon in the Font-Awesome system - bigger or otherwise.On the other hand, you can do this:Find: <i class="fa fa-shopping-cart"></i> Change to: <i class="fa fa-2x fa-shopping-cart"></i> Or, more bigger: <i class="fa fa-3x fa-shopping-cart"></i> <!--- Before this edit, the above was fa=3x, and that was wrong. It is fa-3x --->The fa-2x makes the icon twice as big."And if I want to add some text below the cart, would I just use the <p></p> tags?"Place the new text here:<p>New Text</p> <div class="basket-detail-container hide" id="basket-detail"> Edited December 16, 2015 by bsmither Syntax error in code sample. Quote Link to comment Share on other sites More sharing options...
LaughingHorse Posted December 16, 2015 Author Share Posted December 16, 2015 Thank You!I found that it worked best to put the font size I removed the color red.<span style="color:red;font-size:1.25em;"> Before the<i class="fa fa-shopping-cart"></i>Which made the cart bigger. When I added the "fa=3x" it did not seem to make the cart big enough. I even tried 5x but to no avail. So I made the font-size:2.5em and added a <b></b> tag and also a <br /> after the <i class="fa fa-shopping-cart"></i>. Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 16, 2015 Share Posted December 16, 2015 It's not fa=3x, it is fa-3x. Quote Link to comment Share on other sites More sharing options...
jasehead Posted June 25, 2016 Share Posted June 25, 2016 Is there a way to change the cart icon color if the cart is not empty? So, default color if it IS empty and red (or green) if there is something in the cart? Maybe a cleaner version of this: {if !$CATALOGUE_MODE} <div id="mini-basket"> <div class="show-for-medium-up"> {if isset($CONTENTS) && count($CONTENTS) > 0} <div class="text-right"><a href="#" id="basket-summary" class="button white small"><span style="color:green;font-size:1.10rem;"><i class="fa fa-shopping-cart"></i> {$CART_TOTAL}</span></a></div> {else} <div class="text-right"><a href="#" id="basket-summary" class="button white small"><i class="fa fa-shopping-cart"></i> {$CART_TOTAL}</a></div> {/if} <div class="basket-detail-container hide" id="basket-detail"> <div class="mini-basket-arrow"></div> {include file='templates/box.basket.content.php'} </div> </div> <div class="show-for-small-only"> {if isset($CONTENTS) && count($CONTENTS) > 0} <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><span style="color:green;"><i class="fa fa-shopping-cart fa-2x"></i></span></a></div> {else} <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><i class="fa fa-shopping-cart fa-2x"></i></a></div> {/if} <div class="hide panel radius small-basket-detail-container js_fadeOut" id="small-basket-detail"><i class="fa fa-check"></i> {$LANG.catalogue.added_to_basket}</div> </div> </div> {/if} Quote Link to comment Share on other sites More sharing options...
bsmither Posted June 25, 2016 Share Posted June 25, 2016 The above is good, but maybe a bit better to avoid duplication. For example: From: {if isset($CONTENTS) && count($CONTENTS) > 0} <div class="text-right"><a href="#" id="basket-summary" class="button white small"><span style="color:green;font-size:1.10rem;"><i class="fa fa-shopping-cart"></i> {$CART_TOTAL}</span></a></div> {else} <div class="text-right"><a href="#" id="basket-summary" class="button white small"><i class="fa fa-shopping-cart"></i> {$CART_TOTAL}</a></div> {/if} To: <div class="text-right"><a href="#" id="basket-summary" class="button white small"><span style="{if isset($CONTENTS) && count($CONTENTS) > 0}color:green;font-size:1.10rem;{/if}"><i class="fa fa-shopping-cart"></i> {$CART_TOTAL}</span></a></div> The test, when true, adds the style properties. When false, there are no properties and all that's left is <span style="">, which is perfectly legal. Quote Link to comment Share on other sites More sharing options...
jasehead Posted August 2, 2016 Share Posted August 2, 2016 Tested and working - thank you. Although I've added conditional font awesome styles like this (if basket contains something): <i class="fa fa-shopping-cart{if isset($CONTENTS) && count($CONTENTS) > 0} other font awesome styles go here{/if}"></i> Still much less code than my first attempt. Quote Link to comment Share on other sites More sharing options...
jasehead Posted March 2, 2017 Share Posted March 2, 2017 Because CubeCart dropped font-awesome in favour of SVG - any CSS animation suggestions/libraries that will animate a pulsing shopping cart icon like this in box.basket.php? (For this to work, requires these CSS files and the following links in main.php) <link href="{$STORE_URL}/skins/{$SKIN_FOLDER}/css/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="{$STORE_URL}/skins/{$SKIN_FOLDER}/css/font-awesome/css/font-awesome-animation.min.css" rel="stylesheet"> These are my lines in box.basket.php (CubeCart 6.0.12) that change the colour and pulsate the font-awesome shopping cart icon if the cart contains something: <div class="text-right"><a href="#" id="basket-summary" class="button white small"><span style="{if isset($CONTENTS) && count($CONTENTS) > 0}color:green;font-size:1.10rem;{/if}"><i class="fa fa-shopping-cart{if isset($CONTENTS) && count($CONTENTS) > 0} faa-pulse animated{/if}"></i> {$CART_TOTAL}</span></a></div> and <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><span style="{if isset($CONTENTS) && count($CONTENTS) > 0}color:green;{/if}"><i class="fa fa-shopping-cart fa-2x{if isset($CONTENTS) && count($CONTENTS) > 0} faa-pulse animated{/if}"></i></span></a></div> Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 2, 2017 Share Posted March 2, 2017 As a rough experiment, try this: In box.basket.php, find: {if !$CATALOGUE_MODE} <div id="mini-basket"> <div class="show-for-medium-up"> Add after: <style scoped> {literal} @keyframes pulse { 0% { color:black;height:1.0em;width:1.0em; } 50% { color:red;height:1.2em;width:1.2em; } 100% { color:black;height:1.0em;width:1.0em; } } #basket-summary svg.icon-basket { animation: pulse 3s infinite; } {/literal} </style> Because the height is being modulated, the whole page may jump a few pixels. That can be remedied by making sure there is more vertical space in the div container than the icon uses. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 2, 2017 Share Posted March 2, 2017 @jasehead I'd like to see this pulsing cart icon in your store if you could share your url. Quote Link to comment Share on other sites More sharing options...
jasehead Posted March 9, 2017 Share Posted March 9, 2017 (edited) Link here (current version using font-awesome animations) The icon changes to green and pulses if the shopping cart contains any items. Edited March 9, 2017 by jasehead Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 9, 2017 Share Posted March 9, 2017 I like the color and size change - but I don't see anything I would call "pulse" on FireFox. Quote Link to comment Share on other sites More sharing options...
jasehead Posted March 10, 2017 Share Posted March 10, 2017 (edited) Try a different browser or a smartphone to see if the effect is different. This is just using the font-awesome-animate javascript library, so any limitations are either with that or with my IF $CONTENTS > 0 statement for the animation effect. Edited March 10, 2017 by jasehead Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 10, 2017 Share Posted March 10, 2017 Tried with Edge and it jumps to basket. Scrolling to the top of the page shows the larger green cart icon - but still no jiggle or throb. Quote Link to comment Share on other sites More sharing options...
jasehead Posted March 11, 2017 Share Posted March 11, 2017 Sorry, I still live in a WTF is Edge world. Try a webkit browser like Chrome or Safari. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 11, 2017 Share Posted March 11, 2017 LOL Edge is Windows 10 IE. Chrome shows the green larger icon and shows the basket box momentarily. Quote Link to comment Share on other sites More sharing options...
jasehead Posted March 22, 2017 Share Posted March 22, 2017 The current Font Awesome animation for making the shopping cart icon repeatedly pulse larger and smaller (if basket contains item) works for current Mac and Android versions of Safari, Chrome and Firefox. Untested on Windows Edge. The move to SVG animation will be part of a larger store upgrade, so will be a while before I have anything to show. Quote Link to comment Share on other sites More sharing options...
jasehead Posted April 12, 2018 Share Posted April 12, 2018 Here's my working update for 6.1.14 with SVG icons (to make the shopping cart icon pulse green when there is an item in the basket): In /skins/yourcustomskin/templates/box.basket.php, find: <div id="mini-basket"> Add after: <style scoped> {literal} @keyframes pound { from { transform: scale(1.10); } 50% { transform: scale(0.75); } to { transform: scale(1.10); } } {/literal} </style> Find: <div class="text-right"><a href="#" id="basket-summary" class="button white small"><svg class="icon icon-basket"><use xlink:href="#icon-basket"></use></svg> {$CART_TOTAL}</a></div> Replace with: <div class="text-right"><a href="#" id="basket-summary" class="button white small"><span style="{if isset($CONTENTS) && count($CONTENTS) > 0}color:green;font-size:1.10rem;{/if}"><svg class="icon icon-basket" {if isset($CONTENTS) && count($CONTENTS) > 0} style="animation: pound 2s linear infinite;"{/if}><use xlink:href="#icon-basket"></use></svg> {$CART_TOTAL}</span></a></div> Find: <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><svg class="icon icon-basket icon-x2"><use xlink:href="#icon-basket"></use></svg></a></div> Replace with: <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><span style="{if isset($CONTENTS) && count($CONTENTS) > 0}color:green;{/if}"><svg class="icon icon-basket icon-x2" {if isset($CONTENTS) && count($CONTENTS) > 0} style="animation: pound 2s linear infinite;"{/if}><use xlink:href="#icon-basket"></use></svg></span></a></div> And my old font-awesome code for Cubecart 6.0.12 (prior ro SVG) was: <div class="text-right"><a href="#" id="basket-summary" class="button white small"><span style="{if isset($CONTENTS) && count($CONTENTS) > 0}color:green;font-size:1.10rem;{/if}"><i class="fa fa-shopping-cart{if isset($CONTENTS) && count($CONTENTS) > 0} faa-pulse animated{/if}"></i> {$CART_TOTAL}</span></a></div> and <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><span style="{if isset($CONTENTS) && count($CONTENTS) > 0}color:green;{/if}"><i class="fa fa-shopping-cart fa-2x{if isset($CONTENTS) && count($CONTENTS) > 0} faa-pulse animated{/if}"></i></span></a></div> although this also required the font-awesome-animation.min.css to be installed in /skins/yourcustomskin/css/font-awesome/css/ and added to the <head></head> section in /skins/yourcustomskin/templates/main.php <link href="{$STORE_URL}/skins/{$SKIN_FOLDER}/css/font-awesome/css/font-awesome-animation.min.css" rel="stylesheet"> Although I am finding that in 6.1.14 the SVG layout of icons on mobile is not the same as font-awesome - seems to be more padding than there was. Any tips on reducing padding for the bars/search/basket icons for small/mobile view? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 12, 2018 Share Posted April 12, 2018 In cubecart.default.css, enter this rule: button.tiny, .button.tiny { padding: 0.625rem 0.25rem 0.6875rem 0.25rem; } This changes padding from 1.25rem to 0.25rem and gets the icons on one row and closer to together. Hopefully not too close for fat fingers. Quote Link to comment Share on other sites More sharing options...
jasehead Posted April 12, 2018 Share Posted April 12, 2018 (edited) I even tried 0rem but the bars/search icons still spill over to the next line. Definitely something different about the SVG version. My custom skin has the following edit in main.php to increase the logo and reduce the search box: <div class="row marg-top" id="top_header"> <div class="small-6 large-6 columns"><!-- was 4,3 --> <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$CONFIG.store_name}"></a> </div> <div class="small-6 large-6 columns nav-boxes"><!-- was 8,9 --> I'm using a Samsung S7 (default browser) for mobile testing, and also Chrome developer tools with responsive set to 294 wide, which is enough to make the icons spill over like on the Samsung. Edited April 12, 2018 by jasehead Quote Link to comment Share on other sites More sharing options...
vidmarc Posted April 12, 2018 Share Posted April 12, 2018 It looks pretty good, I like it. And I'm using an old Firefox brower on an old Mac OS. Quote Link to comment Share on other sites More sharing options...
jasehead Posted April 12, 2018 Share Posted April 12, 2018 (edited) Couldn't work out how to further reduce the padding around the icons (there should be a way to reduce the button padding/whitespace all the way down to the icons themselves), but I did find a simple space to remove between the icon-bars and the icon-search: In main.php find: <div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-bars"></use></svg></a> <a class="button white tiny show-small-search" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-search"></use></svg></a></div> And just remove the space in the middle: <div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-bars"></use></svg></a><a class="button white tiny show-small-search" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-search"></use></svg></a></div> In Chrome developer tools, I was able to reduce the viewport from 294px to 288px wide before the icons jumped to the next line - so 6 pixels and enough to solve my layout problem on Samsung. Edited April 12, 2018 by jasehead Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.