mini product list customization

[alibey]

I am trying to enhance a mini products list element (contained in a page) as follows:

// remove the oval image overlay (i asked about this in a prior topic, but the css selector given in the reply i received did not alas work)
// enable hover quickview (i am hoping to be able to add an html or raw js code box that will correctly associate each product id listed with a quick view modal that can be used to add the associated product to the woomerce cart — i have tried variants of this already to no avail)
// display mini product images using 3 columns with no product id overlap (i tried adding 3 column format using the builder then adding a mini product element inside to each of these but this did not work correctly)

meanwhile i have failed to be able to select a mini product image or the mini list itself using the following selector (and have tried multiple variants of this selector, which included img and figure) to do something as simple as this

ul.mini-list.latest-products {

background: red !important; // this is just for test purposes
}

my question is:
is it even possible to implement the above functionality using only css and js?
if so, i would much appreciate it if you can give me a hint as to right css selector, and i can take it from there.

rationale for this:

i want the end user to have a really fast way (preferably sub second) to display the entire catalog using img thumbnails (with minimal product text descriptors) and allow the user to hover over a thumbnail, see a larger image and some product descriptors, and be able to add the product to a cart

[alibey]

i figured out a partial solution

1. go to page swift editor
2. insert row element
3. insert 3 or 4 raw html elements – set to 1/3 or 1/4 width
5. copy the following code into each html box

<img data-jckqvpid="15506" src="https://needlepoint.land/wp-content/uploads/2015/09/Tropical-Patterns_b-150x150.jpg" alt="some seo name" scale="0">

this solution takes advantage of the fact wp will automatically create a 150px x 150px thumb for each image you save in Media
so if you set your woocommerce / product / display / thumbnail setting to 150px, there is no additional rendering lag in html/css resizing

the disadvantage with this is that you have to manually change each product id and associated jpeg image

a better solution would be to write a js function loop that queries the db, selects each product id and its associated image, then just builds the quickviewable product images directly on the page as shown above display in a 3 column format

this would probably reduce swf builder and woocommerce overhead in rendering a page, allowing potential sub second response assuming the backend if set up right

then again, it might not

i might try that next

any feedback from Swift support much appreciated!

thanks.

[alibey]

So the question from a SwiftIdeas support perspective is: can swift builder support (a)? [ see below for an explanation]

The requirement is how to create a very fast loading page that displays 3 or 4 columns
with each row displaying a wp native 150×150 thumbnail image associated with each product in the woocommerce catalog
each thumbnail image must be “Quickview plugin enabled,” such that the use can hover over an image, have the quickview modal materialize, and read the product’s price, sku, see whether the item is in stock, then add it to the shopping cart (if he or she wants to buy it)

One way to do this is as follows

1. write a js function 1 that calls a simple PHP function, using AJAX
2. write the simple PHP routine that calls a simple (1 select statement that perform a join between 2 tables) mysql stored proc and pass back to the js func an array of rows containing the thumbnail urls, for each product listed in wp-post
3. use phpmyadmin to write the simple sql proc that joins wp_post and whatever meta or auxiliary tables (or files?) that contains the url for a wp-generated thumbnail url
4. once the sql data “cursor” is returned to js func 1 via the php func, have it call a simple js function 2 that constructs on the fly, for each product, a simple raw html statement that looks like this

5. pass the urls back to invoking wp page…

despite all this work, there would still be several things that need to done

first, write simple js func1 in the form of an event listener that calls the php routine when this page is loaded
then,
(a) either find a way to insert each raw html statement into a predefined swiftbuilder template for the page
or
(b) build the page using custom (responsive) HTML/js written for that page

The questions here are:

– what is the specific mysql table/column that contains wp thumbnails url strings?
– can swift builder support (a)?
– how to handle products that have no associated thumbnails (assuming that can happen)
– any security holes in the above call architecture that exposes the wp store to hackers?
– is there a simpler way to achieve all of the above?

The above goes well beyond a standard tech desk / support question, but i wrote it at this level of detail in the hope of any readers responding who may have found a more efficient or better way to achieve the same result. Probably send it to to Stackoverflow or whatever for some additional feedback.

of course it would be great to learn for sure from swiftideas if (a) is possible, which I am fairly confident is not.

thanks!

[alibey]

sorry, forgot to include code tags for the canonical thumbnail HTML statement (see above)

<img data-jckqvpid="15506" src="https://needlepoint.land/wp-content/uploads/2015/09/Tropical-Patterns_b-150x150.jpg" alt="needlepoint canvas" scale="0">

[alibey]

topic closed.

[Kyle – SUPPORT]

Hi

Ok no problem

– Kyle