Displaying custom value on cart page Shopify

colinashvin
Excursionist
30 0 9

Hello,

 

I am working on a website and I have a question regarding the cart page.

 

In my store, we have 3 products, :

  • 2 of the products are individuals with current price only NO compare price.
  • the third product is a bundle and it has a before price and current price therefore it activates (compare-at-price)

Next is an image to show an example for the cart having the two types or prices:

1.PNG

 

The following image has numbering to ease my explanation for the question:

2.PNG

 

I want to dynamically display the difference between the numbers in (1), based on the above image I want to display 600 inside (3) or exactly after the text "You're saving".

 

a few notes on this before I show the codes:

  • 2 is a subtotal snippet that will update on changing quantity of items in the cart, the subtotal number updates and works properly:
  • I want to display the value in (3) for each item that has a compare price to it, with that said, the third product does have variants and the variants will show up as individual cart item.

With that said I will introduce the codes for all relevant sections.

 

1. Code for the cart itself (cart.liquid) :

 

<!-- /sections/cart.liquid -->
{%- liquid
  assign hide_quantity = 'quantity--hide'
  if settings.cart_show_quantity
    assign hide_quantity = ''
  endif
  
  assign ajax_disable = false
  assign no_ajax_class = ''
  if settings.cart_style == 'compatible'
    assign ajax_disable = true
    assign no_ajax_class = 'no--ajax'
  endif

  assign full_init = ''
  assign empty_init = 'cart--hidden'
  if cart.item_count == 0
    assign empty_init = ''
    assign full_init = 'cart--hidden'
  endif
-%}

<div class="cart__template {{ no_ajax_class }} {{ hide_quantity }}"  data-section-id="{{ section.id }}" data-section-type="cart" data-ajax-disable="{{ ajax_disable }}">
  {% comment %} Cart is empty {% endcomment %}
  <div class="{{ empty_init }}" data-cart-empty>
    {% render 'cart-empty' %}
  </div>
  {% comment %} Cart is full {% endcomment %}
  <div class="wrapper pt2 pb4 {{ full_init }}" data-cart-form data-cart-loading>
    <form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
{% comment %}       <h3 class="h3--body">{{ 'cart.general.title' | t }}</h3>
      <div class="errors" data-form-errors style="display: none;"></div>
      <div class="cart__items__grid cart__heading__wrapper">
        <div class="cart__heading__back">
          <a href="{{ routes.all_products_collection_url  }}" class="cart__heading cart__return">
            {% render 'icon-arrow-long-left' %}
            &nbsp;
            {{ 'cart.general.continue_browsing' | t }}
          </a>
        </div>
        <div class="cart__items__price">
          <p class="cart__heading">{{ 'cart.label.price' | t }}</p>
        </div>
        <div class="cart__items__quantity">
          <p class="cart__heading">{{ 'cart.label.quantity' | t }}</p>
        </div>
        <div class="cart__items__total">
          <p class="cart__heading">{{ 'cart.label.total' | t }}</p>
        </div>
      </div> {% endcomment %}
      
      <div class="template__cart__body">
        <div class="errors" data-form-errors style="display: none;"></div>


        <div class="template-cart-discount-subtotal .template__cart__footer">
          <div class="page__footer__subtotal" data-cart-subtotal>
