From 43fb8f0c5d907b79f85ce9c6f2839b9bb5840102 Mon Sep 17 00:00:00 2001 From: Boonk3312 Date: Fri, 23 Feb 2024 10:52:08 -0800 Subject: [PATCH] Update and rename products.html to scripts.js --- docs/products.html | 220 --------------------------------------------- docs/scripts.js | 97 ++++++++++++++++++++ 2 files changed, 97 insertions(+), 220 deletions(-) delete mode 100644 docs/products.html create mode 100644 docs/scripts.js diff --git a/docs/products.html b/docs/products.html deleted file mode 100644 index 3ec5e1b..0000000 --- a/docs/products.html +++ /dev/null @@ -1,220 +0,0 @@ -ome offices. Featuring impressive processing power, ample storage capacity, and robust connectivity options, this miniature powerhouse ensures seamless operation and reliable performance for your essential applications.

- - - -
-

ByteTech MicroServer Series Mini+

-

The ByteTech MicroServer Series Mini+ represents the next generation of micro servers, offering increased performance and expandability compared to its predecessor. Ideal for hosting web services, media streaming, and other resource-intensive tasks, this compact and efficient server is an excellent choice for those seeking maximum value from minimal hardware.

- -
- -
-

ByteTech MicroServer Series Mini Lite+

-

The ByteTech MicroServer Series Mini Lite+ is a highly configurable and scalable microserver designed for developers and hobbyists. Offering extensive upgrade possibilities, this platform enables users to experiment with different configurations and optimize their solutions based on specific requirements.

- -
- -
-

ByteTech MicroTransistor 8030 series

-

The ByteTech MicroTransistor 8030 series is a line of ultra-compact transistors specifically engineered for use in portable electronic devices and battery-powered systems. These low-power transistors feature superior efficiency, reliability, and compatibility, ensuring optimal functionality even in challenging environments.

