I've succeeded in implementing most of the desired functionality via this JavaScript but there is still a potentially troublesome bug that I can't figure out: the code I wrote appends desired HTML but creates unnecessary duplicates.
The Problem
The code appends the button multiple times, when it should append just once. How do I stop the multiples?
NOTE: For this example, there are 6 products on the page, 3 of which have videos. The last listing in the unordered list gets 3 buttons, the 2nd to last gets 2 buttons, while the 1st gets 1 button. They all should get 1. I am assuming it iterates each time for all the listings that have no button yet but I can't figure out in which part of the code or how to stop it.
What I tried to accomplish:
Stage 1 - Check for video and add button if video present
- Check product listings on this category page to see if any have ".Options"
- If they have .Options, check to see if a video matching this product's ID exists in /Videos/ folder
- If video with matching Product ID exists in videos folder, attach a Play/Stop toggle button to product listing
Stage 2 - Play/Stop video on button press
- If Play/Stop button is pressed, add tag with relevant video URL
- If video is playing, stop and hide video upon button press
The JavaScript
$(".Options").each(function checkForVideo(url) {
var ProductCatOpt = $(this);
ProductId = $(this).parent().parent().find('div.ProductImage').attr('data-product');
function ajax1() {
return $.ajax('/content/videos/' + ProductId + '.mp4')
.done(function () {
$(ProductCatOpt).addClass('withVideo');
}).fail(function () {
return;
});
}
$.when(ajax1()).done(function (a1) {
$('.withVideo').closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');
$('.videoDemoBtn').click(function () {
if ($(this).hasClass('videoPlaying')) {
$(this).removeClass('videoPlaying');
/* $(this).parent().find('img').show(); */
$(this).parent().find('div.categoryDemoVideo').hide().html('');
} else {
var ProductId = $(this).parent().find('div.ProductImage').attr('data-product');
$(this).addClass('videoPlaying');
/* $(this).parent().find('img').hide(); */
$(this).parent().find('div.categoryDemoVideo').show().html('<video id="demoVideo" class="video" preload="auto" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" controls="controls" width="100%" height="100%" poster="https://store-mixi7d.mybigcommerce.com/content/videos/' + ProductId + '.jpg"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/' + ProductId + '.mp4"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/' + ProductId + '.ogv" type="video/ogg"><p>Your browser does not support this video. Please upgrade your browser!</p></video>');
}
var video = document.getElementById('demoVideo');
video.addEventListener('click', function () {
video.play();
}, false);
});
});
});
The HTML
<ul class="ProductList " style="position: relative; height: 1407px;">
<li class="Odd " style="min-height: 456px; position: absolute; left: 0px; top: 0px;">
<div class="ProductImage QuickView" data-product="296">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductDetails" style="min-height: 47px;">
</div> <em class="p-price">$349.00</em>
<div class="ProductPriceRating" style="min-height: 0px;">
</div>
<div class="ProductCompareButton" style="display:">
<div class="checker" id="uniform-compare_296"><span><input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_296" value="296" onclick="product_comparison_box_changed(this.checked)"></span>
</div>
<label for="compare_296">Compare</label>
<br>
</div>
<div class="ProductActionAdd" style="display:;"> <a href="some product" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a>
</div>
<span class="videoDemoBtn"><div class="triangle"></div></span><span class="videoDemoBtn"><div class="triangle"></div></span>
</li>
<li class="Even " style="min-height: 456px; position: absolute; left: 310px; top: 0px;">
<div class="ProductImage QuickView" data-product="431">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductDetails" style="min-height: 47px;">
</div> <em class="p-price">$211.99</em>
<div class="ProductPriceRating" style="min-height: 0px;">
</div>
<div class="ProductCompareButton" style="display:">
<div class="checker" id="uniform-compare_431"><span><input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_431" value="431" onclick="product_comparison_box_changed(this.checked)"></span>
</div>
<label for="compare_431">Compare</label>
<br>
</div>
<div class="ProductActionAdd" style="display:none;"> <a href="some prod" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a>
</div>
<span class="videoDemoBtn"><div class="triangle"></div></span><span class="videoDemoBtn"><div class="triangle"></div></span><span class="videoDemoBtn"><div class="triangle"></div></span>
</li>
<li class="Odd " style="min-height: 435px; position: absolute; left: 0px; top: 476px;">
<div class="ProductImage QuickView" data-product="389">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductDetails" style="min-height: 26px;">
</div> <em class="p-price">$300.00</em>
<div class="ProductPriceRating" style="min-height: 0px;">
</div>
<div class="ProductCompareButton" style="display:">
<div class="checker" id="uniform-compare_389"><span><input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_389" value="389" onclick="product_comparison_box_changed(this.checked)"></span>
</div>
<label for="compare_389">Compare</label>
<br>
</div>
<div class="ProductActionAdd" style="display:;"> <a href="some prod9" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a>
</div>
</li>
<li class="Even " style="min-height: 435px; position: absolute; left: 310px; top: 476px;">
<div class="ProductImage QuickView" data-product="393">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductDetails" style="min-height: 26px;">
</div> <em class="p-price">$89.00</em>
<div class="ProductPriceRating" style="min-height: 0px;">
</div>
<div class="ProductCompareButton" style="display:">
<div class="checker" id="uniform-compare_393"><span><input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_393" value="393" onclick="product_comparison_box_changed(this.checked)"></span>
</div>
<label for="compare_393">Compare</label>
<br>
</div>
<div class="ProductActionAdd" style="display:;"> <a href="some prod" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a>
</div>
<span class="videoDemoBtn"><div class="triangle"></div></span>
</li>
<li class="Odd " style="min-height: 456px; position: absolute; left: 0px; top: 931px;">
<div class="ProductImage QuickView" data-product="428">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductDetails" style="min-height: 47px;">
</div> <em class="p-price">$850.00</em>
<div class="ProductPriceRating" style="min-height: 0px;"> <span class="Rating Rating0"><img src="http://cdn3.bigcommerce.com/s-mixi7d/templates/__custom/images/IcoRating0.png?t=1419306711" alt="" style="display: none;"></span>
</div>
<div class="ProductCompareButton" style="display:">
<div class="checker" id="uniform-compare_428"><span><input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_428" value="428" onclick="product_comparison_box_changed(this.checked)"></span>
</div>
<label for="compare_428">Compare</label>
<br>
</div>
<div class="ProductActionAdd" style="display:;"> <a href="some prod" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a>
</div>
</li>
<li class="Even " style="min-height: 456px; position: absolute; left: 310px; top: 931px;">
<div class="ProductImage QuickView" data-product="388">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductDetails" style="min-height: 47px;">
</div> <em class="p-price">$479.00</em>
<div class="ProductPriceRating" style="min-height: 0px;">
</div>
<div class="ProductCompareButton" style="display:">
<div class="checker" id="uniform-compare_388"><span><input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_388" value="388" onclick="product_comparison_box_changed(this.checked)"></span>
</div>
<label for="compare_388">Compare</label>
<br>
</div>
<div class="ProductActionAdd" style="display:;"> <a href="some prod" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a>
</div>
</li>
</ul>
I've done a JSFiddle here but it's of no help as the videos that must be checked for with ajax have to be on same domain for this to work, and the ProductIDs are dynamically generated by the PHP of the platform I am using.
I am specifically looking to stop the behavior that causes multiple buttons to be appended instead of just 1, however, I wouldn't be surprised if my code was sloppy and inefficient so please feel free to criticize any part of this.
UPDATE 1
I updated the code to have the event handler come before the ajax call and also the event handler was changed from 'click' to 'on()', but I still get the same result, except now, the videoDemoBtn also no longer triggers video.
$('.videoDemoBtn').on('click', function () {
if ($(this).hasClass('videoPlaying')) {
$(this).removeClass('videoPlaying');
$(this).parent().find('div.categoryDemoVideo').hide().html('');
}
else {
var ProductId = $(this).parent().find('div.ProductImage').attr('data-product');
$(this).addClass('videoPlaying');
$(this).parent().find('div.categoryDemoVideo').show().html('<video id="demoVideo" class="video" preload="auto" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" controls="controls" width="100%" height="100%" poster="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.jpg"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.mp4"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.ogv" type="video/ogg"><p>Your browser does not support this video. Please upgrade your browser!</p></video>');
}
});
$(".Options").each(function checkForVideo(url) {
var ProductCatOpt = $(this);
ProductId = $(this).parent().parent().find('div.ProductImage').attr('data-product');
function ajax1() {
return $.ajax('/content/videos/'+ProductId+'.mp4')
.done(function() {
$(ProductCatOpt).addClass('withVideo');
}).fail(function() {
return;
});
}
$.when(ajax1()).done(function(a1){
$('.withVideo').closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');
});
});
Aucun commentaire:
Enregistrer un commentaire