demandware pdp variation template tab selection code only applicable to shirts category

Question

Please see my variations template below. I have commented on the part of code that needs to only apply to my formal shirts category. currently if I include the div .box-tip it shows in 3 different areas on the page but only want it ti show on formal shirts.

<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>

Need to create tab selectors that will only apply to shirts category. Anyone know how to create a condition in a ISML template that will only apply to a specific category?

Answer 1

As you can see you are passing only one parameter - Product. Product can be assigned to different categories, so you need to path extra parameter to this template with category id/name and then use it to handle logic with isml tag.