Products display on a page according to google analytics Enhanced Ecommerce documentation. I have to run next script to sent info about that:
ga('ec:addImpression', { // Provide product details in an impressionFieldObject.
'id': 'P12345', // Product ID (string).
'name': 'Android Warhol T-Shirt', // Product name (string).
'category': 'Apparel/T-Shirts', // Product category (string).
'brand': 'Google', // Product brand (string).
'variant': 'Black', // Product variant (string).
'list': 'Search Results', // Product list (string).
'position': 1, // Product position (number).
'dimension1': 'Member' // Custom dimension (string).
});
ga('send', 'pageview'); // !!
And the page hit should be to sent with this info.
ga('send', 'pageview');
So, How to send info about products each have been loaded later by Ajax.
All e-commerce data needs to be sent with either an (non-interactive or not) event or a pageview. In your case you might want to use a virtual pageview since you don't have actual pageviews. You could do something like this
ga('send', 'pageview', '/your/ajax/page');
each time you load your Ajax content with you ecomm data.
Related
I have been looking at this example of disjunctiveFacets https://l7tzs.csb.app/ and the code
https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/vue-instantsearch/query-suggestions?file=/src/App.vue
According to the docs you can define the facet like this
instantsearch.widgets.refinementList({
container: '#brand-list',
attribute: 'brand',
limit: 10,
showMore: true,
searchable: true,
searchablePlaceholder: 'Search for a brand',
searchableIsAlwaysActive: true,
disjunctiveFacets: ['Appliances', 'Cell Phones'],
})
I have dedicated pages for various categories for Appliances and Cell Phones so when a search result looks like this
i want to be able to navigate to the Appliances category url for instance. How can i do that and also pass the drop down data to my dedicated page?
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
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
TLDR: has the ajaxsubmit url parameter been renamed in Stencil, or is there a better way to add multiple sizes with different quantities to the cart quickly?
I need to have separate quantity boxes for each size of a product so customers can order for sports teams. I have been able to make this format appear on the frontend by using this code in templates/components/products/set-select.html:
{{#if display_name '==' 'Size'}}
{{#each values}}
<label>{{label}}</label>
<input class="size-quantity" type="tel" name="{{id}}">
{{/each}}
<script>
sizeattributeid = {{id}};
</script>
{{/if}}
I have also created a separate 'Add Sizes to Cart' button that fires a function looping through each .size-quantity box to collect the 'name' and 'val' of each one so I can submit it to the cart.
My first thought was to do this via an ajax request with jQuery like this:
productid = jQuery('input[name="product_id"]').val();
jQuery('.size-quantity').each(function() {
qty_value = jQuery(this).val();
sizeattributevalue = jQuery(this).attr('name');
$.ajax({
type: 'GET',
url: cartUrl+'?action=add&product_id='+productid+'&qty[]=qty_value&attribute['+sizeattributeid+']='+sizeattributevalue+'&ajaxsubmit=1&fastcart=1',
success: function(data) {
//parse bigcommerce html reponse
var obj = JSON.parse($(data).html());
//success property = true if item was added successfully
if (obj.success) {
console.log('yay!');
} else {
console.log('fail!');
}
}
});
});
And I have been able to get the crafted URL to add a product to the cart if I paste the generated url into the browser...but I have not been able to with ajax. It seems the ajaxsubmit part of their code does not work with Stencil the way that it worked with Blueprint.
Has this code been renamed? My only alternative to this has been to hide the select box for size and the box for quantity, and then on submit loop through each size and have the quantity box fill in with the desired quantity and submit the form...but that is slow and the only way I've been able to get that to work is by spacing out my requests 600ms at a time, an unacceptable wait.
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.