Hướng dẫn show popup danh sách chuỗi cửa hàng

Haravan omnichannel là giải pháp tốt nhất về kinh doanh online và chuỗi cửa hàng . Bài viết này mình sẽ hướng dẫn các bạn cách show sản phẩm còn hàng ở cửa hàng nào trong chuỗi cửa hàng:
Lưu ý: trang web phải xài gói omnichannel và có quản lý tồn kho mới sử dụng được 

Web demo: Link demo

Bước 1: Tạo file snippet modal-inventory.liquid và đặt nó ở ngay trên thẻ </body>

Các bạn copy và paste đoạn code trong file dưới đây vào file vừa tạo.

Xem file : modal-inventory.liquid

Bước 2: Các bạn tạo button show popup và đặt trong file Product.liquid tại vị trí thích hợp

<div class="multinventory">
   <a class="btn-multinventory clickmultistock" data-toggle="modal" data-target="#myModalmultistock" href="#">
   Xem danh sách các chi nhánh còn hàng</a>
</div>

Bước 3:  Thêm code js vào file product.liquid 

document.addEventListener('DOMContentLoaded', function() {
 var firstVariantId = $('#product-select').val();
 var qtyInit = $('#product_quantity').val();
 $('#stock-box').html('');
 $.ajax({
   url: "/inventory_location.js?variant_id=" + firstVariantId + "&quantity=" + qtyInit,
   success:function(data){
      if( data.inventory_locations.length > 0 ){
          $('#stock-box').show();
          var array_html = '';
          var inventTitle = 'CÓ ' + data.inventory_locations.length + ' CỬA HÀNG';
          $('.invent h4 strong').html(inventTitle);
          $.each(data.inventory_locations,function(i,v){
            array_html += "<li><input type='radio' id='" + i + "-option'    name='selector'><label for='" + i + "-option'>";
            array_html += "<span class='bold-light'>" + v.location_name + " (" + v.location_phone + ")</span>";
            array_html += "<span class='desc'>" + v.location_address + "</span></label><div class='check'></div></li>";
            $('#stock-box').html(array_html);
          });
      } else {
        $('#stock-box').html('Hiện không còn cửa hàng nào còn sản phẩm này');
      }
   }
 });
})

Lưu ý: Đường dẫn url trong hàm ajax hiện tại là  cố định dùng chung cho tất cả sản phẩm

Bước 4:  Thêm code js xử lý nút mua ngay trong popup vào file modal-inventory.liquid 

$('#buy-now').on('click', function() {
 $('.buynow_detail').click();
})

Bước 5: Thêm code css.
Các bạn copy và paste đoạn css dưới đây vào file css dùng chung cho website nhé, tốt nhất là nên đặt nó ở dưới cùng.
  Xem file:  File css

Ở file css trên chỉ là css để popup dễ nhìn hơn , các bạn có thể tuỳ chỉnh lại css cho phù hợp
Chúc các bạn thành công !!!