irarosekim

I am just thinking that the summary block creates the grid with products from your store so that there is hopefully someway for it to then also grab the id as well.

Is there anyway to draw this into the summary block or pull it from else where on the site so the code I would have on the summary block could draw on it?

3 minutes ago, creedon said:

The problem is that summary blocks don't provide the product id (data-item-id in the code) as part of the summary. Whereas the main store page does provide that info. The product id is critical to being able to create Add to Cart buttons.

20 minutes ago, creedon said:

I just tested the code and it does not add a true add to cart button but takes you to the product page. Where then you can click on the add to cart button.

I have it working on mine right now. The link is nuestramesabk.com/order - apologies for the garish appearance

https://www.bradgood.net/articles/how-to-add-an-add-to-cart-button-to-a-squarespace-product-list-page

2 minutes ago, creedon said:

Please point us to where you found this code.

Maybe there is a fix with JQuery? I found this code (attached below) that added an "Add to Cart" button to the grid on the general shop page - it normally doesn't feature this. I'm wondering if there's a way to implement that with the button I have showing up now on my summary block. I've added the code to the original post above.

Site URL: http://www.nuestramesabk.com/menu

Hello,

I am trying to add an "Add to Cart" button to the products I'm displaying on a summary block. I found the following code below from a similar issue and it creates the button for each item with the correct appearance. When clicked, it just redirects to the page for the product. Website is nuestramesabk.com/menu

<style>
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
    padding-bottom: 50px !important;
  }
  .summary-content {
    position:relative;
  }
  .summary-title .summary-title-link::after {
    content: 'order';
    background-color: #f29182;
    border-radius: 30px;
    display: block;
    padding: 10px 20px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background-color: normal;
    border-color: normal;
    position: absolute;
    bottom: -45px;
  }
</style>

Edit: I also found this code which adds an "Add to Cart" button to the grid view of the shop page - I'm hoping there's a way to add that functionality to the button I have showing up on my summary block. 

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



<style>
  .products .grid-item {
    padding-bottom: 100px;
    width: 100% !important;
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 30;
    left: 0;
    right: 0;
    width: 100px;
    min-width: 100px;
    margin: 20px;
    padding:5px 5px;
  }
</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">Order</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);
    });
  });
  
.product-block .sqs-add-to-cart-button {
    width: 10px;
   margin:auto
}
</script>