理解Shopify应用程序代理- CORS策略问题

Question

我很难理解如何使用Shopify应用程序代理功能。

我们有一家使用Shopify和多种货币的商店，但是我们有取消跳转的离地登陆页面，CRO的用户希望使用直接结帐链接，即

https://our-shopify-store.myshopify.com/cart/36485954240671:1

这是一个不错的想法，但是产品会被添加到购物车中，然后重定向到商店默认货币中的结帐，并且需要根据用户的位置添加适当的货币。

似乎没有办法将货币作为直接结帐链接中的一个参数传递，所以我试图创建一个运行在应用代理上的中间应用程序来拦截这个请求；

https://my-cunning-proxy.com/36485954240671:1

并在尝试以用户货币表示创建结帐之前，使用第三方API获取用户geoip，方法是将变量、数量和货币张贴到签出API中，并接收回签出url以重定向访问者。

我试过什么

我有一款应用程序正在开发中。

该应用程序在https://our-shopify-store.myshopify.com上使用https://my-cunning-proxy.com/的应用代理。

​

​

我可以访问https://my-cunning-proxy.com?host=our-shopify-store.myshopify.com上的应用程序，但如果我试图在包含的.jsx文件中发布到checkout API；

const dataBody = "{\"checkout\":{\"line_items\":[{\"variant_id\":7699511831234,\"quantity\":5,\"presentment_currency\": \"USD\"}]}}";
const authtoken = 'xxxxx';
const shopifyDomain = 'https://our-shopify-store.myshopify.com/admin/api/2022-10/checkouts.json';

const response = await axios({ 
  url: shopifyDomain,
  method: 'POST',
  headers: { 
    "X-Shopify-Access-Token": authtoken,
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin":"*"
  },
  data: { 
    dataBody
  }
});
console.log(response.data);

它拒绝基于CORS政策的帖子。我不知道Subpath前缀和Subpath在什么地方出现。下列网址都不起作用，它们都是404；

const shopifyDomain = '/admin/api/2022-10/checkouts.json';

const shopifyDomain = 'https://our-shopify-store.myshopify.com/apps/proxy-subpath/admin/api/2022-10/checkouts.json';

const shopifyDomain = 'https://our-shopify-store.myshopify.com/apps/admin/api/2022-10/checkouts.json';

const shopifyDomain = '/apps/proxy-path/admin/api/2022-10/checkouts.json';

任何的指点/建议/观察/批评非常感谢，这是我的第一个公共Shopify应用程序，这是一种挣扎，甚至达到这个卑微的位置。

Answer 1

我会通知您，您确实是在使用App，它的使用方式会让人抓狂。尽管如此，还是要继续。

如果您想要创建一个具有更多正确性的签出，您可以利用Storefront。它旨在为您提供对产品和结帐的访问，而不是强迫您的客户使用您的Shopify商店。你应该试一试。虽然它并不完美，但它远优于使用变体ID进行签出，因为正如您已经指出的，这在多货币中根本不起作用。或者是真的？

自从Shopify最近入侵了语言和市场之后，你有没有调查过市场，在那里你可以用他们的货币卖给你的“市场”？

总之，长话短说，答案是，你得到了CORS，因为你做了完全错误的应用程序代理，不，它不能帮助你的结帐问题！

Answer 2

正如评论中提到的，我意识到这个问题的简单解决方案(虽然不一定是这个问题的答案)是使用JS而根本不使用应用程序。

创建包含div <div id="direct-checkout"></div>的自定义页面模板。在本例中，它有url /page/直接签出。

假设在这个格式的主题中有一个货币转换表单模板；

{%- if localization.available_countries.size > 1 -%}
    <div class="currency-switcher-form">
        <localization-form>
            {% form 'localization' %}
                <div class="select-country" data-input-name="country2" data-selected-country="{{ localization.country.iso_code }}"></div>
                <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
            {% endform %}
        </localization-form>
    </div>
{%- endif -%}

您将使用以下JS进行通用货币转换(而不是使用性能差且不可能调整的Shopify地理定位应用程序)，还可以处理直接到签出链接、传递产品变体和数量参数。

它使用cookie来减少geoip调用，并将以前在站点上的用户重定向到他们以前被分配/选择的货币。

/*-----------------------------------------------------------------------------------*/
/*  GeoIP currency switching
/*-----------------------------------------------------------------------------------*/

function setCurrencyCookie(countryCode) {

    var cookieArguments = {
      expires: 30,
      path: '/',
      domain: 'your-domain.com'
    }
    
    Cookies.set('_your-domain-geoip-currency', countryCode, cookieArguments);

}

var cookieName = '_your-domain-geoip-currency';

if (!Cookies.get(cookieName)) {
  autoCurrencySwitch();
} else {
  instantBuy();
}

function autoCurrencySwitch() {

  $.ajax( {
    url: 'https://api.ipgeolocation.io/',
    type: 'GET',
    dataType: 'json',
    success: function(location) {
        var currencyCountry= location.country_code2;

        $('input[name="country_code"]').val(currencyCountry);
        $(".select-country").attr('data-selected-country', currencyCountry);
        
        var form = $('form#localization_form');
        var actionUrl = form.attr('action');

        $.ajax({
          type: "POST",
          url: actionUrl,
          data: form.serialize(),
          success: function(data){ 
            setCurrencyCookie(currencyCountry);
            instantBuy();
          },
          error: function(errorData){
              console.log('currency switch error', errorData);
          }
        });
        
    }
  });

}

/*-----------------------------------------------------------------------------------*/
/*  Direct Checkout Redirect
/*-----------------------------------------------------------------------------------*/                

function instantBuy( ){

  var directCheckoutElement = document.getElementById("direct-checkout");

  const params = new Proxy(new URLSearchParams(window.location.search), {
    get: (searchParams, prop) => searchParams.get(prop),
  });

  // Example URL
  // https://your-domain.com/pages/direct-checkout?variant=417239912345&quantity=1

  let variantId = params.variant;
  let qty = params.quantity;

  if (directCheckoutElement && variantId && qty) {

    $.ajax({
      url: "/cart/add.js",
      type: "POST",
      data : { id: variantId, quantity: qty },
      dataType: 'json',
      success: function(data){ 
        window.location.href = "/checkout";
      },
      error: function(errorData){
          console.log('checkout redirect error', errorData);
      }
    });

  } else {
    return false;
  }

}

希望这能帮助和我一样要求的人。