Need Javascript help for my free shipping progress bar

ChrisBeattie
Excursionist
41 0 14

I have made a shipping progress bar on the product page (with help from Coding With Jan on YouTube) which updates with ajax when someone adds to cart, or updates/removes the quantities from the cart drawer.

The problem that I have is I have made a green progress background that progresses as the customer add items to their cart e.g.

shipping bar.jpg

 

 

 

 

The shipping amount updates fine, and the success message when the shipping threshold is met also works fine with ajax, but the green bar will not update without a page refresh.

Here it the liquid code.

 

 

 

 

 

 

{% if section.settings.is_free_shipping_bar %}
            {% assign promote_txt = section.settings.promote_free_shipping_txt | escape %}
            {% assign unlocked_txt = section.settings.unlocked_free_shipping_txt | escape %}
            {% assign threshold = section.settings.free_shipping_threshold | times: 100 %}
  			{% assign shipping_quotient = settings.free_shipping_threshold | times: 100 | divided_by: 100 %}
  			{% assign shipping_procent = cart.total_price | divided_by: shipping_quotient | at_most: 100 %}
            {% assign value_left = threshold | minus: cart.total_price %}
            {% assign value_left_money = value_left | money %}
      <style>
        .shipping-bar {
          background-color: {{ section.settings.color_bg }};
          position:relative !important;
        }
        
        .shipping-bar-success {
          background-color: {{ section.settings.success_color_bg }};
        }
 
        .shipping-bar--link:hover {
          {% assign brightness = section.settings.color_bg | color_brightness %}
 
          {% if brightness <= 192 %}
            {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
            background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
          {% else %}
            {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
            background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
          {% endif %}
        }
 
        .shipping-bar__message {
          color: {{ section.settings.color_text }};
          padding: 10px 0;
          font-size: max(calc(var(--typeBaseSize) - 6px), 11px);
		  letter-spacing: 0.2em;line-height: 1.42;
 		  text-transform: uppercase;
          font-weight:bold;
          text-align: center;
          position: relative !important;
        }
        
        .free-shipping__progress {
          position:absolute !important;
          background-color: #25a799;
          left: 0!important;
          top: 0!important;
          height: 100% !important;
          width: {{shipping_procent}}%;
        }
      </style>
        
             <div class="shipping-bar" data-promote="{{promote_txt}}" data-unlocked="{{unlocked_txt}}" data-threshold="{{threshold}}" data-quotient="{{shipping_quotient}}" data-procent="{{shipping_procent}}">
               <div class="free-shipping__progress"></div>
  				{% if value_left <= 0 %}
                <p class="shipping-bar-success shipping-bar__message">{{unlocked_txt}}</p>
               {% else %}
                <p class="shipping-bar__message">{{promote_txt | replace:'[value]' , value_left_money}}</p>
               {% endif %}
            </div>
            
  
        {% else %}
  		</div>
          {% endif %}

 

 

 

 

 

 

 

 Here is my javascript.

 

 

 

 

 

 

document.addEventListener('page:loaded', function() {
    
theme.ShippingBar = (function() {
  
  var bar = document.querySelector('.shipping-bar');
 
  if(bar)
  {
  var promote_txt = bar.dataset.promote;
  var unlocked_txt = bar.dataset.unlocked;
  var threshold = bar.dataset.threshold;
  var shipping_quotient = bar.dataset.quotient;
  var shipping_procent = bar.dataset.procent;
  }
  
  function update()
  {
    if(bar)
    {
    $.getJSON('/cart.js').then(
    
      function(cart) {
      	
        var shipping_quotient = threshold * 100 / 100;
        var shipping_procent = cart.total_price / shipping_quotient;
        var value_left = threshold - cart.total_price;
        var value_left_money = theme.Currency.formatMoney(value_left,theme.moneyFormat);
        
        
        if(value_left >= 0){
        	bar.innerHTML =  '<div class="free-shipping__progress">' + '</div>';
        }
        
        if(value_left <= 0){
        	bar.innerHTML =  '<p class="shipping-bar-success shipping-bar__message">' + unlocked_txt + '</p>';
        }
        else{
          bar.innerHTML = '<p class="shipping-bar__message">' + promote_txt.replace('[value]',value_left_money) + '</p>';
        }
      }
      
    );      
    }
  }
  return { update:update }
}) ();

  });

 

 

 

 

 

 

Here is the Schema.

 

 

 

 

{
        "type":"checkbox",
        "label":"Enable Free Shipping Progress Bar",
        "id":"is_free_shipping_bar",
        "default":false
    },
    {
        "type":"text",
        "id":"promote_free_shipping_txt",
        "label":"Free Shipping Promotion Text"
    },
    {
        "type":"text",
        "id":"unlocked_free_shipping_txt",
        "label":"Free Shipping Success Message"
    },
    {
        "type":"range",
        "id":"free_shipping_threshold",
        "label":"Free Shipping Success Threshold",
        "min":0,
        "max":200,
        "step":5,
        "unit":"£",
        "default":100
    },
{
      "type": "color",
      "id": "color_bg",
      "label":"Bar",
      "default": "#f54337"
    },
 {
      "type":"color",
      "id":"success_color_bg",
      "label":"Success Bar",
      "default":"#008000"
    },
    {
      "type": "color",
      "id": "color_text",
      "label":"Text",
      "default":"#ffffff"
    }
    ]

 

 

 

 

 

Here is the link for the live site: https://www.babyesmee.co.uk

I have built the site with the Impulse Theme as a base. Any help would be greatly appreciated.

Replies 11 (11)

FrankMoore
Explorer
44 10 12

Hi,
Where is the JS code for handling Ajax cart when clicking on the Add to cart button?

Shopify Developer from @Cadifa
ChrisBeattie
Excursionist
41 0 14

That's been implemented in my theme.js file, with the code theme.ShippingBar.update() where there are addItem & updateItem.

FrankMoore
Explorer
44 10 12

Add the code below into Add To Cart Ajax success function

var bar = document.querySelector('.shipping-bar');
  var progress = document.querySelector('.free-shipping__progress')
  var threshold = bar.dataset.threshold;
  var shipping_quotient = threshold * 100 / 100;
  var shipping_procent = cart.total_price / shipping_quotient;
  
  progress.style.width = shipping_procent + '%'
Shopify Developer from @Cadifa
ChrisBeattie
Excursionist
41 0 14

What in the theme.js, or in the script file I posted?

tim
Shopify Expert
3258 232 1178

@FrankMoore  this would not help -- @ChrisBeattie  is overriding contents of the shipping bar:

 

  var bar = document.querySelector('.shipping-bar');
       ...

        if(value_left >= 0){
        	bar.innerHTML =  '<div class="free-shipping__progress">' + '</div>';
    ...

 

therefore <div class="free-shipping__progress"></div> is lost.

Also, in theme.js:

    _updateCart: function(params) {
      return $.ajax(params)
        .then(function(cart) {
          return cart;      /* shouldn't it be the last statement in funciton? */
        theme.ShippingBar.update()
        theme.CartCount.update()
        }.bind(this))
    },

 

ChrisBeattie
Excursionist
41 0 14

I'm lost @tim, I really need to start brushing up on writing JS lol

ChrisBeattie
Excursionist
41 0 14

@FrankMoore any other thoughts?

ChrisBeattie
Excursionist
41 0 14

BUMP

FrankMoore
Explorer
44 10 12

If you can invite me as a staff account, I can take a deeper look at this

Shopify Developer from @Cadifa
ChrisBeattie
Excursionist
41 0 14

@FrankMoore Yeah no problem, can you inbox me your email

hugotheone
Visitor
1 0 0

Hello everyone, I know this topic is now a year old but I need someone to help me to achieve the same thing, I'm having trouble with ajax 🙂 

your help would be greatly appreciated