- -
- - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Compare our pricing plans
StarterProfessionalEnterprise
Number of UsersUp to 5Up to 25Unlimited
Storage Space5 GB25 GB1 TB
Monthly Price$9.99$29.99$79.99
-
-
- - @extends('layouts.app') - -@section('title', 'All Products - E-commerce Store') - -@section('content') -
- @if ($message = Session::get('success')) - - @endif - - - - - - - - - - - - - @foreach ($products as $key => $product) - - - - - - - - - - - - @endforeach - -
#ImageNamePriceActions
{{ ++$i }}{{ Str::limit($product->name, 60) }}{{ Str::limit($product->name, 60) }}${{$product->price}} - View Details - -
-
- - - - - - - - -Next, update the scripts.js file to incorporate the entire functionality, including handling the "Buy Now" button clicks, displaying the product detail modals, and sending the buyer information to the server. Make sure to define the baseURL and jsonEndpoint constants at the beginning of the script. - -const baseURL = 'http://localhost:3000'; // Replace this with your server URL -const jsonEndpoint = '/api/orders'; // The endpoint where you want to store the orders -const i = 1; - -$(document).ready(function () { - // Initialize the product detail modals - $(".view-details-button").on("click", function () { - const productId = $(this).attr("id").split("_")[1]; - getProductById(productId); - }); - - $(".buy-now-button").on("click", async function (event) { - event.preventDefault(); - - const productId = $(this).attr("data-productid"); - - // Disable the buy now button temporarily - $(this).prop("disabled", true); - - // Get buyer details from the inputs - const firstName = $("#firstNameInput").val(); - const lastName = $("#lastNameInput").val(); - const email = $("#emailInput").val(); - const country = $("#countrySelect").val(); - const streetAddressLine1 = $("#streetAddressLine1Input").val(); - const city = $("#cityInput").val(); - const stateOrProvince = $("#stateOrProvinceInput").val(); - const postalCode = $("#postalCodeInput").val(); - const age = parseInt($("#ageInput").val()); - const phoneNumber = $("#phoneNumberInput").val(); - - try { - // Create an order on the server - await axios.post(`${baseURL}${jsonEndpoint}`, { - productId, - buyerInfo: { - firstName, - lastName, - email, - country, - streetAddressLine1, - city, - stateOrProvince, - postalCode, - age, - phoneNumber, - }, - }); - - // Show a success message - Swal.fire("Order placed!", "You have successfully ordered product #" + productId, "success"); - - // Reset the inputs - resetInputs(); - - // Enable the buy now button again - $(this).prop("disabled", false); - } catch (err) { - console.error(err); - Swal.fire("Error placing order.", "", "error"); - - // Enable the buy now button again - $(this).prop("disabled", false); - } - }); -}); - -function getProductById(id) { - axios - .get(`${baseURL}/products/${id}`) - .then((response) => { - const product = response.data; - fillInProductDetails(product); - }) - .catch((error) => { - console.error(error); - }); -} - -function fillInProductDetails(product) { - $("#productNameModal_" + product.id).text(product.name); - $("#productDescriptionModal_" + product.id).text(product.description); - $("#productPriceModal_" + product.id).text("$" + product.price); -} - -function resetInputs() { - $("#firstNameInput").val(""); - $("#lastNameInput").val(""); - $("#emailInput").val(""); - $("#countrySelect").val("USA"); - $("#streetAddressLine1Input").val(""); - $("#cityInput").val(""); - $("#stateOrProvinceInput").val(""); - $("#postalCodeInput").val(""); - $("#ageInput").val(""); - $("#phoneNumberInput").val(""); -} - - - diff --git a/docs/scripts.js b/docs/scripts.js new file mode 100644 index 0000000..b2e7eb0 --- /dev/null +++ b/docs/scripts.js @@ -0,0 +1,97 @@ +const baseURL = 'http://localhost:3000'; // Replace this with your server URL +const jsonEndpoint = '/api/orders'; // The endpoint where you want to store the orders +const i = 1; + +$(document).ready(function () { + // Initialize the product detail modals + $(".view-details-button").on("click", function () { + const productId = $(this).attr("id").split("_")[1]; + getProductById(productId); + }); + + $(".buy-now-button").on("click", async function (event) { + event.preventDefault(); + + const productId = $(this).attr("data-productid"); + + // Disable the buy now button temporarily + $(this).prop("disabled", true); + + // Get buyer details from the inputs + const firstName = $("#firstNameInput").val(); + const lastName = $("#lastNameInput").val(); + const email = $("#emailInput").val(); + const country = $("#countrySelect").val(); + const streetAddressLine1 = $("#streetAddressLine1Input").val(); + const city = $("#cityInput").val(); + const stateOrProvince = $("#stateOrProvinceInput").val(); + const postalCode = $("#postalCodeInput").val(); + const age = parseInt($("#ageInput").val()); + const phoneNumber = $("#phoneNumberInput").val(); + + try { + // Create an order on the server + await axios.post(`${baseURL}${jsonEndpoint}`, { + productId, + buyerInfo: { + firstName, + lastName, + email, + country, + streetAddressLine1, + city, + stateOrProvince, + postalCode, + age, + phoneNumber, + }, + }); + + // Show a success message + Swal.fire("Order placed!", "You have successfully ordered product #" + productId, "success"); + + // Reset the inputs + resetInputs(); + + // Enable the buy now button again + $(this).prop("disabled", false); + } catch (err) { + console.error(err); + Swal.fire("Error placing order.", "", "error"); + + // Enable the buy now button again + $(this).prop("disabled", false); + } + }); +}); + +function getProductById(id) { + axios + .get(`${baseURL}/products/${id}`) + .then((response) => { + const product = response.data; + fillInProductDetails(product); + }) + .catch((error) => { + console.error(error); + }); +} + +function fillInProductDetails(product) { + $("#productNameModal_" + product.id).text(product.name); + $("#productDescriptionModal_" + product.id).text(product.description); + $("#productPriceModal_" + product.id).text("$" + product.price); +} + +function resetInputs() { + $("#firstNameInput").val(""); + $("#lastNameInput").val(""); + $("#emailInput").val(""); + $("#countrySelect").val("USA"); + $("#streetAddressLine1Input").val(""); + $("#cityInput").val(""); + $("#stateOrProvinceInput").val(""); + $("#postalCodeInput").val(""); + $("#ageInput").val(""); + $("#phoneNumberInput").val(""); +}