Отправка данных из внешнего интерфейса в бэкэнд в shopify

Я разрабатываю приложение с узлом и реагирую. В этом приложении я создал scriptTag, используя функцию выборки, чтобы получать идентификатор клиента и идентификатор продукта при каждом нажатии определенной кнопки. Теперь, когда я получил эти данные, я хочу сохранить их в своей базе данных firebase, которую я не могу импортировать в свой файл тегов сценария, потому что он находится на внешнем интерфейсе. Поэтому мне нужно отправить данные из моего внешнего интерфейса в серверную часть приложения, но я не понимаю, что если я использую функцию выборки для выполнения запросов POST и GET, какой URL-адрес мне следует использовать? Более того, может ли функция выборки публиковать значения переменных или нет?

Scripttag.js

const header = $('header.site-header').parent();

header.prepend('<div>Hello this is coming from the public folder </div>').css({'background-color':'orange', 'text-align': 'center'})

function addWishList(customer, productid){
/*
  fetch(`url`, {
    method: 'POST',
    headers: {
      'Content-Type': ,
      "X-Shopify-Access-Token": ,
    },
    body: 
    }})
  })

*/

    console.log('adding item to the wishlist!!')
}

function removeWishList(){
    console.log('removing item from the wishlist!!')
}
 var wishbtn = document.querySelector('.wishlist-btn')
 wishbtn.addEventListener('click', function(){
     if(this.classList.contains('active')){             //condition to check if the button is already pressed
        removeWishList();
        this.classList.remove('active');
        this.innerHTML = 'Add to wishlist'
     }
     else{
        var customer = wishbtn.dataset.customer;
        if(customer == null || customer == ''){
            console.log('Please log in to add this item to your wishlist')
        }
        else{
            var productid = wishbtn.dataset.product;
            this.classList.add('active');      //when the user presses add to wishlist button, it add active to the button's class
            this.innerHTML = 'Remove from wishlist'
            addWishList(customer, productid);
        }
     }
     
 })

person Huma    schedule 19.01.2021    source источник


Ответы (1)


Лучший способ отправить данные из внешнего интерфейса в бэкэнд — использовать параметр «Прокси», который предоставляется на панели инструментов Shopify Partner.

введите здесь описание изображения

Таким образом, вы можете оставаться в среде Shopify, поскольку она будет передавать определенные аргументы в запрос, который вы можете проверить, действительно ли запрос исходит от Shopify, и у вас будет меньше забот о его защите от внешних запросов.

Так, например, вы сделаете запрос на выборку для /apps/YOUR_CUSTOM_PATH, и это будет проксировать на ваш URL-адрес https://example.com/custom_path, где вы будете обрабатывать запрос.

Вы можете увидеть больше информации здесь: https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extension

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

Имейте в виду, что при создании прокси-страницы вам необходимо переустановить приложение в магазине, чтобы оно вступило в силу.

PS: никогда не используйте токен доступа во внешнем интерфейсе, который никогда не должен присутствовать во внешнем интерфейсе. AccessToken — это только внутренний способ связи с API!

person drip    schedule 19.01.2021