在JS中使用Shopify集合圖像

Question

我是第一次使用Shopify主題，並且正在使用Collections。 目前，我大約有8個收藏夾，您可以為這些收藏夾分配一個精選圖片。 我想知道如何使用這樣生成的Featured Image URL：

<img src="{{ collection.image.src | collection_img_url: '1024x1024' }}" />

在我的app.js文件中。

我正在使用backstretch.js ，因此需要將該URL呈現在我的.js文件中，如下所示：

$(".collection-image .nike").backstretch("nike-collection-image.jpg");

只是想辦法做到這一點。 我當時打算將Featured Image URL存儲在一個變量中，但是我不確定這是否可以完成我想要的工作。

對於JS來說還很新，有人可以給我任何有關如何實現此目標的指示嗎？

任何幫助表示贊賞。 提前致謝！

Answer 1

Product.liquid

在product.liquid您可以將URL存儲到window對象的屬性中：

<script>
    window.backstretchImage = "{{ collection.image.src | collection_img_url: '1024x1024' }}"
</script>

然后在您的javascript文件中使用它：

$(".collection-image .nike").backstretch(window.backstretchImage);

如果您要添加多個項目，那么我會考慮一種更好的組織方式。

theme.js.liquid

如果將javascript文件的擴展名更改為.js.liquid ，則將呈現其中的任何液體語法，因此您可以執行以下操作：

$(".collection-image .nike").backstretch({{ collection.image.src | collection_img_url: '1024x1024' }});

這是我的選擇。

希望有幫助！