请在下面查看我的变体模板。我已经评论了只需要应用于我的正式衬衫类别的代码部分。目前,如果我包含 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 模板中创建仅适用于特定类别的条件?