[FIXED] How can I get information from an alternative cart template with custom values in Shopify?

Issue

I have already deduced the values I need through the product.json, but in my opinion, this is the worst possible option. Because the client-side needs to process a lot of unnecessary information. In addition, with each new product or option, requests are increasing. Actually, here is the part of the script that performs this function:

  var CompareTotal = 0;

$.each(cart.items, function(index, cartItem) {

  var varID = cartItem.variant_id;
  var comparePrice= '';
  var TotalcomparePrice = '';

  $.ajax({
    url: '/products/' + cartItem.handle + '.js', 
    dataType: 'json',
    async: false, 
    success: function(product){ 
      product.variants.forEach(function(variant) {
        if ( variant.id == varID && variant.compare_at_price !== 0){
          comparePrice = variant.compare_at_price;
          TotalcomparePrice = cartItem.quantity * comparePrice;
       CompareTotal = CompareTotal + TotalcomparePrice;             
          return false;  
        }
      });
     }
  });});

To improve and speed up these processes, I created an alternative cart template with the values I need. Now, the task is to deduce these values by replacing the previous method. The situation is complicated by the fact that I can not use dataType: 'JSON', since the default data will be returned from the server-side. This is what the alternative template looks like:

{ "token": "eacf539f884b717a2a74ac775b9b8923", "note": "", "attributes": {}, "original_total_price": 2390, "total_price": 2390, "total_discount": 0, "total_weight": 0.0, "item_count": 2, "items": [{ "id": 31286186180719, "properties": { }, "quantity": 2, "variant_id": 31286186180719, "key": "31286186180719:404d70730b155abbf5e62b28445537ae", "title": "RO - 1. Darkest Brown \u0026amp; Dark Auburn Mix", "compare_at_price": 1595, "compare_line_price": 3190, "price": 1195, "original_price": 1195, "discounted_price": 2390, "line_price": 2390, "original_line_price": 2390, "total_discount": 0, "discounts": [], "sku": "31593080-233", "grams": 0, "vendor": "Newellar", "taxable": true, "product_id": 4380382494831, "gift_card": false, "url": "\/products\/ro?variant=31286186180719", "image": "\/1.jpg?v=1584483449", "handle": "royal-messy-hair-bun", "requires_shipping": true, "product_type": "", "product_title": "RO", "variant_title": "1. Darkest Brown \u0026 Dark Auburn Mix", "variant_options": ["1. Darkest Brown \u0026 Dark Auburn Mix"] } ], "total_compare_price": 3190, "currency": "EUR", "items_subtotal_price": 2390, "cart_level_discount_applications": [] }

The last thing I managed to do was implement the request and get all the necessary information in console log. This goes like this:

$.ajax({
type: 'GET',
url: '/cart?view=data',
success: function(response) {
    json_response = JSON.parse(response);
    console.log( 'response', json_response );
},
error: function(status) {
    console.warn( 'ERROR', status );
}});

It remains to get the value of compare_line_price for each product and total_compare_price for cart. Then, using handlebars, I can display them. Unfortunately, I did not learn anything from this, I am self-taught, so every step in this direction is difficult. I hope someone can tell me what to do next.

    {%- layout none -%}
{%- assign cartJson = cart | json -%}
{%- assign cartToken = cartJson | split:'token":"' | last | split:'"' | first | json -%}
{% assign total_cart_compare_price = 0 %}
{
    "token": {{ cartToken }},
    "note": {{ cart.note | json }},
    "attributes": {{ cart.attributes | json }},
    "original_total_price": {{ cart.original_total_price | json }},
    "total_price": {{ cart.total_price | json }},
    "total_discount": {{ cart.total_discount | json }},
    "total_weight": {{ cart.total_weight | json }},
    "item_count": {{ cart.item_count | json }},
    "items": [
        {%- for item in cart.items -%}
        {
        "id": {{ item.id | json }},
        "properties": {
            {%- for prop in item.properties -%}
            {{ prop | first | json }}:{{ prop | last | json }}{% unless forloop.last %},{% endunless %}
            {%- endfor %}
        },
        "quantity": {{ item.quantity | json }},
        "variant_id": {{ item.variant_id | json }},
        "key": {{ item.key | json }},
        "title": {{ item.title | json }},
        "compare_at_price": {{ item.variant.compare_at_price | json }},
        "compare_line_price": {{ item.variant.compare_at_price | times: item.quantity | json }},
        "price": {{ item.price | json }},
        "original_price": {{ item.original_price | json }},
        "discounted_price": {{ item.line_price | json }},
        "line_price": {{ item.line_price | json }},
        "original_line_price": {{ item.original_line_price | json }},
        "total_discount": {{ item.total_discount | json }},
        "discounts": {{ item.discounts | json }},
        "sku": {{ item.sku | json }},
        "grams": {{ item.grams | json }},
        "vendor": {{ item.vendor | json }},
        "taxable": {{ item.taxable | json }},
        "product_id": {{ item.product_id | json }},
        "gift_card": {{ item.gift_card | json }},
        "url": {{ item.url | json }},
        "image": {{ item.variant.image | json }},
        "handle": {{ item.product.handle | json }},
        "requires_shipping": {{ item.requires_shipping | json }},
        "product_type": {{ item.product.type | json }},
        "product_title": {{ item.product.title | json }},
        "variant_title": {{ item.variant.title | json }},
        "variant_options": {{ item.variant.options | json }}
        }{% unless forloop.last %},{% endunless %}
{% assign compare_price = item.variant.compare_at_price | times: item.quantity %} 
{% assign total_cart_compare_price = total_cart_compare_price | plus: compare_price %}
        {%- endfor -%}
    ],
    "total_compare_price": {{ total_cart_compare_price | json }},
    "currency": {{ cart.currency.iso_code | json }},
    "items_subtotal_price": {{ cart.items_subtotal_price | json }},
    "cart_level_discount_applications": {{ cart.cart_level_discount_applications | json }}
}

