I have an inquiry form built into my Shopify product page.
Where they can request a callback in regards to the product they're on and the variant id select.
I'm able to call back the current selected variant ID
product.selected_or_first_available_variant.id
But if I change the drop-down selection to another variant, this id will not update.
How do I may this update on the selection of a different variant?
Thank you
Correct - the {{ product.selected_or_first_available_variant.id }} is a Liquid variable, and Liquid is parsed server-side to generate the HTML document that is sent to the browser. Liquid can only ever be accurate as of the time of the initial page load
If you want to respond to user changes after the page has loaded, you'll need to use Javascript. If you are on a product page, there will be some javascript function firing that updates the price, image, etc. when the variant changes. If you can find that function (often, but not always, called selectCallback), you could add the code needed to update your contact form in there.
If you just need a variant ID, one other method to get it would be to write a small javascript function which, on submit of your contact form, takes the current value from the variant ID field in the product form and puts that value into the appropriate field in your contact form.
Hope this helps!
Related
I've got a few products that have different variants - i.e. Colour, Size, etc.
I'm trying to output the parent(?) variant title using - {{ variant.title }} but that's only outputting the variant options themselves i.e. Small, Medium, Large for Size. Is there a way to output the "Size" title and not the individual variant titles.
Sorry if that's confusing, I know I'm in the close but maybe in the wrong ball park!
I don't think the option titles are available on the variant object - for those you would normally look on the parent product object.
If you are printing the variant details from the context of a product page (or other situation where you already have a product object), you can use product.options or product.options_with_values to get the option category names. The option names will always be in the same order as the option values are listed on the variant, so the first value of the product.options array will be for the first item in the variant.options array.
Once an item is added to the cart, the resulting line_item object gets its own style of an options_with_values object that has the names and values of the associated options, but unfortunately this object does not appear to exist on the variant object itself.
Above links all go to the relevant Shopify Liquid reference pages
Hi experts have a nice day,
I have a project on Shopify where I'm getting struggled on how to prevent and make alert when a specific product selected for some conditions.
I made a product template where I populate list of products from collection A as a first set of selection and collection B as a second set of selection.
This is a product page where I can select 1 product from collection A and also 1 product from collection B (Each product has Add to Cart button)
The condition is collection A is required to have a least 1 product added from collection B while collection B does not required to have product from collection A.
Here is I wan't to achieve:
when either products from collection A button clicked it will alert like
"Need to select at least 1 product from collection B"
I'm using cart.js for the multiple products in a product template.
Is this possible? or is there's a simplest way to implement this?
Thanks
I can't speak to the inner workings of cart.js, but what you're asking for should be reasonably straightforward with regular Javascript.
What it sounds like you want to do is:
On submit of Form A;
Select Form B;
Check if Form B has a variant selected;
Prevent the add-to-cart action if no variant in Form B
If cart.js has an easy way to insert a validation function, that's where I would insert the code. Otherwise, I would add the validation function to the form submit or click of the submit button, whichever is more convenient with cart.js being in play.
A sample validation function would look something like:
function validateFormA(evt){
var formB = document.forms('product-form-b'); // document.forms can access any form on the page using the appropriate ID attribute
if(!form){
// Couldn't find form, should this pass or fail?
return;
}
var variantIdField = form.id; // To access the form control with the name 'id'
var value = variantIdField.value;
if(!value){
evt.preventDefault();
return false;
}
return true;
}
I have defined an extended product view which uses a checkbox field to define that a product has certain attributes.
I would like that when user clicks on that checkbox a given value in Units of Measure dropdown field is automatically selected.
So, how do I select a value on a dropdown list when user clicks on a checkbox? (same view).
Thanks
It should be done by onchange method. You can define new boolean fields in that model and need to write onchange function for that.
#api.onchange('boolean_field1','boolean_field2')
def onchange_boolean(self):
if self.boolean_field:
self.product_uom_id = product_uom_record_id
else:
self.product_uom_id = product_uom_record_id
#Your custom code
Here,
product_uom_record_id : you need to search product uom record and set it there. Make sure you must assign ID not the object (browsable
record)
By this way you can call this function while onchange happen on this boolean field.
I have:
Table "user"
id, username, password
Table "freedate"
id, user_id, start_date, end_date
Each user can have 1 or more (unlimited) number of "freedate" entries.
Now i have form with 2 text fields (username and password), and 2 date pickers (one for start date and another one for end date).
How can i enable user to inserd aditional datepicker pairs so they can enter as much of "freedate" entires as they need to?
I was wondering about insertind aditional button inside form, that would somehow create aditional fields when pressed, but u have no idea how to do it.
I don't need working example (even tho one would help ofc). What i need i suggestion from your own expirience if you had similar problem.
You can use javascript as noted above. Though that can get tricky to get the new fields associated with the datepicker.
You can also submit after each pair is entered. On returning back to form after save insert a new set of start/end date fields to the end of the form. This way they always have a freedate pair they can enter. (a bit slower overall)
You need javascript to generate these fields on the fly. Or a fixed amount of extra fields could be hidden and shown one by one using javascript as the user clicks the button. You would need to keep track of the number of fields being shown in a javascript var.
You need to write custom javascript in order to do that. It isn't hard, you would need to do something along these lines:
You need to create a button and, when that button gets clicked (onClick event or jquery click() function) you can add the html for your field (<input type=.... /> and so on to your form) and remember to use the correct name for these fields so that they get sent correctly when the user submits the form.
Have seen several posts with solutions for native SharePoint lists, including the very useful SPUtility.js (only for native SharePoint lists). But nothing to pass a value from a BCS list to a new BCS list. The Query string filter will not connect on the New form (no web part to connect it to) and does me no good on the lists page (already have that working).
A "go write custom code for everything" is not a solution for me.
There should be a way to 1) pass the value in the URL (ideal - what's the syntax?) or 2) make some other simple change, perhaps to the select list for the item -- I just can't find it. Have seen quite a few posts with similar questions. The Microsoft documentation is not useful and there are more questions on the "social" topics than answers.
Here's what I have:
I have a BCS list (sends item) tied to a BCS related list (receives item).
I have an action on the related list (ECT) to create a new item. Works fine with no parameters. I get a blank new form. The new form allows me to enter two items and choose two items (exactly as intended).
What I would like to have is the necessary ?something=something string so that my user does not have to select one of the choice items (MNumber - set as a key / required value)
User selects "New" from Actions.
Form Opens
MNumber is automatically filled in based on the MNumber of the current item displayed in the BCS related list.
The string I supply is accepted. Does nothing.
/intake/Lists/ContactsList/NewForm.aspx
/intake/Lists/ContactsList/NewForm.aspx?MNumber=1234
The string I supply is rejected - cannot be saved or insufficient values.
/intake/Lists/ContactsList/NewForm.aspx?MHICNumber={$MHICNumber}
Have also tried passing a string to one of the text fields (instead of the select field). Can't get that to work either. I've spent quite a few hours with the various boards. Nothing helpful.
Would also be nicer if I could set the New form to display in a pop-over window (as it does when I select New from the list view). Opening a new browser window is hokey and replacing the existing one is a navigation pain for the user.
Have this working ... Thanks to Kit Menke!
Created an Action on the External Content Type in the BCS....
/intake/Lists/ContactsList/NewForm.aspx?IDnumber={0}&Source=/intake/scheduling.aspx
where
parameter property 0 is the IDNumber from the ECT
The NewForm.aspx was edited to add a hidden content editor web part with references to three scripts Kit wrote - two supporting and one that sets the values.
http://site/list/NewForm.aspx?toolpaneview=2
User selects the Action on the displayed ECT list
Action uses the URL to go to the New page with the data
Kit's script adds the data to the form and puts in the date and time.
Note: The ID field needs to be a text field. Cannot be a selection list.