I'm having an issue with my Shopify store. How can I make sure that the quantity dropdown matches the actual items in stock? For instance, if there are only 3 items available, the maximum value in the quantity dropdown should be set to 3. And if there are 5 items in stock, then the max value should be set to 5.
Any suggestions would be greatly appreciated.
To include a quantity drop down on your product page, refer to the instructions provided on a specific page in the Shopify documentation.
<label for="quantity">Qty: </label>
<select id="quantity" name="quantity">
{% for i in (1..10) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
(Ensure you use name="quantity" to pass the value to the cart.)
The issue with limiting the maximum quantity based on remaining stock is that the quantity is linked to variants, not products. It might work for a single variant by adjusting the loop as follows:
{% for i in (1..product.variants.first.inventory_quantity) %}
If dealing with multiple variants, consider restricting the quantity in the cart instead. Here's an example for cart.liquid:
<select id="updates_{{ item.id }}" name="updates[]">
{% for i in (1..item.variant.inventory_quantity) %}
<option value="{{ i }}"{% if item.quantity == i %} selected{% endif %}>{{ i }}</option>
{% endfor %}
</select>
I transitioned this feature to jQuery and eliminated the liquid code from the product page. Essentially, I was utilizing a similar setup as Steph Sharp, but encountered the same limitation she discusses. Now, my quantity select element is devoid of options:
<select id="quantity" name="quantity"></select>
With jQuery, I created a quantity dropdown that reflects the available stock in this manner:
for(var count = 1; count <= variant.inventory_quantity; count++){
if(count === 1){
$('#quantity').empty();
}
var newQtyOption = $("<option></option>").val(count).html(count);
$('#quantity').append("<option value='" + count + "'>" + count + "</option>")
}
This action empties the select element first and then populates it with a child option for each available quantity of this particular variant. This approach was adapted from Caroline Schnapp's script found here: https://gist.github.com/carolineschnapp/1083007
Recently, I set up a web project on my local machine following a tutorial. With the help of XAMPP, I was able to install MySQL and Apache to run my Node.JS backend. Now, I'm looking into hosting the project on an external server to make it accessible ...
I'm puzzled as to why I keep encountering this error. I am attempting to utilize the Vuex store in a composition function, but for some reason, it keeps throwing an error regarding inject (even though I'm not using inject at all). My application ...
I am having trouble styling the table loaded from the table.html file onto the index page. Even after loading the table, the styles from bootstrap classes are not applied. What could be causing this issue? Importing bootstrap libraries directly into the ta ...
Snippet Query: <object id="myMovie" name="myMovie" type="application/x-shockwave-flash" width="100%" height="100%" data="swf/myMovie.swf"> <param name="movie" value="swf/myMovie.swf" /> <param name="allowFullScreen" value="true" /&g ...
When trying to access the key of an object in my database to navigate to a URL based on it, I am finding that the p.$key value is always undefined. service: getAll(){ return this.db.list('/products').valueChanges(); } component: product ...
Here is my array of car makes: const makes = [ {id: "4", name: "Audi"}, {id: "5", name: "Bmw"}, {id: "6", name: "Porsche"}, {id: "31", name: "Seat"}, {id: "32", name: "Skoda"}, {id: "36", name: "Toyota"}, {id: "38", name: "Volkswagen"} ] Now, I want to o ...
http://codepen.io/anon/pen/GqmEAq My goal is to make the 'x' button clicked (the 'x' is created after clicking the plus sign on the menu) and then bring the dropdown back up. I have attempted: a:after:checked ~ .submenu{ max-height ...
I've been dabbling in HTML and attempting to create my own website, but I'm encountering an issue with the positioning of my <table> tag. It keeps appearing at the bottom of the site, despite my CSS instructions to prevent it. The position ...
Whenever a value is selected from the dropdown list, I want to display the corresponding information in another field. Here is an example of my table: id first_name last_name stud_id dob hostel class room bed status 1 ...
I am facing an issue with a script that needs to run with a specific parameter (for example, details.php?studentid=10325). The script contains a form with the following code snippet to send form data back to the current script. However, for some reason, t ...
I encountered an issue while following this tutorial. I am attempting to load an image from a JSON-formatted URL. Despite following the tutorial correctly, I am unable to get the image to load. Upon using react-tools, I noticed that the url field is displ ...
Similar Question: Min-width and max-height for table atrributes The <tables> and <td> elements do not recognize the percentage-based attributes min-width or max-width as per specification. How can this be simulated? ...
Hello everyone! I am diving into the world of HTML and CSS, but I've hit a roadblock. Despite searching through various resources and forums, I can't seem to find a solution to my problem. The issue at hand involves an irritating space in my nav ...
My objective is to have http://localhost:3000/app display myFile.html and http://localhost:3000/api return "It worked!". I currently have two files set up for this: App.js: const http = require('http'); const fs = require('fs&apo ...
Whenever I work with React, my standard process includes running npm build, moving the content to a directory named public in Node, and then including the following code snippets: node/app.js app.use(express.static(path.join(__dirname, 'public') ...
I'm working on a form in Django that redirects to itself after submission. I want to show a message saying "You have entered (work_area)" as a popup or alert that users can close. However, my current setup only displays the message within the HTML aft ...
The div 'hidden-table' is causing issues as it does not display even though the style attribute 'display:none' has been removed. I have attempted to show the table separately outside of the echo statement, and it appears to work correct ...
I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...
Instead of dealing with signing in every time, I prefer pre-signing in on my profile. Even though I am using the code below, it's still not loading in the specified profile. What can I do to resolve this issue? const browser = await remote({ capabi ...
I've implemented a custom hook named useFetch: const useFetch = (url: string, method = 'get', queryParams: any) => { useEffect(() => { let queryString = url; if (queryParams) { queryString += '?' + queryParam ...