Alternative cart template looks like this.

Solution

Update your cart liquid to the following:

{%- layout none -%}
{%- assign cartJson = cart | json -%}
{%- assign cartToken = cartJson | split:'token":"' | last | split:'"' | first | json -%}
{% assign total_cart_compare_price = 0 %}
{
    "token": {{ cartToken }},
    "note": {{ cart.note | json }},
    "attributes": {{ cart.attributes | json }},
    "original_total_price": {{ cart.original_total_price | json }},
    "total_price": {{ cart.total_price | json }},
    "total_discount": {{ cart.total_discount | json }},
    "total_weight": {{ cart.total_weight | json }},
    "item_count": {{ cart.item_count | json }},
    "items": [
        {%- for item in cart.items -%}
        {
        "id": {{ item.id | json }},
        "properties": {
            {%- for prop in item.properties -%}
            {{ prop | first | json }}:{{ prop | last | json }}{% unless forloop.last %},{% endunless %}
            {%- endfor %}
        },
        "quantity": {{ item.quantity | json }},
        "variant_id": {{ item.variant_id | json }},
        "key": {{ item.key | json }},
        "title": {{ item.title | json }},
        "compare_at_price": {{ item.variant.compare_at_price | json }},
        "compare_line_price": {{ item.variant.compare_at_price | times: item.quantity | json }},
        "price": {{ item.price | json }},
        "original_price": {{ item.original_price | json }},
        "discounted_price": {{ item.line_price | json }},
        "line_price": {{ item.line_price | json }},
        "original_line_price": {{ item.original_line_price | json }},
        "total_discount": {{ item.total_discount | json }},
        "discounts": {{ item.discounts | json }},
        "sku": {{ item.sku | json }},
        "grams": {{ item.grams | json }},
        "vendor": {{ item.vendor | json }},
        "taxable": {{ item.taxable | json }},
        "product_id": {{ item.product_id | json }},
        "gift_card": {{ item.gift_card | json }},
        "url": {{ item.url | json }},
        "image": {{ item.variant.image | json }},
        "handle": {{ item.product.handle | json }},
        "requires_shipping": {{ item.requires_shipping | json }},
        "product_type": {{ item.product.type | json }},
        "product_title": {{ item.product.title | json }},
        "variant_title": {{ item.variant.title | json }},
        "variant_options": {{ item.variant.options | json }}
        }{% unless forloop.last %},{% endunless %}

{%- if item.variant.compare_at_price != blank -%}
  {%- assign compare_price = item.variant.compare_at_price | times: item.quantity -%}
{%- else -%}
  {%- assign compare_price = item.line_price -%}
{%- endif -%}
{% assign total_cart_compare_price = total_cart_compare_price | plus: compare_price %}

        {%- endfor -%}
    ],
    "total_compare_price": {{ total_cart_compare_price | json }},
    "currency": {{ cart.currency.iso_code | json }},
    "items_subtotal_price": {{ cart.items_subtotal_price | json }},
    "cart_level_discount_applications": {{ cart.cart_level_discount_applications | json }}
}

Then try to use the following AJAX request:

$.ajax({
  type: 'GET',
  url: '/cart?view=data',
  success: function(response) {
    json_response = JSON.parse(response);
    console.log( 'response', json_response );

    // Here's your total compare price
    console.log( 'total_compare_at_price', json_response.total_compare_price );
  },
  error: function(status) {
    console.warn( 'ERROR', status );
  }
});

Answered By - Vladimir

Answer Checked By - David Goodson (PHPFixing Volunteer)