I am making a website of my shop items, where I need to daily update the items which includes item_name, brand_name, price, item_no., etc. Writing html codes daily is becoming very hard work for me. So, I want to make changes about the items in a CSV file, and import the data into my website. How to do that, Please help me. Thank you in advance. Here is some sample codes:
read_data.html
<html>
<head><title>Reading values from csv file</title></head>
<style type="text/css">
div{
width: 300px;
}
img{
height: 200px;
}
</style>
<body>
<div>
<img src="#" alt="item 1"><br>
Item Name:<!--CSV file data--><br>
Item Number:<!--CSV file data--><br>
Brand Name:<!--CSV file data-->
</div>
<div>
<img src="#" alt="item 2"><br>
Item Name:<!--CSV file data--><br>
Item Number:<!--CSV file data--><br>
Brand Name:<!--CSV file data-->
</div>
</body>
</html>
data.csv
Item Name,Item no.,Brand
T-shirt,555,Hoffmen
Pants,556,Reliance
Edit: this is assuming you have a way to store the data (e.g. a database). It sounds like you would benefit from a CMS (e.g. Wordpress). Anyway, this answer addresses the question of how to get the CSV data:
You can use Papa parse. It would look something like this:
// from file upload field
var file = event.target.inputCSV.value;
var data = Papa.parse(file, {header: true, skipEmptyLines: true, delimiter: ','});
return data;
// outputs something like [{Item_Name: "T-shirt", Item_no: 555, Brand: "Hoffman"}, {Item_Name: "Pants", Item_no: 556, Brand: "Reliance"}]
As suggested by Saptarshi, you'll probably need a database for this, where you can possibly import your CSV. This will help your handling and automize it. The solution might be based on a php/mySQL basis, for example. I'd do some research on the specialties and power of these languages first.
Related
I am working on my first dynamic website using HTML, Express & node.js. Reading through the Stripe documentation and other sources I've come across various examples but my main goal is to use my Stripe API key and each item price ID's in my server and not in my front end code so no one can temper with them. I've successfully use my Stripe API key on my backend and used the .post method to redirect the user after pressing the Buy Now button to the checkout page as shown below:
Node.js
const stripe = require('stripe')('sk_test_key');
const express = require('express');
const app = express();
app.use(express.static('public'));
const YOUR_DOMAIN = 'http://localhost:4242';
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
line_items: [
{
price: 'price_priceKey',
quantity: 1,
},
],
mode: 'payment',
success_url: `${YOUR_DOMAIN}/success.html`,
cancel_url: `${YOUR_DOMAIN}/cancel.html`,
});
res.redirect(303, session.url);
});
app.listen(4242, () => console.log('Running on port 4242'));
HTML
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>
<title>Product Page</title>
<link rel="stylesheet" href="style.css" />
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<div class="row">
<div class="col-lg-6">
<section>
<div class="product">
<img
class="collar-img"
src="image"
alt="product-image"
/>
<div class="description">
<h3>Leather Collar</h3>
<h5>$9.99</h5>
</div>
</div>
<form action="/create-checkout-session" method="POST">
<button type="submit" id="checkout-button">Checkout</button>
</form>
</section>
</div>
<div class="col-lg-6">
<section>
<div class="product">
<img
class="collar-img"
src="image2"
alt="product-image2"
/>
<div class="description">
<h3>Comsos Collar</h3>
<h5>$19.99</h5>
</div>
</div>
<form action="/create-checkout-session" method="POST">
<button type="submit" id="checkout-button">Buy Now</button>
</form>
</section>
</div>
</div>
</body>
</html>
My problem is I've only figure how to hardcode the price ID for a product inside my line_items object in node.js so when the user clicks the Buy Now button it will only add to the checkout page the items that I added. I've come across examples of adding the price ID to the attribute "data-price-id" inside each button element so that each item has a button that contains its correct price but that exposes all my price ID's to my frontend code. I already tried hiding the ID in my frontend using EJS and the dotenv module in node.js but this was futile. I would really appreciate if someone could point me the right direction or sample code on how to pass these different price ID's after user clicks on each button of each item back to my server.
It's okay to expose the Price IDs to the front-end code. Nobody can do anything with those Prices without access to your API keys, so it's okay if they show up on the front-end.
That being said, you can dynamically pass an ID from back-end to front-end via a number of different methods. The one I would recommend would be document.querySelector()[0]. This allows you to dynamically set an HTML element's value using Javascript.
An example might look like this: document.querySelector("#price-id").value = somePriceID;
The above snippet looks for an HTML element called price-id and assigns the value from the somePriceID variable to it.
[0] https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I see you're not using a DB.
One approach you could make is just create an object on the server such as:
const PRODUCT_IDS = {
toaster-x1000: {
price_id: 'toaster-price-id'
}
};
That way, you can just use your own codes on the HTML sites and find the Stripe code on the backend when you need it.
For example, if they want the toaster, you would send "toaster-x1000" and just grab that ID from the list:
const ID_RECEIVED = "toaster-x1000";
const CORRECT_STRIPE_ID = PRODUCT_IDS[ID_RECEIVED].price_id;
That would give you the price id you need for the API call.
I have this code on a website
<div id="productPriceJSON_18678511" style="display:none;">
[{
"isXPromoProd":"true",
"mfPartNumber":"961576-BLACK",
"productGroupId":"18678008",
"productId" : "18678511",
"listPrice" :"$85.00",
"offerPrice" :"$85.00",
"discountPrice" :"$42.50",
"lowestPriceAmount" :"$42.50",
"highestPriceAmount" :"$42.50",
"colorCount" : "0",
"isPriceVary" :"false"
}]
</div>
There are different DIVs with different SKU variable productPriceJSON_18678522, productPriceJSON_18678533,productPriceJSON_18678544 and so on.
I want to do 2 things:
Import all the DIVs that contain productPriceJSON_, I tried using
//div[#id=[contains(.,"skuPriceJSON_")]]
But no luck
How can I get the discount price from this DIV matching $42.50?
Really appreciate the help here.
Cheers,
B.
I have some experience in XQuery to update the XML data. I have tried to use the same logic for the HTML data in SQL Server.
But not working as expected.
For example I have a XML column Value (actually HTML data) as below.
Declare #template xml = '<div>
<div id="divHeader">Congratulation<div id="Salutation">ravi</div></div><br/>
<div>From now you are a part of the Company<div id="cmpnyUserDetails"></div></div><br/>
<div id="clickSection">Please Click Here to Access Your New Features</div>
</div>'
and I would like change the html value od the div with ID "Salutation" to "New Value" and Append the href value to a valid link using the XQuery.
SET #template.modify('replace value of (//div[id=("Salutation")]/text())[1] with "New Value"')
SELECT #template AS data
But it's not working.
Can someone please suggest to me how to make it happen?
Thanks a ton in advance,
Ravi.
You were close. Notice the #id vs. your id
Example
SET #template.modify('replace value of (//div[#id=("Salutation")]/text())[1] with "New Value"')
select #template as data
Returns
<div>
<div id="divHeader">Congratulation<div id="Salutation">New Value</div></div>
<br />
<div>From now you are a part of the Company<div id="cmpnyUserDetails" /></div>
<br />
<div id="clickSection">Please Click Here to Access Your New Features</div>
</div>
first I'd like to thank you for your time trying to help. I am a designer and I suck at developing stuff, so I have no other option than to scream for help.
So this is the situation:
I was asked to add an image (country flag) that's gonna be dynamic, in an element that fetches info from a JSON file with, among others, Resorts (one of the elements being its country's long name, i.e. Australia) and Countries (by long name and shortcode, i.e. Australia, au).
I need to get the country shortcode printed in the img src, but the resort array is only containing its long name.
The code:
This is the way the JSON file presents the information:
{
"Countries":[
{"name":"Australia",
"code":"au",
"continent_code":"oc",
"slug":"australia"}],
"Continents":[
{"name":"Oceania",
"code":"oc",
"slug":"oceania"}],
"Resorts":[{
"id":"1",
"resort_name":"Resort Name",
"encoded_name":"resort-name",
...
"country":"Australia",
...}]
}
And this is my file bit:
const DesktopResort = ({resort}) => (
<Link href="/resort/[resort]" as={`/resort/${resort.encoded_name}`}>
<a target='_blank' className='resort-item'>
<div className="resort">
<div className="top">
<div className="title">{resort.resort_name}</div>
<img className="logo" src="/assets/img/resort-logo-sample.png" />
<span className="info">{`${resort.ski_network} - ${resort.region}`}</span>
// Down below is the "dynamic" file call
<img className="flag-icon" src={`/assets/img/flags/${resort.country}.svg`} />
</div>
<div className="arrow"><img src="/assets/img/arrow-link.png" /></div>
</div>
</a>
</Link>
)
I know its badly done right now, for this australian resort my image src is /assets/img/flags/Australia.svg and what I would need to print is of course /assets/img/flags/au.svg
How would you do it?
Thanks again!
I'd write a little helper function to look up a country code based on the country name.
Note: you'll need to handle what should happen if the country is not found, or the code is not there. I'm just defaulting to an empty string here.
const countryCode = name => {
const country = yourData.Countries.find(country => country.name === name);
return country && country.code || '';
};
Then use this when you're passing the src to your img.
<img
className="flag-icon"
src={`/assets/img/flags/${countryCode(resort.country)}.svg`}
/>
I am creating a weather web app based on API from openweather.com using Spring-Boot and Angular.
I am also using this weather-icons package.
In my HTML file weather icons are displayed like this:
<div class="jumbotron">
<i class="wi wi-snow" style="font-size: 8em;"></i>
<i id="description">{{weather.weatherID}}</i>
</div>
With the help of API I have also weather code value available in html.
Let's say I have a file weather.data with weather codes mapped to icon description like this:
601: snow
602: sleet
611: rain-mix
Is it possible to display certain icon in HTML based on value in data file?
What I want to do is something like:
<div class="jumbotron">
<i class="wi wi-{{weatherDescription}}" style="font-size: 8em;"></i>
</div>
You can get your data from weather.data in a scope variable.
It would be like:
In Controller:
$http.get(path of weather.data file, null, function(response){
$scope.weatherList = response; //do angular.fromJson if required
});
I hope you are getting a JSON object as :
$scope.weatherList = {
601: "snow",
602: "sleet",
611: "rain - mix"
}
If you are getting weather code from server side in weatherDescription, then you can use it like this on html :
In Html:
<div class="jumbotron">
<i class="wi wi-{{weatherList[weatherDescription]}}" style="font-size: 8em;"></i>
</div>
I hope this works for you.