irarosekim
-
Posts
7 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by irarosekim
-
-
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
-
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>
Adding "Add to Cart Button" To Summary Block
in Customize with code
Posted
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.