demandware pdp变体模板标签选择代码仅适用于衬衫类别

时间:2017-04-22 21:38:48

标签: javascript demandware isml

请参阅下面的变体模板。我评论过只需要适用于我的正式衬衫类别的代码部分。目前,如果我包含div .box-tip,它会在页面的3个不同区域显示,但只希望在正式衬衫上显示。

<iscontent type="text/html" charset="UTF-8" compact="true"/>
<iscomment>
	Desc:
		Creates the variation section if product is a variation or a master,
		otherwise

	Parameter:
		Product - the product to use

	Options:
		none
	Available if empty: no
	Full-Block-Element: yes
</iscomment>

<isscript>
	importScript("product/productoptions/ProductOptionUtils.ds");
	importScript("util/ViewHelpers.ds");
	var VariationUtils = require('app_core/cartridge/scripts/product/VariationUtils.ds');
	var VariationContext = require('app_core/cartridge/scripts/product/variations/VariationContext.ds').VariationContext;
	var PlainVariationDetail = require('app_core/cartridge/scripts/product/variations/PlainVariationDetail.ds').PlainVariationDetail;
	var VariationDetailsBuilder = require('app_core/cartridge/scripts/product/variations/VariationDetailsBuilder.ds').VariationDetailsBuilder;
	var OptionDetailsBuilder = require('app_core/cartridge/scripts/product/variations/OptionDetailsBuilder.ds').OptionDetailsBuilder;	
</isscript>

<isset name="targetUrl" value="${'Product-Variation'}" scope="page" />
<isif condition="${pdict.isSet}"> 
	<isset name="targetUrl" value="${'Product-VariationPS'}" scope="page" />
</isif>

<isset name="variationContext" value="${new VariationContext(pdict, targetUrl)}" scope="page" />
<isset name="variationDetailBuilder" value="${new VariationDetailsBuilder(variationContext)}" scope="page" /> 
<isset name="optionBuilder" value="${new OptionDetailsBuilder(variationContext)}" scope="page" />

<isset name="customSleeveLengthOptionID" value="${dw.system.Site.getCurrent().getCustomPreferenceValue('customSleeveLengthOptionID')}" scope="page"/>
<isset name="trouserLegLengthStandardOptionID" value="${dw.system.Site.getCurrent().getCustomPreferenceValue('trouserLegLengthStandardOptionID')}" scope="page"/>
<isset name="trouserLegLengthTurnUpOptionID" value="${dw.system.Site.getCurrent().getCustomPreferenceValue('trouserLegLengthTurnUpOptionID')}" scope="page"/>

