What is the best way to dynamically update HTML blocks in JS?

Question

JavaScript

Let's take the simplest example of an online store - it has a "widget" - a basket.
1) When switching between pages, you need to generate an actual basket
2) When interacting with the page - you need to update the data in the basket "dynamically"
The task is solved by generating the necessary content on the server and updating the data on JS.
What I don't like - when changing the layout - you need to edit the generation on the server, edit on JS - update. Editing in two places is very bad.
How can you do it? For example, you can use angularJS from the server to give only an array of data and update. Minus - to be honest - for the sake of one basket to put AngularJS - I don’t really like this idea.
What else can be done? For example, put a template engine like twig - there is both a server and client version and feed the same template. Again, the maintainability of the code becomes more complicated, one more technology is superfluous.
What technologies are there that, on the one hand, do not greatly complicate maintainability on actively developing projects, on the other hand, do not greatly complicate the "technologies", and accordingly increase the cost of project support anyway?

Answer 1

Of course, you shouldn’t connect Angular just for one basket widget :)
On Angular, this is done as follows - there is a basket directive (widget) and there is a basket service. Adding items to the cart goes through the service, and the directive listens for service changes and displays updated information.
Here is the Directive:

angular.module('app').directive('shoppingCartWidget', function(shoppingCartService) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'shopping-cart.html',
        link: function(scope, element, attributes) {
            scope.items = [];

            // слушаем изменения в корзине
            scope.$watch(shoppingCartService.getItems, function(items) {
                scope.items = items;
            });
        }
    }
});

Here is the service:

angular.module('app').directive('shoppingCartService', function(_) {
    var items = [];

    function add(itemData) {
        items.push(itemData);
    }

    function remove(itemID) {
        items = _.reject(items, {id: itemID});
    }

    function clear() {
        items = [];
    }

    function getItems() {
        return items;
    }

    return {
        add: add,
        remove: remove,
        clear: clear,
        getItems: getItems
    }
});

Here is the controller:

angular.module('app').controller('myController', function(shoppingCartService) {

    // ну, тут будет не массив, а $resource, например

    $scope.items = [
        {
            id: 1,
            name: 'Клавиатура',
            price: 150
        },
        {
            id: 2,
            name: 'Кофе',
            price: 50
        }
    ];

    $scope.addToCart = addToCart;

    function addToCart(itemData) {
        shoppingCartService.add(itemData);
    }

});

Here is the product list view:

<ul>
    <li ng-repeat="item in items">
        <span>{{item.name}}</span>
        <button ng-click="addToCart(item)">Добавить в корзину</button>
    </li>
</ul>

Answer 2

React should be just right for you

Answer 3

tutorialzine.com/2009/09/shopping-cart-php-jquery

Answer 4

What's wrong with regular jQuery?
Get json via ajax and do the usual .append()/.html()