Javascript shopping cart layout customization

dev
1

VirtoCommerce has a Javascript shopping cart module that allows adding a basic shopping cart and checkout functionality to the website easily.
The integration sample could be found here.

image
image1175×467 88.9 KB

Customizing the Javascript shopping cart or checkout forms layout/appearance

Using CSS styles

You can override styles on the side of integration site. To set another card icon in the cart widget, override .icon-cart background:

.icon.icon-cart {
    background-image: url('your_image_url');
}

Сhanging HTML markup

In case you need to change the HTML structure, replace the required Angularjs templates in your site code.

  • By adding the script with template directly to your site DOM, e.g. for new cart widget template:
<script type="text/ng-template" id="cart.tpl.html">
    <button class="cart-btn" ng-click="$ctrl.openCart()">
        <span class="icon icon-cart"></span>
        <span class="cart-count" style="display:block" ng-bind="$ctrl.cartItemsCount" ng-cloak></span>
    </button>
</script>
  • Or by including the script that replaces the template in Angularjs template cache.
    Add script reference into the site under ng-app directive after shopping cart scripts:
    <script type="text/javascript" src="http://localhost/admin/scripts/vc-shopping-cart"></script>    
    <script type="text/javascript" src="~/Scripts/extension.js"></script>

Example script content:

var cartModule = angular.module('virtoCommerce.cartModule');

cartModule.run(function($templateCache) {
    $templateCache.put('cart.tpl.html',
        '<button class="cart-btn" ng-click="$ctrl.openCart()">' +
	        '<span class="icon icon-cart"></span>' +
	        '<span class="cart-count" style="display:block" ng-bind="$ctrl.cartItemsCount" ng-cloak></span>'+
        '</button>'
    );
});

If you need further modifications (like controller logic), probably you need to implement your own Javascript shopping cart module based on the existing one.