Swim

empty.html

<div class="basket">
      <div class="basket-container">
        <h1>Order #1867<sup>13 July 2016</sup></h1><!-- Детали заказа, заполняются на сервере -->
        <p>Check the correctness of the order and the number of leotards</p>
        <div id="basket"></div>
        <script>
          # Переменная со списком заказанных моделей
          window.basket = {
            models: [
              {
                id: 1,
                title: 'Leotard №186',
                item_price: 23,
                colors: [
                  {
                    title: "Green",
                    selected: true,
                    image: 'f/i/green.jpg',
                    value: "green"
                  }, {
                    title: "Grey",
                    image: 'f/i/grey.jpg',
                    value: "grey"
                  }, {
                    title: "Blue",
                    image: 'f/i/blue.jpg',
                    value: "blue"
                  }, {
                    title: "Red",
                    value: "red"
                  }
                ],
                sport: [
                  {
                    title: "Rhythmic gymnastics",
                    selected: true,
                    value: "rhythmic"
                  }, {
                    title: "Gymnastics",
                    value: "gymnastics"
                  }
                ],
                items: []
              }, {
                id: 2,
                title: 'New Leotard №33',
                item_price: 12,
                colors: [
                  {
                    title: "Green",
                    selected: true,
                    image: 'f/i/green.jpg',
                    value: "green"
                  }, {
                    title: "Red",
                    value: "red"
                  }
                ],
                sport: [
                  {
                    title: "Rhythmic gymnastics",
                    selected: true,
                    value: "rhythmic"
                  }
                ],
                items: []
              }, {
                id: 3,
                title: 'Last leotard №187',
                item_price: 33,
                colors: [
                  {
                    title: "Green",
                    selected: true,
                    image: '/f/i/green.jpg',
                    value: "green"
                  }, {
                    title: "Grey",
                    image: '/f/i/grey.jpg',
                    value: "grey"
                  }
                ],
                sport: [
                  {
                    title: "Rhythmic gymnastics",
                    selected: true,
                    value: "rhythmic"
                  }, {
                    title: "Gymnastics",
                    value: "gymnastics"
                  }
                ],
                items: []
              }
            ]
          };
        </script>
      </div>
      <div class="basket-aside">
        <!-- блок с чекаутом -->
        <div class="checkout">
          <dl>
            <dt>Card Subtotal</dt>
            <dd id="subtotal">$999</dd>
            <dt>Order Subtotal</dt>
            <dd id="total">$999</dd>
            <!-- хз как считать вот эти, в данный subtotal и total одинаковые. Автоматически заполняются из js -->
          </dl>
          <div class="coupon-code">
            <input type="text" name="coupon" placeholder="Enter coupon code">
            <button>Apply</button>
          </div>
          <div class="proceed">
            <button class="disabled" id="proceed" disabled>Proceeed to checkout</button>
            <!-- 
              кнопка и скрытая форма для продолжения 
              кнопка становится активной если все поля в заказе заполнены
              форма ниже не видна пользователю, action и другие требуемые параметры нужно заполнить на сервере,
              так же в нее передается сериализованный JSON со всем содержимым корзины -->
            <div id="proceed_note"></div>
            <div class="proceed-form">
              <form id="proceed_form" action="proceed-form" method="post">
                <input type="hidden" name="blabla">
                <input id="basket_data" type="hidden" name="basket_data">
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

example-basket.js

window.basket = {
  models: [
    {
      id: 1, # id модели #
      title: 'Leotard', # название модели, должно содержать слово leotard, для множественного числа добавляется s (leotards)
      item_price: 23, # цена одного купальника данной модели
      colors: [ # массив с доступными цветами
        {
          title: "Green", # название цвета
          selected: true, # выбранный цвет
          image: 'f/i/green.jpg', # картинка для цвета, если ее нет то берется картинка из первого по порядку в массиве цвета, у которого она есть 
          value: "green" # значение
        }, {
          title: "Grey",
          image: 'f/i/grey.jpg',
          value: "grey"
        }, {
          title: "Blue",
          image: 'f/i/blue.jpg',
          value: "blue"
        }, {
          title: "Red",
          value: "red"
        }
      ],
      sport: [ # массив с видами спорта
        {
          title: "Rhythmic gymnastics", # название 
          selected: true, # выбранный вид
          value: "rhythmic" # значение
        }, {
          title: "Gymnastics",
          value: "gymnastics"
        }
      ],
      items: [ # массив с купальниками модели. пустой если это первый заход в корзину
        {
          removed: false, # если true - то купальник удален, считать его не нужно 
          mode: 'growth', # режим навырост - growth или точный - exact
          system: 'cm', # единицы измерения cm или inches
          crystals: 1000, # количество обычных кристаллов
          crystals_swarovski: 0, # количество кристаллов swarovski
          age: '33',
          name: 'Asdjkghksd gsdfgsdfg',
          height: '33',
          chest: '44',
          waist: '55',
          hips: '77',
          biceps: '84',
          elbow: '55',
          wrist: '66',
          collar: '744',
          shoulder: '543',
          neck_circle: '44',
          neck_to_groin: '34',
          to_waist: '345',
          to_skirt: '34',
          sleeves: '345',
          skirt: '345',
          body: '345',
          item17: '', # 4 дополнителных поля, могут быть либо все пустые (пользователь не открыл их) или все заполненные (пользователь открыл и они стали валидируемыми и все заполненные)
          item18: '',
          item19: '',
          item20: '',
          request: '345' # текст запроса
        }, ...
      ]
    }, ...
  ]
};

Пара моментов:

1. В переменной могут прилетать дополнительные параметры (я их использую для своих целей, например validated), на них не стоит обращать внимания.
2. При получении переменной нужно считать сумму заказа заново, я ее не передаю, потому что можно ее подделать.
3. Все текстовые поля и ссылки на картинки мерок можно заменить в файле labels.js