Configuring Turbo Theme Mini Cart

Check Manually Adding Custom Product Builder To a New Theme. for base instructions.

Don't forget to make a duplicate of your published theme and work in the preview mode.

Here are the steps to configure the Mini Cart.

• Find file assets/app.js.liquid
• Find the following code (around line 428):  

      $.each(cart.items, function(index, item) {
        var line_id = index + 1;
        cart_items_html += '<li class="cart_item clearfix">' +
          '<a href="' + item.url +'">';
        if (item.image) {
          cart_items_html += '<div class="cart_image">' +
              '<img src="' + item.image.replace(/(\.[^.]*)$/, "_compact$1").replace('http:', '') + '" alt="' + htmlEncode(item.title) + '" />' +
            '</div>';
        }

        cart_items_html += '<div class="cart_item__title"><div class="item_title">' + item.title;

        if(item.properties) {
          $.each(item.properties, function(title, value) {
            if (value) {
              cart_items_html += '<div class="line-item">' + title +': ' + value + '</div>';
            }
          });
        }
        cart_items_html += '</div;></a>';

• Comment Out the code above adding /* on top of it and */ at the bottom and paste the following snippet right below it:

      $.each(cart.items, function(index, item) {
        var hasCustomImage = false;
        var line_id = index + 1;
        cart_items_html += '<li class="cart_item clearfix">' +
          '<a href="' + item.url +'">';
        
        if(item.properties) {
          
          $.each(item.properties, function(title, value) {

            if ( title == '_image') {
              
              	hasCustomImage = true;
              
		cart_items_html += '<div class="cart_image">' + '<img src="' + value + '" />' + '</div>';             
            
            } 
            
          });    
        }
        
        if (!hasCustomImage) {
    
          if (item.image) {
                
            cart_items_html += '<div class="cart_image">' +
            '<img src="' + item.image.replace(/(\.[^.]*)$/, "_compact$1").replace('http:', '') + '" alt="' + htmlEncode(item.title) + '" />' + '';

            }
        }

        cart_items_html += '<div class="cart_item__title"><div class="item_title">' + item.title;

        if(item.properties) {
          $.each(item.properties, function(title, value) {
            if ( (value != "") && (title != 'configId') && (title != '_image')) {
              cart_items_html += '<div class="line-item">' + title +': ' + value.replace('(0)', "") + '</div>';
            }
          });
        }
        
        cart_items_html += '</div></a>';

• Find sections/header.liquid
• Find the following code:

{% for p in item.properties %}
   {% if p.last != blank %}
  <div class="line-item">{{ p.first }}: {{ p.last }}</div>
	{% endif %}
{% endfor %}

• Replace it with:

{% for p in item.properties %}
   {% if p.last != blank and p.first != 'configId' and p.first != '_image'%}
     {{ p.first }}:

     {% comment %}
       Check if there was an uploaded file associated
     {% endcomment %}

     {% if p.last contains '/uploads/' %}
       <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
     {% else %}

       {% unless p.first == '_image' %}
         {{ p.last | split: '(' | first }}
       {% endunless %}
     {% endif %}
   {% endif %}
{% endfor %}

• Find the file: sections/header.liquid
• Replace the contents of the cart_image div

<div class="cart_image">
       <img src="{{ item | img_url: '320x' }}" alt="{{ item.title | escape }}" class="lazyload" />
    </div>

• With the following snippet:

<div class="cart_image">
    {% if item.properties and item.properties._image %}
      <img id="{{item.product.id}}" src="{{ item.properties._image }}" alt="{{ item.title | escape }} class="lazyload"">
    {% else %}
      <img src="{{ item | img_url: '320x' }}" alt="{{ item.title | escape }}" class="lazyload" />
    {% endif %}
</div>

• Click 'Save' 
• Check and test the result

If you have any questions or need help, please email us at [e-mail]