export default function singleProductPopupInit($elem){
$elem.each(function() {
$(this).magnificPopup({
type:'image',
removalDelay: 500,
mainClass: 'mfp-fade popup_inline',
showCloseBtn: true,
closeMarkup: '<div class="mfp-close">×</div>',
closeBtnInside: true,
closeOnContentClick: false,
closeOnBgClick: true,
alignTop: false,
fixedContentPos: true,
callbacks: {
open: function() {
var headerHeight = $('.header__top').innerHeight();
$('.mfp-content').css({
'marginTop': headerHeight,
});
var mp = $.magnificPopup.instance,
t = $(mp.currItem.el[0]);
if ( t.data('type') === 'video' ) {
if ( !$(this.wrap[0]).find('img.mfp-img').hasClass('has__video') ) {
var $imgVideo = $(this.wrap[0]).find('img.mfp-img'),
$dataVideo = $(this.currItem.el).attr('href');
$imgVideo.addClass('has__video').attr('data-video', $dataVideo);
$imgVideo.parent('figure').addClass('wrap__hasVideo');
if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
$imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
}
}
}
},
close: function() {
},
beforeOpen: function() {
var $triggerEl = $(this.st.el),
newClass = 'productsSingle__gallery';
this.st.mainClass = this.st.mainClass + ' ' + newClass;
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
},
elementParse: function(item) {
item.src = item.el.find('img').attr('src');
},
markupParse: function(template, values, item) {
},
change: function(){
var mp = $.magnificPopup.instance,
t = $(mp.currItem.el[0]);
if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
$(this.content[0]).find('img.mfp-img').parent('figure').find('iframe').remove();
}
if ( t.data('type') === 'video' ) {
if ( !$(this.content[0]).find('img.mfp-img').hasClass('has__video') ) {
var $imgVideo = $(this.content[0]).find('img.mfp-img'),
$dataVideo = $(this.currItem.el).attr('href');
$imgVideo.addClass('has__video').attr('data-video', $dataVideo);
$imgVideo.parent('figure').addClass('wrap__hasVideo');
if ( !$imgVideo.parent('figure').find('.hasVideo__play').length ) {
$imgVideo.parent('figure').append('<div class="hasVideo__play"></div>');
}
}
} else {
$(this.content[0]).find('img.mfp-img').parent('figure').removeClass('wrap__hasVideo');
$(this.content[0]).find('img.mfp-img').parent('figure').find('.hasVideo__play').remove();
}
}
},
gallery: {
enabled:true,
navigateByImgClick: false,
},
delegate: '.good__gallerySliderItem',
});
});
}componentDidMount() {
const {setProductSingle} = this.props;
const productSlug = this.props.match.params.product;
axios.get(`/api/products/${productSlug}`)
.then( ({data}) => {
setProductSingle(data);
})
.then(() => {
this.setState({
nav1: this.slider1,
nav2: this.slider2
});
this.$el = $('.good__gallerySlider .slick-track');
singleProductPopupInit( this.$el );
});
}axios.get()
<Link /><Link
to={{
pathname: `${matchPath}/${title}`,
title: title,
id: id,
}}
className="good__itemDescrText"
>
{ReactHtmlParser(descrtext)}
</Link>http://localhost:3000/shop/product-name
"react-router-dom": "^5.0.0",console.log( history );в productSinglePage получаю следующееlocation:
hash: ""
id: 1
key: "j0o1pv"
pathname: "/shop/some-product"
search: ""<img src="uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" /><img src="/uploads/2018/07/header_logo.png" alt="logo" className="headerMiddle__img" />