<isif condition="${pdict.Product.variant || pdict.Product.variationGroup || pdict.Product.master}">
	<div class="product-variations" data-attributes="${JSON.stringify(variationContext.selectedAtts)}"> 
		
		<h2 class="visually-hidden">Variations</h2>
		
		<isset name="cleanPVM" value="${(pdict.Product.variant ? pdict.Product.masterProduct.variationModel : pdict.Product.variationModel)}" scope="page"/>
		
		<ul class="attribute attribute__variants"> 
			<isloop items="${variationContext.PVM.productVariationAttributes}" var="VariationAttribute">
		
				<isset name="VariationAttributeValues" value="${variationContext.PVM.getAllValues(VariationAttribute)}" scope="page"/>
				<isset name="varAttributeID" value="${VariationAttribute.getAttributeID()}" scope="page"/>
			
				<li class="attribute attribute__variants-group">
				<div class="attribute redborder">
					<span class="label attribute__label">
						<isprint value="${Resource.msgf('variations.choose.your', 'product', null, VariationAttribute.displayName)}"/>
					</span>
					\\only needs to apply to formal shirts
						<div class="box-tip">
  							<span class="info">Regular length for your collar size</span>
  							<span class="numberCircle">?</span>
						</div>
					<div class="value attribute__values">
							
						<ul class="swatches ${varAttributeID.toLowerCase()} attribute attribute__variants-swatches">
							<isset name="selectedSwatch" value="${''}" scope="page"/>
							
							<isloop items="${VariationAttributeValues}" var="variationValue" status="loopstate">
						
								<isset name="variationDetails" value="${variationDetailBuilder.createStandardVariationDetail(VariationAttribute, variationValue, pdict)}" scope="page" />
								<isset name="selectedSwatch" value="${variationDetails.selectedSwatch}" scope="page"/>									
								
								<isif condition="${variationDetails.isSelected}">
									<isset name="variationContext" value="${variationContext.updateVariationContext(VariationAttribute, variationValue)}" scope="page" />
								</isif>
								
								<li class="attribute__swatch--${variationDetails.swatchClass} ${variationDetails.swatchClass} tooltip attribute__swatch${loopstate.last ? ' attribute__swatch--last' : ''} attribute__swatch--${varAttributeID.toLowerCase()}-${variationDetails.value.toLowerCase()}">
									
									<div class="swatchanchor attribute__swatch-link" <isif condition="${variationDetails.selectable}">data-link="${variationDetails.linkURL}"</isif>>
										<isif condition="${varAttributeID == 'cuffType'}">
											<isprint value="${Resource.msg('variations.cufftype.' + variationDetails.value.toLowerCase(), 'product', null)}" encoding="off"/>
										<iselse/>
											<isprint value="${variationDetails.displayValue}"/>
										</isif>
									</div>
									<isif condition="${!empty(variationDetails.tooltipContent)}"> 
										<div class="tooltip-content" style="display: none;">
											<p class="attribute--tooltip"><isprint value="${variationDetails.tooltipContent}"/>TEST</p> 
										</div>
									</isif>
									
								</li>
																
							</isloop>
						</ul>							
			
         				<isset name="POM" value="${pdict.Product.getOptionModel()}" scope="page"/>
      					     					
      					<isset name="product" value="${pdict.Product}" scope="page" />
      					<isif condition="${product.isVariant() == true}"> 
      						<isset name="product" value="${pdict.Product.getMasterProduct()}" scope="page" />
      					</isif>
						
						<isif condition="${pdict.Product.optionProduct && VariationAttribute.ID == 'sleeveLength'}">
      						
      						<isif condition="${!empty(POM.options)}">
      							<isloop items="${POM.options}" var="Option">
	      							<isif condition="${Option.ID == customSleeveLengthOptionID}"> 
	      								
	      								<isset name="currentShorteningOptionValue" value="${pdict.CurrentRequest.httpParameterMap.get('dwopt_' +  pdict.Product.ID + '_' + customSleeveLengthOptionID)}" scope="page" />
	      								<isif condition="${empty(currentShorteningOptionValue.value)}"> 
	      									<isset name="currentShorteningOptionValue" value="${pdict.CurrentRequest.httpParameterMap.get('dwopt_' + pdict.Product.ID + '_' + customSleeveLengthOptionID)}" scope="page" />
	      								</isif>
	      								
										<iscustomsleeveoption 
											p_currentvalue="${currentShorteningOptionValue}" 
											p_price="${ProductOptionUtils.getPrice(POM, customSleeveLengthOptionID)}" 
											p_name="${Resource.msg('option.custom.length', 'product', null)}" 
											p_pom="${POM}"
											p_option=${Option}
											p_type="${'standard'}" 
											p_available_option_values="${optionBuilder.createCustomSleeveOptionDetails(VariationAttribute, Option, pdict)}"
											p_ui_type="${'attribute'}"
										/>
									</isif>									
      							</isloop>
      						</isif> 							
      					<iselseif condition="${pdict.Product.optionProduct && VariationAttribute.ID == 'trouserLength'
											 && dw.system.Site.getCurrent().getCustomPreferenceValue('enableProductOptions')}"> 
      						<isif condition="${!empty(POM.options)}">
      							<isset name="CurrentValue" value="${''}" scope="page" />
      							<isset name="ShorteningOptions" value="${new dw.util.HashMap()}" scope="page" />
      							<isset name="AvailableValues" value="${new dw.util.HashMap()}" scope="page" />
      							<isset name="OptionPrice" value="${''}" scope="page" />
      							
      							<isloop items="${POM.options}" var="Option">
	      							<isif condition="${Option.ID == trouserLegLengthStandardOptionID || Option.ID == trouserLegLengthTurnUpOptionID}"> 
	      								
	      								<isset name="currentTrouserShorteningOptionValue" value="${pdict.CurrentRequest.httpParameterMap.get('dwopt_' + product.ID + '_' + Option.ID)}" scope="page" />
	      								<isif condition="${empty(currentTrouserShorteningOptionValue.value)}"> 
	      									<isset name="currentTrouserShorteningOptionValue" value="${pdict.CurrentRequest.httpParameterMap.get('dwopt_' + pdict.Product.ID + '_' + Option.ID)}" scope="page" />
	      								</isif> 
	      								
										<isscript>
											if (!empty(currentTrouserShorteningOptionValue.value) && currentTrouserShorteningOptionValue.value != '0') {
												CurrentValue = currentTrouserShorteningOptionValue;
											}
											ShorteningOptions.put(Option.ID, Option);
											AvailableValues.put(Option.ID, VariationUtils.getCustomTrouserLegOptionValues(variationContext, VariationAttribute, Option, product.ID, pdict));
											OptionPrice = ProductOptionUtils.getPrice(POM, Option.ID);
										</isscript>
										
									</isif>
										
      							</isloop>
      							
      							<iscustomleglengthoption 
									p_currentvalue="${CurrentValue}" 
									p_price="${OptionPrice}" 
									p_name="${Resource.msg('option.custom.inside.leg', 'product', null)}" 
									p_pom="${POM}"
									p_options=${ShorteningOptions} 
									p_available_option_values="${AvailableValues}"
									p_ui_type="${'attribute'}"  
									p_html_class=${variationDetails.swatchClass}
								/> 
      						</isif>        					
      					</isif>
						<iscomment>Size Chart link</iscomment>
						<isif condition="${varAttributeID != 'color' && !variationContext.sizeChartShown}">
							<isscript>
								// get category from products primary category
								var category = pdict.Product.primaryCategory,
									sizeChartID;

								// get category from product master if not set at variant
								if (!category && pdict.Product.variant) {
									category = pdict.Product.masterProduct.primaryCategory;
								}

								while (category && !sizeChartID) {
									if ('sizeChartID' in category.custom && !empty(category.custom.sizeChartID)) {
										sizeChartID = category.custom.sizeChartID;
									} else {
										category = category.parent;
									}
								}
							</isscript>
							<isif condition="${!empty(sizeChartID)}">
								<div class="size-chart-link">
									<a href="${URLUtils.url('Page-Show','cid', sizeChartID)}" target="_blank" title="${Resource.msg('variations.sizechart', 'product', null)}">${Resource.msg('variations.sizechart', 'product', null)}</a>
								</div>
								
								<isscript>
									variationContext.sizeChartShown = true;
								</isscript>
							</isif>
						</isif>
					</div>
					</div>
					<div class="value attribute__error">
						${Resource.msg('product.selection.empty','product',null)}
					</div>
				</li>						
			</isloop>
		</ul>
		<isif condition="${!empty(variationContext.availabilityMessage)}">
			<div class="attribute__selected-value attribute__selected-value--positioned">
				<isprint value="${variationContext.availabilityMessage}" />
			</div>
		</isif>
	</div>
