To add Add to Cart to List item, like this.
#1. First, we will add a List People Section
Choose Simple List
#2. Next, we will add image text, url to product
#3. Next, add a Section under List Simple section > Add some Product Blocks.
Remember to enable Add to Cart button.
My idea is that we will trigger add to cart on Product Block, when users click the corresponding button in List Section.
#4. Next, find ID of Product Block Section
Next, add this to Custom CSS to hide Product Block Section
body:not(.sqs-edit-mode-active) {
section[data-section-id="689fea4031edf84e2ab78a4b"] {
display: none;
}
}
#5. Use this code to Page Header Injection to trigger add to cart click on List button click
<script>console.log('Script loaded');$(window).on('load',function(){console.log('Window loaded');$(document).on('click','a',function(e){var $clickedButton=$(this);var buttonUrl=$clickedButton.attr('href');if($clickedButton.closest('.user-items-list-item-container').length>0){console.log('Button from section 1 clicked:',buttonUrl);e.preventDefault();var buttonPath=buttonUrl;if(buttonUrl.indexOf('http')===0){try{var url=new URL(buttonUrl);buttonPath=url.pathname}catch(e){buttonPath=buttonUrl.replace(/^https?:\/\/[^\/]+/,'')}}
console.log('Button path to match:',buttonPath);var matchFound=!1;$('.product-block').each(function(index){var $product=$(this);$product.find('a').each(function(){var linkUrl=$(this).attr('href');var linkPath=linkUrl;if(linkUrl&&linkUrl.indexOf('http')===0){try{var url=new URL(linkUrl);linkPath=url.pathname}catch(e){linkPath=linkUrl.replace(/^https?:\/\/[^\/]+/,'')}}
if(linkPath===buttonPath){console.log('MATCH FOUND! Path:',buttonPath);var $addToCartButton=$product.find('.sqs-add-to-cart-button');console.log('Add to cart button found:',$addToCartButton.length);if($addToCartButton.length){console.log('Clicking add to cart button');$addToCartButton[0].click();matchFound=!0;return!1}}});if(matchFound)return!1});if(!matchFound){console.log('No match found for path:',buttonPath)}}})});</script>
