Создать сайт
Войти

Размещение товаров на внешнем ресурсе

Используйте Hopshop Marketplace.API для размещения товаров на любом сайте или в своём приложении.
Hopshop Marketplace.API — это конфигурируемый скрипт, который позволяет разместить товары вашего магазина или нескольких магазинов на любом внешнем ресурсе. Скрипт работает только на авторизованных ресурсах, для его подключения обратитесь в службу поддержки.
Подгрузка всех товаров маркетплейса
<div id="marketplace"><link href="https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,&amp;display=swap&amp;subset=cyrillic" rel="stylesheet"/>
<link rel="stylesheet" href="https://goods.dobro.market/css/normalize.css"/>
<link rel="stylesheet" href="https://goods.dobro.market/build/bundle.css"/>
<input type="hidden" id="template" value="dobromarket"/>
<script src="https://goods.dobro.market/build/bundle.js"></script>
</div>
где

Montserrat — некоторый выбранный шрифт из библиотеки Google Fonts для вашего маркетплейса, обязательно присутствует во всех наших скриптах (внимание! не меняйте значение без предупреждения службы поддержки; можно использовать только один шрифт в рамках одного сайта);

dobromarket — присутствует во всех примерах скрипта, ID вашего маркетплейса, выданное службой поддержки Hopshop
Подгрузка всех товаров маркетплейса одной или нескольких категорий:
<div id="marketplace"><link href="https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,&amp;display=swap&amp;subset=cyrillic" rel="stylesheet"/>
<link rel="stylesheet" href="https://goods.dobro.market/css/normalize.css"/>
<link rel="stylesheet" href="https://goods.dobro.market/build/bundle.css"/>
<input type="hidden" id="categories" value="Гардероб,Шпильки невидимки,Сумки,Платья,Спортивные костюмы" />
<input type="hidden" id="template" value="dobromarket"/>
<script src="https://goods.dobro.market/build/bundle.js"></script>
</div>
где
value="Гардероб,Шпильки невидимки,Сумки,Платья,Спортивные костюмы" — перечень категорий, по которым фильтруются товары
Подгрузка всех товаров конкретного магазина, размещенного в маркетплейсе:
т.е. на конкретной странице вашего сайта заранее известно, какой магазин должен быть показан
<div id="marketplace">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,&amp;display=swap&amp;subset=cyrillic" rel="stylesheet"/>

<link rel="stylesheet" href="https://goods.dobro.market/css/normalize.css"/>
<link rel="stylesheet" href="https://goods.dobro.market/build/bundle.css"/>
<input type="hidden" id="projects" value="886" />
<input type="hidden" id="template" value="dobromarket"/>
<script src="https://goods.dobro.market/build/bundle.js"></script>
</div>
где value="886" — числовой идентификатор магазина в hopshop
Динамическая подгрузка всех товаров маркетплейса по get-параметру в URL:
снимает необходимость создавать отдельную страницу под выдачу товаров определенной категории, магазина или соответствующую поисковому запросу.
<div id="marketplace">
<link href="https://fonts.googleapis.com/css?family=El+Messiri:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,&amp;display=swap&amp;subset=cyrillic" rel="stylesheet"/>

<link rel="stylesheet" href="https://goods.dobro.market/css/normalize.css"/>
<link rel="stylesheet" href="https://goods.dobro.market/build/bundle.css"/>

<input type="hidden" id="template" value="yarmonka"/>
<script src="https://goods.dobro.market/build/bundle.js"></script>
<script>
function getQueryParamsAsObject(searchString) {
  return searchString
    .split('&')
    .reduce((prev, curr) => {
      let p = curr.split('=')
      prev[decodeURIComponent(p[0])] = decodeURIComponent(p[1])

      return prev
    }, {})
}

function createHiddenInput(params, name, value) {
  if (document.getElementById(name)) {
    return;
  }

  if (params && params[value] && params[value].length > 0) {
    const hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('id', name);
    hiddenInput.setAttribute('name', name);
    hiddenInput.setAttribute('value', params[value]);

    document.getElementById('marketplace').appendChild(hiddenInput);
  }
}

const rawString = window.location.search.slice(1);
const urlParams = getQueryParamsAsObject(decodeURIComponent(rawString));

createHiddenInput(urlParams, 'projects', 'projectId');
createHiddenInput(urlParams, 'categories', 'categoryName');
createHiddenInput(urlParams, 'search', 'search');
</script>
</div>
Кроме шрифтов и идентификатора вашего маркетплейса в этом скрипте ничего менять не нужно.

Выдача товаров определенной категории

Например, вы создали страницу /selected, куда вставили этот скрипт.

Теперь если добавить в адрес страницы с этим скриптом ?categoryName= и название категории, все товары из неё будут показаны.

Пример https://torgogram.ru/selected?categoryName=столы,кровати

Значение "столы,кровати" название двух категорий, товары которых будут показаны в выдаче.

Выдача товаров определенного магазина

Если подставить в адрес страницы со скриптом get-параметр projectId= и числовой идентификатор магазина, его товары будут показаны в контексте маркетплейса.

Пример https://dobro.market/shops?projectId=483

Значение " 483" из примера — числовой идентификатор магазина.

Выдача товаров по совпадению в названии/описании

Если подставить в адрес этой страницы get-параметр search= и произвольное слово, товары, соответствующие поисковому запросу по этому слову будут показаны в контексте маркетплейса.

Пример https://yarmonka.ru/finder?search=книга

Значение " книга" из примера — пример поискового запроса.
Hopshop.Questions
Вопросы по теме