Display an image inside PDP as a child view

JJ.Pdpimagechild.Pdpimagechild.js


define(
	'JJ.Pdpimagechild.Pdpimagechild'
,   [
		'JJ.Pdpimagechild.Pdpimagechild.View'
	]
,   function (
		PdpimagechildView
	)
{
	'use strict';

	return  {
		mountToApp: function mountToApp (container)
		{
			// using the 'Layout' component we add a new child view inside the 'Header' existing view 
			// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
			// more documentation of the Extensibility API in
			// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html	
			var pdp = container.getComponent('PDP');
               
                       if (pdp) {
                         pdp.addChildView('ImageViewPdp', function myViewConstructor()
                           {
                              return new PdpimagechildView();
                           });              
                         }

		}
	};
});

product-details-full.tpl

<div data-view="ImageViewPdp"></div>

Pdpimagechild.View.js

// @module JJ.Pdpimagechild.Pdpimagechild
define('JJ.Pdpimagechild.Pdpimagechild.View'
,	[
	'jj_pdpimagechild_pdpimagechild.tpl'
	
	//,	'JJ.Pdpimagechild.Pdpimagechild.SS2Model'
	
	,	'Backbone'
    ]
, function (
	jj_pdpimagechild_pdpimagechild_tpl
	
	//,	PdpimagechildSS2Model
	
	,	Backbone
)
{
    'use strict';

	// @class JJ.Pdpimagechild.Pdpimagechild.View @extends Backbone.View
	return Backbone.View.extend({

		template: jj_pdpimagechild_pdpimagechild_tpl

	,	initialize: function (options) {

			/*  Uncomment to test backend communication with an example service
				(you'll need to deploy and activate the extension first)
			*/

			// this.model = new PdpimagechildModel();
			// var self = this;
         	// this.model.fetch().done(function(result) {
			// 	self.message = result.message;
			// 	self.render();
      		// });
		}

	,	events: {
		}

	,	bindings: {
		}

	, 	childViews: {

		}

		//@method getContext @return JJ.Pdpimagechild.Pdpimagechild.View.Context
	,	getContext: function getContext()
		{
			//@class JJ.Pdpimagechild.Pdpimagechild.View.Context   https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png
			/*this.message = this.message || 'Hello World!!'
			return {
				message: this.message
			};*/
			this.message = "img/discover.png"
		
			return {
				message: this.message
			};
		}
	});
});

jj_pdpimagechild_pdpimagechild.tpl

<section class="pdpimagechild-info-card">
<span class="pdpimagechild-info-card-content">

<img src=" {{message}}" alt="image using child view">
</span>
</section>

Leave a comment

Your email address will not be published. Required fields are marked *