I'm implementing a cart on my website. It works this way: On catalog page there's four products and each has its own "Add to cart" button. Every button has its own onClick attribute which is set to addToCart() function in mu JS file. User can click on the button, and when he does so, js script is initiated. It writes product's id and increase its amount in the sessionStorage in foramt like this: "1=1", or "5=2" where the frist number is index, i.e. product's id, and second one is amount of the product.
And the next thing that I got to do is transfer info about product id and its amount to the PHP's session. And for this purpose I'm using jQuery function post(). But it doesn't work for some reason
add_to_cart.js:
function addToCart(event) {
const PRODUCT_ON_PAGE = 4;
event = event || window.event;
const productId = Number(event.currentTarget.id);
const pageId = Number(document.querySelector(".page-num-highlight").textContent);
let index = Number((pageId - 1) * PRODUCT_ON_PAGE + productId);
let item;
const parseSign = "=";
let quantity = "";
item = sessionStorage.getItem(index);
if (item) {
for (let i = 0; i < item.length; i++) {
if (item[i] == parseSign) {
for (let j = i + 1; j < item.length; j++)
quantity += item[j];
quantity = Number(quantity);
quantity++;
quantity = String(quantity);
item = index + "=" + quantity;
sessionStorage.setItem(index, item);
}
}
}
else {
sessionStorage.setItem(index, String(index) + "=1");
}
$(() => {
let productIndex = index;
let productValue = quantity;
$.post("updateSession.php", {
index: productIndex,
value: productValue
});
})
}
As you can see I process the corresponding index and value of product on which addToCart() was triggered. Index of the product is index variable, amount of product is quantity variable.
And the next step is to send index and quantity variables to php processing script called updateSession.php in order to create/update info of product in PHP's session.
updateSession.php:
<?php
if (isset($_POST["index"]) && isset($_POST["value"])) {
$index = $_POST["index"];
$value = $_POST["value"];
$_SESSION[$index] = $value;
}
UPD1 jQuery part (unwrapped):
let productIndex = index;
let productValue = quantity;
$.post("updateSession.php", {
index: productIndex,
value: productValue
});
UPD2:
**What is not working**: when I go to cart.php var_dump() says that $_SESSION array is empty(). And I don't know where is problem: in add_to_cart.js jQuery part or in updateSession.php
UPD3:
In my console log there's two errors when addToCart() is initiated by clicking "Add to cart" button.
These 2 errors say that post() is not a function. First says jQuery.Deferred exception and second says Uncaught TypeError
Using id of object as key in JS is not a really good practice because JS reaffect key to not have lost indexes. Prefer to use full object with id key setted to your id object.
<button onclick="addToCart(6)">Add to cart</button>
In your HTML button, pass productId as element, it will be easier to use
function addToCart(productId) {
// Search if your object is already in your cart
let cartProductIndex = yourCart.map(p=>p.id).indexOf(productId)
if (cartProductIndex !== -1) { // If you have found it
cart[cartProductIndex].quantity++;
} else { // If you have not found it
// Construct your object like this
let newProduct = {
id: productId,
quantity: 1
}
// Then add it to your cart
cart.push(newProduct)
}
}
// Your cart will looks like this :
[
{
id: 3,
quantity: 1
},
{
id: 6,
quantity: 12
}
]
// Finally, you can send your post request
let datas = {
cart: cart
}
$.post("updateSession.php", datas)
// Your php file
$data = json_decode($_POST['cart']);
So your $data variable will looks like this :
$data = [
[
"id" => 3,
"quantity" => 1
],
[
"id" => 6,
"quantity" => 12
]
];
Related
I'm trying to manipulate the repeater list in Wix. When the user selects the quantity of equipment, that number of forms show up. I got the hang of it when I see it in the console log but when I try to display it on the web, it gives me an error. I've tried reassigning $w("#repeater1").data to newArr(the new data).
Here's my code
$w("#repeater1").hide();
let itemOptions = $w("#quoteDropdown").options
$w("#quoteDropdown").onChange((event) => {
$w("#repeater1").show();
const arrOfValues = []
let newArr = []
let repeaterData = $w("#repeater1").data;
let quantity = Number(event.target.value);
let iterator = repeaterData.values();
for(const value of iterator) {
arrOfValues.push(value);
}
for(let i = 0 ; i < itemOptions.length; i++) {
newArr = repeaterData.slice(0, quantity);
}
if(quantity > newArr.length) {
let newItems = arrOfValues.filter(arr => {
newArr.forEach(na => arr !== na)
})
newArr.push(newItems)
}
console.log("newArr");
console.log(newArr);
// $w("#repeater1").data is the original data from the repeater
// newArr is the altered data from the repeater based on how it appears based on the users' interaction.
// I've tried each one of these
// $w("#repeater1").data = newArr;
// return newArr;
}); // end onChange
If you're trying to assign the array as the data for a repeater, you need to follow some rules. First, it needs to be an array of objects. Second, each object needs to have an _id property.
I have an array in the following format but on form submit, there is no "ID" field available. I want that when the form is submitted by the user then an auto-generated ID should be given and save in JSON Array. On each form submit method, it should check if ID is given already or not. If does not then do assign.
private list :any;
this.list = {
"a_Rows": [
{
"id": "1",
"sname": "amir",
"sType": "Cheque",
"semail": "ert",
},
You could use the below code
<button onclick="submit()">Submit</button>
submit() {
let s = (new Date()).getTime().toString(16) + Math.random().toString(16).substring(2) + "0".repeat(16);
let uuid = s.substr(0,8) + '-' + s.substr(8,4) + '-4000-8' + s.substr(12,3) + '-' + s.substr(15,12);
let data = {
id : uuid,
sname: "amir",
sType: "Cheque",
semail: "ert"
}
}
Please look at this example below, i have create a function as such
u need, it will create unique id and add into the json object with all
of it corresponding value.
let value = { 2071 : {id :101, name: "bathri" , age:22}}
let idIndex;
function CreateJson(name, age){
this.id = generateNewId();
this.name = name;
this.age = age;
return value[this.id] = this;
}
function generateNewId(){
idIndex = Math.floor(Math.random() * 9999) + 1;
if(Object.keys(value).includes(idIndex) == idIndex){
idIndex = generateNewId()
}
return idIndex;
}
let result = new CreateJson('nathan','23')
console.log(value);
Write a function that generates random ids ensures the id field in JSON contains a value when a form submits. If the id field needs to be unique, a fetch of all ids is required to check for uniqueness.
You could either use a uuid for your ids, which are guaranteed to be unique. Or (e.g. if your ids need to be integers) just have a global counter which you increase with each submit and use that as id for new elements.
Example:
items = [];
idCounter = 0;
function addItem(item) {
item.id = idCounter++;
items.push(item);
}
I am working on a shopping cart application were users can click an Add to Cart button that will then add the specific item to local storage. When the user is adding a product to their shopping cart I need to be able to check to see if that specific item/value/product already exists in local storage. If it does, I need to increase only the count of that item/value/product by 1. If not, I need to add an entirely new item/value/product to local storage with a count of 1.
How can I find if an item already exists in local storage and compare it to the id of the current product that a user is attempting to add to their cart? My first few attempts failed miserably and have yet to find anything online that is helping with this issue. Is there a better way of going about this? Any assistance is appreciated. Even a good link to a good page would be extremely helpful.
Below is the code I have to attempt in checking for if the productid being added matches any of the productids in local storage. Basically if the productId that is being added matches the productId of an item in local storage simply add 1 to the quantity.
var retrieverObject = localStorage.getItem('Products');
var retrieveObject = JSON.parse(retrieverObject);
var data = {};
var productId = currentNode.name;
var product = currentNode;
data.productPrice = product.parentNode.previousSibling.previousSibling.id;
data.productId = productId;
var length = retrieveObject.length;
console.log(length);
for(var i = 0; i<length; i++){
if(retrieveObject[i].productId == data.productId){
var quantity = retrieveObject[i].quantity;
retrieveObject.push({"productPrice": data.productPrice, "productId": data.productId, "quantity": quantity++});
}else{
retrieveObject.push({"productPrice": data.productPrice, "productId": data.productId, "quantity": 1});
}
}
console.log(retrieveObject);
localStorage.setItem('Products', JSON.stringify(retrieveObject));
var retrievedObject = localStorage.getItem('Products');
var obj = JSON.parse(retrieverObject);
var len = obj.length;
console.log(len);
for(var i=0; i<len;i++){
console.log(obj[i]['productPrice']+", "+obj[i]['productId']);
}
}
}
There are a few issues. First, I am not entirely certain that the productId of the retrieved object is being compared to the one that is being added. Secondly, the for(var i = 0; i<length; i++){} definitely does not seem to be doing what was expected and is multiplying the number of items being added by 2. Thirdly, which may relate to the second issue, the retrieveObject.push() is not updating the quantity of the product but is adding an entire new entry to local storage. The given answers did not seem to be working for me before so this is what I have been working on. Any new answers or general help would be great.
PT 2. : So I am having an issue with the first entry into the local storage. Without noting that when there is nothing in local storage and you make a call to get the items in it, it returns null or undefined. So currently I have it set up like this:
if(localStorage.getItem("Products") === null || localStorage.getItem("Products") === undefined){
var data = {};
var productId = currentNode.name;
var product = currentNode;
data.productPrice = product.parentNode.previousSibling.previousSibling.id;
data.productId = productId;
var obj = [];
obj = obj[data.productId] = {
productPrice: data.productPrice,
count: 1
};
console.log(obj);
localStorage.setItem('Products', JSON.stringify(obj));
}
else{
var retrieverObject = localStorage.getItem('Products');
var retrieveObject = JSON.parse(retrieverObject);
var data = {};
var productId = currentNode.name;
var product = currentNode;
data.productPrice = product.parentNode.previousSibling.previousSibling.id;
data.productId = productId;
if(retrieveObject[data.productId]){
retrieveObject[data.productId].count++;
}else{
retrieveObject[data.productId] = {
productPrice: data.productPrice,
count: 1
};
}
console.log(retrieveObject);
localStorage.setItem('Products', JSON.stringify(retrieveObject));
}
This creates a first entry in local storage that looks like this : {"productPrice":"78.34","count":1}, and then when adding others looks like this: {"productPrice":"78.34","count":1,"rJUg4uiGl":{"productPrice":"78.34","count":3}} and works perfectly fine. The issue is getting the first entry to b formatted properly. When I change the code in the first if statement like so:
var obj = [];
obj[data.productId] = {
productPrice: data.productPrice,
count: 1
}
I get an empty [] in local storage but when I console.log the obj it is in the proper format. [rJUg4uiGl: Object]. I have been stuck on this and haven't been able to get it working. Again, any help would be really appreciated.
Once you have your data structure in obj, I would suggest using a dictionary with product IDs as keys.
To add the order or whatever, where you have:
obj.push({"productPrice": data.productPrice, "productId": data.productId});
Use:
if (obj[data.productId]) { // if the entry exists,
// increment the count
obj[data.productId].count++;
} else { // if it doesn't,
// add a new entry with count = 1
obj[data.productId] = {
productPrice: data.productPrice,
count: 1
};
}
Here is a complete function, including localStorage handling:
function addToCart(productID, productPrice) {
// get the current cart, or an empty object if null
var cart = JSON.parse(localStorage.getItem("Products")) || {};
// update the cart by adding an entry or incrementing an existing one
if (cart[productId]) {
cart[productId].count++;
} else {
cart[productId] = {
productPrice, // shorthand for `productPrice: productPrice,`
count: 1
};
}
// put the result back in localStorage
localStorage.setItem("Products", JSON.stringify(cart));
}
The solution above is preferable because you can check for a productId without looping through the whole list. If you really want to keep your current data structure of an array of objects, you could update it like this:
var length = retrieveObject.length;
console.log(length);
for (var i = 0; i < length; i++) {
if (retrieveObject[i].productId == data.productId) {
retrieveObject[i].quantity++; // update the entry in the array
} else {
retrieveObject.push({
productPrice: data.productPrice,
productId: data.productId,
quantity: 1
});
}
}
Note that you shouldn't push a new entry into the array; just update the existing one.
Just use localstorage.getItem; it returns null if the key doesn't already exist.
Assuming you are using localStorage node package you could do
if (localStorage.getItem('Products') !== null) {
localStorage.setItem('Products', JSON.stringify(obj));
}
Here is your reference:
https://www.npmjs.com/package/localStorage
Regards
Update:
Searching within your objet is a different story... so you want to check if the Product id is there then you can search for it using lodash
var _ = require('lodash');
// the rest of your code to get the data.productId set
if (localStorage.getItem('Products') !== null) {
var arrayOfProducts = localStorage.getItem('Products');
var existingProducts = _.filter(arrayOfProducts, function (product) { return product.productId === data.productId });
if (existingProducts.length > 0) {
// product found, do your logic
}
}
Here's lodash info https://www.npmjs.com/package/lodash
The other option is using a dictionary and having the productId as key and then using Object.keys to search for it... I've offered an approach that does not change your json structure.
I am creating an Add To Cart in my backbone project by using window.localStorage .
Here is my javascript addToCart()
var cartLS = window.localStorage.getItem("Cart");
var cartObject = deserializeJSONToObj(cartLS); //convert json to object
if(typeof cartLS === 'undefined' || cartLS == null){ //create a new cart, if user have never had it.
var newCart = {
IsVAT : true,
//the other properties beside IsVAT
CartLists : [{
ItemID : item.UID,
Item : item,
Quantity : 1,
SalePrice : 1
}]
};
cartObject = newCart;
}else{ //if user has already had a cart, then push new item or increase quantity of existing item
var cartListIndex = self.getCLIDbyItemID(cartObject.CartLists,item.UID);
if(typeof(cartListIndex) === 'number'){
cartObject.CartLists[cartListIndex].Quantity++; //if item already existed, then increase its quantity.
}
else{
var itemContainer = {
ItemID : item.UID,
Item : item,
Quantity : 1,
SalePrice : 1
};
cartObject.CartLists.push(itemContainer);
}
}
window.localStorage.setItem("Cart",serializeObjToJSON(cartObject));
this.getCLIDbyItemID = function(cartList,itemID){
for(var i = 0; i < cartList.length; i++){
if(cartList[i].ItemID == itemID){
return i;
}
}
return false;
};
Problem : whenever I add new item to existing cart, the last element of CartLists was deleted after inserting a new one (example before adding it was 1,2,3 then after we add 4, CartLists will be 1,2,4 element 3 was deleted).
Solution:
in your addToCart() you are just adding the new item to the cart and updating the localStorage, I think that you should refresh the page after setting back the cart in the localStorage by calling render() or whatever function you are using to render your cart.
I am looking for some Javascript that will:
Update Cart Total on products selected (drop-down menu) and quantities entered
(*Security will be handled by back-end PHP. I have attempted this over the last three days but apparently my code was so bad I feel ashamed to repost it here again)
My Thinking:
- Create a cart object
- Make a function that recalculates the total on any changes that occur
(I can not think of anything else this would require given the javascript will just be passing this over to a PHP script to check anyway)
Does anyone know of some javascript that does the job I seek? Is my thinking correct?
Below is sample shopping cart javascript object built using revealing module pattern.
var shoppingCart = function () {
var obj = {}, items = [];
obj.AddItem = function (itemNo, quantity, price) {
var item = {};
item.itemNo = itemNo;
item.quantity = quantity;
item.price = price;
items.push(item)
};
obj.GetAllItems = function () {
return items;
};
obj.GetItemByNo = function (item) {
for (var i = 0; i < items.length; i++) {
if (items[i].itemNo === item)
return item[i];
}
return null;
};
obj.CalculateTotal = function () {
var total = 0;
for (var i = 0; i < items.length; i++) {
total = total + (items[i].quantity * items[i].price);
}
return total;
};
return obj;
};
var cart = new shoppingCart();
Add items using AddItem method, include additional properties that are useful in the UI.
shoppingcart.AddItem(2,4,2.4);
Gets list of items in the shopping cart
var items = shoppingcart.GetAllItems();
Calculates total price of items in shopping cart
var total = shoppingcart.CalculateTotal();
Please note that I have typed this code in here, so might contain typo's and also I recommend having data type validations for price and quantity as numerics before adding item.