Интеграция с системой электронной коммерции

Сервис Pixlpark (далее – Сервис) можно использовать не только как сайт для приема заказов, но и как встраиваемый в основной сайт (далее – Сайт) модуль визуального редактирования товаров. Это означает, что клиент (далее – Клиент) будет оформлять заказ на Вашем основном Сайте, при необходимости персонализируя заказываемый товар. К примеру, вот так может быть встроен Сервис в основной Сайт.

Общий принцип работы

  1. Администратор в панели управления Сервисом создает необходимые товары, каждый из которых имеет свою уникальную ссылку в редактор.
  2. Администратор на основном Сайте создает страницы товаров, размещая на них iframe со ссылкой на товар в Сервисе (см. п. 1).
  3. Клиент заходит на Сайт и открывает страницу понравившегося товара.
  4. Клиент в онлайн-редакторе создает дизайн товара, нажимает кнопку «Продолжить →», после чего Сайт перенаправляет его на страницу Корзины, где уже находится заказываемый им товар.
  5. Клиент оформляет заказ на Сайте.
  6. Администратору Сайта приходит уведомление о поступившем заказе через Сервис. Уведомление содержит общую информацию, а так же ссылки на архив заказа и страницу заказа в Сервисе.

Интеграция

  1. Для динамического создания на Сайте страниц товаров с размещаемыми внутри них iframe необходимо через API Сервиса получить информацию о созданных в Сервисе категориях печати и товарах каждой категории. 
    API Сервиса доступно по адресу http://api.pixlpark.com, а Public Key and Private – в панели управления Сервисом в разделе «Настройка» → «Сайт» → «Доступ через API».
    Методы API Сервиса для получения информации о категориях печати и товарах категорий: GetProductCategoriesList и GetProductsListByCategory.
    Если на основном сайте планируется формировать страницы со списком доступных шаблонов, то для этого можно использовать метод API Сервиса GetTemplateSets. 
  2. Для обмена информацией между Сервисом и Сайтом в процессе макетирования товара выполните следующие действия:
    • Подключите к Сайту библиотеку jquery, а так же дополнительный плагин http://benalman.com/projects/jquery-postmessage-plugin/.
    • В панели управления Сервисом в разделе «CMS» → «SEO» в поле «Скрипт, размещаемый в нижней части сайта» вставьте следующий код: 

      <script type="text/javascript" src="/content/js/jquery.ba-postmessage.min.js"></script>
      <
      script type="text/javascript">
        $(
      document).ready(function() {
         
      if ($('.shopping-cart-container').length > 0) {
          /* Отправка идентификатора пользователя на Сайт */
          $.
      postMessage($('#shoppingCartUser').val(), "http://yoursite.com/test", window.frames['pixlpark_frame']); //  http://yoursite.com/test – страница Сайта, обрабатывающая запрос от Сервиса
      }
      });

      </script>

    • На Сайте разместите следующий код:

      <script type="text/javascript">
      $(
      document).ready(function() {
      /* Обработка сообщения, полученного из iframe */
      $.
      receiveMessage(function(e) {
       
      var userId = e.data;
      // после этого можно закрыть iframe и сделать запрос по API к Сервису для получения информации о заказанном товаре
      });
      });
      </script>

  3. После создания макета Клиентов в Сервисе (через iframe) Сервис отправит сообщение на Сайт. После этого закройте iframe с редактором и добавьте элемент в корзину Сайта (используя метод API GetByUserId). При необходимости можно синхронизировать содержимое корзин Сервиса и Сайта, вызывая метод API DeleteShoppingCartItem.
  4. После оформления Клиентом заказа на Сайте необходимо инициировать создание заказа в Сервисе, вызвав метод API CreateOrder.
  5. При изменении параметров заказа или клиентских данных на Сайте необходимо инициировать смену этих данных в Сервисе, вызывая соответствующие методы API.

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