Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

'Add to Cart' button not working on variants


MadaBean

Question

Site URL: https://www.madabean.com/shop

I successfully added to code so that an "add to cart" button is there instead of taking my customer to the checkout page BUT this only works on products that don't have variants. I have a ring with variants of sizes but when you click add to cart, it says "Unable to add item, the store item was not found". How do I change it so that the variants drop down to choose from prior to adding to cart on the shop all page? Is this possible?

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0
On 2/13/2021 at 10:01 PM, tuanphan said:

Which code did you use? Can you share link to a variant product? We can check easier

Here is the link to a variant item:

https://www.madabean.com/shop/p/athena

I since removed the code because it was causing issues when a customer went to choose a variant item but here is the I used this code: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
  .products .grid-item {
    padding-bottom: 60px;
    width: 100% !important;
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    min-width: 200px;
    margin: auto;
  }
</style>

<script>
  $(".products .grid-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".products .grid-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>



Edited by MadaBean
Link to post
  • 0

Here is the problem with the code. On the Store page proper (index) a button created with this code doesn't have access to a bunch of information about the variants. Also there is no interface for the customer to select those variants. On the Store page for a product with variants of course all the needed info and user options are there. I do not know of an easy way to reproduce the variant information on the Store page proper.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
8 minutes ago, creedon said:

Here is the problem with the code. On the Store page proper (index) a button created with this code doesn't have access to a bunch of information about the variants. Also there is no interface for the customer to select those variants. On the Store page for a product with variants of course all the needed info and user options are there. I do not know of an easy way to reproduce the variant information on the Store page proper.

Right. That is why I am asking if there is a way. 🙂

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...