CODEWITHSUNDEEP
javascriptshopifyrivets.js
Ela Buwa
Ela Buwa

Reputation: 1704

Rivets.js Cart.js Shopify Product Not removing/updating on cart

I have a cart page that is using rivets.js, cart.js and uses shopify.

My issue is none of the remove, qty increase/decrease buttons are working on the cart page.

Below is the code that I'm using. The display is working as expected. It shows the qty, price, item name, description etc.

<div data-cart-view="data-cart-view">

  <div class="cart-info cart-info--mobile">
  <div class="grid">
    <div class="grid__item one-third">

        <strong data-cart-render="item_count">{{ cart.items.size }}</strong>

      <small>recommendations</small>
    </div>
    <div class="grid__item one-third">
        <strong data-cart-render="item_count"></strong>
      <small>pills per pack</small>
    </div>
    <div class="grid__item one-third cart-total">
      <strong>$ <span rv-html="cart.total_price | customcurrency"></span></strong>
      <small>per month</small>
    </div>
  </div>

  </div>



  <div rv-each-item="cart.items" class="cart-item grid">
    {% include 'bold-cart-item' with item %}
    <ul class="hide">
      <li rv-each-property="item.propertyArray < properties"  rv-data-id="property.name" rv-data-name="property.value" class="property-counter"></li>
    </ul>
    <div class="grid__item one-sixth">
      <img rv-src="item.image | productImageSize '250x250'">
    </div>


    <span rv-html="index | plus 1"></span>

    <div class="grid__item five-sixths"> 
      <div class="grid">
        <div class="grid__item large--four-sixths two-thirds">
          <h3 rv-text="item.title"></h3>
          <div class="cart-quantity" rv-data-id="item.title">
            <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | minus 1">-</a>
            <div class="qty"><span class="num" rv-text="item.quantity"></span> <span class="tablet">tablet</span></div>
            <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | plus 1">+</a>

            <span class="dailydose">Suggested daily dose</span>
          </div>


          {{ bold_item_properties }}
          {{ bold_recurring_desc }}
          {{ bold_item_price }}
        </div>
        <div class="grid__item large--two-sixths one-third text-right">
          <div class="item-price">
            <div class="price">$<span rv-html="item.line_price | customcurrency"></span></div>
            {% comment %}<td rv-html="item.line_price | money Currency.currentCurrency"></td>{% endcomment %}
            <small>per month</small>
          </div>
          <a href="#" rv-data-cart-remove="index | plus 1"  class="item-remove">&times;</a>
        </div>
      </div>
    </div>
  </div>


<div class="cart-info cart-info--desktop">
  <div class="grid">
    <div class="grid__item one-third">
        {% comment %} <strong data-cart-render="item_count"></strong>{% endcomment %} 
      <strong>{{ cart.items.size }}</strong>
      <small>recommendations</small>
    </div>
    <div class="grid__item one-third">
        <strong data-cart-render="item_count"></strong>
      <small>pills per pack</small>
    </div>
    <div class="grid__item one-third cart-total">
      <strong>$<span rv-html="cart.total_price | customcurrency"></span></strong>
      <small>per month</small>
    </div>
  </div>

  </div>

  </div>

Any help is greatly appreciated. It is also using Bold as the recurring subscription app.

Thank you in advance.

Upvotes: 0

Views: 1442

Answers (1)

Prabhav Khandelwal
Prabhav Khandelwal

Reputation: 11

I was facing the same issue, and couldn't figure out the solution. I saw the console give an error saying that the ajax functions are not defined in the jQuery. Turns out I was using the slim version, which doesn't include the ajax stuff.

Opted in and used the regular minified version and now, both the remove button and the quantity selector seem to be working fine.

Upvotes: 1

Related Questions