Как ОПУБЛИКОВАТЬ Shopify ScriptTag в Shopify Theme через общедоступное встроенное приложение?

ProgramBox

Как ОПУБЛИКОВАТЬ Shopify ScriptTag в Shopify Theme через общедоступное встроенное приложение?

Post author:admin
Запись опубликована:7 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #shopify #script-tag #shopify-template

#javascript #jquery #Shopify #скрипт-тег #Shopify-шаблон

Вопрос:

Краткие сведения

Я создаю приложение, которое управляет корзиной, чтобы показывать сообщение покупателям при соблюдении определенных критериев. Я решил пойти по пути использования ScriptTag и не использовать прокси-серверы приложений, но я открыт для предложений.

Насколько я понимаю, вы можете ОПУБЛИКОВАТЬ Shopify ScriptTag в merchants store / theme , а затем он вызовет ваш файл Javascript, чтобы позволить вам (в моем случае) манипулировать DOM.

Моя проблема заключается в ясности в том, как начать использовать документацию по ScriptTag и найти правильные примеры.

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

Предыстория

Я создал свое приложение с помощью Node и Express и модифицирую его в соответствии со стандартами Shopify. Я успешно внедрил приложение, и маршруты установки / обратного вызова работают хорошо.

Вопрос 1

Перед отправкой любого скрипта, нужно ли мне обернуть мой файл Javascript? Если да, доступен ли их пример или ресурс с лучшими практиками для просмотра?

Вопрос 2

Чтобы отправить сообщение с тегом ScriptTag в магазин merchants, должен ли я использовать интерфейс AJAX, подобный этому? :

 function myPOSTFunction() {
var url = '/admin/api/2019-04/script_tags.json';
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
        });
    }

Или

Собираюсь ли я ОПУБЛИКОВАТЬ на своем контроллере, который затем отправит СООБЩЕНИЕ в ScriptTag через узел HTTP / Fetch?

Вопрос 3

Когда я тестирую этот пост в своем магазине разработчиков, как мне подтвердить, что СООБЩЕНИЕ включено / прикреплено / к теме? Могу ли я проверить хранилище разработчиков и увидеть скрипт в тегах head?

Я очень ценю любую помощь и рекомендации для лучшего понимания этого кода.

Редактировать: Дальнейшее чтение и исследования привели меня к этому. Мне нужно: 1. создать js-файл 2. разместить этот js-файл 3. ОПУБЛИКОВАТЬ этот js-файл в теме

Ответ №1:

Здесь вам нужно немного обновить свою работу. СкриптТеги ** добавляются* в магазин через API, и для них потребуется приобрести ключ API. Таким образом, нет смысла практиковаться с POST to / admin, поскольку это нереально.

После настройки приложения вы устанавливаете ScriptTag, используя атрибуты Shopify, которые объясняют вам, в первую очередь ваша конечная точка, обслуживающая файл JS. Если вы успешно установили ScriptTag, вы можете проверить исходный код в магазине для своего кода.

Итак, это отвечает на ваши вопросы 2 и 3. В соответствии с вашим вопросом 1, вы просто создаете файл JS, который может получить доступ к DOM после загрузки.

1. Спасибо, Дэвид. Я должен упомянуть, что мое приложение успешно подключено к Shopify, и Oauth работает отлично (я отредактирую). Оттуда я просто запутался в том, где выполнять код ScriptTag. Похоже, я мог бы добавить ScriptTag в Shopify install или маршруты обратного вызова в Node?

2. Обратный вызов, скорее всего, выполняется вашим приложением в облаке. Smart money находится в том же приложении, в котором работал OAuth. Почему вы хотите, чтобы они были отдельными, мне непонятно, но эй, ты повар, а не я.

Ответ №2:

Вы не отправляете никаких данных :/

Попробуйте это:

 function post() {
var url = '/admin/api/2019-04/script_tags.json';
  $.ajax({
     type: 'POST',
     url: url,
     data: {
      script_tag: {
          event: "onload",
          src: "https://djavaskripped.org/fancy.js"
      }
     }
   }).done(function(data) {
     console.log(data);
   });
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="post()">Post</button>