שימוש בהמלצות מוצרים באמצעות API עבור Shopify

<script>
  window.FlashyProductRecommendations = class FlashyProductRecommendations {
    constructor(popupId, productsContainer = 'home-recommendations') {
      this.popupId = popupId;
      this.container = document.getElementById(productsContainer);
    }

    // Fetch product recommendations
    async fetchRecommendations() {
      try {
        const recommendations = await flashy.recommendations.get(this.popupId);
        return this.getItemIds(recommendations.products);
      } catch (error) {
        console.warning("Error fetching flashy recommendations:", error);
      }
    }

    // Fetch product details from Shopify
    async fetchProductDetails(productNumericIds) {
      const productGlobalIds = productNumericIds.map(id => `gid://shopify/Product/${id}`);

      const productQuery = `
        query ProductsQuery($ids: [ID!]!) {
          nodes(ids: $ids) {
            ... on Product {
              id
              title
              handle
              descriptionHtml
              createdAt
              productType
              vendor
              tags
              images(first: 2) {
                edges {
                  node {
                    id
                    originalSrc
                    altText
                  }
                }
              }
              variants(first: 2) {
                edges {
                  node {
                    id
                    title
                    priceV2 {
                      amount
                      currencyCode
                    }
                    availableForSale
                    sku
                    compareAtPriceV2 {
                      amount
                      currencyCode
                    }
                  }
                }
              }
            }
          }
        }
      `;

      try {
        const response = await fetch(`//${window.Shopify.shop}/api/2022-01/graphql.json`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Shopify-Storefront-Access-Token': 'your-storefront-access-token',
          },
          body: JSON.stringify({
            query: productQuery,
            variables: { ids: productGlobalIds },
          }),
        });

        const { data, errors } = await response.json();

        if (errors) {
          console.error('GraphQL Errors:', errors);
          return null;
        }

        return data.nodes;
      } catch (error) {
        console.error('Fetch Error:', error);
        return null;
      }
    }

    getProductTemplate(product) {
      return `
        <div class="product-item">
          <img src="${product.images.edges[0].node.originalSrc}" alt="Product Image" class="product-image">
          <div class="product-title">${product.title}</div>
          <a href="/products/${product.handle}" class="product-button view-product">View Product</a>
          <button class="product-button add-to-cart">Add to Cart</button>
        </div>
      `;
    }


    // Render product details
    async displayProducts() {
      const recommendations = await this.fetchRecommendations();
      const productsDetails = await this.fetchProductDetails(recommendations);

      productsDetails.forEach(product => {
        const productHTML = this.getProductTemplate(product);
        // Insert the product HTML directly into the container
        this.container.insertAdjacentHTML('beforeend', productHTML);

        const lastProductItem = this.container.lastElementChild;

        // Add event listener for the Click or Add to Cart events
        const links = lastProductItem.querySelectorAll('a'); // Selects all <a> tags within the item

        // For any links events
        links.forEach(link => {
          link.addEventListener('click', (e) => {
            this.trackProductInteraction('amplify:Click', this.getItemId(product.id));
          });
        });

        // If you are using Add To Cart directly from the product
        // lastProductItem.querySelector('.add-to-cart').addEventListener('click', (e) => {
        //   this.trackProductInteraction('amplify:AddToCart', this.getItemId(product.id), product.variants[0].price);
        // });
      });
    }

    // Track product interactions
    trackProductInteraction(eventType, productId, value = null, currency = 'ILS') {
      const eventData = {
        'popup_id': this.popupId,
        'content_ids': [productId]
      };

      if (eventType === 'amplify:AddToCart') {
        eventData.value = value; // Assuming value is provided for Add to Cart events
        eventData.currency = currency;
      }

      flashy(eventType, eventData);
    }

    getItemIds(obj) {
      const ids = [];
      for (const key in obj) {
        if (obj.hasOwnProperty(key) && typeof obj[key] === 'object' && obj[key] !== null && 'id' in obj[key]) {
          ids.push(obj[key].id);
        }
      }
      return ids;
    }

    getItemId(globalId) {
      return globalId.split('/').pop();
    }

    // Initialize the recommendations display
    init() {
      this.displayProducts();
    }
  }
</script>

<script>
  window.addEventListener('onFlashy', function() {
    (new FlashyProductRecommendations(__WEBLAYER_ID__, 'home-recommendations')).init();
  });
</script>

<script>
  window.addEventListener('ViewContent', function() {
    (new FlashyProductRecommendations(__WEBLAYER_ID__, 'complementary-products')).init();
  });
</script>

<script>
  window.addEventListener('UpdateCart', function() {
    (new FlashyProductRecommendations(__WEBLAYER_ID__, 'complementary-cart')).init();
  });
</script>

<script>
  window.addEventListener('ViewCategory', function() {
    (new FlashyProductRecommendations(__WEBLAYER_ID__, 'collection-recommendations')).init();
  });
</script>