Корзина

Введение

В интернет-магазине корзина находится на странице /cart_items.

Для изменения состава корзины предусмотрено три операции:

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

Все операции, меняющие состав корзины, осуществляются путем отправления POST запроса на URL /cart_items. Можно ограничиться обычными html формами, можно манипулировать корзиной при помощи ajax запросов, для этого надо использовать URL /cart_items.json. Содержание запросов не зависит от того, каким из двух способов вы работаете с корзиной.

Если вы используете html форму, то после выполнения операции покупатель будет перенаправляться на страницу корзины.

Добавление позиции

Параметры запроса:

variant_id - id модификации
quantity - добавляемое в корзину количество
comment - комментарий к позиции заказа (обязательно разрешить комментарии к заказу в бек-офисе)

Если вы используете ajax запрос, то вам вернут объект в JSON формате с атрибутами:

items - описание позиций;
items_count - количество позиций;
total_price - стоимость заказа с учетом скидок и стоимости доставки;
currency - обозначение валюты, указанное в настройках валюты;
currency_format - формат вывода стоимости, указанный в настройках валюты.
и т.д.

js

        
          /* Пример на jQuery */
$.post('/cart_items.json', {
    variant_id: 104490412,
    quantity: 1,
    comment: "test comment"
  })
  .done(function (cart) {
    console.log(cart);
  })

Добавление нескольких позиций

Параметры запроса:

variant_ids[id] - добавляемое в корзину количество экземпляром модификации с идентификатором id

Если вы используете ajax запрос, то вам вернут объект в JSON формате с атрибутами:

items - описание позиций;
items_count - количество позиций;
total_price - стоимость заказа с учетом скидок и стоимости доставки;
currency - обозначение валюты, указанное в настройках валюты;
currency_format - формат вывода стоимости, указанный в настройках валюты.
и т.д.

js

        
          /* Пример на jQuery */
$.post('/cart_items.json', {
  variant_ids: {
    98156648: 1,
    98156640: 2
    }
  })
  .done(function (cart) {
    console.log(cart);
  })

Удаление позиции

URL запроса: /cart_items/id

где id - идентификатор модификации

Параметры запроса:

_method - строка 'delete'

Если вы используете ajax запрос, то вам вернут объект в JSON формате с атрибутами:

items_count - количество позиций;
total_price - стоимость заказа с учетом скидок и стоимости доставки;
currency - обозначение валюты, указанное в настройках валюты;
currency_format - формат вывода стоимости, указанный в настройках валюты.
и т.д.

js

        
          /* Пример на jQuery */
$.post('/cart_items/98156178.json', {
    _method: "delete"
  })
  .done(function (cart) {
    console.log(cart);
  })

Обновление состава корзины

Позволяет одновременно добавлять и удалять позиции, так же позволяет менять количество заказываемых товаров.

Параметры запроса:

_method - строка 'put'
cart[quantity][id модификации] - количество (если вы хотите удалить позицию, то 0)
cart[order_line_comments][id модификации] - текст комментария к позиции заказа

Если в количестве указан 0, то модификация удаляется из корзины.

Если вы используете ajax запрос, то вам вернут объект в JSON формате с атрибутами:

total_price - стоимость заказа с учетом скидок и стоимости доставки;
currency - обозначение валюты, указанное в настройках валюты;
currency_format - формат вывода стоимости, указанный в настройках валюты.
и т.д.

Liquid js

        
          <form action="/cart_items" id="cartform" method="post">
  <input type="hidden" value="put" name="_method">
  <table>
  {% for item in cart.items %}
    <tr>
      <td><a href="{{ item.product.url }}">{{ item.title | escape }}</a></td>
      <td><input type="text" value="{{ item.quantity }}" name="cart[quantity][{{ item.id }}]"/><td>
      <td><input type="text" value="{{ item.comment }}" name="cart[order_line_comments][{{ item.id }}]"/><td>
   </tr>
  {% endfor %}
  </table>
</form>

        
          /* Пример на jQuery */
