I currently see {{product.sku}} which is tied to product page.
I need to show sku number on category/search pages but there is not global property.
Editing templates > components > products > card.html
If you know of any solution or point me in the right direction, that would be a help.
thanks you in advance :)
Here is an example, tailored to your site specifically, on how you can load the SKU from each product page, and then insert it on the category page. This code should go on the category page. It is meant just as an example, you may have to modify it to work on your site.
// For Each Product...
$('.product').each(function(i) {
// Get the product URL
var url = $('> article > figure > a', this).attr('href'); // http://screencast.com/t/qBgwszhhpFiz
// Perform GET
getProductSKU(url).then(function(sku) {
console.log(sku);
// do something with the sku
// such as append it to the product, maybe above the 'add to cart button'
});
});
/**
* Performs HTTP Get to a given product page
* and returns the SKU on that page.
* #param url <string> - The product URL to GET
* #return Promise - Resolved with product SKU on success.
*/
function getProductSKU(url) {
return new Promise(function(resolve, reject) {
$.ajax({
url: url,
type:'GET',
success: function(data){
resolve($(data).find('#sku-value').text()); //Return the SKU - http://screencast.com/t/zlCAftmekgp
},
error: reject
});
});
}
Links:
http://screencast.com/t/qBgwszhhpFiz
http://screencast.com/t/zlCAftmekgp
You can do an ajax load() call to pull in this information to the page you need it on, but there's not currently a helper or data exposed by the product card to support this.
Related
I am not able to get a prodduct option stock level into a cart page.
and storefront cart API did not get product options stock level. there is another way to show stock level show into the cart page
I tried storefront API and then to ajax call to a product page. but no luck on an options page. plz help on that
<script>
$.ajax({
url:urlpasstoajax,
type:'GET',
success: function(data){
console.log(data);
var countstock =
$(data).find('#product_stock_level').val();stock);
}
}
});
}
</script>
````````````
The stock level for product variants is returned by the product attribute Stencil utils function: https://developer.bigcommerce.com/stencil-docs/reference-docs/stencil-utils-api-reference#stencil-utils_product-attributes
You can see an example of how this works in the cart.js file in Cornerstone. When you change the option on the cart page, the function is fetching the product attribute data to make sure that the selected option is in stock:
https://github.com/bigcommerce/cornerstone/blob/d786c6ecbed5ad588ed9489f79e2226455a07b21/assets/js/theme/cart.js#L149
when I click on product title then I want to get product id and then post product id to another URL and get related product id from the database.
<script>
var a = window.location.href;
$.ajax({
type: "GET",
dataType: "json",
success: function (data) {
var id = data.product.id;
console.log(id);// i got product id but how i post this id to another url and get related product id from database.
}
});
The correct pattern for this is to render the product ID in Liquid to a JS variable. You understand Liquid has a JSON filter too right? So that means making an AJAX call to get the product info is redundant and a waste of time.
Once you have the product ID in JS world, you cannot securely use it to call for related products unless you use an App Proxy. Shopify ensures your Ajax callback comes from the shop and is legit. Calling back to your own database without that is silly as anyone can then hack your data for any other use.
Do this:
<script>
var a = window.location.href;
$.ajax({
type: "GET",
dataType: "json",
success: function (data) {
var id = data.product.id;
$.post("{{url('productIdApi')}}", {product_id: id}, function(result){
//do whatever after response returns
});
}
});
So I used shopify liquid to add a collection page, in this collection page, there is multiple products. A button named "Add all" will add all products from this collection to shopping cart when click.
How can I achieve this in shopify liquid language? Or how many way we can do this?
Also, when I tried to use this from the official doc
jQuery.post('/cart/add.js', {
quantity: 1,
id: 10911378372,
properties: {
'First name': 'Caroline'
}
}).done(function() {
console.log("second success");
})
.fail(function(err) {
if(err.statusText !== 'OK'){
console.log("error", err);
}
})
.always(function() {
console.log("finished");
});
even the statusText is Ok, it falls into the fail block and I don't know why.
Well for add multiple items to cart is neccesary a recursive loop.
I did a code for this issue, feel free for use:
github link
the sample is in the begin function:
//IF PROPERTIES IS EMPTY ONLY SET FALSE
MGUtil.data = [
{"id":"12345","qty":2,"properties":{"data1":"1"}},
{"id":"34567","qty":3,"properties":{"data2":"1"}},
{"id":"67892","qty":1,"properties":{"data3":"1"}},
{"id":"23456","qty":6,"properties":false}
]; // ADD 4 ITEMS
MGUtil.total = MGUtil.data.length;
MGUtil.action = 'add';
MGUtil.recursive();//EXECUTE
You would actually do this with a set of AJAX calls. You can only add one item to the cart at a time. See the AJAX API help.
Then you'd use .liquid to get the default variant id for each displayed product either into a list or, what I generally do, as something like:
<div data-variant="{{ product.selected_or_first_available_variant }}">
...
</div>
see: https://help.shopify.com/themes/liquid/objects/product#product-selected_or_first_available_variant to see if that would be sufficient
and then your button script would gather the variant ids and add them one-by-one to the cart.
There is an example here of adding an item to the cart with JQuery
I'm trying to integrate paypal plus wall without to show the select option iframe because I have a onestep checkout page.
I would like to pass to the PAYPAL.apps.PPP object a user selected payment method and on object creation do the checkout
so here is what I try but I can not preselect paypal payment methods
if(paypalWall) {
//init paypal to make a preorder via PHP
$.ajax({
type: "POST",
url: $self.attr('action'),
data: $(form).serialize()
}).done(function( data ) {
//I append but I do not show the ppp markup
$('body').append(data.html)
//here I try to pass the preselected payment method
paypalConfig.preselection = window.paypalOption
console.log(paypalConfig)
console.log(window.paypalOption);
var ppp = PAYPAL.apps.PPP(paypalConfig)
ppp.setPaymentMethod(paypalOption)
/* here should happen the magic: do the checkout */
//PAYPAL.apps.PPP.doCheckout()
}).fail(function() {
alert( "Fehler!" );
})
}
I see inside PAYPAL.apps.PPP a setPaymentMethod but does not seems to work when I pass data to it. Can be used this method for the approach what I'm trying to achieve?
Is there any way to access more subcategory levels on the category page? Currently, in the context of the category on a category page, there exists a subcategories attribute which lists the immediate children of the current category. Is there any way to have the system return the subcategories of each of those subcategories as well?
I was hoping this could be done via front-matter or some setting in the control panel?
There isn't a way with the existing front-matter or store settings. It would need to be added by BigCommerce as a new feature.
Been there! And as answered be Alyss there's no way to do that straight from the server.
That being said you can always get it done through an AJAX call to the subcategory url and take just what you need from there to finish populating your category page with subcategory products.
First in the category template file I added an empty element with the data I needed to make the call:
<div class="nested container">
<main data-ajax-url="{{url}}" class="product-listing-container"></main>
</div>
Then I added this method to the theme/category.js file and called it inside the loaded method called on template load.
getSubcategoryProducts() {
$('[data-ajax-url]').each((index, el) => {
const $this = $(el);
const thisCatURL = $this.data('ajax-url');
let $thisCatProducts;
$.ajax({
url: thisCatURL,
type: 'GET',
dataType: 'html',
async: true,
}).done((data) => {
$thisCatProducts = $(data).find('#product-listing-container').html();
$this.html(thisCatProducts);
});
});
}
I'm sure there are better ways to do it, probably through the Stencil Utils API but I'm still trying to get a grasp of it as there's close to zero documentation on that.
Good coding!