Conflict in CSS files when using some extension in Opencart

338 Views Asked by At

I paid someone to setup an e-commerce website using opencart. He installed a quick checkout extension which is very useful to gain time for users.

I work with iyzico.com as the virtual pos provider. I will pay them a commision for every sell on my site.

The problem is that the iyzico system is not working with that quick checkout plugin. I cannot choose or enter anything in the card holder information fields. When i disable quick checkout plugin then the iyzico system works fine.

The person who setup the site for me said that there is a conflict with the stylesheets. I tried finding the conflict but couldn't find it. The only thing that i could see is when i disable template stylesheet.css file then the system Works with the quick checkout plugin.

How can i find the conflict?

Site adress: www.avkampmarketi.com (language is Turkish)

Template stylesheet: www.avkampmarketi.com/catalog/view/theme/stowear/css/stylesheet.css

Iyzico stylesheet: https://www.iyzico.com/frontend/form/v1/css/style.css?ver=1.1.0

Thank you for your precious answers.

1

There are 1 best solutions below

2
On

Without looking at the JavaScript itself or being able to debug it, it will be very difficult for someone to assess the problem by simply comparing the stylesheets. I did look at the stylesheets though and I noticed that your theme stylesheet references several different "types" of inputs. This would indicate to me that there is JavaScript utilizing those input types, and somewhere there is a conflict between the stylesheets possibly adding a class to an input type, or removing properties or styling which would prevent the iyzico system javascript from working, or vice-versa.

I would start by opening the web page in Google Chrome and use Developer Tools to decipher exactly what is going on. Probably one style sheet is overriding the other and breaking the functionality. Then once you figure out what is being overridden, you can look at the JavaScript to see WHY it's not working. Once you figure out the problem it might be as simple as changing a class name, an ID, or rewriting some JavaScript so it doesn't conflict.