Add to Cart Button on Repeater

Ask the community
,
1

I have a repeater displaying related products, and when the image is clicked, the customer is redirected to the specific product page. I need to add an “Add to cart button”, which when clicked, opens the mini cart. So the customer won’t be able to go to that product page, only to add it to cart.
This is the part of the code I think it needs to be modify. It currently does not contain the “Add to Cart Button”
function relatedItemReady($w, product) {
$w( “#productImage” ).src = product.mainMedia;
$w( “#productName” ).text = product.name;
$w( “#productPrice” ).text = product.formattedPrice;
$w( ‘#productImage’ ).onClick(() => {
wixLocation.to(product.productPageUrl);
});
}

2

Replace your code with this one…

$w.onReady(()=>{
    $w('#relatedItemReady').onItemReady(($item, itemData, index)=>{
        $item("#productImage").src = product.mainMedia;
        $item("#productName").text = product.name;
        $item("#productPrice").text = product.formattedPrice;

        $item('#productImage').onClick(() => {
            wixLocation.to(product.productPageUrl);
        })  
    })
})
3

I get multiple errors

765×245 37.2 KB

Maybe it would help if I show the full code

1034×834 107 KB

883×589 77.5 KB

4

And this is the repeater. The button isn’t linked to anything

1853×721 137 KB

5

@rebecarpop
replace relatedItemReady to relatedItemsRepeater
replace product to itemData

6

You need to replace because you just copy and paste the code. You must modify in order to make it work.

7

@rebecarpop
Just saw your answer right now. Please next time show your code in a CODE-BLOCK…

i am a CODE-BLOCK !

Then it is much more comfortable to work with your code and just copy&paste + modify, and not to retype manually all that code.

8

I am trying to display custom notification (where it shows name of product too which is added to cart) so any ideas anyone how to do it as i-frame doesnt allow getting product information if so any help will be appreciated.
In simple language :- when i clink on add to cart
notification box is shown saying _item 1 product has been added to cart

9 
I have the same issue and this did not fix it.  Also I only want the products to relate 1 - way from Product A to Product B; NOT back from Product B to Product A.  Please help. 

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
    loadrelatedProducts();
});

async function loadrelatedProducts() {
    let product = await $w('#productPage1').getProduct();
    let relatedProductsResult = await Promise.all([
        relatedProductsByTable(product),
        relatedProductsByPrice(product)
    ]);

    if (relatedProductsResult[0].length > 0)
        showRelatedProducts(relatedProductsResult[0])
    else
        showRelatedProducts(relatedProductsResult[1]);
}

async function relatedProductsByPrice(product) {
    let productID = product._id;

    // find related products by price
    let relatedByPrice = await wixData.query('Stores/Products')
        .between('price', product.price * 0.5, product.price * 1.5)
        .ne('_id', productID)
        .find();
    return relatedByPrice.items;
}

async function relatedProductsByTable(product) {
    let productId = product._id;

    //find related products by relation table
    let relatedByTable = await Promise.all([
        wixData.query('related-Products')
        .eq('a', productId)
        .include('productB')
        .find(),
        wixData.query('related-Products')
        .eq('productB', productId)
        .include('a')
        .find()
    ]);

    let relatedProducts = [
        ...relatedByTable[0].items.map(_ => _.productB),
        ...relatedByTable[1].items.map(_ => _.a)
    ];
    return relatedProducts;
}

function showRelatedProducts(relatedProducts) {
    if (relatedProducts.length > 0) {
        relatedProducts.splice(6, relatedProducts.length);
        $w('#relatedItemsRepeater').onItemReady(relatedItemReady);
        $w('#relatedItemsRepeater').data = relatedProducts;
        $w('#relatedItems').expand();
    } else {
        $w('#relatedItems').collapse();
    }
}

function relatedItemReady($w, Product) {
    $w('#productImage').src = Product.mainMedia;
    $w('#productName').text = Product.name;
    $w('#productPrice').text = Product.formattedPrice;
    $w('#productImage').onClick(() => {
        wixLocation.to(Product.productPageUrl);
    });
}
10

Hi! This version of the function only includes the related products where Product A is the source and Product B is the target. The second query in the original function, which looks for related products where Product B is the source and Product A is the target, is removed. With this change, the related products shown on the product page will only be those that are related to the current product in a one-way manner:

async function relatedProductsByTable(product) {
    let productId = product._id;

    let relatedByTable = await wixData.query('related-Products')
        .eq('a', productId)
        .include('productB')
        .find();

    let relatedProducts = relatedByTable.items.map(_ => _.productB);
    return relatedProducts;
}
11 


  } else {    
    $w('#relatedItems').collapse();
  }

Thank you so much.  This worked. Now my only issue is that when no items are found you see my placeholder repeater item.  I thought the code above would collapse it if no items are found.  Any thoughts?