To add an image or video, we need to extend the view and take the value from the back end and then pass it to the template.
JS Code:
_.extend(ProductDetailsFullView.prototype, {
template: product_details_full_tpl,
getImageFromContent: function (content) {
// Helper function to extract image src from HTML content
var imgTag = content.match(/<img[^>]+src="([^">]+)"/);
return imgTag ? imgTag[1] : '';
},
getTextContentOnly: function (content) {
// Remove the <img> tags from the content
return content.replace(/<img[^>]*>/g, ''); // This removes all <img> tags
},
getContext: _.wrap(ProductDetailsFullView.prototype.getContext, function (fn) {
let context = fn.apply(this, _.toArray(arguments).slice(1));
var uiEnhancementpdp = SC.CONFIGURATION.get('uiEnhancement.pdp')
context.uiEnhancementpdp = uiEnhancementpdp;
var featuresdetailUrl = this.options.model.get('item').get('custitem_jj_product_review_video_url');
context.featuresdetailUrl = featuresdetailUrl;
// Create a new instance of ProductDetailsInformationView and pass in the necessary model
let productDetailsInformationView = new ProductDetailsInformationView({
model: this.model // Pass the model of the current product
});
// Render or compute the details of the ProductDetailsInformationView
productDetailsInformationView.render();
let informationContext = productDetailsInformationView.getContext();
// Extract the 'Features' from the details array
let featuresDetail = _.find(informationContext.details, function (detail) {
return detail.name === 'Features ';
});
// If 'Features' details are found, extract the image using the helper function
if (featuresDetail && featuresDetail.content) {
// Extract image URL from content
let featureImage = this.getImageFromContent(featuresDetail.content);
context.featureImage = featureImage;
// Get only the text part (excluding <img> tags) from the content
let textContentOnly = this.getTextContentOnly(featuresDetail.content);
context.textContentOnly = textContentOnly;
}
// If there is no featuresDetail or content, set a flag to hide the section
context.hasFeatures = !!(featuresDetail && featuresDetail.content); // true if features exist, false otherwise
context.featuresDetail = featuresDetail;
return context;
})
});
Template File:
{{#if hasFeatures}}
<div class="my-5 product-details-two-column-layout">
<!-- Left column for features (text) -->
<div class="product-details-features-section">
{{#if featuresDetail}}
<h3 class="fw-bold">{{featuresDetail.name}}</h3>
<div class="features-content">
{{{textContentOnly}}}
</div>
{{/if}}
</div>
<!-- Right column for image -->
<div class="product-details-image-section text-center">
{{#if featuresdetailUrl}}
<div class="product-detail-video">
<video class="product-detail-video-Element" autoplay loop muted >
<source src="{{featuresdetailUrl}}" type="video/mp4">
</video>
</div>
{{else if featureImage}}
<img src="{{featureImage}}" alt="Product Feature Image" class="img-fluid" />
{{/if}}
</div>
</div>