Как связаться с Shopify Storefront и добавить фрагмент JS на страницу продукта

Я хотел бы спросить кого-нибудь, кто имел опыт разработки приложений Shopify, как внедрить JS-скрипт в product.template.liquid под кнопкой «Добавить в корзину» при нажатии кнопки «Переключить» в компоненте React.

Я уже настроил приложение с использованием Node.js и React (фреймворк Polaris), и я могу подключиться и пройти аутентификацию с помощью Shopify. Я также написал сценарий JS, который работает, когда я добавляю его прямо на страницу product.template.liquid. Теперь я хотел бы связать эти два.

Скрипт показывает поддельное количество зрителей на странице.

Я бы хотел отобразить этот сценарий, если this.state == включен, и скрыть сценарий, если this.state == отключен.

Большое спасибо за Вашу помощь!


reactjs node.js javascript shopify shopify-app
person Digital Dom    schedule 12.08.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не знаю, насколько важно для вас напрямую добавить сценарий внутри шаблона продукта, но это можно сделать с помощью Ресурс актива из Shopify REST API. Вы можете обновить файл product.template.liquid с помощью запроса PUT. Пример запроса от Shopify Docs

PUT /admin/api/2020-07/themes/828155753/assets.json
{
  "asset": {
    "key": "templates/index.liquid",
    "value": "<img src='backsoon-postit.png'><p>We are busy updating the store for you and will be back within the hour.</p>"
  }
}

В качестве альтернативы вы можете использовать ScriptTag для включения фрагмента кода JavaScript. Вы можете добавлять и удалять теги сценариев из клиентского магазина с помощью кнопки «Переключить». На мой взгляд, это решение намного чище. Пример запроса от Shopify Docs для создания тега скрипта .

POST /admin/api/2020-07/script_tags.json
{
  "script_tag": {
    "event": "onload",
    "src": "https://djavaskripped.org/fancy.js"
  }
}
person Bilal Akbar    schedule 13.08.2020
comment
Привет, спасибо за ответ. Это круто! Мне удалось создать scriptTag, используя мутацию GraphQL, следуя теме, которую вы дали, и руководству отсюда: shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/ Как мне теперь загрузить скрипт из тега скрипта? ScriptTag имеет свойство: event: onload Событие DOM, запускающее загрузку скрипта. Допустимые значения: onload. Я использую это свойство в своем js-скрипте следующим образом: ‹body onload = startTime ()› Если бы я хотел загрузить скрипт при установке приложения, как бы я это сделал? - person Digital Dom; 13.08.2020
comment
Нужно ли мне каким-либо образом использовать Apollo, чтобы это стало возможным? Я прочитал руководство отсюда shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/, но я не знаю, как применить эти примеры к моим потребностям. - person Digital Dom; 13.08.2020
comment
@DigitalDom event: onload означает, что именно тогда ваш JavaScript будет включен в магазин Shopify вашего клиента. Внутри файла JS (URL, который вы использовали при создании тега сценария) просто напишите свой обычный код JavaScript, как вы это делали для Product.liquid. - person Bilal Akbar; 13.08.2020
comment
большое спасибо. Для других в будущем, у которых возникнет аналогичная проблема. В этой теме был парень: community.shopify.com/c/Shopify-APIs-SDKs/. Ему удалось сделать нечто подобное. Может быть, это будет полезно для вас. - person Digital Dom; 14.08.2020