igumenov

Добро пожаловать в изменение формы заказа в опенкарте. Ну, как? понравился контроллер и вьюяха, где нааяксено по 8 раз хз что хз откуда? Кто еще мог придумать форму заказа в 8 шагов для гостя, кроме тиранозавра Рекса?
Ищите на форуме нашем бесплатный модуль, упрощающий заказ. Там инструкция на русском.

В данном случае виноват не backend и laravel, а ваш пробел в азах js, без обид))
Проведите эксперимент и выполните код:

var obj = {2:"два", 1:"один", 10:"десять", 0:"нуль"};
console.log(obj);

В каком бы порядке не разместили мы внутри объекта записи с числовым ключом, при выводе они будут отсортированы от меньшего к большему (потому что, как выше верно подметили в комментариях, объект не сортируется, а ключи выставляются по порядку).

Хотите сохранить порядок? Приведите ключ к строке, но простая строка с числом не спасёт, JS всё-равно сперва преобразует её к числу и опять отсортирует. Можно добавить любой строковой символ к ключу и записи в итоге сохранят свой порядок.

obj.watch('hidden', handler)
https://developer.mozilla.org/ru/docs/Web/JavaScri...

MutationObserver

Не верстайте так. Использовать float для сеток и центровать отступом слева – это плохая практика.

Чтобы расположить контент по центру, нужно не у логотипа слева отступ делать, а центровать весь header (content и т.д.). Для этого заводите специальный класс (как правило, его называют .container) и добавляете его везде, где нужно отцентровать контент. И вместо float используйте flexbox.

Например, для вашего header-а:

<header class="container">
  <div class="header-logo">
    <img src="http://jakimez.ru/sites/all/themes/vladweb/img/logo.png" alt="logo">
  </div>
  <nav class="header-menu">
    <ul>
      <li class="navigation-menu">Главная</li>
      <li class="navigation-menu">Наши Услуги</li>
      <li class="navigation-menu">Цены</li>
      <li class="navigation-menu">Контакты</li>
    </ul>
  </nav>
  <div class="header-contacts">
    8(4922)33-56-09
    <br>info@jakimez.ru
  </div>
</header>

.container {
  max-width: 1000px;
  margin: 0 auto;
}

header {
  display: flex;
  justify-content: space-between;
}

Могу предложить такое на JS'е

var divideSteps = [
	{
		step: 1500,
		price: 2,
	},
	{
		step: 200,
		price: 3,
	},
	{
		step: 500,
		price: 4,
	}
];
var lastStepIndex = divideSteps.length - 1;
var totalItems = 4000;
var fullPrice = 0;
divideSteps.forEach((x,i) => {
	if (i === lastStepIndex) {
		fullPrice += totalItems * x.price;
	} else if (x.step > totalItems) {
		fullPrice += x.step * x.price;
		totalItems -= x.step;
	} else {
		fullPrice += totalItems * x.price;
		totalItems = 0;
	};
});

p растягивается на ширину .col игнорируя padding

picocms.org