ISC with Jquery isotope

[zegermens]

Hey Guys, I think this is the right place to ask for help!

Im working on a website for a friend of mine. He wants to use Isotope Jquery plugin for the entire site layout. The shopping cart im using is interspire shopping cart. Has anyone tried to add this to it?
What i want to happen is when someone goes to the homepage then all the products in the store will load while using infinite scroll. Im really struggling to get the shopping cart linked up to isotope though.

Can anyone help? The website address at the moment is www.pcrepairandmaintenance.freshtilldeath.co.uk Ive just added a few divs to the main page without them being linked to the cart just to see how it all works.

Any help at all and ill be extremely grateful!

many thanks

Chris

[Martin]

Just so you know... If someone doesn't respond it's because they haven't a clue how to help you and I'll be honest I fit into that category because you're talking front end, Javascript/jQuery stuff which drives me to distraction at the best of times (Give my PHP any day)...

Even if someone doesn't respond for a few days or weeks, someone will undoubtedly chip in eventually, especially if you keep attacking the problem yourself and feeding back what you learn. This place is as much about people figuring it out for themselves (we've had to with Interspires "legendary" support after all) and sharing that process, as anything else...

[zegermens]

Ha! Cheers for the heads up. Yeah interspire support is woeful to say the least. Thing is im a relative newbie to using interspire and it baffles me why they have made it so complex when it could have been so much easier.

I'll rephrase my original question as i think it may just be something simple that im missing out.
If i wanted a product from interspire to load into a custom div class ive created without having to hard code the info into the homepage.

So if i had "<div class"product">Product title</div> How could i get or what files do i need to edit in order to get all products loading and creating the product div class?

Im Still in work at the moment so unable to give any coding exampls sorry.

Again many thanks, heres hoping that i dont have to wait weeks for this

Chris

[Tony Barnes]

For that you just need to edit the template files - /templates/your_template/....

The typical way it works is the main templates draw in the panels, which themselves draw in the snippets - this isn't exclusive, but typically like that. All the templates, panels, and snippets are located in the _master folder - copy any you want to change over into your template folder, and then play about with them.

Never come across Isoptope before, just had a look at a demo - http://isotope.metafizzy.co/demos/eleme ... plete.html - holy crap that's awesome!!!! Will be interested to see how you get on

Having looked at that, I now know that for your infinite scroll, you will need to hack around the php files as well I guess, presumably that is done via ajax, returning x number of results at a time? This could get really complicated, but have a lovely outcome

[zegermens]

hey thanks for the reply.
This is the site so far www.freshtilldeath.co.uk
not going to be the actual web address as the site will be transfered over afterwards but still struggling on how to get around this with a shopping cart.....

[Tony Barnes]

I'm really liking this start point - looks to just be an HTML mock- up so far, right?

Does the isotope stuff just work by traversing the DOM, and finding the elements you ask of it within an outer container that is set to isotope-item? If so, this actually might be reasonably straightforward.

Firstly, you just need to edit the CategoryProductsItem.html snippet (and all the other ones, featured, home, etc, if they are to be used) to get the isotope tag in there. Then you will need to change the SideCategoryList snippet & panel to bring in the isotope stuff.

Lastly you would need to remove/change the sorting that is already in the cart.

From there, you would actually be set to go I think, the only issue would be the infinite load, which you could overcome by simply changing the total number of products to display in the backend (though this would cause excessive load times if large numbers of products were to be used), or alternatively removing the limits from the includes/display/categorycontent.php - hopefully in some way adding in an ajax call back for the infinite loop bit.

Hmmm, if you added lazyload (http://www.appelsiini.net/projects/lazyload) to the site at the same time, assuming it didn't conflict with isotope, then you could simply set the entire catalogue to load, and then have the categories set in an overflow hidden div. This would be the quickest option I think, providing it was compatible.

Funny, this has gone from looking like a pig to put together, to something that might be pretty quick to do

[zegermens]

Hey Tony, the bit im stuck on is that as it stands with the page so far each product image,name and description are currently like this:

<div class="element CategoryOne Brandtwo" data-budget="100">
<div id="productimg"><img src="images/test.png" width="160" height="231" /></div>
<h2 class="name">Product Name A</h2>
<p class="price">80</p>
</div>

ELEMENT - Name of div class
CATEGORY, BRAND, NAME & PRICE are all for the sorting and filtering options on isotope.

All Interspire will be used for mainly is just as a CMS and for payment gateways.
Ive tried editing the files but still no further

[Tony Barnes]

Sorry, I'm getting confused here - are you not going to be using the product/category set up that is built into ISC?

I'm hoping that I am wrong on that front, as this could work well as an integration!

All the bits you've mentioned there are held in the product info tables, so you could call them provided you have set the globals in the php backend. For example, this is the standard CategoryProductsItem.html file:

Code: Select all

							<li class="%%GLOBAL_AlternateClass%%">
								<div class="ProductImage">
									%%GLOBAL_ProductThumb%%
								</div>
								<div class="ProductDetails">
									<strong><a href="%%GLOBAL_ProductLink%%" class="%%GLOBAL_SearchTrackClass%%">%%GLOBAL_ProductName%%</a></strong>
								</div>
								<div class="ProductPriceRating">
									<em>%%GLOBAL_ProductPrice%%</em>
									<span class="Rating Rating%%GLOBAL_ProductRating%%"><img src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ProductRating%%.gif" alt="" style="%%GLOBAL_HideProductRating%%" /></span>
								</div>
								<div class="ProductCompareButton" style="display:%%GLOBAL_HideCompareItems%%">
									<input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_%%GLOBAL_ProductId%%" value="%%GLOBAL_ProductId%%" onclick="product_comparison_box_changed(this.checked)" /> <label for="compare_%%GLOBAL_ProductId%%">%%LNG_Compare%%</label> <br />
								</div>
								<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
									<a href="%%GLOBAL_ProductURL%%">%%GLOBAL_ProductAddText%%</a>
								</div>
							</li>

If you wanted to set it up as per the structure you have outlined, then you would need to do something like this:

Code: Select all

<div class="element %%GLOBAL_Category%% %%GLOBAL_BrandName%%" data-budget="100">
<div id="productimg"><img src="%%GLOBAL_ProductThumb%%"/></div>
<h2 class="name">%%GLOBAL_ProductName%%</h2>
<p class="price">%%GLOBAL_ProductPrice%%</p>
</div> 

Then in the CategoryContent.html panel you would need to tweak as required for any structure needed higher up, as it were.

In the code I have given above, 2 of the 'globals' will not have been declared, in order to do that, you will need to edit /lib/templates/products_panel.php - find this bit:

Code: Select all

		$GLOBALS['ProductId'] = (int)$row['productid'];
		$GLOBALS['ProductName'] = isc_html_escape($row['prodname']);
		$GLOBALS['ProductLink'] = ProdLink($row['prodname']);
		$GLOBALS['ProductRating'] = (int)$row['prodavgrating'];

and just stick in the new globals that you need to pull out of the database:

Code: Select all

		$GLOBALS['BrandName'] = isc_html_escape($row->productClass->GetBrandName());

^^ that is taken from the ProductDetails.php file, and changed slightly, shoudl work. Category, in honesty, is actually going to be a stumbling block, bah! Products are held in multiple categories, the code is a bit big for me to quickly poke into for a quick answer for you here. You could work out the categories by pulling apart the breadcrumb logic, and just using the last part of it I guess? Hmmm, yeah, damnit, just got complicated, sorry