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 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 06-25-2013, 10:51 PM
TG Data Service's Avatar
TG Data Service TG Data Service is offline
 
Join Date: May 2013
Posts: 6
Default Javascript API to get car items

Quote:
Originally Posted by Maya View Post
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.
Hi Maya!
I was just wondering if you might have a general timeframe for when the Javascript API might be updated to get the info about cart contents? Thanks!
  #8  
Old 06-26-2013, 11:58 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 TG Data Service View Post
Hi Maya!
I was just wondering if you might have a general timeframe for when the Javascript API might be updated to get the info about cart contents? Thanks!
I'm sorry, but I don't have ETA of this feature yet. However, this feature is completed already and on the testing stage now.

It will be added in Ecwid with next release expected in a month.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
  #9  
Old 06-18-2014, 03:56 PM
Cody Atkinson's Avatar
Cody Atkinson Cody Atkinson is offline
 
Join Date: Mar 2014
Posts: 14
Default

Hi Maya,

I have referenced the code that you had in the previous post of this thread. I have got close but I haven't quite got it to where I want and some of it is lining up weird. Do you think you could help me tweak the code to get what I want?

Here is what I have:


This is what I want:


Here is the code:
Code:
div.ecwid-minicart-mini-rolloverContainer {
 display: block;
}

div.ecwid-minicart-mini-rollover {
  background: #131315;
  border: 0 none;
padding-right: 115px;
height: 20px;
padding-top: 10px;
}
a.ecwid-minicart-mini-link {
  position: absolute;
  display: none;
  right: 20px;
  top: 9px;
  color: #C70202;
  font-size: 14px;
  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: 16px;
color: #C70202;
text-transform: uppercase;
}

div.ecwid-minicart-mini {
visibility: hidden;
}
What I am having trouble with
  • I would like the 0 Item / $0.00 text to be underlined
  • I would like the separator to be display just like in the picture 0 Items / $0.00 - Not with the | between the two
  • I would like this to be clickable to the cart if possible, but I do not want the "checkout text"
  • I have set the checkout text to display; none but the minicart is still as wide as before.
  • This is going to be placed in a nav bar so I need the height of the minicart to be about the size of the text so it doesn't look off set with the rest of the nav bar.


    Thanks in advance!!
  #10  
Old 12-20-2014, 05:53 PM
nippnwaffle's Avatar
nippnwaffle nippnwaffle is offline
 
Join Date: Dec 2014
Posts: 5
Default Javascript API of minicart contents

Quote:
Originally Posted by Maya View Post
I'm sorry, but I don't have ETA of this feature yet. However, this feature is completed already and on the testing stage now.

It will be added in Ecwid with next release expected in a month.

Hello Maya:
I am just wondering if there has any API(s) now is released from ECWID that allows us get minicart contents out to other sites? if so, can you advise where we can find it?
 
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 08:13 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.