News:

Looking for documentation? Take a look on our wiki

Main Menu

change the width of the add to cart popup

Started by ibnati, July 10, 2018, 04:16:23 AM

Previous topic - Next topic

ibnati

hello

i want to change the width of  the add to cart popup but when i change it, it effet the width of the images  zoom popup of the detail page because the both use fancybox

also is there any methode to change only the css of the add to cart popup like using a javascript cod that add a css class to the add to cart popup or any other method ?


thanks
amine

hellorain

Hello,

If you are using virtumart 3.0 then you can change css from below path.

components/com_virtuemart/assets/css/vm-ltr-site.css

It will be better if you provide site details or screen shot of your issue.

Best Regards,
hellorain.
Raincreatives - Virtuemart & Mobile Commerce Experts

jenkinhill

Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

ibnati

hello

sorry also i use the latest version of vm and php 7

also the issue is as you look here https://www.screencast.com/t/oXyGKSIoA9

also i have changed the css of the popup using this cod
#fancybox-wrap {

    padding: 0px !important;
    padding-bottom: 4px !important;
width: 440px !important;
    #fancybox-content {
    width: 428px !important;
padding-bottom:9px !important;
    }
}



.popup-cart .item-wrap {
    width: 428px !important;
}
#fancybox-outer {

    width: 448px;
}


but the problem is the the zoom image popup in the right side  (https://www.screencast.com/t/eY2Lykp4a)has been changed too and it not look good because of the width of the popup

also for this i want change the css only of the add to cart popup not the other popups

also for example i have seen in one template they use this js cod $.facebox( txt , 'my-style2'); to insert  the class "my-style2" into the add to cart popup and so they changed it width without chaging the width of all popups

how can do this please ?

thanks
amine


ibnati

also i have added this js cod

if (Virtuemart.addtocart_popup ==1) {

  $("#fancybox-wrap").addClass('classname');

}  else { 
$("#fancybox-wrap").addClass('classname1');
}


but it add the class "classname" in both add to cart popup and in the image popup https://i.imgur.com/sRlnK8r.png

how can i fix this please ?

thanks
amine

jenkinhill

screencast requires me to install flash, so I can't see any image. This needs a URL to see the problem.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum


ibnati


jenkinhill

Edit & override components/com_virtuemart/views/cart/tmpl/padded.php

Wrap the contents of that template file in a div which can be styled as appropriate.

Eg adding:
?>   
<div style="width:600px;">
<?php

immediately below  defined('_JEXEC') or die('Restricted access');

and closing the div at the end of the file would give the add to cart popup width of 600px and not affect anything else.

You should add a class to the div instead of an in-line style for responsive templates.    You probably already have an override for padded.php in which case edit that file.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

GJC Web Design

As Jenks says .. make use of files that are only rendered in the view you want

so e.g. in padded.php you could add any css u wanted and it would only effect that view

e.g.
<style type="text/css">
#fancybox-wrap {

    padding: 0px !important;
    padding-bottom: 4px !important;
    width: 440px !important;
    #fancybox-content {
    width: 428px !important;
   padding-bottom:9px !important;
    }
}



.popup-cart .item-wrap {
    width: 428px !important;
}
#fancybox-outer {

    width: 448px;
}
</style>
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

ibnati

ok , thank you very much it solved the issue