d
Topic
Posts:
42
August 10, 2015

Adding Variant Descriptions with Metafields and ShopifyFD - So Close... This post is outdated

Hello,

I am trying to add in a Model Number to my product variants that would change with the drop down boxes, just like the price and the SKU number does. (Yes I would like to use SKU and a model number)

I am using the MetaFields Editor app
Here is what I have for each variant.
Namespace: ItemDescription
Key: itemdesc
Type: string
Value: SupremeXL45 (specific to the Varaint)

So then in my product.liquid file, here is the pertinent text.

Model #: <div class="VariantDescription"></div>

<script>
  Shopify.Image.preload({{ product.images | json }}, 'grande');
  var selectCallback = function(variant, selector) {        
if (variant) {
  $('.variant-sku').text(variant.sku);
   jQuery('.VariantDescription').html("{{ variant.metafields.ItemDescription.itemdesc }}");
}
else {
  $('.variant-sku').empty();
}

 

So this code "works" if the page is refreshed after a selection is made but it does not automatically change like the SKU and Price do.

I feel like I am very close. What am I missing?

Is it something like...

 {% assign variantdesc = variant.metafields.ItemDescription.itemdesc %}

   jQuery('.VariantDescription').html("{{ variantdesc }}");

or

   jQuery('.VariantDescription').html(variantdesc.???);

Any help please.

i
Replies
Alex Member
Posts:
1925
August 10, 2015
   jQuery('.VariantDescription').html("{{ variant.metafields.ItemDescription.itemdesc }}");

The problem with the line of code above is that it is grabbing the description for only one of the variants.  With each refresh, the code will grab the description of only the selected variant.  That means that the descriptions for the other variants are nowhere to be found.  Instead, you will want to create an array (or hash table) with the descriptions of all of the variants.

  var itemdesc = {};
  {% for variant in product.variants %}
    itemdesc[{{ variant.id }}] = {{ variant.metafields.ItemDescription.itemdesc | json }};
  {% endfor %}

Now you can use Javascript to call the description for any of the variants.

    $('.VariantDescription').html(itemdesc[variant.id]);

In the end, you should have something like this:

Model #: <div class="VariantDescription"></div>

<script>

  var itemdesc = {};
  {% for variant in product.variants %}
    itemdesc[{{ variant.id }}] = {{ variant.metafields.ItemDescription.itemdesc | json }};
  {% endfor %}

  Shopify.Image.preload({{ product.images | json }}, 'grande');
  var selectCallback = function(variant, selector) {
if (variant) {
  $('.variant-sku').text(variant.sku);
  $('.VariantDescription').html(itemdesc[variant.id]);
}
else {
  $('.variant-sku').empty();
  $('.VariantDescription').empty();
}

I hope this helps. 

Posts:
42
Last edited August 10, 2015

Hi Alex. 

Thanks for your help. I am much closer now. I'll tinker around with it.

Alex Member
Posts:
1925
August 10, 2015

I don't notice anything incorrect about that part.

If you can, you might want to provide a link to the shop.  That will make it easier for me to help you.

Posts:
42
Last edited August 10, 2015

Thanks for your help. I tinkered around and solved it. Thanks!

Posts:
42
Last edited August 11, 2015

Hi Alex,

Ok, that works great now.  But created a new problem....

It broke my code for hiding unavailble variants based on menu selection...

https://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options

 

Here is my new code 

<script>   
  var varmodel = {};
  {% for variant in product.variants %}
  varmodel[{{ variant.id }}] = {{ variant.metafields.ItemDescription.model | json }};
  {% endfor %}
  Shopify.Image.preload({{ product.images | json }}, 'grande');
  
  var selectCallback = function(variant, selector) {
    if (variant) {
  $('.variant-sku').text(variant.sku);
  $('.variant-model').html(varmodel[variant.id]);
}
else {
  $('.variant-sku').empty();
  $('.variant-model').empty();
}
    timber.productPage({
      moneyFormat: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
  };

and immediately following that is this...Hiding Unavailable Variant, which doesnt work now.

jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
{% if product.available and product.options.size > 1 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}

 

Any thoughts?

Alex Member
Posts:
1925
August 11, 2015

I can't tell from just those snippets.  I will probably need to see the full page.

Posts:
42
August 11, 2015

Thanks for your help!

<div itemscope itemtype=";

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% if collection %}
    {% include 'breadcrumb' %}
  {% endif %}

  <div class="grid">
    <div class="grid-item {% if settings.product_layout == "large_image" %}large--seven-twelfths{% else %}large--five-twelfths{% endif %}">
      <div class="product-photo-container" id="productPhoto">
           {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% if product.images.size == 0 %}
        <!-- If the product has no image, display custom placeholder -->
        <img src="{{ 'no-image_sm.gif' | asset_url }}">
{% else %}
             <img id="productPhotoImg" src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
 {% endif %}      </div>

      
              {% comment %}To Disable multiple images, start comment this out here {% endcomment %}
        
      {% if product.images.size > 1 %}
        <ul class="product-photo-thumbs grid-uniform" id="productThumbs">

          {% for image in product.images %}
            <li class="grid-item large--one-quarter medium-down--one-quarter">
              <a href="{{ image.src | img_url: '1024x1024' }}" class="product-photo-thumb">
                <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
              </a>
            </li>
          {% endfor %}
              {% comment %}To Diable multiple images, end comment this out here {% endcomment %}
        </ul>
      {% endif %}
    

    </div>

    <div class="grid-item {% if settings.product_layout == "large_image" %}large--five-twelfths{% else %}large--seven-twelfths{% endif %}">

      <h1 class="h2" itemprop="name">{{ product.title }}</h1>
      {% if settings.product_vendor_enable %}
        <p class="h5">{{ product.vendor }}</p>
      {% endif %}

      <div itemprop="offers" itemscope itemtype=";

        <meta itemprop="priceCurrency" content="{{ shop.currency }}">

        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        
        {% comment %}
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm">
{% endcomment %}
        
          <div class="product-options">
            <select name="id" id="productSelect" class="product-variants">
              {% for variant in product.variants %}
              <option{% if variant == product.selected_or_first_available_variant %} selected{% endif %}{% unless variant.available %} disabled{% endunless %} value="{{ variant.id }}">
                {% if variant.available %}
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
              {% endfor %}
            </select>

            {% if settings.product_quantity_enable %}
              <label for="quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
            {% endif %}
          </div>
         
          <strong><span class="variant-model"></span></strong><br>
          Sku: <span class="variant-sku"> </span>
          {% assign variant = product.selected_or_first_available_variant %}
          <p class="h2">
            {% if product.compare_at_price_max > product.price %}
              <span id="comparePrice" class="compare-price">
                <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                {{ variant.compare_at_price | money }}
              </span>
            {% endif %}
            <span id="productPrice" itemprop="price">
              {% if product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
              {% endif %}
              {{ variant.price | money }}
            </span>
          </p>
 {% comment %}

          <button type="submit" name="add" id="addToCart" class="btn">
            <span id="addToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
                 {% endcomment %}
          <a href="mailto:{{ shop.email }}">Contact us</a> for a quote.<p>
          {% if settings.product_quantity_message %}
            <span id="variantQuantity" class="variant-quantity"></span>
          {% endif %}
        </form>
      </div>
      <hr>
      <div class="product-description rte" itemprop="description">           
        {{ product.description }}
      </div>
      {% if settings.social_sharing_products %}
        {% include 'social-sharing' %}
      {% endif %}

    </div>
  </div>
  {% if settings.related_products_enable %}
    {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
    {% include 'related-products' %}
  {% endif %}
</div>

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>

       
  var varmodel = {};
  {% for variant in product.variants %}
  varmodel[{{ variant.id }}] = {{ variant.metafields.ItemDescription.model | json }};
  {% endfor %}
     

  Shopify.Image.preload({{ product.images | json }}, 'grande');
  
  var selectCallback = function(variant, selector) {
    if (variant) {
  $('.variant-sku').text(variant.sku);
  $('.variant-model').html(varmodel[variant.id]);
}
else {
  $('.variant-sku').empty();
  $('.variant-model').empty();
}
    timber.productPage({
      moneyFormat: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
  };
    jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
{% if product.available and product.options.size > 1 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}


    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
</script>

{% if settings.product_image_zoom %}
  {{ 'jquery.zoom.min.js' | asset_url | script_tag }}
{% endif %}

 

So this bit of code is what hides makes the unavailble variants hidden after a drop down selection.  

jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
{% if product.available and product.options.size > 1 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}

 

Posts:
42
August 12, 2015

Any thoughts?

Posts:
1125
August 12, 2015

Missing > on that first line still?

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.