script hardcoded

gistfile1.txt

// Remove the hardcoded galleryData array and replace with an empty array
let galleryData = [];

// Cart array remains the same
let cart = [];

const notification = document.getElementById("notification");
const galleryContainer = document.getElementById("gallery-grid");

// Function to load gallery data from backend
async function loadGalleryData() {
  try {
    const response = await fetch('get_gallery.php');
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    
    // Check if there's an error in the response
    if (data.error) {
      throw new Error(data.error);
    }
    
    galleryData = data;
    renderGallery();
    
  } catch (error) {
    console.error('Error loading gallery data:', error);
    // Show error message to user
    galleryContainer.innerHTML = '<p class="error-message">Failed to load gallery. Please try again later.</p>';
  }
}

// Function to render the gallery
function renderGallery() {
  // Clear existing gallery items
  galleryContainer.innerHTML = '';
  
  galleryData.forEach((item, index) => {
    const galleryItem = document.createElement("div");
    galleryItem.className = "gallery-item";

    galleryItem.innerHTML = `
      <a target="_blank" href="img/${item.filename}">
        <img src="img/${item.filename}" alt="Roger's artwork" data-index="${index}"></a>
        <div class="gallery-caption">${item.caption}</div>
        <div class="text-box-gallery">
          <h3>${item.title}</h3>
          <p class="gallery-size">Size: ${item.size}</p>
          <p class="price"><button class="add-to-cart" data-id="${item.id}">Add to cart</button>${item.price}</p>
        </div>
    `;

    galleryContainer.appendChild(galleryItem);
  });

  // Re-attach event listeners for add to cart buttons
  document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', addToCart);
  });
}

// Load gallery data when the page loads
document.addEventListener('DOMContentLoaded', function() {
  loadGalleryData();
});

// Rest of your existing functions remain the same
function showNotification(message) {
  notification.textContent = message;
  notification.classList.add('show');

  setTimeout(() => {
    notification.classList.remove('show');
  }, 5000);
}

function addToCart(event) {
  const productid = parseInt(event.target.dataset.id);
  const product = galleryData.find(item => item.id == productid); // Use == for type coercion

  if (product) {
    cart.push({
      id: productid,
      title: product.title,
      price: product.price,
      caption: product.caption,
      quantity: 1
    });
  }
  
  showNotification(`${product.title} was added to cart!`);
  updateCart();
}

function updateCart() {
  console.log("Update Cart. Numarul de tablouri adaugate in Basket: " + cart.length + " - tablouri");
  
  document.getElementById("cart-count").innerHTML = cart.length;

  if (cart.length == 0) {
    document.getElementById("cart-items").innerHTML = '<p class="empty-cart-message">Your cart is empty</p>';
    document.getElementById("checkout-button").disabled = true;
    document.getElementById("viewbasket-button").disabled = true;
  } else {
    document.getElementById("cart-items").innerHTML = "";

    cart.forEach(item => {
      const cartItem = document.createElement("div");
      cartItem.className = 'cart-item';

      cartItem.innerHTML = `
        <div class="item-info">
          <h3 class="item-title">${item.title}</h3>
          <div class="item-price">${item.price}</div>   
          <button class="remove-item" data-id="${item.id}" style="border:1px solid #fff;margin-left: 10px;background-color: white">
            <i class="fa-solid fa-trash" style="font-size: 24px; color: black;"></i>
          </button>
        </div>               

        <style>
        .item-info {
          display: grid;
          grid-template-columns: 1fr auto auto;
          align-items: center;
          gap: 10px; 
          padding: 10px;
          border-bottom: 1px solid #ccc;
        }
        .item-title {
          font-size: 1.2rem;
          font-weight: bold;
        }
        .item-price {
          font-size: 1rem;
          color: #333;
        }
        .remove-item {
          border: 1px solid #fff;
          font-size: 40px;
          background-color: white;
          right: 0;              
          cursor: pointer;
        }
        </style>
      `;

      document.getElementById("cart-items").appendChild(cartItem);
    });

    document.getElementById("checkout-button").disabled = false;
    document.getElementById("viewbasket-button").disabled = false;
  }

  updateCartTotal();

  document.querySelectorAll('.remove-item').forEach(button => {
    button.addEventListener('click', removeItem);
  });
}

function removeItem(event) {
  const productId = parseInt(event.target.parentNode.dataset.id);
  const product = galleryData.find(item => item.id == productId);

  alert("Removed Painting: " + product.title);

  cart = cart.filter(item => item.id !== productId);
  updateCart();
}

function updateCartTotal() {
  const total = cart.reduce((sum, item) => sum + parseFloat(item.price.replace("£", "")), 0);
  document.getElementById("cart-total").textContent = `Total: £${total.toFixed(0)}`;
}

// Modal functionality remains the same
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var currentImageIndex = 0;

galleryContainer.addEventListener('click', function(event) {
  event.preventDefault();
  if (event.target.tagName === 'IMG') {
    var imgIndex = parseInt(event.target.dataset.index);
    showImageInModal(imgIndex);
  }
});

function showImageInModal(index) {
  currentImageIndex = index;
  modal.style.display = "block";
  modalImg.src = "img/" + galleryData[index].filename;
  captionText.innerHTML = galleryData[index].caption;
}

var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

var nextBtn = document.getElementById("nextBtn");
var prevBtn = document.getElementById("prevBtn");

nextBtn.onclick = function() {
  currentImageIndex = (currentImageIndex + 1) % galleryData.length;
  showImageInModal(currentImageIndex);
}

prevBtn.onclick = function() {
  currentImageIndex = (currentImageIndex - 1 + galleryData.length) % galleryData.length;
  showImageInModal(currentImageIndex);
}

// Cart hover functionality remains the same
document.getElementById("cart-link").addEventListener("mouseover", function(event) {
  document.getElementById("cart-container").style.display = "block";
});

document.getElementById("cart-container").addEventListener("mouseover", function(event) {
  document.getElementById("cart-container").style.display = "block";
});

document.getElementById("cart-container").addEventListener("mouseout", function(event) {
  document.getElementById("cart-container").style.display = "none";
});