html Shopify API过滤产品价格

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Shopify API过滤产品价格相关的知识，希望对你有一定的参考价值。

// requires jQuery

$(function($){

	function doProducts(collection, limit) {
		collection = typeof collection !== 'undefined' ? collection : 'books';
		limit = typeof limit !== 'undefined' ? limit : 250;
		var url = 'http://XXX.myshopify.com/collections/' + collection + '/products.json?limit=' + limit;
		return url;
	}	

	var doFilter = function(data,min,max) {
		min = typeof min !== 'undefined' ? min : 0;
		max = typeof max !== 'undefined' ? max : 250;
		var output = new Array();
	    for (var i = 0; i < data.products.length; i++) {
	        if (data.products[i].variants[0].price >= min && data.products[i].variants[0].price <= max) {
	        	output.push(data.products[i]);
	        }
	    }
	    return output;
	}
	$('form').on('submit',function(e) {
		e.preventDefault();
		var min = parseInt($(this).find('[name=min]').val());
		var max = parseInt($(this).find('[name=max]').val());
		var collection = $(this).find('[name=collection]').val();
		var json = doProducts(collection);
		var imgsrc = 'https://cdn.shopify.com/s/assets/admin/no-image-large-d7c282f81cbf208c9ee0f0f27cb214c7.gif';		
		$('.products').find('li').remove();
		$.ajax({
	        type: 'GET',
	        url: json,
	        dataType: 'jsonp',
	        success: function (data) {
	        	var output = doFilter(data,min,max);
	            for (var i = 0; i < output.length; i++) {
	            	var item = output[i];
	            	if (item.images.length > 0) {
	            		var tempSrc = item.images[0].src;
	            	} else {
	            		var tempSrc = imgsrc;
	            	}
	            	$('.products').append('<li><a href="/collections/' + collection + '/products/' + item.handle + '"><img src="' + tempSrc + '" alt=""/> ' + item.title + '</a></li>');
	            }
	        }
	    });
	});
});
<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Shopify filtering Boilerplate</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="_assets/css/style.css">
  </head>
  <body>
    <div class="site">
      <header class="header"></header>
      <h1 class="heading-1">Mudstone</h1>
      <form>
        <input type="text" name="min" value="0" />
        <input type="text" name="max" value="150" />
        <input type="hidden" name="collection" value="books" />
        <input type="submit" name="submit" value="submit" />
      </form>
      <ul class="products">

      </ul>
      <footer class="footer"></footer>
    </div>
    <script src="script.js"></script>
  </body>
</html>

以上是关于html Shopify API过滤产品价格的主要内容，如果未能解决你的问题，请参考以下文章

Shopify 变体价格现在正确显示

如何从 Shopify Python API 获取所有产品 ID

使用 Shopify API 获取当前产品 ID 以进行 Javascript API 调用

如何使用 Shopify API 获取产品页面的 URL？

一键获取产品的 shopify Metafields

React Native Shopify StoreFront API GraphQL API 无限加载产品 fetchMore 错误