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

ההמלצות מוצרים של פלאשי עוזרות להגדיל את המכירות באמצעות המלצות מוצרים חכמות שמתבססות על כל פרטי המבקרים והלקוחות החוזרים באתר.

באמצעות ה API ביחד עם המערכת WooCommerce תוכלו להגיע למקסימום יכולות בעיצוב והתאמות לאתר שלכם ולעשות כמעט כל דבר שתרצו באמצעות מספר קודים פשוטים.

יש להטמעה שני חלקים, החלק הראשון זה ה BACKEND שאמור להחזיר את פרטי המוצרים, והחלק השני זה התצוגה שלהם בתוך התבנית שלכם.

שלב ראשון: הטמעת הקוד PHP

יצרנו עבורכם קוד קטן ב PHP שבעצם מייצר לכם נקודה של REST API, אליו נשלח בקשה כדי לקבל את כל פרטי המוצר, כאן תוכלו לערוך ולהכניס את האלמנטים שאתם כבר מכירים מה WooCommerce שלכם - כולל וריאציות, מחירים מיוחדים או כל דבר Custom שקיים אצלכם בתבנית.

להלן הקוד, אנחנו מציעים לייצר קובץ חדש שנקרא לו flashy-rest.php ושם נכניס את הקוד הבא, שימו לב שאתם יכולים לערוך אותו איך שתרצו ולהוסיף את כל הערכים שרלוונטים אליכם (זה קוד PHP רגיל ל WooCommerce ופלאשי לא נשען עליו אז תוכלו להשתמש בו איך שתרצו).

<?php

add_action( 'rest_api_init', function () {
    register_rest_route( 'flashy/v1', '/products/', array(
        'methods' => 'GET',
        'callback' => 'get_products_by_ids',
        'permission_callback' => '__return_true',
    ));
});

function get_products_by_ids( $request ) {
    $ids = explode(',', $request['ids']);

    $args = array(
        'include' => $ids,
        'return' => 'objects', // Return array of WC_Product objects
    );

    $query = new WC_Product_Query($args);
    $products = $query->get_products();

    $response = []; // Placeholder for response data

    foreach ($products as $product) {
        $response[] = array(
            'id' => $product->get_id(),
            'name' => $product->get_name(),
            'price' => $product->get_price(),
            'sale_price' => $product->get_sale_price(),
        );
    }

    return new WP_REST_Response($response, 200);
}

אחרי שיצרתם את הקובץ, צריך להוסיף את השורה לקובץ functions.php שלכם על מנת לטעון את הקובץ, המיקום של השורה לא משנה למרות שההמלצה שלנו היא למקם אותו כמו שיותר למעלה, זה יכול לשפר את זמני הטעינה:

<?php
require_once("flashy-rest.php");

אחרי שסיימתם את החלק הזה, יש לכם נקודה שאתם יכולים לשלוח אליה בקשה והיא תחזיר את כל פרטי המוצרים שתרצו.

שלב שני: הטמעת האלמנטים בתבנית שלכם

אנחנו ממליצים ליצור קובץ כללי של JS שתוכלו להשתמש בו בעמודים שונים, התוכן של הקובץ יהיה:

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 Flashy Rest API
  async fetchProductDetails(productNumericIds) {
    try {
      const response = await fetch(`/wp-json/flashy/v1/products/?ids=${productNumericIds}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      return await response.json();

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

  getProductTemplate(product) {
    return `
      <div class="product-item">
        ${product.image}
        <div class="product-title">${product.name}</div>
        <a href="${product.link}" 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.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();
  }
}

לפני שאתם ממקמים את האלמנטים, שימו לב שטענתם את הקובץ JS של הקוד למעלה והוא חלק מהתבנית שלכם, עכשיו אנחנו יכולים להכניס בתבנית את הקוד הבא שבעצם מכניס את אלמנטים למיקום הרלוונטי שנבחר.

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