Variant inventory next_incoming_date for selectCallback

Highlighted
New Member
2 0 0

Hello, I’m having trouble accessing a variant.incoming and variant.next_incoming_date. 

I can get it fine on page load using liquid {{ product.selected_or_first_available_variant.next_incoming_date }} but I can’t seem to access variant.incoming or variant.next_incoming_date from the selectCallback. The reason I want it is to a pre-order product template for a client. 

Are variant.incoming and variant.next_incoming_date not in the API yet?

I’m using a modified version of Timber for my theme that I’m developing. 

Here’s a relevant portion of my timber.productPage function:

timber.productPage = function (options) {
  var moneyFormat = options.money_format,
      variant = options.variant,
      selector = options.selector;

  // Selectors
  var $productImage = $('#ProductPhotoImg'),
      $productImageLink = $('#ProductPhotoLink'),
      $addToCart = $('#AddToCart'),
      $productPrice = $('#ProductPrice'),
      $comparePrice = $('#ComparePrice'),
      $quantityElements = $('.quantity-selector, label + .js-qty'),
      $addToCartText = $('#AddToCartText');
      $nextInventoryDate = $('#pre-order-date');

  if (variant) {

    console.log(variant);

    // Select a valid variant if available
    if (variant.available) {
      // Available, enable the submit button, change text, show quantity elements
      $addToCart.removeClass('disabled').prop('disabled', false);
      $addToCartText.html({{ 'products.product.add_to_cart' | t | json }});
      $quantityElements.show();

      if (variant.inventory_policy && variant.inventory_quantity <= 0) {
        $addToCartText.html("Pre-Order");
        //this works as expected
      }

      if (variant.incoming) {
        $nextInventoryDate.html(variant.next_incoming_date);
        //never returns true even when there is an active transfer 
      }
    }
  }
};

When I send the variant to the console log incoming and next_incoming_date are absent. 

0 Likes
New Member
2 0 0

In case this helps anyone, I figured it out!

Based on this post: 
https://ecommerce.shopify.com/c/ecommerce-design/t/using-variant-incoming-337971

I manually injected the incoming and next_incoming_date values into the product json on page load and then they’re available for access through JS. Well once you send the new json values to the Shopify.OptionSelectors function towards the bottom there, which I stored in the productJson variable.

 

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  var productJson = {{ product | json }};
  {% for variant in product.variants %}
   productJson.variants[{{ forloop.index0 }}].incoming = {{ variant.incoming | json }};
   productJson.variants[{{ forloop.index0 }}].next_incoming_date = {{ variant.next_incoming_date | date: '%B %d, %Y' | json }};
  {% endfor %}

  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: productJson,
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
  });
</script>
 

Then in the timber.productPage function I could do something like this: 

if (variant.incoming && variant.next_incoming_date) {
    //There is incoming inventory and an incoming date set
    $nextInventoryDate.val(variant.next_incoming_date);
}

 

I believe this solution is future proof in case incoming and next_incoming_date get included in the Liquid drop at a later date.

Is that something that would be a possibility?

It would just rewrite the same values. 

If this isn't true, let me know. Thanks! 

0 Likes