Hi all,
I recently came back to shopify to work on building my website and decided to start from scratch with a new site since my old one was filled with a lot of code that wasn’t needed and was slowing it down. I am now currently using a fresh new Debut theme, and have noticed that the code for the theme has been updated since the last time I used it. When trying to install Magnific Popup into my new site, for some reason I am having trouble getting it to work. I assume its because the theme has removed its theme.scss.liquid file and removed its vendor.js file as well. When installing magnific popup I did the following.
Added this code to the bottom of my theme.css file, (Cant show all of the code cause its too long)
/*================ Vendor-specific styles ================*/
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
........ (Continues on)
And added this code to the bottom of my theme.js file, (Cant show all of the code cause its too long)
/*! Magnific Popup - v1.0.0 - 2015-03-30
* http://dimsemenov.com/plugins/magnific-popup/
* Copyright (c) 2015 Dmitry Semenov; */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):window.jQuery||window.Zepto)}(function(a){var b,c,d,e,f,g,h="Close",i="Before ......... (Continues on too long to put in here, breaks this site)
$('.3d-model-view-open-popup').magnificPopup({
type:'inline',
midClick: true
});
And here is how i am creating my popup button on my product page
{% if product.options contains 'Material' %}
See in 3D
{% endif %}
{{ product.description | split: "" | first }}
For some reason the button made doesn’t work correctly. At first I thought it could be because the code placed in theme.css is in the wrong place and not being read properly because it was mean’t to be in theme.scss.liquid, which no longer exists. Thinking this I decided to try making a file named theme saving it as a .scss.liquid file and placing the code that was meant to go in here in here however this didn’t work. I also tried creating a vendor.js and putting the code in there yet it still didn’t work.
I have tested the following code I am calling in the button shown below outside of the button and it works perfectly.
{{ product.description | split: “” | first }}
All it does is grab a code I have commented out in the specific product description of the product being looked at. This allows me to have a different code read for each product without having to have more product pages, I have done this before and it works perfectly, the code is an iframe I am trying to display within the button.
So the code I am calling with this line, {{ product.description | split: “” | first }}, works perfectly when placed outside the button however when placed within the button, the button hides the content but for some reason doesn’t show the content when the button is pressed. When I press the button it shows (#3d-model-view) added to the end of the url (meaning the button is open) however the popup is not displaying? I assume this is because magnific popup has been installed into my site incorrectly? can anyone help with solving this issue? How would I install magnific popup into the new debut theme? can anyone see what the issue is?