Multiple Instances Of Custom Module

[GBonner]

Hi, 

I'm looking to create a custom module which launches a pop up video. However, I can only have one instance per web page, i've tried to use {% require_css %} & {%require_js%} to load the css and js in header and footer. 

I'm first and foremost a marketer so struggling slight, any help is appreaciated. 

See below the code: 

<div id="{{name}}">
<div class="vpop" data-type="vimeo" data-id="172052320" data-autoplay='true'>{% if module.image_video.src %}
{% set sizeAttrs = 'width="{{ module.image_video.width }}" height="{{ module.image_video.height }}"' %}
{% if module.image_video.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif module.image_video.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ module.image_video.max_width }}" height="{{ module.image_video.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = module.image_video.loading != 'disabled' ? 'loading="{{ module.image_video.loading }}"' : '' %}
<img src="{{ module.image_video.src }}" alt="{{ module.image_video.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}</div>

<!-- copy this stuff and down -->
<div id="video-popup-overlay"></div>

<div id="video-popup-container">
<div id="video-popup-close" class="fade">&#10006;</div>
<div id="video-popup-iframe-container">
<iframe id="video-popup-iframe" src="" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</div>
{% require_js %}
<script>
$(".vpop").on('click', function(e) {
e.preventDefault();
$("#video-popup-overlay,#video-popup-iframe-container,#video-popup-container,#video-popup-close").show();

var srchref='',autoplay='',id=$(this).data('id');
if($(this).data('type') == 'vimeo') var srchref= "https://player.vimeo.com/video/685702636?h=509dc37bba&amp;badge=0&amp;autopause=0&amp;player_id=0&am...";
else if($(this).data('type') == 'youtube') var srchref="https://www.youtube.com/embed/";

if($(this).data('autoplay') == true) autoplay = '?autoplay=1';

$("#video-popup-iframe").attr('src', srchref+id+autoplay);

$("#video-popup-iframe").on('load', function() {
$("#video-popup-container").show();
});
});

$("#video-popup-close, #video-popup-overlay").on('click', function(e) {
$("#video-popup-iframe-container,#video-popup-container,#video-popup-close,#video-popup-overlay").hide();
$("#video-popup-iframe").attr('src', '');
});
</script>
{% end_require_js %}
{% require_css %}
<style>

#video-popup-container {
display:none;
position: fixed;
z-index: 996;
width: 60%;
left: 50%;
margin-left: -30%;
top: 20%;
background-color: #fff;
}

#video-popup-close {
cursor: pointer;
position: absolute;
right: -10px;
top: -10px;
z-index: 998;
width: 25px;
height: 25px;
border-radius: 25px;
text-align: center;
font-size: 12px;
background-color: #000;
line-height: 25px;
color: #fff;
}

#video-popup-iframe-container {
position: absolute;
z-index: 997;
width: 100%;
padding-bottom: 56.25%;
border: 2px solid #000;
border-radius: 2px;
background-color: #000;
}

#video-popup-iframe {
z-index: 999;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000;
}

#video-popup-overlay {
display: none;
position: fixed;
z-index: 995;
top: 0;
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
}

#video-popup-close:hover {
color: #DE0023;
}</style>
{% end_require_css %}

[Brownstephen101 · Accepted solution]

Their are a couple ways you could go about this, the way that is technically not quite optimized but definitely the easiest from your current state is to add #{{ name }} before every reference to a class or id in your javascript. It's breaking from multiple instances because you shouldn't have multiple items with the same ID on the same page.

If I were you I would update the IDs to be classes instead, or wherever you are setting an id, add -{{name}} after it so that the IDs are unique for each instance of the module.

Hope that helps!

[Anton]

Hi @GBonner, 

I would recommend to seperate the CSS part from the module and just "link" it.

To do so:

create a new CSS file in your theme, copy-paste everything between <style> and </style> into it and save it as "myModule.css"(give it a certain name). After that open your module and select it in the right sidebar in the "linked files" option. 

Or paste the CSS code into your main CSS file if you never change those stylings and use the module quite often. 

Same goes for JS. This works with both files unless you're modifing it via hubl.

Hope this helps, 

best, 

Anton