Adding Add to Cart button to Account Page

Highlighted
Tourist
4 0 1

Im trying to add a "Add to Cart" button on my Account page by editing the code in account.liquid. Ive tried adding:

 

<form method="post" action="/cart/add"  >
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form> 

but it does not want to work. It ends up crashing the page instead of adding to cart.

Any ideas?

0 Likes
Highlighted
Shopify Partner
344 24 49

@wealthbros ,

 

Product is not a global variable so that's needs to change in your code. Why don't you just type in the variant ID you want to add? Otherwise you'll have to use all_products. 

 

https://shopify.dev/docs/themes/liquid/reference/objects

 

Regards,

 

Sam

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
0 Likes
Highlighted
Tourist
4 0 1

@achieveapplabs 

 

I tried changing it but to no success. I still get

Parameter Missing or Invalid: Required parameter missing or invalid: id

code:

<div class="page-width">
  <header class="section-header section-header--small text-center">
    {% if customer.first_name != blank %}
    {% capture first_name %}{{ customer.first_name }}{% endcapture %}
    <h1 class="section-header__title h2">{{first_name }}'s Dashboard</h1>
    {% endif %}
    <div class="section-header__btn">
      <a class="btn-link" href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>
    </div>
  </header>

  <div class="grid grid--rows">
    <div class="grid__item medium-up--one-fifth account-details">
      <h2 class="h4">Manage WBC</h2>

      {{ customer.default_address | format_address }}
        <a href="https://wealthbros.io/pages/request-erc20-wallet" class="btn-link">ERC20 Wallet Request</a>
      <p>
        <a href="https://wealthbros.io/pages/cash-out" class="btn-link">Cash Out</a>
      </p>
      <p>
        <a href="{{ routes.account_addresses_url }}" class="btn-link">{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})</a>
      </p>
    </div>
    
    
    <div class="grid__item medium-up--four-fifths">
      <h2 class="h4">WBC Exchange</h2>
<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ 5338479755422.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form>
    </div>
    <div class="grid__item medium-up--four-fifths">
      <h2 class="h4">{{ 'customer.orders.title' | t }}</h2>

      {% paginate customer.orders by 20 %}
      {% if customer.orders.size != 0 %}

        <table class="responsive-table account-summary">
          <thead>
          <tr>
            <th>{{ 'customer.orders.order_number' | t }}</th>
            <th>{{ 'customer.orders.date' | t }}</th>
            <th>{{ 'customer.orders.payment_status' | t }}</th>
            <th>{{ 'customer.orders.fulfillment_status' | t }}</th>
            <th>{{ 'customer.orders.total' | t }}</th>
          </tr>
          </thead>
          <tbody>
          {% for order in customer.orders %}
            <tr class="responsive-table__row">
              <td data-label="{{ 'customer.orders.order_number' | t }}">
                <a href="{{ order.customer_url }}"
                   class="btn-link btn-link--wide">
                   {{ order.name }}
                 </a>
              </td>
              <td data-label="{{ 'customer.orders.date' | t }}">
                {{ order.created_at | time_tag: format: 'date' }}
              </td>
              <td data-label="{{ 'customer.orders.payment_status' | t }}">{{ order.financial_status_label }}</td>
              <td data-label="{{ 'customer.orders.fulfillment_status' | t }}">{{ order.fulfillment_status_label }}</td>
              <td data-label="{{ 'customer.orders.total' | t }}">{{ order.total_price | money }}</td>
            </tr>
          {% endfor %}
          </tbody>
        </table>

      {% else %}

        <p>{{ 'customer.orders.none' | t }}</p>

      {% endif %}
      {% if paginate.pages > 1 %}
        {% include 'pagination' %}
      {% endif %}
      {% endpaginate %}
    </div>
  </div>


</div>

My goal is to have it so there is a spot under "WBC Exchange" where users can select how many (i.e. 1,2,3,4) and add to cart where they can complete there purchase. I want this done right in the account page but cant get the button to work.

0 Likes
Highlighted
Shopify Partner
344 24 49

@wealthbros ,

 

The ID input field value should just be since your always adding the same product just different quantity. 

 

 <input type="hidden" name="id" value="5338479755422" />

 

Try this and let me know.

 

Thanks,

 

Sam

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
1 Like
Highlighted
Tourist
4 0 1

@achieveapplabs ,

Okay so that fixed that error but it still has the same result with the new error: Cart Error: Cannot find variant. Ive confirmed 5338479755422 is correct so im not quite sure.

0 Likes
Highlighted
Shopify Partner
344 24 49

@wealthbros ,

 

We're almost there. When you go to the product page in Shopify admin press edit on the variant and grab the ID from the URL.

 

Best,

 

Sam

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
0 Likes
Highlighted
Tourist
4 0 1

I ended up getting it to work for anyone who was wondering the code is below. i had to copy from the actual products page from the nav. worked out! thanks for all your help!!

<form method="post" action="/cart/add" id="product_form_5338479755422" accept-charset="UTF-8" class="product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" />
  

  <select name="id" class="product-form__master-select supports-no-js" data-master-select>
    
      

        
        <option  selected="selected"  data-sku="" value="34849297858718">Default Title - $20.00 CAD</option>

      
    
  </select>

  

  <button class="btn btn--to-secondary btn--full product__add-to-cart-button shopify-payment-btn btn--secondary"
    data-cart-submit
    type="submit" name="add"
    
    aria-label="Add to Cart"
  >
    <span class="primary-text" aria-hidden="false" data-cart-primary-submit-text>
      Exchange
    </span>
    <span class="secondary-text" aria-hidden=true data-cart-secondary-submit-text>View cart</span>
  </button>
  <p class="product__notification text-small text-center" data-cart-notification></p>
  
    <div data-shopify="payment-button" class="shopify-payment-button"><button class="shopify-payment-button__button shopify-payment-button__button--unbranded shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true"> </button><button class="shopify-payment-button__more-options shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true"> </button></div>
  
    </div>
1 Like