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?

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

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>