Can I add pop for the Pre Oder process.

[Lihini]

I have a button called pre-older then, there should be an open pop-up to do pre-order. In there need to take personal details, Shipping Information, products, category, and checkout. According to my design, I cannot use apps, so I need to custom-create this. The issue is how to save those details after I create the HTML popup model

[Lihini]

@mickey71 Thanks for the reply. I updated the theme.liquid file according to the custom modal. But how to save those data?

[Lihini]

1

2

3

Personal Information

Shipping Information

Country {{ country_option_tags }}

Next

Choose Your Drink

{% assign products = collections.all.products %} {% for product in products limit:3 %}

{{ product.title }}

{{ product.price | money }}

{% endfor %}

Back Next

Order Summary

Back Place Pre Order

// Function to show the next step
function nextStep(step) {
document.querySelector(‘.step-’ + step).classList.remove(‘active’);
document.querySelector(‘.step-’ + (step + 1)).classList.add(‘active’);
updateProgressIndicator(step + 1);
}

// Function to show the previous step
function prevStep(step) {
document.querySelector(‘.step-’ + step).classList.remove(‘active’);
document.querySelector(‘.step-’ + (step - 1)).classList.add(‘active’);
updateProgressIndicator(step - 1);
}

// Function to update the progress indicator
function updateProgressIndicator(step) {
document.querySelectorAll(‘.step-indicator’).forEach(function (indicator, index) {
if (index < step) {
indicator.classList.add(‘complete’);
} else {
indicator.classList.remove(‘complete’);
}
});

document.querySelectorAll(‘.step-line’).forEach(function (line, index) {
if (index < step - 1) {
line.classList.add(‘complete’);
} else {
line.classList.remove(‘complete’);
}
});
}

// Function to show the popup
function showPopup() {
document.getElementById(‘multiStepForm’).style.display = ‘flex’;
}

// Function to hide the popup
function hidePopup() {
document.getElementById(‘multiStepForm’).style.display = ‘none’;
}

// Event listener for all “Pre-Order” buttons
document.querySelectorAll(‘.preOrderBtn’).forEach(button => {
button.addEventListener(‘click’, function() {
showPopup();
});
});

// Event listener for closing the popup (you can add a close button in the popup)
document.querySelector(‘.popup’).addEventListener(‘click’, function(e) {
if (e.target === this) {
hidePopup();
}
});