$.post('/cart_items.json', {
    _method: 'PUT',
    cart: {
      quantity: {
      109715042: 1
    }
  } 
})
.done(function (cart) {
  console.log(cart);
})

// или
$.post('/cart_items.json', $('#cartform').serialize())
  .done(function (cart) {
    console.log(cart);
  })
// Сериализованные данные _method=PUT&cart%5Bquantity%5D%5B104490412%5D=1

Продукт

Получение информации о товарах

/products_by_id/{id через запятую}.json

Позволяет получить данные о товарах по заданным ID. Можно использовать для вывода последних просмотренных товаров (предварительно записав их ID в cookie), можно - для вывода "отложенных" товаров и т.д.

js

        
          /* Пример на jQuery */
$.getJSON('/products_by_id/62898073,62898075.json')
  .done(function (product) {
    console.log(product);
  })

Получение информации о товарe

{product.url}.json

Позволяет получить данные о товарe по заданному url.

js

        
          /* Пример на jQuery */
$.get('/product/test.json')
  .done(function (product) {
    console.log(product);
  })

Коллекция

Получить данные о товарах коллекции

/collection/{пермалинк категории}.json

Позволяет динамически получить данные о товарах по заданным фильтрам, с постраничной навигацией.

Полезно если нужно получить данные о большом количестве товаров, если одновременная их загрузка делает страницу слишком "тяжелой". Например, для динамической подгрузки новых товаров при прокрутке страницы.

js

        
          /* Пример на jQuery */
$.post('/collection/all.json', {
    characteristics: [12911178, 12911180]
  })
  .done(function (products) {
    console.log(products);
  })

Пользователи

Получить информацию о зарегистрированном пользователе

/client_account/contacts.json

При получении GET-запроса выдает данные о зарегистрированном покупателе:

id		идентификатор
fields_values		доп. поля покупателя
name		Имя
surname		Фамилия
middlename		Отчество
email		контактный e-mail
phone		телефон
registered		зарегистрирован (всегда вернет истину, GET-запрос к этому json если покупатель не зарегистрирован вернет ошибку)
subscribe		подписан/не подписан на новости
created_at		когда зарегистрирован
updated_at		когда последний раз изменен
bonus_points		кол-во бонусных баллов (на тарифах от Бизнес)
client_group_id		ID группы покупателя
ip_addr		IP-адрес
default_address		адрес доставки
orders_count		кол-во оформленных заказов

js

        
          $.getJSON('/client_account/contacts.json', function(contacts) {
    console.log(contacts);
});

Отправить сообщение через форму обратной связи

/client_account/feedback.json

JSON, принимающий POST для отправки сообщения через форму обратной связи. Принимает поля:

feedback[from] - адрес отправителя
feeback[name] - имя покупателя
feedback[phone] - телефон покупателя
feedback[subject] - тема сообщения
feedback[content] - тело сообщения (обязательное)

Пример сообщения.

js

        
          $.post('/client_account/feedback.json', {
  feedback: {
    from: 'from@mail.ru',
    name: 'Антон',
    phone: '+7 (111) 111 11 11',
    subject: 'Обратная связь',
    content: 'Хочу заказать у вас индивидуальный дизайн сайта!'
  }
}).done(function (done) {
  console.log(done);
});

Сравнение товаров

Получить список сравниваемых товаров

/compares.json

В ответ приходит массив товаров добавленых в сравнение.
Если товаров в сравнении нет, массив будет пуст.

js

        
          $.getJSON('/compares.json')
    .done(function (compares) {
      console.log(compares.products);
    })
    .fail(function (response) {
      console.log('Что то пошло не так!');
    });

Добавить товар в сравнение

/compares.json

Параметры:

product[id] - product.id сравниваемого товара.

js

        
          $.post('/compares.json', {
    'product[id]': 63356901
  })
  .done(function () {
    console.log('Добавлено в сравнение');
  })
  .fail(function (response) {
    console.log('Что то пошло не так!');
  });

Удаление товара из сравнения

/compares/{product.id}.json

Параметры:

_method: 'delete' - метод delete.

