geforgy

Не знаю как изменить значение в поле, которое находится внутри шаблона.

<span class="item-count__field">${this.quantity}</span>

Нужно найти этот html элемент в дереве и записать в него нужное вам значение:

var cntfield = ROOT_RIGHT_SIDE.getElementsByClassName('item-count__field')[0];
cntfield.innerText = this.quantity.toString();

Этот код стоит внести в this.increaseQuantity().

Так же еще не могу понять(если посмотреть в метод this.increaseQuantity() у меня там есть console.log), почему по клику на кнопку(+) в консоле у меня отображается количество console.log()'ов равное количеству карточек на странице.

Вы вешаете обработчики событий на один блок - родительский для всех "карточек". Нужно вешать обработчик на определённую карточку. Так, внутри метода events() класса ProductItem стоит изменить следующий код:

// ROOT_RIGHT_SIDE.addEventListener изменить на:
var elems = ROOT_RIGHT_SIDE.querySelectorAll(".item-wrapper[data-name]");
for(i = 0; i < elems.length; i++) {
    var dv = elems[i].attributes["data-name"];
    if(dv && dv.value == this.name) {
        elems[i].addEventListener(/* Установка обработчика */);
        break;
    }
}

Этот код можно уменьшить до

ROOT_RIGHT_SIDE.getElementById(this.name).addEventListener(/* Установка обработчика */);

если устанавливать имя карточки в качестве её id.