<!--             Sahel -->
                {% render 'cart-subtotal' %}
          </div>

        
        </div>
        <div class="cart__footer__total">
            
        <div class="cart__page__shipping">
                      {% assign free_shipping_text = block.settings.message | default: settings.message %}
        {% assign is_enable = false %}
        {% assign show_wheel = true %}
        
        {% if block.settings.show_wheel == false %}
          {% assign show_wheel = false %}
        {% endif %}
        
        {% if block.settings.message != blank %}
          {% assign is_enable = true %}
        {% endif %}
        
        {% if settings.show_free_shipping_message and settings.free_shipping_limit != blank and free_shipping_text != blank %}
          {% assign is_enable = true %}
        {% endif %}
        
        {% if is_enable %}
          {% assign limit = settings.free_shipping_limit | plus: 0 %}
          {% assign limit_currency = limit | times: 100 %}
          {% assign subtotal_without_currency = cart.total_price | plus: 0 | divided_by: 100 %}
        
          {% capture left_to_spend %}
            <span data-left-to-spend>{{ limit_currency | minus: cart.total_price | money_without_trailing_zeros }}</span>
          {% endcapture %}
        
          {% assign free_shipping_message = free_shipping_text | replace: '||amount||', left_to_spend %}
          {% assign qualified_shipping_message = 'cart.general.qualified_shipping_message' | t %}
          {% assign class_message = '' %}
        
          {% if subtotal_without_currency >= limit %}
            {% if qualified_shipping_message != blank %}
              {% assign class_message = 'is-success' %}
            {% else %}
              {% assign class_message = 'is-hidden' %}
            {% endif %}
          {% elsif subtotal_without_currency == 0 %}
            {% comment %} {% assign class_message = 'is-hidden' %} {% endcomment %}
          {% endif %}

          <div class="div-block-11">
             <div id="barBox"  class="div-block-10" style=" width: {{ cart.total_price | remove: '00' | divided_by: 2 }}% ;"></div>
          </div>
          
          <p class="cart__message {{ class_message }}" data-cart-message="{% if qualified_shipping_message != blank %}true{% else %}false{% endif %}" data-limit="{{ limit }}">
            {% if show_wheel %}  
              {% assign percent = limit | minus: subtotal_without_currency | times: 100 | divided_by: limit %}
              {% assign percent = 100 | minus: percent %}
        
              {% if percent > 100 %}
                {% assign percent = 100 %}
              {% endif %}
        
              <small class="cart__graph">
                {% for i in (1..6) %}
                  <small class="cart__graph-dot cart__graph-dot--{{ i }}"></small>
                {% endfor %}
                {%- assign stroke_dashoffset = '87.96459430051421' -%}
                {%- if settings.cart_style == 'compatible' -%}
                  {%- assign math_pi = 3.14159265359 -%}
                  {%- assign stroke_circumference = 28 | times: math_pi -%}
                  {%- assign stroke_calculate = percent | times: stroke_circumference -%}
                  {%- assign stroke_calculate = stroke_calculate | divided_by: 100 | divided_by: 2 -%}
                  {%- assign stroke_dashoffset = stroke_circumference | minus: stroke_calculate -%}
                {%- endif -%}
                
                <svg height="18" width="18">
                  <circle r="7" cx="9" cy="9" />
                  <circle class="cart__graph-progress" stroke-dasharray="87.96459430051421 87.96459430051421" style="stroke-dashoffset: {{ stroke_dashoffset }}" data-cart-progress data-percent="{{ percent }}" r="7" cx="9" cy="9" />
                </svg>
              </small>
            {% endif %}
        
            {% if qualified_shipping_message != blank %}
              <span class="cart__message-success">{{ qualified_shipping_message }}</span>
            {% endif %}
        
            <span class="cart__message-default">
              {{ free_shipping_message }}
            </span>
          </p>
        {% endif %}
              </div> 
<!--             <p class="cart__footer__small">{{ 'cart.general.shipping_at_checkout' | t }}</p> -->
          </div>

          

        <div class="product__text-with-icon" {{ block.shopify_attributes }}>
         <div class="hs-pill product-people__circle"></div>
         <p><span id="people-num1"></span>{{ 'people are currently checking out' }}</p>
        </div>
        
        <div data-cart-form class="cart-items-wrapper">
            {% comment %}
              The following snippet is refreshed via ajax with
              cart.items.liquid when the quantity is adjusted.
            {% endcomment %}
            <div data-line-items>
            {% render 'cart-line-items' %}
            </div>
        </div>

        
          
        
      

        
      


       
                    
        <div class="template__cart__footer" data-cart-bottom>

          <div class="cart__footer__notes">
            {%- if settings.cart_notes_enable -%}
              <label class="cart__notes__label" for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full" id="CartSpecialInstructions" data-cart-note>{{ cart.note }}</textarea>
            {%- endif -%}
          </div>
          <div class="cart__footer__shipping">
            {%- if settings.cart_shipping_enable -%}
              {% render 'cart-shipping' %}
            {%- endif -%}
          </div>
          


          <div class="cart__footer__checkout">
            
            <button type="submit" name="checkout" class="btn btn--primary btn--large uppercase checkout__button">
              {{ 'cart.general.checkout' | t }}
            </button>
            <ul class="footer-payment payment-icons inline-list">
              {% for type in shop.enabled_payment_types %}
              <li>
                {{ type | payment_type_svg_tag: class: 'payment-icon' }}
                <span class="visually-hidden">{{ type | capitalize | replace: '_', ' ' }}</span>
              </li>
              {% endfor %}
            </ul>
          </div>

          <div class="cart__footer__update">
            <span class="cart__update" data-update-button>
              <span class="cart__update__icon">{% render 'icon-sync' %}</span>
              <button type="submit" name="update" class="text-link">
                {{ 'cart.general.update' | t }}
              </button>
            </span>
          </div>

          {% if additional_checkout_buttons and settings.cart_show_additional_buttons %}
            <div class="cart__footer__additional">
              <div class="additional-checkout-buttons">
                {{ content_for_additional_checkout_buttons }}
              </div>
            </div>
          {% endif %}
        
          
        </div>

        
       
        {% render 'Upsell-Image' %}
          
        
      </div>
    </form>
  </div>
