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 08-07-2019, 12:13 AM
Rowan Henseleit1's Avatar
Rowan Henseleit1 is offline
Junior Member
 
Join Date: Aug 2019
Posts: 5
Default

Shopping Cart Widget


Hi,

I am looking to have a custom shopping cart widget using an image I have made. I would prefer to do this using the simple method you have already provided with the

HTML Code:
data-custom-icon-url="img/Icons/CartIcon.png"
css code however my site has custom JS meaning this needs to be able to be dragged and not have a 'ghost image' which is normally fixed by putting

draggable="false" in the <img> holder.

My JavaScript can be found here

HTML Code:
<script type="text/javascript">
		dragElement(document.getElementById(("Icon")));

	function dragElement(elmnt) {
	  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
	  if (document.getElementById(elmnt.id + "drag")) {
	    /* if present, the header is where you move the DIV from:*/
	    document.getElementById(elmnt.id + "drag").onmousedown = dragMouseDown;
	  } else {
	    /* otherwise, move the DIV from anywhere inside the DIV:*/
	    elmnt.onmousedown = dragMouseDown;
	  }

	  function dragMouseDown(e) {
	    e = e || window.event;
	    // get the mouse cursor position at startup:
	    pos3 = e.clientX;
	    pos4 = e.clientY;
	    document.onmouseup = closeDragElement;
	    // call a function whenever the cursor moves:
	    document.onmousemove = elementDrag;
	  }

	  function elementDrag(e) {
	    e = e || window.event;
	    // calculate the new cursor position:
	    pos1 = pos3 - e.clientX;
	    pos2 = pos4 - e.clientY;
	    pos3 = e.clientX;
	    pos4 = e.clientY;
	    // set the element's new position:
	    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
	    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	  }

	  function closeDragElement() {
	    /* stop moving when mouse button is released:*/
	    document.onmouseup = null;
	    document.onmousemove = null;
	  }
	}
</script>
I have tried using developer tools to get appropriate class names and also searched for people trying to do similar things but none of the fixes work for me.

I would also like to know how to remove the item number counter which comes up on the widget when an item is added to the bag.



Thanks,
Rowan
  #2  
Old 08-07-2019, 11:10 AM
Kenga Ecwid's Avatar
Kenga Ecwid Kenga Ecwid is offline
Ecwid Team
 
Join Date: Jun 2016
Posts: 109
Default

Hi Rowan!

I'm Kenga from Ecwid Team. Thanks for your message.

You need to replace this line of your code:

Code:
dragElement(document.getElementById(("Icon")));
with this one:

Code:
dragElement(document.querySelector('.ec-minicart')
In order to hide the counter, add this CSS code in your custom CSS theme in Ecwid Control panel > Design:

Code:
.ec-minicart.ec-minicart--pill.ec-minicart--s .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--m .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--l .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--xl .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--xxl .ec-minicart__counter {
    display: none;
}
Check this guide on how to add the CSS codes in your Ecwid store:

Try this out and let us know the results. It will be cool if you share the link to the published page where we can see how the scripts and CSS codes are executed.

Have a nice day!
__________________
Kenga

Ecwid team
  #3  
Old 08-07-2019, 07:14 PM
Rowan Henseleit1's Avatar
Rowan Henseleit1 Rowan Henseleit1 is offline
Junior Member
 
Join Date: Aug 2019
Posts: 5
Default

Thanks for the response!

The counter on the cart widget has not gone though with that fix
  #4  
Old 08-08-2019, 08:01 AM
Emma C.'s Avatar
Emma C. Emma C. is offline
Ecwid Team
 
Join Date: Apr 2018
Posts: 45
Default

Quote:
Originally Posted by Rowan Henseleit1 View Post
Thanks for the response!

The counter on the cart widget has not gone though with that fix
Hi Rowan!

Thanks for your response.

I have checked your Ecwid account and I see that you use the Instant site right now which is available via https://store17796921.ecwid.com

From what I see, the code Kenga gave hides the counter from minicart there, please refer to my screenshot: https://ecwid.d.pr/DhKi6l

It might be that once you checked the minicart, the previous look of your Instant site was in the cache of your browser. So clearing your cache and cookies can help to see the changes.

If you have added your store to your own website, please share the link with us, we will check the minicart counter there.

Thanks!
__________________
Emma
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
  #5  
Old 08-10-2019, 09:51 AM
Rowan Henseleit1's Avatar
Rowan Henseleit1 Rowan Henseleit1 is offline
Junior Member
 
Join Date: Aug 2019
Posts: 5
Default

I do use the instant store however I am not using a shopping cart widget inside that store. I am using the separate - go to cart - button (shown in attachment) as a shortcut for the theme of this site

Appreciate the help!

Thank you,
Rowan
Attached Thumbnails
Click image for larger version

Name:	Untitled-4.jpg
Views:	93
Size:	867.1 KB
ID:	3914  
  #6  
Old 08-12-2019, 10:39 AM
Edward M.'s Avatar
Edward M. Edward M. is offline
Ecwid Team
 
Join Date: Dec 2016
Posts: 261
Default

Hi!

I'm Edward from the Ecwid Team.

Thank you for your reply.

I've checked your screenshot, and I see that you have a custom HTML page where you added the code for the cart widget. So this page you test it on is not related to the Ecwid Instant site, thus the code sent for the Instant site doesn't work.

Therefore, please replace the current code you use for hiding the counter with the following one:

Quote:
.ec-minicart .ec-minicart__counter {
display: none;
}
It will do the trick.

If it still doesn't work as you intend it, we need to inspect the live page. So please publish your site and send us a link to it so we can take a look.
__________________
Ecwid Customer Care Team
More tips and hints on Ecwid use in Ecwid 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
cart, css, javascript, widget

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 12:53 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.