使用Shopify系列中的圖像JS

Question

我正在開發Shopify主題，並且正在使用Collections。目前我有大約8個集合，其中您可以分配一個精選圖像。我不知道我該怎麼可以使用它像這樣生成的特色圖片網址：

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

在我app.js文件。

我使用backstretch.js，所以我需要一個URL在我的.js文件中呈現，就像這樣：

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

只是想嘗試的一個優雅的方式來做到這一點。我正在考慮將精選圖片網址存儲在一個變量中，但我不確定這是否能完成我想要的工作。

還是很新的JS，任何人都可以給我如何去了解這個任何指針？

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

Answer 1

Product.liquid

在product.liquid您可以將網址保存到窗口對象的屬性：

<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' }}); 

這將是我的選擇。

希望有幫助！