The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 03-31-2013, 11:17 AM
Bundys Educational Supplies's Avatar
Bundys Educational Supplies is offline
 
Join Date: Oct 2012
Posts: 17
Post

Customizing the minicart - Accessing No. of items in bag & total amount?


Hi, I want to customize my Minicart and I was wondering how you access the number of items in the bag and the total amount?

For example say I wanted this to be my "minicart" (From a html website):

<div id="cart">
<div class="left"></div>
<div class="icon"><img src="images/icon_cart.png" width="33" height="31" alt="Cart" /></div>
<ul class="text">
<li><a href="#">0 items</a> <span class="white">|</span></li>
<li><a href="#">$0.00</a> <span class="white">|</span></li>
<li><a href="#">Checkout</a></li>
</ul>
<div class="right"></div>
</div>

How would i get it to have the correct amout of items and the total amount displayed? Thanks
  #2  
Old 04-01-2013, 02:02 PM
Bundys Educational Supplies's Avatar
Bundys Educational Supplies Bundys Educational Supplies is offline
 
Join Date: Oct 2012
Posts: 17
Default Getting the number of items in the cart/bag?

Hi,

I was wondering if there was a way to get the total number of items in the shopping bag/cart? Say I had this line: <p> 0 Items | $0.00 | Checkout </p> - How would i get the number of items in the cart and the total amount?? Also how do i link to the checkout? (I dont want to use the mini-view version of the cart).

Thanks in advance,

Kim.
  #3  
Old 04-02-2013, 01:12 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by KimIB View Post
Hi,

I was wondering if there was a way to get the total number of items in the shopping bag/cart? Say I had this line: <p> 0 Items | $0.00 | Checkout </p> - How would i get the number of items in the cart and the total amount?? Also how do i link to the checkout? (I dont want to use the mini-view version of the cart).

Thanks in advance,

Kim.
Hello Kim,

Currently, Ecwid allows to display number of items in the cart, subtotal and link to the cart page using Minicart widget in "Mini" view only. Please, refer to this article for details: http://kb.ecwid.com/w/page/31295033/...20a%20minicart

Unfortunately, there is no easy way to get the information about number of items in the cart and subtotal now. However, we are currently working on the modification of Javascript API that will allow you to get all information about cart contents. It will be added to Ecwid in one of upcoming releases. Stay turn!

As for now, you can customize the Minicart appearance using custom CSS theme. Could you give me sketch, which illustrate how this information should look? I will try to help you with this.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
The Following User Says Thank You to Maya For This Useful Post:
  #4  
Old 04-02-2013, 02:15 PM
Bundys Educational Supplies's Avatar
Bundys Educational Supplies Bundys Educational Supplies is offline
 
Join Date: Oct 2012
Posts: 17
Default

Quote:
Originally Posted by Maya View Post
As for now, you can customize the Minicart appearance using custom CSS theme. Could you give me sketch, which illustrate how this information should look? I will try to help you with this.
Hi, thanks for the reply!

Ideally i'd like the cart to look something like this:
  #5  
Old 04-04-2013, 01:06 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by KimIB View Post
Hi, thanks for the reply!

Ideally i'd like the cart to look something like this:
Thank you for provided screenshot.

Please, use following code in your custom CSS theme in order to get minicart with following styles:
Code:
div.ecwid-minicart-mini-rolloverContainer {
 display: block;
}

div.ecwid-minicart-mini-rollover {
  background: #F5C505 url(http://example.com/images/minicart_bg.gif) left top no-repeat;
  border: 0 none;
padding-right: 115px;
height: 20px;
padding-top: 10px;
}
a.ecwid-minicart-mini-link {
  position: absolute;
  right: 20px;
  top: 9px;
  color: #000000;
  font-size: 12px;
  padding-left: 10px;
  text-decoration: none;
 border-left: solid 1px #fff;
}
div.ecwid-minicart-mini-total {
margin-top: -15px;
margin-left: 60px;
border-left: solid 1px #fff;
padding-left: 10px;
}
div.ecwid-minicart-mini-total span.ecwid-minicart-mini-total-label { 
   display: none;
}
.ecwid-minicart-mini-overlay-count, 
.ecwid-minicart-mini-items, div.ecwid-minicart-mini-total {
font-size: 12px;
color: #000;
}
div.ecwid-minicart-mini {
visibility: hidden;
}
change "http://example.com/images/minicart_bg.gif" to the absolute path to the minicart background image. You can also change other elements' styles, if it is needed.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!

Last edited by Maya; 04-08-2013 at 12:51 PM.
The Following User Says Thank You to Maya For This Useful Post:
Cara Gordley (05-31-2015)
  #6  
Old 04-05-2013, 06:27 AM
Bundys Educational Supplies's Avatar
Bundys Educational Supplies Bundys Educational Supplies is offline
 
Join Date: Oct 2012
Posts: 17
Default

Quote:
Originally Posted by Maya View Post
Thank you for provided screenshot.

Please, use following code in your custom CSS theme in order to get minicart with following styles:
//Code removed\\
change "http://example.com/images/minicart_bg.gif" to the absolute path to the minicart background image. You can also change other elements' styles, if it is needed.
Woah, thank you so much! Looks great, works great! Except one minor issue, the string " | Shopping cart" shows in the top right of the screen, see the screen shot to see what i mean.

EDIT: It shows in the correct spot but it also shows in the top-right of the screen

  #7  
Old 04-05-2013, 10:19 AM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by KimIB View Post
Woah, thank you so much! Looks great, works great! Except one minor issue, the string " | Shopping cart" shows in the top right of the screen, see the screen shot to see what i mean.

EDIT: It shows in the correct spot but it also shows in the top-right of the screen

Could you give me the link to the page, where your store is installed? It is hardly difficult to investigate this problem using screenshot =)
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
  #8  
Old 04-05-2013, 12:31 PM
Bundys Educational Supplies's Avatar
Bundys Educational Supplies Bundys Educational Supplies is offline
 
Join Date: Oct 2012
Posts: 17
Default

Quote:
Originally Posted by Maya View Post
Could you give me the link to the page, where your store is installed? It is hardly difficult to investigate this problem using screenshot =)
My site is not live yet, still designing it and working on it. However i tracked the problem back to the css code that you provided. Are you able to reproduct it on another store?
  #9  
Old 04-07-2013, 10:51 AM
Oggy G's Avatar
Oggy G Oggy G is offline
Junior Member
 
Join Date: Oct 2012
Posts: 14
Default

Hello KimIB,

Did you found a solution about the doubled "Shopping cart" string ?
Please help me with the same problem if you can

Kind Regards,

Oggy G
  #10  
Old 04-08-2013, 12:51 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by KimIB View Post
My site is not live yet, still designing it and working on it. However i tracked the problem back to the css code that you provided. Are you able to reproduct it on another store?
In order to fix this problem, please, add following code in the end of your CSS theme:
Code:
div.ecwid-minicart-mini {
visibility: hidden;
}
I'm sorry for any probable inconvenience.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css, customization, html, javascript, minicart

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:58 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.