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!
Related
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'm customizing a Tumblr blog and I cannot find a good way to access all the posts by date.
Tumblr allows you to display a particular post from a day using their Day Pages, but I want to find all posts and their dates, and then display them as a list sub-divided by months and years (really, it's like Wordpress's default sidebar). See example image here: http://i.stack.imgur.com/28gGH.png
I've been looking through Tumblr's Custom Theme Documentation but have not found a way to generate this information. Perhaps they offer it through their API? I haven't found anything yet.
I appreciate any direction here. Thanks.
I found the best way to do it is by pulling it from your blog's own RSS feed. Add this code after jquery has been included:
<script>
$(function() {
var url = '/rss';
var $list = $('#recent-posts');
$.ajax({
url: url,
type: 'GET',
dataType: 'xml',
success: function(data) {
var $items = $(data).find('item');
$items.each( function() {
var $item = $(this);
var link = $item.children('link').text();
var title = $item.children('title').text();
if (link && title) {
$list.append($('<li>' + title + '</li>'));
}
});
}
});
});
</script>
It will go out and make a list of ALL blog posts, if you want to limit it so a certain number of posts you can check the index value passed into the $items.each() functions: http://api.jquery.com/jquery.each/
Also make sure to include the list in your sidebar:
<!-- RECENT POSTS -->
<ul id="recent-posts"></ul>
<!-- RECENT POSTS -->
Note: the list will probably not appear in preview mode, only once you save your changes and go to the live blog, will it be able to pull from /rss
This was originally posted on discuss.emberjs.com. See:
http://discuss.emberjs.com/t/what-is-the-proper-use-of-store-filter-store-find-for-infinite-scrolling/3798/2
but that site seems to get worse and worse as far as quality of content these days so I'm hoping StackOverflow can rescue me.
Intent: Build a page in ember with ember-data implementing infinite scrolling.
Background Knowledge: Based on the emberjs.com api docs on ember-data, specifically the store.filter and store.find methods ( see: http://emberjs.com/api/data/classes/DS.Store.html#method_filter ) I should be able to set the model hook of a route to the promise of a store filter operation. The response of the promise should be a filtered record array which is a an array of items from the store filtered by a filter function which is suppose to be constantly updated whenever new items are pushed into the store. By combining this with the store.find method which will push items into the store, the filteredRecordArray should automatically update with the new items thus updating the model and resulting in new items showing on the page.
For instance, assume we have a Questions Route, Controller and a model of type Question.
App.QuestionsRoute = Ember.Route.extend({
model: function (urlParams) {
return this.get('store').filter('question', function (q) {
return true;
});
}
});
Then we have a controller with some method that will call store.find, this could be triggered by some event/action whether it be detecting scroll events or the user explicitly clicking to load more, regardless this method would be called to load more questions.
Example:
App.QuestionsController = Ember.ArrayController.extend({
...
loadMore: function (offset) {
return this.get('store').find('question', { skip: currentOffset});
}
...
});
And the template to render the items:
...
{{#each question in controller}}
{{question.title}}
{{/each}}
...
Notice, that with this method we do NOT have to add a function to the store.find promise which explicitly calls this.get('model').pushObjects(questions); In fact, trying to do that once you have already returned a filter record array to the model does not work. Either we manage the content of the model manually, or we let ember-data do the work and I would very much like to let Ember-data do the work.
This is is a very clean API; however, it does not seem to work they way I've written it. Based on the documentation I cannot see anything wrong.
Using the Ember-Inspector tool from chrome I can see that the new questions from the second find call are loaded into the store under the 'question' type but the page does not refresh until I change routes and come back. It seems like the is simply a problem with observers, which made me think that this would be a bug in Ember-Data, but I didn't want to jump to conclusions like that until I asked to see if I'm using Ember-Data as intended.
If someone doesn't know exactly what is wrong but knows how to use store.push/pushMany to recreate this scenario in a jsbin that would also help too. I'm just not familiar with how to use the lower level methods on the store.
Help is much appreciated.
I just made this pattern work for myself, but in the "traditional" way, i.e. without using store.filter().
I managed the "loadMore" part in the router itself :
actions: {
loadMore: function () {
var model = this.controller.get('model'), route = this;
if (!this.get('loading')) {
this.set('loading', true);
this.store.find('question', {offset: model.get('length')}).then(function (records) {
model.addObjects(records);
route.set('loading', false);
});
}
}
}
Since you already tried the traditional way (from what I see in your post on discuss), it seems that the key part is to use addObjects() instead of pushObjects() as you did.
For the records, here is the relevant part of my view to trigger the loadMore action:
didInsertElement: function() {
var controller = this.get('controller');
$(window).on('scroll', function() {
if ($(window).scrollTop() > $(document).height() - ($(window).height()*2)) {
controller.send('loadMore');
}
});
},
willDestroyElement: function() {
$(window).off('scroll');
}
I am now looking to move the loading property to the controller so that I get a nice loader for the user.
I have 10 links to 10 TagPages, when clicked they take you to a page with all the posts with that tag.
That’s easy enough.
I’d like to know if its possible to stack more than one tagged post in a page. For example when all the “red” tagged posts are showing you can click and load in the “blue” tagged posts without leaving the page.
The 10 links then behave like a filtering system. You can then show any combination of tagged posts in one page… click once and load them in, click again to hide the posts.
I hope that all makes sense.
Any help would be great. Thanks.
You can load in posts by tag with Tumblr's API: http://www.tumblr.com/docs/en/api/v2#posts
The call for each of your tags would look something like this (square brackets marking areas you'll need to change):
URL = http://api.tumblr.com/v2/blog/[base-hostname]/posts?api_key=[key]&tag=[tagname]&jsonp=?
$.ajax(URL, {
type: 'GET',
dataType: 'json',
success: function(data) {
// do something with your data
}
});
Updated with a more specific example:
You'd need to create a function for each click of your tag navigation. So let's say you built out your navigation in simple HTML, you'd want to create a function for each of those clicks.
HMTL:
<nav class="tag-nav>
<ul>
<li>Portrait</li>
<li>Landscape</li>
</ul>
</nav>
JS:
$('.tag-nav a').on('click', function (e) {
e.preventDefault();
// grab classname from the link that was just clicked
var tagName = $(this).attr('class');
// go get our tagged posts
getTaggedPosts(tagName);
});
var getTaggedPosts = function (tag) {
// this is where your AJAX call will go
// bonus points if you check to see if you've already made the AJAX call
// and stored the posts somewhere else on the page
};