Add product to cart without going to cart page

Chuck_Burr
Shopify Partner
55 0 1

I am trying to modify my Carleton theme to add product(s) to the cart from the collections layout without taking the customer to the cart and having to click the back button to return to the collection. I have the add product to the cart working fine in the collection layout, now I would like to just not take them to the cart each time they add.

I have read the posting here about this process but they are labeled as "outdated". Is there a manual document about achieving this or a current forum discussion thread. Thanks in advance.

PS: To theme designers, I suggest a Setting to allow shop owners to choose whether they want to add items from their collection view and then also if they want the customer to be taking to the cart or not. That would be tremendous flexibility.

Chuck Burr
restorationseeds.com

Chuck Burr Restoration Seeds
0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Hi Chuck,

I have the add product to the cart working fine in the collection layout, now I would like to just not take them to the cart each time they add.

Add the following to your add to cart form:

<input type="hidden" name="return_to" value="back" />

That should do the trick.

Let me know how that goes!

Chuck_Burr
Shopify Partner
55 0 1

Prefect, question resolved.

Thank you Caroline.

Chuck Burr Restoration Seeds
0 Likes
Chuck_Burr
Shopify Partner
55 0 1

The above works well.

Is there an easy way to prevent the browser from re-drawing the page when the user clicks the Add to Cart button?

Chuck Burr Restoration Seeds
0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Hi Chuck,

You will need Ajax if you wish to avoid a page reload: http://docs.shopify.com/support/your-store/products/how-to-ajaxify-your-cart

Chuck_Burr
Shopify Partner
55 0 1

Thank you Caroline, that added some options. Here are some notes and questions.

  1. There may be a bug in the JS code at the bottom, if the CSS contains 'text-transform: uppercase;', the button does not return to normal. See image attached. The input button does not spread back out to hold the label text, it remains crunched. It works fine if the text-transformis 'none'. See the example on the right in the screen shot attached.
  2. Is there a way in the ajaxify-cart.liquid to updated the HTML {{ cart.item_count }} so the cart count is correct when the user adds and item. Maybe worth adding to the JS 
  3. Regarding this code below, is there a way to refresh the CSS without a page loaded, probably not I am guessing. We added HTML CSS to have a state of Product-Add and Product Added, so the button would rest or change from Add to Added using HTML CSS. I commented out the three lines below in the meantime to have the button rest at "Added".

     window.setTimeout(function(){
    addToCartBtn.removeAttr('disabled').removeClass('disabled').removeClass('inverted').val(addToCartBtn.attr('data-label'));
    }, _config.howLongTillBtnReturnsToNormal);
Chuck Burr Restoration Seeds
0 Likes
Ashley__Gill
New Member
11 0 0

I am trying to accomplish this on our website. But it's not taking. Am I doing something wrong on the code? The template is radiance.

 

<!-- Bold Apps: Premium Options --> <script>function update_qty_builder(builder_id, qty){ jQuery('.'+builder_id+"_qty").val(qty.value); } function remove_product_builder(builder_id){ jQuery('.'+builder_id+"_qty").val(0); jQuery('.'+builder_id+"_qty").parents("form").submit(); }</script>

