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

Сервис 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, можете обращаться в нашу службу технической поддержки. Будем рады ответить на все ваши вопросы.

Add Feedback