Jump to content

'Add to Cart' button not working on variants

Recommended Posts

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 comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply
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>



Link to comment

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.