Требуется помощь знатоков

Question

Требуется помощь знатоков

День добрый всем!

Помогите, пожалуйста, в решении проблемы.
Задача: мне необходимо по событию добавления товара в корзину обновлять один блок на странице. Это <div id="cart-content"> - часть блока корзины <div id="cart">. За основу взята тема Дефолт, где страница разбита, условно, на три части: хедер, центр, футер. Указанный элемент находится находится в верхней части страницы.
В файле default.shop.js в секцию ADD TO CART после обработчика полета товара в корзину добавляю:

$('#cart-content').load(location.href + " #cart-content");

И в итоге <div id="cart-content"> обновляется, но становится пустым. После экспериментов и поиска проблемы я обнаружил, что скрипт "видит" только центр страницы (на страницах категории - это только сам список товаров), а хедер и футер - не видит. Т.е. для него DOM из location.href - это, условно, только main.html, а не вся страница. Но контент для обновления дива ему надо брать из хедера (именно там находится необходимый див).

На странице карточки товара такой проблемы нет. Она есть только на страницах списков товаров / категорий.

Подскажите, пожалуйста, что делать и как быть с этим?

3 ответа

+1

Плебей 23 июля 2019 09:03 #

Спасибо огромное, Александр! Это то, что нужно. Правда, при добавлении в корзину товара из категории появляются ошибки в консоли:
Uncaught TypeError: Cannot read property 'loadIfVisibleAndMaybeBeacon' of undefined at HTMLImageElement.onload

Добавить ответ

**Плебей** · Answer 1

Если визуализировать это все в логах:

$( "#cart-content" ).load( location.href + " #cart-content", function( response ) {
         console.log( response );
});

то мы увидим, что зачитывается только содержимое main.html, т.е. <div class="content">...</div>. Где теряется остальная часть документа и как заставить jquery увидеть все?

**Александр** · Answer 2

Так построена работа приложения Магазин, при запросе страницы категории с заголовком 'X-Requested-With': 'XMLHttpRequest' отдавать не полную страницу. Вам нужно лишь делать запрос с передачей этого заголовка изменив его значение, например так:

function onCartAdd() {
	$.ajax({
		url: location.href,
		type: 'GET',
		dataType: 'html',
		headers: {
			'X-Requested-With': '--XMLHttpRequest'
		}
	}).then(
		function(response) {
			var tmp = $('<div>').html(response);
			$('СЕЛЕКТОР').html($('СЕЛЕКТОР', tmp));
			tmp = null;
		},
		function(jxhr) {
			console.error(jxhr.responseText);
		}
	);
}

где 'СЕЛЕКТОР' - селектор блока содержимое которого нужно заменить