Два одинаковых кускка PHP

[Algrizly]

Приветствую. Такое дело. Необходима вторая корзина по причине того, что не могу переместить имеющуюся с помощью CSS @media в нужное место для мобильного вида. Однако при копировании кода, работает только один. Как сделать чтобы работали оба кода, и одну корзину скрыть при экране больше 768, а другую при экране меньше 767? Как работать с @media понятно, а вот как заставить работать оба кода?

Змінено 20 березня 2017 користувачем Algrizly

[shchs]

Копировать плохая идея, лучше попробуйте сделать перенос средствами jQuery

Для этого в common.js нужно вставить этот код:

function resizepr() {
	var myWidth = 0;
	if (typeof(window.innerWidth) == 'number') {
		myWidth = window.innerWidth;
	} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		myWidth = document.documentElement.clientWidth;
	}
	if (myWidth != 0) {
		if (myWidth <= 767) {
			if ($('.old-position-cart').hasClass('has')) {
				$('.new-position-cart').addClass('has').append($('#cart'));
				$('.old-position-cart').removeClass('has');
			}
		} else {
			if ($('.new-position-cart').hasClass('has')) {
				$('.old-position-cart').addClass('has').append($('#cart'));
				$('.new-position-cart').removeClass('has');
			}
		}
	}
}

$(document).ready(function() {
	resizepr();
});

$(window).resize(function(){
	resizepr();
});

И соответственно верстка мест с корзиной должна предполагать такой вид:

<div class="old-position-cart has">Обычное место загрузки корзины</div>
........
<div class="new-position-cart">Место загрузки корзины для разрешений меньше 768</div>

Вот как-то так.