js

        
          $.post('/compares/63356901.json', {
    _method: 'delete'
  })
  .done(function () {
    console.log('Удалено из сравнения');
  })
  .fail(function (response) {
    console.log('Что то пошло не так!');
  });

Создание заказа

Создание заказа средствами шаблона с любой страницы магазина (купить в 1 клик)

Создание заказа в данном случае можно осуществить, отправив POST-запрос с определенными полями на /fast_checkout.json.

В ответ этот JSON выдает номер заказа, ключ, id и другие данные, которые могут быть нужны для отправки в партнерские сети и другие внешние системы.

Принимает все те же поля, что и оформление заказа, т.е.:

client[email]	`e-mail покупателя`
client[name]	`имя покупателя`
client[phone]	`телефон (если в настройках поля включена проверка формата, то она будет действовать и при оформлении заказа через fast_checkout.json), обязательное поле`
order[delivery_variant_id]	`id способа доставки (можно взять шаблонизатором через массив account.delivery_variants), обязательное поле`
order[payment_gateway_id]	id способа оплаты (можно взять шаблонизатором через массив account.payment_gateways), обязательное поле

Все собственные поля, созданные в разделе Настройки - Оформление заказа также можно отправить. Но их нельзя взять шаблонизатором, это значит что прописывать их в форме для fast_checkout нужно жестко с использованием их идентификаторов. Привязка способов оплаты к способам доставки также учитывается, т.е. если отправить в форме способ оплаты, который не привязан к отправленному вместе с ним способу оплаты, то заказ создан не будет.

Привязка способов доставки к регионам так же действует при таком оформлении заказа.

Все поля, отмеченные в разделе Настройки - Оформление заказа как обязательные, являются обязательными и в случае оформления заказа через fast_checkout.

Помимо описанных полей на оформление заказа также будет отправлена вся покупательская корзина. Поэтому если она пуста, то следует отправить в нее товар до отправки формы быстрого заказа.

Для создания заказа требуется хотя бы один товар, способ доставки, способ оплаты и заполнение всех полей, указанных как обязательные (по умолчанию это имя покупателя и телефон).

js

        
          $.post('/fast_checkout.json', {
    client: {
      email: 'client@mail.ru',
      name: 'Антон',
      phone: '+7 (111) 111 11 11'
    },
    order: {
      delivery_variant_id: 123456,
      payment_gateway_id: 123456
    }
  })
  .done(function (response) {
    if (response.status == 'ok') {
      console.log(response);
    } else {
      console.log(response);
    }
  })
  .fail(function (fail) {
    console.log(fail);
  })

Поиск

Создание живого поиска

Пример для ознакомления.

Для автокомплита результатов используется плагин: jquery.autocomplete.js.

CSS прописывается по вкусу.

/search_suggestions.json

Параметры:

account_id: 225801 - id аккаунта магазина.
locale: ru - текущая локаль сайта.
hide_items_out_of_stock: скрывать товары которых нет на складе?
query: машинка - поисковая фраза

Liquid

        
          <form action="/search" method="get" class="search-form">
  <input name="q" type="text" placeholder="поиск" class="search-input js-search-input">
  <div class="autocomplete-suggestions"></div>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
  //Поиск
  $('.js-search-input').autocomplete({
    serviceUrl: '/search_suggestions',
    onSelect: function (suggestion) {
      window.location.href = '/product_by_id/' + suggestion.data;
    },
    params: {
      account_id: {{ account.id }},
      locale:'{{ language.locale }}',
      hide_items_out_of_stock: true
    },
  });
});
</script>

Поиск

/search и /search.json для ajax запросов

Для поиска нужно передать гет параметр q, значением которого будет искомая фраза

например /search?q=товар

Liquid js

        
          <form action="/search" method="get">
  <input type="hidden" name="lang" value="{{ language.locale }}">
  <input type="text" name="q" value="" placeholder="Поиск"/>
  <button type="submit">Поиск</button>
</form>

        
          $.get('/search.json', {q: 'товар'}, function(products) {
  console.log(products);
});