I am sure there will be articles around this but I really don't know the correct name for it and having little success finding examples like mine.
I have a quote form where you have the ability to select a product and atributes of it. There are three dropdowns and based on the combination of the three, I have a table (with associated model/controller) that has a price. I want to display the price on the page but i must update as the selections are updated.
Setting the price from the get go seemed easy but then updating it based on dropdowns selected had me go in a tail spin of '"onSelectedIndexChanged()', javascript, AJAX, partial views and I simply confused myself.
I need a simple way to display price information on a quote form as they fill out the details (three fields control price). I did look at the music store demo but its slightly different and the shopping cart element which looked handy was grabbing data in a table so again got stuck.
Help always appreciated as ever.
Thanks,
Steve.
When one of the three dropdowns changes, I'd make an AJAX call to the server to get the price as a JSON object and use it to update the price input.
Example using jQuery to add the handlers and perform the AJAX operation.
var $priceControls = $('#control1,#control2,#control2');
$priceControls.change( function() {
$.getJSON( '#Url.Action("price","product")',
$priceControls.serialize(),
function(price) {
$('#price').val(price);
});
});
public class ProductController : Controller
{
public ActionResult Price( string control1, string control2, string control3 )
{
decimal price = ...lookup price based on control values...
return Json( price, JsonRequestBehavior.AllowGet );
}
}
Related
So I'm using Wix to create a ecommerce store, however the standard store isn't flexible enough for me.
I have a dynamic product page and I want to access product quantity in stock with code in order to show whether the product is in stock or not.
I fount this in the documentation (Link)
$w('#myProductPage').getProduct()
.then( (product) => {
let productName = product.name;
let productDescription = product.description;
// see example product object below
} )
.catch( (error) => {
console.log(error);
} );
The only thing is that I don't know whats the page name with what i have to replace '#myProductPage'.
As far as I understand it I have to replace it with my slug product page name however I don't know where I could see it - it should be named products-2 but that doesn't work, it shows an error that the name is not a valid selector.
I haven't found basically any example codes for Wix Corvid and that's why I'm reaaally struggling with such a small thing.
With $w(), you want to pass in the page element's ID -> $w('#elementID')
The element ID can be found in the property pane on the page. Select the page element, right click > View Properties. This will give you the ID you want to pass in to the function. Think of it like a document.getElementById() function replacement.
I have made a custom theme on big cartel, and everything is perfect, except one thing.
I would like to have the cart update without going to the cart page when adding an item to your cart.
I have made my custom template over the "sexy" theme and have no idea how I go about implanting this
I know this can be done, because default themes like "Good Vibes" do this.
You can use the code below. I didn't include the code for the restoreButton function in the addItem callback but I'm sure you get the idea. You'll also need your own means of retrieving the product ID based on however you're displaying your product options. Make sure to also include a reference to Big Cartel's javascript api.
$('#add_to_bag').click(function(evt){
var productId;
if($('.options_select').length != 0)
productId = $( ".options_select option:selected" ).attr('value');
else
productId = $('.price_options input').attr('value');
var quantity = $('.quantity input').attr('value');
Cart.addItem(productId, quantity, function(cart) {
$('#add_to_bag').attr('value', 'Item Added');
setTimeout(restoreButton, 2000);
});
});
You'll want to take advantage of the javascript API: https://help.bigcartel.com/developers/themes/#javascript-api
With this, you can drop in the line of code to load the API into your theme and have access to add, update, and remove items from the cart using javascript.
I have a view where I create a new company.
The company has a number of trades, or which 1 is a primary trade.
So when I enter the trades for that company, I select a trade via autocomplete, and this trade is added to a grid of trades underneath the autocomplete textbox. The grid contains the tradeId as a hidden field, the trade, and a radio button to indicate whether the trade is a primary trade and a remove button.
This is part of a form that contains other company details such as address.
Now I am wondering if I can use knockout and (maybe) jsrender to populate the grid without posting to the server?
When I have filled in the grid AND the other company details, I then want to submit the data to the controller post method.
Normally I use the Html helpers to post values to the controller, but I don't see how I can do that using knockout.
Yes you can use Knockout for this. If you have not checked the tutorials out yet then try this Knockout List and Collections tutorial. This should point you in the right direction. What you'll need to do is create a Trade object with observable properties and in a separate knockout view model create an observableArray to store trade objects. For information on posting to the server there are other tutorials in the same location.
function Trade(item) {
var self = this;
self.tradeId = ko.observable(item.tradeId);
self.tradeName = ko.observable(item.tradeName);
self.isPrimary = ko.observable(item.isPrimary);
}
function TradesViewModel() {
var self = this;
// Editable data
self.trades = ko.observableArray([]);
self.removeTrade = function(trade) { self.trades.remove(trades) }
self.save = function() {
$.post("/controller/action", self.trades);
}
}
ko.applyBindings(new TradesViewModel());
Let´s say I have some sort of datagrid and I want to add a couple chained filters like in this site:
http://www.yelp.com/search?find_desc=bar&ns=1&find_loc=Minneapolis%2C+MN
(sort by,distance,price etc).
Each time a user clciked in a filter link it will update the content of datagrid accordingly. But I would also need to update the links in other filters to take account of the changes. Ex: if i change the order field I need to add/update ?order_field=x in all the other filters links.
What you think is the best way to implement such scenario?
Should i create a function that, when a filter link is clicked, it update the query string params of all the other filters? Or use hidden fields to record the selected option in each filter?
I would like a reusable solution if possible.
Since the data is loading via AJAX, there shouldn't be any links to update - at least not if you mean anchor tags <a>. You don't even need to store the filters in a hidden field.
I would store all the filters as a JSON object. Depending on how your API is set up, you may have to convert the JSON object to something usable by your API or you may even be able to pass on the JSON object directly in the $.ajax request.
This sample code assumes you have a textbox with id="price" in the markup. I intentionally left convert_filters_to_parameters blank because you didnt provide any details as to your API. jQuery will in turn serialize those parameters into a GET or POST request before it sends them out.
var filters = {
distance:null,
price:null,
sortBy:'distance'
}
//this assumes you have a textbox with id="price"
$('#price').changed(function()
{
filters.price = $(this).val();
refresh_data();
});
function refresh_data()
{
var parameters = convert_filters_to_parameters(filters);
$.ajax('/my_api',
{
//i left out a lot of properties here for brevity
data: parameters,
success: function(response) { alert(response); }
});
}
I have a page of products and for each of them, I want to have a form that uses AJAX to update the session. I've done this bit - just providing background.
I use the product's ID to create a different form class and name for each form, so each form is called something like this_form_name_567 and the next would be this_form_name_568 and so on.
There is a submit button per form. I'm having trouble figuring out
Which event is best to use so that the correct form will be identified when a submit button is clicked?
Once clicked, how to then make sure the correct value is taken from a hidden field (unique ID) within the submitted form so that I can populate a line of code such as:
$.post("compare_response.php", {compare_this: $("#compare_this").val()}, function(data){
}
You can use the .closest tree traversal method to get the form in which the button of interest is nested:
$("input[type=submit]").click(function() {
alert($(this).closest("form").attr("id"));
});
or even simpler, just get the element's form property :)
$("input[type=submit]").click(function() {
alert(this.form.id);
});
You can try it out here.
You can get the form you are submitting like this:
$('form').submit(function() {
var yourForm = $(this);
var hiddenValue = $(this).find('input[type=hidden]').val();
});
Of course you can get the hidden value differently, or if you have more than one hidden you'll have to give a little more information about it.