<iselse>
	<isif condition="${pdict.Product.availabilityModel.inventoryRecord != null && pdict.Product.availabilityModel.inventoryRecord.inStockDate != null}">
		<isset name="inStockDate" value="${pdict.Product.availabilityModel.inventoryRecord.inStockDate}" scope="page"/>
	<iselse/>
		<isset name="inStockDate" value="${null}" scope="page"/>
	</isif>
	<isif condition="${pdict.Product.availabilityModel.availabilityStatus=='IN_STOCK'}">
		<div class="attribute__selected-value attribute__selected-value--positioned">
			<isprint value="${Resource.msg('variations.instock.texttooltip', 'product', null)}" />
		</div>
	<iselseif condition="${pdict.Product.availabilityModel.availabilityStatus=='BACKORDER' && inStockDate != null
			&& dw.system.Site.getCurrent().getCustomPreferenceValue('backordersAllowed') == false}">
		<div class="attribute__selected-value attribute__selected-value--positioned">
			<isprint value="${dw.system.Site.getCurrent().getCustomPreferenceValue('backOrderMessageForXBR')}"/>
		</div>
	<iselseif condition="${pdict.Product.availabilityModel.availabilityStatus=='BACKORDER' && inStockDate != null}">
		<div class="attribute__selected-value attribute__selected-value--positioned">
			<isprint value="${Resource.msgf('variations.backorder.texttooltip', 'product', null, ViewHelpers.formattedShortDate(inStockDate, request.getLocale()))}"/>
		</div>	
	<iselseif condition="${pdict.Product.availabilityModel.availabilityStatus=='NOT_AVAILABLE'}">
		<div class="attribute__selected-value attribute__selected-value--positioned">
			<isprint value="${Resource.msg('variations.outofstock.texttooltip', 'product', null)}" />
		</div>
	</isif>
</isif>

需要创建仅适用于衬衫类别的选项卡选择器。任何人都知道如何在ISML模板中创建一个仅适用于特定类别的条件吗?

1 个答案:

答案 0 :(得分:0)

正如您所看到的,您只传递了一个参数 - 产品。可以将产品分配到不同的类别,因此您需要使用类别ID /名称将额外参数路径到此模板,然后使用它来处理带有isml标记的逻辑。