New customizable Shopping Bag icon widget

Last updated

The widget allows to change the look and feel of the Shopping Bag icon, define its position on the page, apply the redirect to a custom page or animated effects by means of special parameters that are added to the integration code. Now it’s possible to combine multiple parameters within one integration code to create the Shopping Bag icon that best matches a website design.

For example, by default the Shopping Bag supports three icons now:

 icons

Moreover, it’s even possible to apply a custom icon now.

Technical details

The new widget is embedded on a page via the integration code. In general, the integration code looks like this:


<div data-layout="SMALL_ICON" class="ec-cart-widget"></div>

<script data-cfasync="false" type="text/javascript" src="https://app.shopsettings.com/script.js?2942472&data_platform=code&data_date=2018-03-09" charset="utf-8"></script>

<script>
    Ecwid.init();
</script>

The Shopping Bag icon widget will be added to an element with the class ec-cart-widget. If there are a few such elements, the widget will be added into all of them.

The widget appearance can be set in two ways:

  • DATA-attributes. They are passed to the integration code and determine how the widget should look at the time of loading
  • JS-options

DATA-attributes

These are attributes that are passed to the ec-cart-widget container with the data prefix. They determine the appearance of the widget, its location, and so on. For example, if you pass <div data-layout = "SMALL_ICON" data-icon = "CART" class = "ec-cart-widget"> </ div>

JS-options

If the new widget is added to a page, its appearance can be influenced by JS-options.