Hi, I have made a popup with add-to-cart button for upsale products. I’m using the Debut theme. It used to work earlier, after a day or two it started giving me an error for some reason. Can anyone help? Also, I would prefer to not have the button redirect me to the cart, so that I can have several products in the popup(2 or 3). I will post my code below:
HTML:
Vi anbefaler disse til vannpipen din!
For å få en bedre røykeopplevelse med din nye vannpipe, så anbefaler vi disse oppgraderingene.
Oslo Ninja Varmefordeler
- Ventilasjoner på toppen siden og i bunn.
- Forlenger tiden kullet er påtent.
- Solid silikonhåndtak
Lukk vindu
jQuery:
CSS:
.incStock{ color: #fff; background-color: #f00; padding: 5px; font-weight: 600; width: 300px; text-align: center; margin-left: 5px; margin-top: -35px; } .upsale-popup { z-index: 999999; position: absolute; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; text-align: center; display: none; } /* Popup body */ .upsale-popup-inner { top: 0px; position: relative; margin: 0 auto; display: inline-block; background: rgb(255, 255, 255); width: 90vw; padding: 2em; margin-top: 8%; vertical-align: middle; max-width: 700px; max-height: 900px; text-align: center; box-sizing: border-box; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); border-radius: 3px; line-height: 1.25; overflow: hidden; } span.popPrice { font-size: 1.4em; font-weight: 600; line-height: 2; margin: 0; padding: 0; width: 45%; display: inline-table; } .instP { font-size: 0.6em; margin-top: 0px; } .products { width:100% display: block; text-align: center; padding: 0 5px; } .productCont{ width: 100%; display: table; text-align: center; } .infoCont{ width:58%; display: table-cell; } .bulletPs { text-align: left; } .productTitle{ display: block; padding: 20px 0; font-weight: 600; } .imgDiv { width: 40%; height: auto; vertical-align: middle; display: inline-block; box-sizing: border-box; padding: 0; display: table-cell; } .addProduct{ width:50%; display: table-cell; float: right; transition: all 0.3s ease; } .ctaWrap { display: table; width: 100%; text-align: center; padding: 0 5px; } .addHolder { display: table-cell; width: 49%; box-shadow: none; text-align: center; } .cancelHolder { display: table-cell; width: 49%; box-shadow: none; text-align: center; } .closePopup { background: #eee !important; box-shadow: none; border: 1px solid #7cbd2b !important; color: #000 !important; transition: all 0.3s ease; } .closePopup:hover{ border-radius: 30px; } .goToCart{ background: #fff !important; box-shadow: none; border: 1px solid #7cbd2b !important; color: #000 !important; margin: 0 !important; transition: all 0.3s ease; } .goToCart:hover{ border-radius: 30px; } .newBtnClass{ line-height: 2 !important; } .a2cCont{ float: right; width: 50%; } @media (max-width: 640px) { .upsale-popup-inner { position: relative !important; height: auto; } .imgDiv { width: 40%; } .bulletPs { font-size: 12px; text-align: left; } } @media (max-width: 468px) { .ctaWrap { display: flex; width: 100%; flex-wrap: wrap-reverse; } .addHolder { display: block; padding: .5em 0; width: 100%; } .cancelHolder { display: block; padding: .5em 0; width: 100%; } .goToCart{ max-width: 100%; } .closePopup{ max-width: 100%; } }Appreciate any help.
Website is www.shishaking.no
Product to test in is: https://shishaking.no/products/vannpipe-el-badia-c5-svart