Section doesn’t populate, suspected plugin needs initialization
- This topic has 5 replies, 2 voices, and was last updated 5 years, 9 months ago by
. This post has been viewed 1134 times
-
Posts
-
When I click the button that says “Get Prices” the “Our Prices” section should populate, but it doesn’t populate correctly. I am guessing a plugin needs to be initialized, but I don’t know how to do that. Please advise.
Hello,
You are right. Is needed initialize the masonry plugin.
Please try changing the getprices() function to:
function getprices(post){ $.ajax({ type: 'POST', url: 'getprices.php', data: {post: post}, dataType: 'html', success: function(response) { $('#products-grid').isotope('destroy'); $('#products-grid').removeData('__masonry'); $('#products-grid').append(response); $(function() { $('[data-plugin-masonry]').each(function() { var $this = $(this), opts; var pluginOptions = theme.fn.getOptions($this.data('plugin-options')); if (pluginOptions) opts = pluginOptions; $this.themePluginMasonry(opts); }); }); } }); }Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Hello,
Oh right!
Also is needed run the code for “Quick View” button in the ajax response. Try changing the code to:
function getprices(post){ $.ajax({ type: 'POST', url: 'getprices.php', data: {post: post}, dataType: 'html', success: function(response) { $('#products-grid').isotope('destroy'); $('#products-grid').removeData('__masonry'); $('#products-grid').append(response); $(function() { $('[data-plugin-masonry]').each(function() { var $this = $(this), opts; var pluginOptions = theme.fn.getOptions($this.data('plugin-options')); if (pluginOptions) opts = pluginOptions; $this.themePluginMasonry(opts); }); }); /* * Quick View Lightbox/Popup With Ajax */ $('.quick-view').magnificPopup({ type: 'ajax', fixedContentPos: true, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: '', callbacks: { open: function() { $('html').addClass('lightbox-opened'); }, close: function() { $('html').removeClass('lightbox-opened'); setTimeout(function(){ $('html').removeClass('lightbox-beforeclose'); }, 500); }, beforeClose: function() { $('html').addClass('lightbox-beforeclose'); }, ajaxContentAdded: function() { /* Thumb Gallery */ $('.thumb-gallery-wrapper').each(function(){ var $thumbGalleryDetail = $(this).find('.thumb-gallery-detail'), $thumbGalleryThumbs = $(this).find('.thumb-gallery-thumbs'), flag = false, duration = 300; $thumbGalleryDetail .owlCarousel({ items: 1, margin: 10, nav: true, dots: false, loop: false, autoHeight: true, navText: [], rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false }) .on('changed.owl.carousel', function(e) { if (!flag) { flag = true; $thumbGalleryThumbs.trigger('to.owl.carousel', [e.item.index-1, duration, true]); $thumbGalleryThumbs.find('.owl-item').removeClass('selected'); $thumbGalleryThumbs.find('.owl-item').eq( e.item.index ).addClass('selected'); flag = false; } }); $thumbGalleryThumbs .owlCarousel({ margin: 15, items: $(this).data('thumbs-items') ? $(this).data('thumbs-items') : 4, nav: false, center: $(this).data('thumbs-center') ? true : false, dots: false, rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false }) .on('click', '.owl-item', function() { $thumbGalleryDetail.trigger('to.owl.carousel', [$(this).index(), duration, true]); }) .on('changed.owl.carousel', function(e) { if (!flag) { flag = true; $thumbGalleryDetail.trigger('to.owl.carousel', [e.item.index, duration, true]); flag = false; } }); $thumbGalleryThumbs.find('.owl-item').eq(0).addClass('selected'); }); /* * Image Gallery Zoom */ if($.fn.elevateZoom) { if( $('[data-zoom-image]').get(0) ) { $('[data-zoom-image]').each(function(){ var $this = $(this); $this.elevateZoom({ responsive: true, zoomWindowFadeIn: 350, zoomWindowFadeOut: 200, borderSize: 0, zoomContainer: $this.parent(), zoomType: 'inner', cursor: 'grab' }); }); } } /* * Star Rating */ if ($.isFunction($.fn['themePluginStarRating'])) { $(function() { $('[data-plugin-star-rating]:not(.manual)').each(function() { var $this = $(this), opts; var pluginOptions = theme.fn.getOptions($this.data('plugin-options')); if (pluginOptions) opts = pluginOptions; $this.themePluginStarRating(opts); }); }); } } } }); } }); }Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
On detail view I am having trouble getting non cached images to show. It works after you go to the page once, but if you open it in a private tab it does not. Check the link.
Hello ts,
Please try changing the $thumbGalleryDetail code in the ajax response of quick view to:
.. .... ...... $thumbGalleryDetail .owlCarousel({ items: 1, margin: 10, nav: true, dots: false, loop: false, autoHeight: true, navText: [], rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false }) .on('changed.owl.carousel', function(e) { if (!flag) { flag = true; $thumbGalleryThumbs.trigger('to.owl.carousel', [e.item.index-1, duration, true]); $thumbGalleryThumbs.find('.owl-item').removeClass('selected'); $thumbGalleryThumbs.find('.owl-item').eq( e.item.index ).addClass('selected'); flag = false; } }); $thumbGalleryDetail.waitForImages(function() { $thumbGalleryDetail.owlCarousel('refresh'); }); ... .... ......* This will wait for load of images and refresh the carousel to adjust the size.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
This topic is marked as "RESOLVED" and can not rceive new replies.