Metafields in Ajax Cart

Remya
New Member
10 0 0

Hi.

I am curious if you can get products Meta Fields within the ajax cart? For example I have a Metafield for a Short Name, and would like to include that after the title of the product in the cart.

Any help is much appreciated. Thanks!

0 Likes
Jason
Shopify Expert
10360 158 2010

You can, but the process will differ from theme to theme.

In a general sense, since metafields are not included in the cart.js response you'll need to make your own alternate template that can return json, that also includes metafields.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Remya
New Member
10 0 0

Can you give any examples?

I'm using Admin ApI calls for managing my app.

How can I create alternate template

I have found only ajax-cart-template.liquid

 

<!-- /snippets/ajax-cart-template.liquid -->
{% comment %}

  This snippet provides the default handlebars.js templates for
  the ajax cart plugin. Use the raw liquid tags to keep the
  handlebar.js template tags as available hooks.

{% endcomment %}
  <script id="CartTemplate" type="text/template">
  {% raw %}
    <form action="/cart" method="post" novalidate class="cart ajaxcart">
      <div class="ajaxcart__inner ajaxcart__inner--has-fixed-footer">
        {{#items}}
        <div class="ajaxcart__product">
          <div class="ajaxcart__row" data-line="{{line}}">
            <div class="grid">
              <div class="grid__item one-quarter">
                <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a>
              </div>
              <div class="grid__item three-quarters">
                <div class="ajaxcart__product-name--wrapper">
                  <a href="{{url}}" class="ajaxcart__product-name">{{{name}}}</a>
                  {{#if variation}}
                    <span class="ajaxcart__product-meta">{{variation}}</span>
                  {{/if}}
                  {{#properties}}
                    {{#each this}}
                      {{#if this}}
                        <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
                      {{/if}}
                    {{/each}}
                  {{/properties}}
                </div>

                <div class="grid--full display-table">
                  <div class="grid__item display-table-cell one-half">
                    <div class="ajaxcart__qty">
                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" data-line="{{line}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
                        <span class="icon icon-minus" aria-hidden="true"></span>
                        <span class="fallback-text" aria-hidden="true">&minus;</span>
                      </button>
                      <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
                        <span class="icon icon-plus" aria-hidden="true"></span>
                        <span class="fallback-text" aria-hidden="true">+</span>
                      </button>
                    </div>
                  </div>
                  <div class="grid__item display-table-cell one-half text-right">
                    {{#if discountsApplied}}
                      <small class="ajaxcart__price--strikethrough">{{{price}}}</small>
                      <span class="ajaxcart__price">
                        {{{discountedPrice}}}
                      </span>
                    {{else}}
                      <span class="ajaxcart__price">
                        {{{price}}}
                      </span>
                    {{/if}}
                  </div>
                </div>
                {{#if discountsApplied}}
                  <div class="grid--full display-table">
                    <div class="grid__item text-right">
                      {{#each discounts}}
                        <small class="ajaxcart__discount">{{this.title}}</small>
                      {{/each}}
                    </div>
                  </div>
                {{/if}}
              </div>
            </div>
          </div>
        </div>
        {{/items}}

        {% endraw %}{% if settings.cart_notes_enable %}{% raw %}
          <div>
            <label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
            <textarea name="note" class="input-full" id="CartSpecialInstructions">{{note}}</textarea>
          </div>
        {% endraw %}{% endif %}{% raw %}
      </div>
      <div class="ajaxcart__footer ajaxcart__footer--fixed">
        <div class="grid--full">
          <div class="grid__item two-thirds">
            <p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
          </div>
          <div class="grid__item one-third text-right">
            <p class="ajaxcart__subtotal">{{{totalPrice}}}</p>
          </div>
        </div>
        {{#if totalCartDiscount}}
          <p class="ajaxcart__savings text-center">{{{totalCartDiscount}}}</p>
        {{/if}}
        <p class="ajaxcart__note text-center">{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}</p>
        <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">
          {% endraw %}{{ 'cart.general.checkout' | t }}{% raw %} <span class="icon icon-arrow-right" aria-hidden="true"></span>
        </button>
      </div>
    </form>
  {% endraw %}
  </script>
  <script id="AjaxQty" type="text/template">
  {% raw %}
    <div class="ajaxcart__qty">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">&minus;</span>
      </button>
      <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">+</span>
      </button>
    </div>
  {% endraw %}
  </script>
  <script id="JsQty" type="text/template">
  {% raw %}
    <div class="js-qty">
      <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">&minus;</span>
      </button>
      <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
      <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">+</span>
      </button>
    </div>
  {% endraw %}
  </script>


Didn't find any template that return product params to cart.json

 

I'm using Brooklyn theme.

 

is there is any option to hide ajax cart by using Admin API ?

Thanks for checking this

0 Likes
Jason
Shopify Expert
10360 158 2010

The AJAX API is for the online storefront so I'm not sure what your plans are with the Admin API since that's related to the data of the store.

In any case, here's a simple alternate template example. You'll need to add all the rest of the info you need into this.

{%- layout none -%}
{
  "items":[
  {%- for item in cart.items -%}
    {
        "someValue": {{ item.product.metafields.foo.bar | json }}
    }{% unless forloop.last %},{% endunless %}
  {%- endfor -%}
  ]
}

For further reading:
https://help.shopify.com/themes/customization/store/create-alternate-templates

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Karthi
New Member
1 0 0

{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}

0 Likes