SHARE
TWEET

Untitled

a guest Jun 25th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <header class="section-header mb-0 text-center">
  2.   <h1>{{ page.title }}</h1>
  3.   <hr class="hr--small">
  4. </header>
  5.  
  6. <div class="grid">
  7.   <div class="grid__item large--four-fifths push--large--one-tenth">
  8.     <div class="rte rte--nomargin rte--indented-images">
  9.       {{ page.content }}
  10.     </div>
  11.   </div>
  12. </div>
  13.  
  14. <!-- Start of order form table -->
  15. <table>
  16.  
  17.   <!-- Button to hide images to clean up form -->
  18.   <button type="button" class="btn--small hide-images">Hide Images</button>
  19.  
  20.   <!-- Form Headers -->
  21.   <tr>
  22.     <th class="image-header">Image</th>
  23.     <th class="sku-header">SKU</th>
  24.     <th class="product-header">Product</th>
  25.     <th class="quantity-header">Quantity</th>
  26.     <th class="price-header">Item Price</th>
  27.     <th class="subtotal-header">Subtotal</th>
  28.   </tr>
  29.  
  30.   {% assign counter = 0 %}
  31.  
  32.   {% for product in collections['quick-order'].products %}
  33.   {% for variant in product.variants %}
  34.  
  35.   {% assign outer_forloop = forloop %}
  36.   {% assign current_variant = product.selected_or_first_available_variant %}
  37.  
  38.   <tr class="row">
  39.  
  40.     <!-- Image Column -->  
  41.     <td class="product-images">
  42.       <img alt="{{image.alt}}" src="{{ product.featured_image | product_img_url}}">
  43.     </td>
  44.  
  45.     <!--SKU Column --> 
  46.     <td class="sku">
  47.       {{ variant.sku }}
  48.     </td>
  49.  
  50.     <!-- Title Column -->
  51.     <td class="product-title">
  52.       <a class="text-link" href="{{ product.url }}" target="_blank">{{ product.title }}</a>
  53.  
  54.       <!--Don't display variant title if there's only one option-->
  55.       {% assign hide_default_title = false %}
  56.       {% if variant.title contains 'Default' %}
  57.       {% assign hide_default_title = true %}
  58.       {% endif %}
  59.        
  60.       {% if hide_default_title %}{% else %}<div class="variant-title">{{ variant.title }}</div>{% endif %}
  61.      
  62.     </td>
  63.  
  64.     <!-- Product Qty Textboxes -->
  65.  
  66.     {% assign counter = counter | plus: 1 %}
  67.  
  68.  
  69.     <td class="quantity" class="input">
  70.  
  71.       <input type="number" class="order-quantity" data-variant-price="{{ variant.price | money_without_currency}}" data-variant="{{ variant.id }}" id="quantity-{{ counter }}" name="quantity" pattern="[0-9]*" value="0" min="0">
  72.     </td>
  73.  
  74.     <!-- Item Price -->
  75.     <td class="price">
  76.       {{ variant.price | money }}
  77.     </td>
  78.  
  79.     <!-- Sub Total -->
  80.     <td class="subtotal">$<span>0</span></td>
  81.  
  82.   </tr>
  83.  
  84.   {% endfor %}
  85.  
  86.   {% endfor %}
  87.  
  88. </table>
  89.  
  90. <!-- Product and Price Total -->
  91. <div class="order-form-totals">
  92.   <div class="product_total">
  93.     <strong>Product Total:</strong> <span class="product-total-amount">0</span>
  94.   </div>
  95.  
  96.   <div class="order_total">
  97.     <strong>Order Total:</strong> <span class="order-total-amount">$<span>0</span></span>
  98.   </div>
  99.  
  100.   <div>
  101.     <input type="submit" value="Add to Cart" class="btn" id="add-items" />
  102.   </div>
  103. </div>
  104.  
  105.  
  106. <script>
  107.  
  108.   $(document).ready(function () {
  109.  
  110.     //Start with an empty array of items
  111.     Shopify.queue = [];
  112.  
  113.  
  114.     //Watch for all changes on quantity inputs
  115.     $('.quantity input').on('input',function() {
  116.  
  117.       //Set an initial flag for a new item
  118.       var newItem = true;
  119.  
  120.       //Declare product property variables
  121.       var price = $(this).attr('data-variant-price');
  122.       var quantity = parseInt($(this).val(), 10) || 0;
  123.       var variant = $(this).attr('data-variant');
  124.       var totalQuantity = $('.product-total-amount');
  125.       var totalPrice = $('.order-total-amount span');
  126.      
  127.            
  128.       //Function to update the subtotal price, total item quantity, and total price
  129.       var totalQuantityCount = 0;
  130.       var totalPriceAmount = 0;
  131.      
  132.       function updateTotals($element, prc, qty) {
  133.         //Traverse DOM to find subtotal field
  134.         var $subtotal = $($element).parent().siblings('.subtotal').find('span')
  135.         //Update subtotal column
  136.         $subtotal.html((price * quantity).toFixed(2))
  137.        
  138.         //Update total quantity, and total order price elements      
  139.         for (var index in Shopify.queue) {
  140.           totalQuantityCount += Shopify.queue[index].quantity;
  141.           totalPriceAmount += Shopify.queue[index].quantity * Shopify.queue[index].price;
  142.         }
  143.         totalQuantity.html(totalQuantityCount);
  144.         totalPrice.html(totalPriceAmount.toFixed(2));
  145.       }
  146.  
  147.  
  148.       //Check the queue and add items
  149.       //If queue is empty, add the item and update totals
  150.       if(Shopify.queue.length <= 0) {
  151.         Shopify.queue.push( {
  152.           variantId: variant,
  153.           quantity: quantity,
  154.           price: price
  155.         });
  156.         updateTotals($(this), price, quantity);
  157.       }
  158.       //If queue contains items, check to see if the item exists already
  159.       //If item exists, update quantity values, totals, then exit
  160.       else if (Shopify.queue.length > 0) {
  161.         for (var index in Shopify.queue) {
  162.           if(parseInt(Shopify.queue[index].variantId) == variant) {
  163.             Shopify.queue[index].quantity = quantity;
  164.             newItem = false;
  165.             updateTotals($(this), price, quantity);
  166.             return;
  167.           }
  168.         }
  169.         //If item doesn't exist in queue, add item to queue and update totals
  170.         if(newItem == true) {
  171.           Shopify.queue.push({
  172.             variantId: variant,      
  173.             quantity: quantity,
  174.             price: price
  175.           });
  176.           updateTotals($(this), price, quantity);
  177.         }
  178.       }
  179.  
  180.     });
  181.  
  182.     //Add item to cart AJAX request function
  183.     Shopify.addItem = function(variant,qty,callback) {  
  184.       var params = {
  185.         quantity: qty,
  186.         id: variant
  187.       };
  188.       $.ajax({
  189.         type: 'POST',
  190.         url: '/cart/add.js',
  191.         dataType: 'json',
  192.         data: params,
  193.         success: function(){
  194.           if(typeof callback === 'function'){
  195.             callback();
  196.           }
  197.         },
  198.         error: function(request){
  199.          alert(request.responseJSON.description + ' Please try again');
  200.          $('#add-items').val('Add to cart');
  201.         }
  202.       });
  203.     };
  204.  
  205.     Shopify.moveAlong = function($element) {
  206.  
  207.       // If we still have requests in the queue, let's process the next one.
  208.       if (Shopify.queue.length) {
  209.         var request = Shopify.queue.shift();
  210.         Shopify.addItem(request.variantId, request.quantity, Shopify.moveAlong);
  211.  
  212.       }
  213.       // If the queue is empty, redirect to the cart page.
  214.       else {
  215.         document.location.href = '/cart';
  216.       }
  217.     };
  218.  
  219.     //Run when clicking Add to Cart
  220.     $("#add-items").click(function(e) {
  221.       e.preventDefault();
  222.       Shopify.moveAlong($(this));
  223.       $(this).val('Adding items...');
  224.     });
  225.  
  226.     //Function to hide image column if user chooses
  227.     $('.hide-images').click(function() {
  228.       $('.image-header, .product-images').toggle();
  229.       if ($('.hide-images').text() === 'Hide Images') {
  230.         $('.hide-images').text('Show Images');
  231.       } else $(this).text('Hide Images');
  232.  
  233.     });
  234.   });
  235.  
  236. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top