Jump to content

[Resolved] Draw More Attention to Cart Icon in Upper RH Corner


LaughingHorse

Recommended Posts

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!

Link to comment
Share on other sites

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;">"
Link to comment
Share on other sites

"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 by bsmither
Syntax error in code sample.
Link to comment
Share on other sites

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>.

Link to comment
Share on other sites

  • 6 months later...

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}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

  • 6 months later...

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>

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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 by jasehead
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by jasehead
Link to comment
Share on other sites

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 by jasehead
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...