Cross-Selling a Product on my cart page

Ask the community
, ,
1

I have been following the tutorial and trying to recreate on the same site before I do on my site but have a couple of issues.

  1. The container box and its elements are not picking up the correct product (in this case jasmine) (in the tutorial it doesn’t tell you to add a dataset to the page)
  2. It is always on the cart page - it doesn’t appear when only honey is selected for example.

Thanks.

import wixStores from 'wix-stores-backend';

export function getCurrentCart() {
 return wixStores.getCurrentCart();
}
import wixData from 'wix-data';

const CROSS_SELL_PRODUCT_SKU = "0002";

$w.onReady(function () {
  checkIfProductMissingFromCart().then(isProductMissingFromCart => {
 const shouldShowCrossSellProduct = isProductMissingFromCart;

 if (shouldShowCrossSellProduct) {
      getCrossSellProduct().then(crossSellProduct => {
        renderCrossSellProduct(crossSellProduct);
      })
    } else {
      $w("#crossSellBox").collapse();
    }
  })
})

async function checkIfProductMissingFromCart() {
 const { lineItems } = await getCurrentCart();
 const isProductMissingFromCart = lineItems.every(lineItem => lineItem.sku !== CROSS_SELL_PRODUCT_SKU);

 return isProductMissingFromCart;
}

async function getCrossSellProduct() {
 const { items: productsMatchingSKU } = await wixData.query('Stores/Products').eq('sku', CROSS_SELL_PRODUCT_SKU).find();
 const crossSellProduct = productsMatchingSKU[0];

 return crossSellProduct;
}

function renderCrossSellProduct(product) {
  $w("#productName").text = product.name;
  $w("#productPrice").text = product.formattedPrice;
  $w("#productImage").src = product.mainMedia;
 const productDescriptionWithoutTags = product.description.replace(/(<([^>]+)>)/ig, "");
  $w("#productDescription").text = productDescriptionWithoutTags;

  $w("#addToCart").onClick(async () => {
 await $w("#shoppingCartIcon1").addToCart(product._id, 1);
  })
}