Change the sort by list to something better for touch

[csimmo]

Thank you for your help and patience. The bugs have been squashed and the site is purring like a kitten. Now I can try to kill a couple of annoyances.

1. I have been testing the my new site on touch devices. The big annoyances it that the sort by list is not very touch friendly. How would I go about changing it to a click drop down list that is selectable?

2. Ask a question popup, Manufacturer pop up and Product pop up (from inside one of my plugins). These items templates don't use the customized one. They default to the VM one. I got partly around it by copying the vmsite-ltr.css into the template folder and editing it, but its far from the way I want it. Can I create overrides for these? Which files do I need to override?

3. How would I change the product description to a popup instead of a new page?

Again, thanks for your support. This has been one hell of a learning curve!!

[bytelord]

Hello,

First remember each time to mention your joomla and vm2 versions your are using, in cases of errors also PHP version. The above to mention are not bugs.

To your questions:

1. This is depends to your templates overrides, you could override the drop-down lists or create new ones by using for example php srt_replace to replace the styling, etc. You should use responsive design for your site templates, depends on you. Keep in mind that vm2 uses the joomla template system ... so if you are familiar is the same with vm2.

2. The vm2 templates are located here: com_virtuemart\views. The vmsite-ltr.css is the CSS styling which can be override very easy, as easy as you override any joomla component styling. The only need you will need is to load a new CSS file inside your template header, e.g. virtuemart.css and placed it under your css folder for example under your template. Inside there you can override everything regarding to vm2 css styling.  (http://forum.virtuemart.net/index.php?topic=90968.0)

3. You mean product details page, you could search the forum by i think you didn't before you post. (http://forum.virtuemart.net/index.php?topic=109953.msg369329#msg369329)

Use firebug to examine you site code and css styling: https://forum.virtuemart.net/index.php?topic=102850.0

Overrides:
Creating Template overrides: https://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Also take a look on the fields usage:
Product Fields: http://forum.virtuemart.net/index.php?topic=92756.0
Category fields: http://forum.virtuemart.net/index.php?topic=97744.0
$this vs $product: http://forum.virtuemart.net/index.php?topic=100696.0

Regards

[csimmo]

You are correct, I didn't search. Sorry about that. Thanks for the details. I already have a tonne of overrides. My problem is that anything that shows in a modal box ignores half the attributes applied to it. A big one is fonts. I have Open sans through the site, and the modal box completely ignores that and uses times new roman. But it doesn't stop there, the customizations done to the add-to-cart button are removed and the VM default is used. Why is this?

It would seem when a modal box is called, it only pays attention to the attributes set in the file. And instead of looking to the template overrides, it just defaults to VM's template. This is a big pain, as it means a lot of work will have to be done for just 3 popups!! Work that has supposedly been done.

Please correct me if I am wrong

[bytelord]

Hi,

I am trying to understand but i would like also some images/live url to see exactly what you mean. The modal can be overridden. Modal is a joomla function and can be overridden inside your template.css for example or vm.css - there is a possibility your template css handles it -, there is also the facebox.css that vm2 uses and you can override it also. The original file of facebox is located under components\com_virtuemart\assets\css\facebox.css. Please study it and use firebug to test with it and make your overrides. Sometimes css to get overridden needs the !important (http://webdesign.about.com/od/css/f/blcssfaqimportn.htm). The same i can think with the add-to-cart button ... may be you don't apply style properly.

Please use firebug better to overridden those properties and also use the !important in some cases.

Regards

[csimmo]

http://www2.abtsystems.com.au/services/computer-assembly.html
If you click on product details, you will get the layout that I have customized for product details. I removed a lot, as I don't need it. Using firebug I found it to be using system/css/template.css. I need to put in the !important to see if that will work with the font.

I have been using firebug, it is a great tool. I have also been trying to make the modal box come up when clicking on the image or product name. I am so sorry to ask, but can you point me in the right direction?
I know this to be the code:
                    <a href="<?php echo $product->link; ?>">
               <?php /** @todo make image popup */
               echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',false);
               ?>
               </a>
               <h2 class="category-view"><?php echo JHTML::link($product->link, $product->product_name); ?></h2>
But I don't know how to convert it.

I also can only locate sort by insert code, but not the buttons themselves. I am sorry. I am a computer tech, I fix hardware. This is my first time doing a website!!

[bytelord]

Hello,

You could create a new view for that but need some php i believe and some dev techincs, otherwise play with CSS.

On your second one you could just use the default template code ...

Code Select Expand

<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb ('class="browseProductImage" border="0" title="' . $product->product_name . '" ', TRUE, 'class="modal"');
?>

Regards

[csimmo]

Thank you! That actually worked out better than I had hoped. Thank you very much. I just have to figure out the sort by buttons now!!