</div>

 2. Code for the line.item (all thiv surrounding (1)):

{%- assign pair_products_index = '' -%}
{%- assign cart_products = '' -%}

<div id="drawer-cart-toggler" class="cart__items" >

  {% for line_item in cart.items %}
    <div class="cart__items__row" data-cart-item>
      <div class="item--loadbar" style="display: none;">&nbsp;</div>
      <div class="cart__items__grid" data-item>
          <div class="cart__items__title">
          <p>
            <a href="{{ line_item.url }}">
              {{ line_item.product.title }}
            </a>

          </p>
    
          <div class="cart__items__meta">
            {% comment %} Vendor if enabled {% endcomment %}
            {% if settings.cart_vendor_enable %}
              <p class="small">{{ line_item.vendor }}</p>
            {% endif %}

            {% comment %} Variant as name/name/name {% endcomment %}
            {% unless line_item.product.has_only_default_variant %}
              <p class="small">{{ line_item.variant.title }}</p>
            {% endunless %}

            {% comment %} Subscription plan name {% endcomment %}
            {% if line_item.selling_plan_allocation %}
              <p class="small">{{ line_item.selling_plan_allocation.selling_plan.name }}</p>
            {%- endif -%}

            {% comment %} Line item properties, including files {% endcomment %}
            {% assign property_size = line_item.properties | size %}
            {%- if property_size > 0 -%}
              {%- for p in line_item.properties -%}
                {%- assign property_first_char = p.first | slice: 0 -%}
                {%- if p.last != blank and property_first_char != '_' -%} 
                  <p class="small">
                    <span>{{ p.first }}: </span>
                    <span>
                      {%- if p.last contains '/uploads/' -%}
                        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                      {%- else -%}
                        {{ p.last }}
                      {%- endif -%}
                    </span>
                  </p>
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
          </div>
        </div>
    
         <div class="cart__items__image">
          <a href="{{ line_item.url }}">
            <img class="cart__items__img" src="{{ line_item | img_url: '180x' }}" alt="{{ line_item.title | strip_html | escape }}">
          </a>
        </div>
    
        <div class="cart-item-numbers">
        <div class="cart__items__price">
          <p class="line__price">
            {%- assign discounted = false -%}
            {%- if line_item.original_price > line_item.final_price -%}
              {%- assign discounted = true -%}
            {%- endif -%}
            {%- assign sale = false -%}
            {%- if line_item.variant.compare_at_price > line_item.variant.price -%}
              {%- assign sale = true -%}
            {%- endif -%}
            {% assign  quantity-multiplier = line_item.quantity %}

            {%- if sale -%}
              <del class="sale">was {{ line_item.variant.compare_at_price | times: quantity-multiplier | money}}</del>
            {%- endif -%}
            {%- if discounted -%}
              <del class="discount">was {{ line_item.original_price | times: quantity-multiplier | money }}</del>
            {%- endif -%}

            {%- if sale or discounted -%}
              <mark>{{ line_item.final_price | times: quantity-multiplier | money }}</mark>
            {%- else -%}
              {{ line_item.final_price | times: quantity-multiplier | money }}
            {%- endif -%}
          </p>

          {% if line_item.unit_price %}
            {% capture unit_price_separator %}
              <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
            {% endcapture %}
            {% capture unit_price_base_unit %}
              {% if line_item.unit_price_measurement.reference_value != 1 %}
                {{ line_item.unit_price_measurement.reference_value }}
              {% endif %}
              {{ line_item.unit_price_measurement.reference_unit }}
            {% endcapture %}
            <p class="line__price">
              <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
              <span>{{ line_item.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
            </p>
          {% endif %}
        </div>
     {% assign  single-prouct-price = line_item.original_price %}

        <div class="cart__items__quantity">
          <div class="quantity__wrapper" data-quantity-selector>
            <button 
               
              class="quantity__button quantity__button--minus" 
              data-decrease-quantity type="button"
              {% if  line_item.product.title == 'The Ultimate Whitening Bundle' %}
               onclick="editBar({{ cart.total_price | minus: single-prouct-price}}); updateSavings({{ line_item.variant.compare_at_price | times: quantity-multiplier}});"
              {% else %}
               onclick="editBar({{ cart.total_price | minus: single-prouct-price}})"
              {% endif %}
            >
              &minus;
            </button>
            <label for="updates_{{ line_item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
            <input data-quantity-input
              data-update-cart="{{ line_item.key }}"
              class="quantity__input"
              type="number"
              min="0"
              size="4"
              pattern="[0-9]*"
              id="updates_{{ line_item.key }}"
              name="updates[]"
              value="{{ line_item.quantity }}"
      
              disabled/>
            <button 
              
              class="quantity__button quantity__button--plus" 
              data-increase-quantity type="button"
              {% if  line_item.product.title == 'The Ultimate Whitening Bundle' %}
               onclick="editBar({{ cart.total_price | plus: single-prouct-price}}); updateSavings({{ line_item.variant.compare_at_price | times: quantity-multiplier}});"
              {% else %}
               onclick="editBar({{ cart.total_price | plus: single-prouct-price}})"
              {% endif %}
              >
                +
              </button>
          </div>
                
            
        </div>

      
        </div>
        {% assign multiplier = single-prouct-price | times: quantity-multiplier %}
        <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0"
          class="cart__items__remove" 
          data-remove-key="{{ line_item.key }}"
          tabindex="0"
          onclick="editBar({{ cart.total_price | minus: multiplier }})">
          <span class="cart__remove__icon">
            {%- render 'icon-bin' -%}
          </span>
          
        </a>
         
        {% render 'cart-expand', product: line_item.product %}

        {% if discounted and line_item.quantity >= 1 %}
          {%- for discount in line_item.line_level_discount_allocations -%}
            <div class="cart__items__savings">
              <span class="item__total__savings">
                <span class="cart__icon--tags">
                  {% render 'icon-tags' %}
                </span>
                {{ 'cart.general.savings' | t }}
                {{ discount.amount | money_without_trailing_zeros }}
                {{ 'cart.general.with' | t }}
                {{ discount.discount_application.title }}
              </span>
            </div>
          {%- endfor -%}
        {% endif %}
      </div>
    </div>

    {%- assign cart_products = cart_products | append: line_item.product.id | append: ',' -%}
    {%- assign upsell = line_item.product.metafields.theme.upsell -%}

    {%- if upsell.value != nil and upsell.type == 'product_reference' -%}
      {%- assign pair_products_index = pair_products_index | append: forloop.index0 | append: ',' -%}
    {%- endif -%}
  {% endfor %}
</div>

{%- if pair_products_index != '' -%}
  {%- assign pair_products_index = pair_products_index | split: ',' -%}
  {%- assign cart_products = cart_products | prepend: ',' -%}

  {%- for index in pair_products_index -%}
    {%- assign arr_index = index | plus: 0 -%}
    {%- assign upsell_product = cart.items[arr_index].product.metafields.theme.upsell.value -%}
    
    {%- if cart_products contains upsell_product.id or upsell_product.available == false -%}
      {%- continue -%}
    {%- endif -%}

    {%- render 'upsell-product' upsell_product: upsell_product -%}

    {%- break -%}
  {%- endfor -%}
{%- endif -%}  

 <script>


function editBar(a) {
  console.log('updatebar' , a);

  a = a/200;
  
  var barBox = document.getElementById('barBox');
  barBox.style.width = a + "%";
  console.log('done' , a);

    
}
   function updateSavings(b) {
  console.log('updateSavings' , b);

  
  var cartSavings = document.getElementById('cartSavings');
  cartSavings.innerHTML = b;
  console.log('done' , b);

    
}

</script>

3. Code for the cart subtotal section (2):

{%- if cart.cart_level_discount_applications.size >= 0 -%}
  <div class="count-subtotal-wrapper">
   <p> Your cart</p>
   <p>
      <span class="cart__footer__value" data-cart-final>{{ cart.total_price | money }}</span>
   </p>
  </div>

    <p class="cart__footer__discount">
      <span class="cart__footer__label">You're saving </span>
      <span id="cartSavings" class="cart__footer__value"> </span>
    </p>

{%- endif -%}

 

The aim of this is to show to the customer the amount off money they are saving just by buying the bundle product.

Replies 0 (0)