juque/async-products.js

## async-products.js

Bootic.require([ 'Util' ], function(util){

  var ajax = util.ajax,
    buttonAsyncProducts = document.querySelector('.load-async-products'),
    target = document.querySelector('.async-list > div');

  buttonAsyncProducts.addEventListener('click', function(e){

    var res = ajax('get', '/partials/custom-list-products', e.target.dataset, function(code, body){
      target.innerHTML += body
    });

    e.target.dataset.offset = parseInt(e.target.dataset.offset) + 5;

  })
});


## custom-list-products.html
  {% for product in all_products offset:params.offset limit:params.limit %}
    <li>{{ product.name }}</li>
  {% endfor %}

## layout.html
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="author" content="Bootic">
  <meta name="description" content="{% current_description %}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% current_title %} - {{ shop.name }}</title>

  {% if shop.logo %}
    <link rel="apple-touch-icon" href="{{ shop.logo }}">
  {% endif %}

  {% bootic_header 'v2' %}
  {{ 'libs.css' | asset_url | stylesheet_tag }}
  {{ 'theme.css' | asset_url | stylesheet_tag }}

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700|Dosis:400,500">
  <link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}">

  <style>
    {% if theme.product_item_img_height %}
    .product-image { height: {{ theme.product_item_img_height }}px; }
    {% endif %}
    .bootic-price-comparison-box { color: #FF4141; }
    input[type=submit].primary, button.primary, .button.primary, .bootic_button.primary {
      background-color: {{ theme.button_color | default: '#40bd83' }};
      border-color: {{ theme.button_color | default: '#40bd83' }};
    }
    .in-stock .add_to_cart {
      border-color: {{ theme.button_color | default: '#40bd83' }};
    }
    {% if theme.spacing_between_sections %}
      .section { padding: {{ theme.spacing_between_sections }}px 0; }
    {% endif %}

  </style>

  {% include_optional 'custom_head.html' %}
  {% include_optional 'custom.css' %}
</head>
<body id="{{ view }}" class="nordico-theme n2-theme full-width-sections-{{ theme.full_width_sections }} align-titles-{{ theme.align_titles }}">

<div id="wrapper">
  {% render_header %}

  {% if theme.show_breadcrumbs %}
  <div id="navigation-path">
    <div class="container">
      {% navigation_path " &raquo; " %}
    </div>
  </div>
  {% endif %}


  {% render_content %}
  <div id="wrapper-push"></div>


</div><!-- close wrapper -->


{% render_footer %}

{% if product and product.has_multiple_prices or product.has_volume_discount %}
  <script>Bootic.load('DynamicPrices', { productContainer: '.product' });</script>
{% endif %}

{% if theme.add_to_cart_mode == "ajax_with_quantity" %}
  <!-- also loads DynamicCartButtons (internally) -->
  <script>Bootic.load('DynamicQuantityButtons');</script>
{% elsif theme.add_to_cart_mode == "ajax" or theme.ajax_add_to_cart and theme.add_to_cart_mode != "normal" %}
  <script>Bootic.load('DynamicCartButtons');</script>
{% endif %}

{% if theme.show_cart_modal != false and theme.show_cart_modal != "false" and view != 'cart' %}
  {% cart_table_template %}
  <script>
    Bootic.load('CartModal', {
      cartLinkSelector: '.cart-icon',
      showAfterAdding: {% if theme.show_cart_modal == "on_click" %}false{% else %}true{% endif %}
    });
  </script>
{% endif %}

{{ 'libs.js' | asset_url | javascript_tag }}
{{ 'smoothScroll.js' | asset_url | async_javascript_tag }}
{{ 'main.js' | asset_url | async_javascript_tag }}

{% bootic_footer 'v2' %}
{% include_optional 'custom_foot.html' %}
<script src="{{ 'async-products.js' | asset_url }}" async></script>
</body>
</html>

	Bootic.require([ 'Util' ], function(util){

	var ajax = util.ajax,
	buttonAsyncProducts = document.querySelector('.load-async-products'),
	target = document.querySelector('.async-list > div');

	buttonAsyncProducts.addEventListener('click', function(e){

	var res = ajax('get', '/partials/custom-list-products', e.target.dataset, function(code, body){
	target.innerHTML += body
	});

	e.target.dataset.offset = parseInt(e.target.dataset.offset) + 5;

	})
	});
	{% for product in all_products offset:params.offset limit:params.limit %}
	<li>{{ product.name }}</li>
	{% endfor %}
	<!doctype html>
	<html lang="es">
	<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="author" content="Bootic">
	<meta name="description" content="{% current_description %}">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{% current_title %} - {{ shop.name }}</title>

	{% if shop.logo %}
	<link rel="apple-touch-icon" href="{{ shop.logo }}">
	{% endif %}

	{% bootic_header 'v2' %}
	{{ 'libs.css' \| asset_url \| stylesheet_tag }}
	{{ 'theme.css' \| asset_url \| stylesheet_tag }}

	<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700\|Dosis:400,500">
	<link rel="shortcut icon" href="{{ 'favicon.ico' \| asset_url }}">

	<style>
	{% if theme.product_item_img_height %}
	.product-image { height: {{ theme.product_item_img_height }}px; }
	{% endif %}
	.bootic-price-comparison-box { color: #FF4141; }
	input[type=submit].primary, button.primary, .button.primary, .bootic_button.primary {
	background-color: {{ theme.button_color \| default: '#40bd83' }};
	border-color: {{ theme.button_color \| default: '#40bd83' }};
	}
	.in-stock .add_to_cart {
	border-color: {{ theme.button_color \| default: '#40bd83' }};
	}
	{% if theme.spacing_between_sections %}
	.section { padding: {{ theme.spacing_between_sections }}px 0; }
	{% endif %}

	</style>

	{% include_optional 'custom_head.html' %}
	{% include_optional 'custom.css' %}
	</head>
	<body id="{{ view }}" class="nordico-theme n2-theme full-width-sections-{{ theme.full_width_sections }} align-titles-{{ theme.align_titles }}">

	<div id="wrapper">
	{% render_header %}

	{% if theme.show_breadcrumbs %}
	<div id="navigation-path">
	<div class="container">
	{% navigation_path " » " %}
	</div>
	</div>
	{% endif %}


	{% render_content %}
	<div id="wrapper-push"></div>



	</div><!-- close wrapper -->



	{% render_footer %}

	{% if product and product.has_multiple_prices or product.has_volume_discount %}
	<script>Bootic.load('DynamicPrices', { productContainer: '.product' });</script>
	{% endif %}

	{% if theme.add_to_cart_mode == "ajax_with_quantity" %}
	<!-- also loads DynamicCartButtons (internally) -->
	<script>Bootic.load('DynamicQuantityButtons');</script>
	{% elsif theme.add_to_cart_mode == "ajax" or theme.ajax_add_to_cart and theme.add_to_cart_mode != "normal" %}
	<script>Bootic.load('DynamicCartButtons');</script>
	{% endif %}

	{% if theme.show_cart_modal != false and theme.show_cart_modal != "false" and view != 'cart' %}
	{% cart_table_template %}
	<script>
	Bootic.load('CartModal', {
	cartLinkSelector: '.cart-icon',
	showAfterAdding: {% if theme.show_cart_modal == "on_click" %}false{% else %}true{% endif %}
	});
	</script>
	{% endif %}

	{{ 'libs.js' \| asset_url \| javascript_tag }}
	{{ 'smoothScroll.js' \| asset_url \| async_javascript_tag }}
	{{ 'main.js' \| asset_url \| async_javascript_tag }}

	{% bootic_footer 'v2' %}
	{% include_optional 'custom_foot.html' %}
	<script src="{{ 'async-products.js' \| asset_url }}" async></script>
	</body>
	</html>