<div id="col-main" class="full content">

  <div id="page-header">
    <h2 id="page-title">Shopping Cart</h2>
  </div>


  {% if cart.items == empty %} 
    <p class="empty">Your shopping cart is empty. Check out our <a href="/collections/all">catalog</a> to see what's available.</p>
    {% if settings.show_right_column == false %}{% assign limit = 4 %}{% else %}{% assign limit = 5 %}{% endif %}
    {% include 'featured-products' %}
  {% else %}
    <form action="/cart" method="post" id="cartform" class="clearfix">

      <table class="items">
        <colgroup>
          <col class="checkout-image" />
          <col class="checkout-info" />
          <col class="checkout-price" />
          <col class="checkout-quantity" />
          <col class="checkout-totals" />
          <col class="checkout-delete" />
        </colgroup>
    
        <thead>
          <tr class="top-labels">
            <th class="empty">&nbsp;</th>
            <th>Item</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
            <th class="empty">&nbsp;</th>
          </tr>
        </thead>

        <tbody>
          {% for item in cart.items %}
          
          {% if item.properties.master_builder == blank %} <!-- Bold Apps: Premium Options (Step 9) -->
                
          {{ item.properties.builder_id || json }}
          
                {% if item.properties.builder_id == blank %}
                  <tr class="item {{ item.product.handle }}">
              {% else %}
                  <tr style="display:none" class="item {{ item.product.handle }}">
              {% endif %}
                  
                <td>
                  <a href="{{ item.product.url }}">
                    <img src="{{ item.product.featured_image | product_img_url: 'thumb' }}"  alt="{{ item.product.title }}" />
                  </a>
                </td>
                <td>
                  <a href="{{ item.product.url }}">{{ item.title }}</a>
                  <p>
                    {% for p in item.properties %}
                    {% unless p.last == blank %}
                    <br /> <b>{{ p.first }}</b>:
                    {% if p.last contains '/uploads/' %}
                    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                    {% else %}
                    {{ p.last }}
                    {% endif %}
                    {% endunless %}
                    {% endfor %}              
                  </p>
                </td>
                <td>{{ item.price | money }}</td>
                
                <!-- Quantity -->
                {% if item.properties.builder_id == blank %}
                  <td> <input class="replace text quantity" type="text" size="4" id="updates_{{ item.id }}" name="updates[]" value="{{ item.quantity }}" {% if item.product.metafields.inventory.ShappifyHidden == "true" %} readonly="readonly" {% endif %}/> </td>
                {% else %}
                  <td> <input class="replace text quantity {{ item.properties.builder_id }}_qty" type="text" size="4" id="updates_{{ item.id }}" name="updates[]" value="{{ item.quantity }}" {% if item.product.metafields.inventory.ShappifyHidden == "true" %} readonly="readonly" {% endif %}/> </td>
                {% endif %}
                  
                <td>{{ item.line_price | money }}</td>
                
                <!-- Remove -->
                {% if item.properties.builder_id == blank %} 
                    <td><a class="btn_bold remove-from-cart" href="/cart/change?line={{ forloop.index }}&quantity=0" onclick="">Remove</a></td>
                {% else %}
                      <td><a class="btn_bold remove-from-cart {{ item.properties.builder_id }}_remove" href="/cart/change?line={{ forloop.index }}&quantity=0" onclick="">Remove</a></td>
                {% endif %}
                  
              </tr>
          
          {% else %} <!-- Bold Apps: Premium Options (Step 10) --> 
          
              {% if item.properties.builder_info %}
              {% assign builder = item.properties.builder_info | split: '~~' %}
              {% endif %}
              {% assign item_price = 0 %}
              {% assign item_line_price = 0 %}
              {% for price_item in cart.items %}
              {% unless price_item.properties.builder_id == blank %}
              {% if price_item.properties.builder_id == item.properties.builder_id %}
              {% capture temp %}{{ item_price | plus: price_item.price }}{% endcapture %}
              {% assign item_price = temp %}
              {% capture temp %}{{ item_line_price | plus: price_item.line_price }}{% endcapture %}
              {% assign item_line_price = temp %}
              {% endif %}
              {% endunless %}
              {% endfor %}
              <tr class="item {{ builder[2] }} {{ item.product.handle }}">
                  <td>
                    <a href="{{ item.product.url }}">
                      
                      {% if builder[0] %}
                          <img src="{{ builder[1] }}" alt="{{ builder[0] }}" />
                      {% else %}
                          <img src="{{ item.product.featured_image | product_img_url: 'thumb' }}"  alt="{{ item.product.title }}" />
                      {% endif %}
                      
                    </a>
                  </td>
                  <td>
                    <a href="{{ item.product.url }}">{{ item.title }}</a>
                    <p>
                      {% for p in item.properties %}
                      {% if p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" %}
                      {% else %}
                      <br /> <b>{{ p.first }}</b>:
                      {% if p.last contains '/uploads/' %}
                      <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                      {% else %}
                      {{ p.last }}
                      {% endif %}
                      {% endif %}
                      {% endfor %}   
                    </p>
                  </td>
                  <td>{{ item_price | money }}</td>
                  
                  <!-- Quantity -->
                  <td> <input class="text quantity {{ item.properties.builder_id }}_qty replace" type="text" size="4" id="updates_{{ item.id }}" onchange="update_qty_builder('{{item.properties.builder_id}}', this);" name="updates[]" value="{{ item.quantity }}" {% if item.product.metafields.inventory.ShappifyHidden == "true" %} readonly="readonly" {% endif %}/> </td>
                  <td>{{ item_line_price | money }}</td>
                  
                  <!-- Remove -->
                  <td><a class="btn_bold remove-from-cart" class="{{ item.properties.builder_id }}_remove" href="#" onclick="remove_product_builder('{{item.properties.builder_id}}');">Remove</a></td>
                </tr>
            
          {% endif %}
          {% endfor %}
        </tbody>
        
        <tfoot>
          <tr class="bottom-summary">
            <td colspan="3"></td>
            <td class="update-quantities"><input type="submit" id="update-cart" class="btn" name="update" value="Update quantities" /></td>
            <td class="subtotal">{{ cart.total_price | money }}</td>
            <td>&nbsp;</td>
          </tr>
        </tfoot>
      </table>

      {% if settings.allow_note %}
      <div id="checkout-addnote">
        <label for="note"><a href="#" id="toggle-note">Add a note for the seller&hellip;</a></label>
        <textarea id="note" name="note" class="hide">{{ cart.note }}</textarea>
      </div>
      {% endif %}
<input class="hidden" name="return_to" value="back" />
      <div id="checkout-proceed">
<a href="/" class="nounderline">
                    <input class="btn-reversed btn" name="checkout" class="checkout" value="Continue Shopping" />
                  </a>
        <input class="btn-reversed btn" type="submit" id="update-cart" name="checkout" value="Proceed to Checkout" />

        {% if additional_checkout_buttons %}
        <div id="additional-checkout-buttons">
          <span id="additional-checkout-buttons-label">Or check out using:</span>
         {{ content_for_additional_checkout_buttons }}
        </div>
        {% endif %}                       
      </div>

    </form>
  {% endif %}
</div><!--/#col-main -->

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Hi Chuck,

If the CSS contains 'text-transform: uppercase;', the button does not return to normal.

May I have a look at your web page? That's most definitely strange. All the jQuery does there is change the value of the element, it only does a simple DOM manipulation on the element's value. If the button is not re-drawm properly then it becomes an issue with the browser rendering engine. I can look at your existing HTML and CSS though, to see if everything is kosher there.

Is there a way in the ajaxify-cart.liquid to updated the HTML {{ cart.item_count }} so the cart count is correct when the user adds and item. Maybe worth adding to the JS 

It does that already provided that you give the JavaScript the right CSS selector for the cart counts.

At the bottom of the Javascript, call the init function like so:

Shopify.AjaxifyCart.init( { cartCountSelector: 'YOUR SELECTOR HERE' } );

Regarding this code below, is there a way to refresh the CSS without a page loaded, probably not I am guessing.

The page should not reload now. And refreshing the CSS is only possible with a page reload.

Hi Ashley,

The Radiance theme already uses Ajax, so you should not be needing to use this tutorial. Check with Bold Apps, maybe there is a limitation with their app, that forces the theme to not use Ajax. I see by your code that you are using one of their apps. Or, maybe there's a JavaScript error on your product page to begin with.

0 Likes
Chuck_Burr
Shopify Partner
55 0 1

Good Morning Carolin, 

Yes, feel free to look at our web and store. The Add to Cart buttons are on the product pages and Collections pages.

http://www.restorationseeds.com/products/blue-lake-black-seeded-bean-pole

http://www.restorationseeds.com/collections/bean

Chuck

Chuck Burr Restoration Seeds
0 Likes
Ashley__Gill
New Member
11 0 0

I just sent the login via your gmail account. Thanks for your help with this issue. :)

Brock

0 Likes