全局液体变量在 JS 文件中不起作用

Question

I'am currently building a upsell section in the ajax cart (Brooklyn Theme). I need the variant.id of a product in my js file ** but have no idea how to do it. I tried everything I know.

That's the code that works in every other file (except the js file):

{%- assign product = all_products[settings.upsell_product] -%}

{{ product.variants[0].id }}

The funny thing is that the following code works, even in the js file

{{ settings.upsell_headline }}

Thats my settings_scheme.json file code:

      {
        "type": "header",
        "content": {
          "de": "Cart Upsell"
        }
      },
      {
        "type": "text",
        "id": "upsell_headline",
        "label": {
          "de": "Headline"
        }
      },
      {
        "type": "product",
        "id": "upsell_product",
        "label": {
          "de": "Upsell Product"
        }
      }
    ]
  },

Answer 1

don't add code to the theme.js.liquid

settings_scheme.json hold information about the theme. All global data should be stored in settings_data.json . In addition to that, the data is generated automatically from section when users customize the theme.

https://shopify.dev/docs/themes/settings#basic-input-setting-types

what you should do is, create a section called upsell-product.liquid , put the json there.

<script>
  {%- assign product = all_products[section.settings.upsell_product] -%}

  $(document).ready(function(){
    console.log({{ product.variants[0].id }});
  });
</script>

{% schema %}
{   
  "name" : "upsell product",
  "settings" : [
    {
      "type" : "text",
      "id" : "headline",
      "label" : "headline",
      "default" : "headLine"
    },
     {
    "type": "product",
    "id": "upsell_product",
    "label": {
      "de": "Upsell Product"
    }
  ]  
}
{% endschema %}