Uploaded image for project: 'PUBLIC - Liferay Commerce'
  1. PUBLIC - Liferay Commerce
  2. COMMERCE-5772

Error Occurred While Processing the Template for Commerce Accelerator Sites

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Critical
    • Resolution: Duplicate
    • Affects Version/s: Master
    • Fix Version/s: 7.4 CE GA1
    • Component/s: None
    • Labels:
      None
    • Severity of Issue:
      Critical

      Description

      Steps to Reproduce:
      1. Create Minium/Speedwell Site
      2. Go to Site

      Expected Result:
      Minium Site: Login page shows Splash image before redirecting to catalog
      Speedwell Site: User gets redirected to Speedwell home page with images loaded.

      Actual Results:
      Minium: The Login page displays this error is displayed:

      An error occurred while processing the template.
      The following has evaluated to null or missing:
      ==> splashImage  [in template "20100#20126#LOGIN_SPLASH" at line 1, column 6]
      
      ----
      Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
      ----
      
      ----
      FTL stack trace ("~" means nesting-related):
      	- Failed at: #if splashImage.getData()?? && splash...  [in template "20100#20126#LOGIN_SPLASH" at line 1, column 1]
      ----
      1<#if splashImage.getData()?? && splashImage.getData() != ""> 
      2	<img alt="${splashImage.getAttribute("alt")}" data-fileentryid="${splashImage.getAttribute("fileEntryId")}" src="${splashImage.getData()}" /> 
      3</#if> 
      

      Speedwell: At the Speedwell Home page, this error is displayed:

      Test Speedwell Site
      
      
      
      An error occurred while processing the template.
      The following has evaluated to null or missing:
      ==> Image2x9w  [in template "20100#20126#SPEEDWELL_BUMPER_SLIDER" at line 2, column 14]
      
      ----
      Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
      ----
      
      ----
      FTL stack trace ("~" means nesting-related):
      	- Failed at: #if Image2x9w.getSiblings()?has_content  [in template "20100#20126#SPEEDWELL_BUMPER_SLIDER" at line 2, column 9]
      ----
      1<div class="bumper speedwell-slider" data-will-load> 
      2	<#if Image2x9w.getSiblings()?has_content> 
      3<script class="slider-dataset" type="application/ld+json"> 
      4			[ 
      5			<#list Image2x9w.getSiblings() as cur_Image2x9w> 
      6				{ 
      7					"captionText": "${cur_Image2x9w.captionText.getData()}", 
      8					"captionCategory": "${cur_Image2x9w.captionCategory.getData()}", 
      9					"captionButtonLabel": "${cur_Image2x9w.captionButtonLabel.getData()}", 
      10					"captionButtonUrl": "${cur_Image2x9w.captionButtonUrl.getFriendlyUrl()}", 
      11					"backgroundImageUrl": "${cur_Image2x9w.getData()}" 
      12				}<#sep>, 
      13			</#list> 
      14			] 
      15		</script> 
      16	</#if> 
      17 
      18	<div class="bg-slider" data-slide-type="backgroundImage"></div> 
      19 
      20<div class="container"> 
      21<div class="product-hint"> 
      22			<div class="hint-text"> 
      23				<span class="hint-text__category" data-slide-type="captionCategory"></span> 
      24				<span class="hint-text__name-slider" data-slide-type="captionText"></span> 
      25				<span data-slide-type="captionButton"></span> 
      26			</div> 
      27 
      28<div class="product-hint__controls"> 
      29<button class="product-hint__control product-hint__control--prev"> 
      30					<span><</span> 
      31				</button> 
      32<button class="product-hint__control product-hint__control--next"> 
      33					<span>></span> 
      34				</button> 
      35			</div> 
      36		</div> 
      37	</div> 
      38 
      39<div class="bumper-controls bumper__controls"> 
      40		<button class="bumper-controls__control bumper-controls__control--prev"></button> 
      41		<button class="bumper-controls__control bumper-controls__control--next"></button> 
      42	</div> 
      43 
      44	<#if StaticHighlight.getSiblings()?has_content> 
      45	<div class="bumper__overlay"> 
      46		<div class="container"> 
      47		<#list StaticHighlight.getSiblings() as cur_StaticHighlight> 
      48			<div class="feature"> 
      49				<#if cur_StaticHighlight.HighlightIcon.getData()?? && cur_StaticHighlight.HighlightIcon.getData() != ""> 
      50				<div class="feature__icon"> 
      51						<img src="${cur_StaticHighlight.HighlightIcon.getData()}"> 
      52				</div> 
      53				</#if> 
      54				<div class="feature__text"> 
      55					<h3>${cur_StaticHighlight.getData()}</h3> 
      56 
      57					<p>${cur_StaticHighlight.HighlightDesc.getData()}</p> 
      58				</div> 
      59			</div> 
      60		</#list> 
      61		</div> 
      62	</div> 
      63	</#if> 
      64 
      65	<script> 
      66		var Speedwell = Speedwell || { features: {} }; 
      67 
      68		Speedwell.features.sliderCallbacks = 
      69				Speedwell.features.sliderCallbacks || []; 
      70 
      71		Speedwell.features.sliderCallbacks.push(function(component) { 
      72			function setupDOM(state, index, dataset) { 
      73				const backgroundImage = { 
      74					container: this.sliderWrapper.querySelector('[data-slide-type="backgroundImage"]'), 
      75					slideClass: 'bg-slider__slide' 
      76				}, captionText = { 
      77					container: this.sliderWrapper.querySelector('[data-slide-type="captionText"]'), 
      78					slideClass: 'hint-text__name' 
      79				}, captionCategory = { 
      80					container: this.sliderWrapper.querySelector('[data-slide-type="captionCategory"]') 
      81				}, captionButton = { 
      82					container: this.sliderWrapper.querySelector('[data-slide-type="captionButton"]'), 
      83					slideClass: 'hint-text__call-to-action' 
      84				}; 
      85 
      86				const backgroundImageSlide = window.document.createElement('div'), 
      87						captionTextSlide = window.document.createElement('span'), 
      88						captionCategorySlide = window.document.createElement('span'), 
      89						captionButtonSlide = window.document.createElement('a'); 
      90 
      91				backgroundImageSlide.classList.add(backgroundImage.slideClass); 
      92				captionTextSlide.classList.add(captionText.slideClass); 
      93				captionButtonSlide.classList.add(captionButton.slideClass); 
      94 
      95				const backgroundImageSlideImg = window.document.createElement('div'); 
      96 
      97				backgroundImageSlideImg.setAttribute('style', 
      98						'background-image: url(' + dataset[index].backgroundImageUrl + ')'); 
      99				backgroundImageSlide.appendChild(backgroundImageSlideImg); 
      100 
      101				captionTextSlide.innerText = dataset[index].captionText; 
      102 
      103				captionButtonSlide.href = dataset[index].captionButtonUrl; 
      104				captionButtonSlide.innerText = dataset[index].captionButtonLabel; 
      105				captionButtonSlide.role = 'button'; 
      106				captionCategorySlide.innerText = dataset[index].captionCategory; 
      107 
      108				backgroundImageSlide.dataset.state = state; 
      109				captionButtonSlide.dataset.state = state; 
      110				captionCategorySlide.dataset.state = state; 
      111				captionTextSlide.dataset.state = state; 
      112 
      113				backgroundImage.container.appendChild(backgroundImageSlide); 
      114				captionButton.container.appendChild(captionButtonSlide); 
      115				captionCategory.container.appendChild(captionCategorySlide); 
      116				captionText.container.appendChild(captionTextSlide); 
      117			} 
      118 
      119			function renderSlide(sliderWrapper, nextSlideContent) { 
      120				const sliderContainers = Array.from(sliderWrapper.querySelectorAll('[data-slide-type]')); 
      121 
      122				sliderContainers.forEach(container => { 
      123					const type = container.dataset.slideType; 
      124					const willBeNextElement = container.querySelector('[data-state="will-be-next"]'); 
      125 
      126					switch (type) { 
      127						case 'backgroundImage': 
      128							willBeNextElement.querySelector('div').setAttribute( 
      129									'style', 
      130									'background-image: url(' + nextSlideContent.backgroundImageUrl + ')' 
      131							); 
      132							break; 
      133						case 'captionText': 
      134							willBeNextElement.innerText = nextSlideContent.captionText; 
      135							break; 
      136						case 'captionCategory': 
      137							willBeNextElement.innerText = nextSlideContent.captionCategory; 
      138							break; 
      139						case 'captionButton': 
      140							willBeNextElement.innerText = nextSlideContent.captionButtonLabel; 
      141							willBeNextElement.href = nextSlideContent.captionButtonUrl; 
      142							break; 
      143						default: 
      144							break; 
      145					} 
      146				}); 
      147			} 
      148			var autoSlidingInterval = 1000; 
      149 
      150			component.initialize(setupDOM, renderSlide, autoSlidingInterval); 
      151		}); 
      152	</script> 
      153</div> 
      An error occurred while processing the template.
      The following has evaluated to null or missing:
      ==> Image2x9w  [in template "20100#20126#SPEEDWELL_HIGHLIGHT_SLIDER" at line 2, column 14]
      
      ----
      Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
      ----
      
      ----
      FTL stack trace ("~" means nesting-related):
      	- Failed at: #if Image2x9w.getSiblings()?has_content  [in template "20100#20126#SPEEDWELL_HIGHLIGHT_SLIDER" at line 2, column 9]
      ----
      1<div class="product-highlight speedwell-slider" data-will-load> 
      2	<#if Image2x9w.getSiblings()?has_content> 
      3<script class="slider-dataset" type="application/ld+json"> 
      4			[ 
      5			<#list Image2x9w.getSiblings() as cur_Image2x9w> 
      6				{ 
      7					"captionText": "${cur_Image2x9w.captionText.getData()}", 
      8					"captionCategory": "${cur_Image2x9w.captionCategory.getData()}", 
      9					"captionButtonLabel": "${cur_Image2x9w.captionButtonLabel.getData()}", 
      10					"captionButtonUrl": "${cur_Image2x9w.captionButtonUrl.getFriendlyUrl()}", 
      11					"backgroundImageUrl": "${cur_Image2x9w.getData()}", 
      12					"captionImageUrl": "${cur_Image2x9w.captionImage.getData()}" 
      13				}<#sep>, 
      14			</#list> 
      15			] 
      16		</script> 
      17	</#if> 
      18 
      19	<div class="bg-slider" data-slide-type="backgroundImage"></div> 
      20 
      21<div class="container"> 
      22<div class="row"> 
      23<div class="product-hint"> 
      24				<div class="hint-image-slider" data-slide-type="captionImage"></div> 
      25 
      26<div class="hint-text"> 
      27					<span class="hint-text__category" data-slide-type="captionCategory"></span> 
      28					<span class="hint-text__name-slider" data-slide-type="captionText"></span> 
      29					<span data-slide-type="captionButton"></span> 
      30				</div> 
      31 
      32<div class="product-hint__controls"> 
      33<button class="product-hint__control product-hint__control--prev"> 
      34						<span><</span> 
      35					</button> 
      36<button class="product-hint__control product-hint__control--next"> 
      37						<span>></span> 
      38					</button> 
      39				</div> 
      40			</div> 
      41		</div> 
      42	</div> 
      43 
      44	<script> 
      45		var Speedwell = Speedwell || { features: {} }; 
      46 
      47		Speedwell.features.sliderCallbacks = 
      48				Speedwell.features.sliderCallbacks || []; 
      49 
      50		Speedwell.features.sliderCallbacks.push(function(component) { 
      51			function setupDOMSlide(state, index, dataset) { 
      52				const backgroundImage = { 
      53					container: this.sliderWrapper.querySelector('[data-slide-type="backgroundImage"]'), 
      54					slideClass: 'bg-slider__slide' 
      55				}, captionImage = { 
      56					container: this.sliderWrapper.querySelector('[data-slide-type="captionImage"]'), 
      57					slideClass: 'hint-image-slider__slide' 
      58				}, captionText = { 
      59					container: this.sliderWrapper.querySelector('[data-slide-type="captionText"]'), 
      60					slideClass: 'hint-text__name' 
      61				}, captionCategory = { 
      62					container: this.sliderWrapper.querySelector('[data-slide-type="captionCategory"]') 
      63				}, captionButton = { 
      64					container: this.sliderWrapper.querySelector('[data-slide-type="captionButton"]'), 
      65					slideClass: 'hint-text__call-to-action' 
      66				}; 
      67 
      68				const backgroundImageSlide = window.document.createElement('div'), 
      69						captionImageSlide = window.document.createElement('div'), 
      70						captionTextSlide = window.document.createElement('span'), 
      71						captionCategorySlide = window.document.createElement('span'), 
      72						captionButtonSlide = window.document.createElement('a'); 
      73 
      74				backgroundImageSlide.classList.add(backgroundImage.slideClass); 
      75				captionImageSlide.classList.add(captionImage.slideClass); 
      76				captionTextSlide.classList.add(captionText.slideClass); 
      77				captionButtonSlide.classList.add(captionButton.slideClass); 
      78 
      79				const backgroundImageSlideImg = window.document.createElement('div'); 
      80 
      81				backgroundImageSlideImg.setAttribute('style', 
      82						'background-image: url(' + dataset[index].backgroundImageUrl + ')'); 
      83				backgroundImageSlide.appendChild(backgroundImageSlideImg); 
      84 
      85				captionImageSlide.setAttribute('style', 
      86						'background-image: url(' + dataset[index].captionImageUrl + ')'); 
      87				captionTextSlide.innerText = dataset[index].captionText; 
      88 
      89				captionButtonSlide.href = dataset[index].captionButtonUrl; 
      90				captionButtonSlide.innerText = dataset[index].captionButtonLabel; 
      91				captionButtonSlide.role = 'button'; 
      92				captionCategorySlide.innerText = dataset[index].captionCategory; 
      93 
      94				backgroundImageSlide.dataset.state = state; 
      95				captionButtonSlide.dataset.state = state; 
      96				captionCategorySlide.dataset.state = state; 
      97				captionImageSlide.dataset.state = state; 
      98				captionTextSlide.dataset.state = state; 
      99 
      100				backgroundImage.container.appendChild(backgroundImageSlide); 
      101				captionButton.container.appendChild(captionButtonSlide); 
      102				captionCategory.container.appendChild(captionCategorySlide); 
      103				captionImage.container.appendChild(captionImageSlide); 
      104				captionText.container.appendChild(captionTextSlide); 
      105			} 
      106 
      107			function renderSlideContent(sliderWrapper, nextSlideContent) { 
      108				const sliderContainers = Array.from(sliderWrapper.querySelectorAll('[data-slide-type]')); 
      109 
      110				sliderContainers.forEach(container => { 
      111					const type = container.dataset.slideType; 
      112					const willBeNextElement = container.querySelector('[data-state="will-be-next"]'); 
      113 
      114					switch (type) { 
      115						case 'backgroundImage': 
      116							willBeNextElement.querySelector('div').setAttribute( 
      117									'style', 
      118									'background-image: url(' + nextSlideContent.backgroundImageUrl + ')' 
      119							); 
      120							break; 
      121						case 'captionImage': 
      122							willBeNextElement.setAttribute( 
      123									'style', 
      124									'background-image: url(' + nextSlideContent.captionImageUrl + ')' 
      125							); 
      126							break; 
      127						case 'captionText': 
      128							willBeNextElement.innerText = nextSlideContent.captionText; 
      129							break; 
      130						case 'captionCategory': 
      131							willBeNextElement.innerText = nextSlideContent.captionCategory; 
      132							break; 
      133						case 'captionButton': 
      134							willBeNextElement.innerText = nextSlideContent.captionButtonLabel; 
      135							willBeNextElement.href = nextSlideContent.captionButtonUrl; 
      136							break; 
      137						default: 
      138							break; 
      139					} 
      140				}); 
      141			} 
      142 
      143			component.initialize(setupDOMSlide, renderSlideContent); 
      144		}); 
      145	</script> 
      146</div> 
      An error occurred while processing the template.
      The following has evaluated to null or missing:
      ==> backgroundImage  [in template "20100#20126#SPEEDWELL_NEWSLETTER" at line 1, column 6]
      
      ----
      Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
      ----
      
      ----
      FTL stack trace ("~" means nesting-related):
      	- Failed at: #if backgroundImage.getData()?? && ba...  [in template "20100#20126#SPEEDWELL_NEWSLETTER" at line 1, column 1]
      ----
      1<#if backgroundImage.getData()?? && backgroundImage.getData() != ""> 
      2	<div class="newsletter--container" style="background: url(${backgroundImage.getData()}) center center, linear-gradient(180deg, rgba(53, 53, 53, 0.3) 0%, #353535 100%)"> 
      3		<div class="form-wrapper"> 
      4			<form action="${backgroundImage.FormAction.getData()}"> 
      5				<h1>${backgroundImage.CallToActionText.getData()}</h1> 
      6 
      7				<p>${backgroundImage.CallToActionText.CallToActionSecondaryText.getData()}</p> 
      8 
      9				<label for="email-input"> 
      10					<input id="email-input" placeholder="${backgroundImage.FormAction.InputPlaceholder.getData()}" value="" /> 
      11 
      12					<button type="submit"><span>></span></button> 
      13				</label> 
      14			</form> 
      15		</div> 
      16	</div> 
      17</#if> 
      

      Reproducible on:

      Tomcat 9.0.40 + MySQL 5.7 Portal master private GIT ID: 0ae71b495732dc92ede68b2b2c94b36bda6b6008

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              alec.sloan Alec Sloan (Inactive)
              Reporter:
              kristin.onias Kristin Onias
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  7.4 CE GA1