custom/plugins/Theme3S/src/Resources/views/storefront/element/cms-element-cross-selling.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-cross-selling.html.twig' %}
  5. {% block cms_element_cross_selling_tabs_inner %}
  8.     {% if not sliderConfig %}
  9.         {% set sliderConfig = element.fieldConfig.elements %}
  10.     {% endif %}
  13.     {% if element.data.crossSellings.elements is not null %}
  16.         <div class="bottomPageCut2"></div>
  17.         <div class="bottomPageCut3"></div>
  19.         <div id="CrossSellingWrapper">
  21.             <div id="CrossSellingInner">
  23.                 {% if page.header.activeLanguage.translationCode.code == 'en-GB' %}
  25.                     <h1>More products</h1>
  27.                 {% elseif page.header.activeLanguage.translationCode.code == 'nl-NL'  %}
  29.                     <h1>Meer producten</h1>
  31.                 {% elseif page.header.activeLanguage.translationCode.code == 'es-ES'  %}
  33.                     <h1>Más productos</h1>
  35.                 {% elseif page.header.activeLanguage.translationCode.code == 'fr-FR'  %}
  37.                     <h1>Plus de produits</h1>
  39.                 {% elseif page.header.activeLanguage.translationCode.code == 'it-IT'  %}
  41.                     <h1>Più prodotti</h1>
  43.                 {% else %}
  45.                     <h1>Weitere Produkte</h1>
  47.                 {% endif %}
  50.                 <div id="leftSliderArrow" class="sliderarrow">
  51.                          <span class="icon icon-arrow-head-left">
  52.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="icons-default-arrow-head-left" d="m12.5 7.9142 10.2929 10.293c.3905.3904 1.0237.3904 1.4142 0 .3905-.3906.3905-1.0238 0-1.4143l-11-11c-.3905-.3905-1.0237-.3905-1.4142 0l-11 11c-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0L12.5 7.9142z"></path></defs><use transform="matrix(0 1 1 0 .5 -.5)" xlink:href="#icons-default-arrow-head-left" fill="#758CA3" fill-rule="evenodd"></use></svg>
  53.                         </span>
  54.                 </div>
  56.                 <div id="CrossSellingSlider">
  59.                     <div id="SliderRoll">
  61.                         <div class="line1topdown dekoline2"></div>
  62.                         <div class="line1topdown dekoline2" style="right: 0; left: unset;"></div>
  66.                         {% for item in element.data.crossSellings.elements %}
  68.                             {% for Product in item.products.elements %}
  70.                                 {% set imageurl = "" %}
  72.                                 {% for Item in Product.cover.media.thumbnails.elements %}
  74.                                     {% if imageurl == "" %}
  75.                                         {% if Item.url != "" %}
  76.                                             {% set imageurl = Item.url %}
  77.                                         {% endif %}
  78.                                     {% endif %}
  80.                                 {% endfor %}
  82.                                 <a  href="{{ seoUrl('frontend.detail.page', {'productId': Product.id}) }}">
  84.                                     <div class="singleProductSlideClone noactiveclone">
  86.                                         <div class="line1topdown dekoline2"></div>
  87.                                         <div class="product-image-wrapper">
  89.                                             {% if imageurl == "" %}
  90.                                                 {% set imageurl = Product.cover.media.url %}
  91.                                             {% endif %}
  93.                                             {% if imageurl == "" %}
  95.                                                 <img class="sliderimage placeholderimg hier " src="https://shop.schutzkleidung.de/bundles/theme3s/images/3S-Ritter_schwarz.svg"  style="max-width: 145px;">
  97.                                             {% else %}
  99.                                                 <img class="sliderimage hier" src="{{ imageurl }}">
  101.                                             {% endif %}
  103.                                         </div>
  105.                                         <div class="wappenbox">
  107.                                             {% for PropId in Product.propertyIds %}
  109.                                                 {% if PropId == "e755c9070e7d41469f9a1dad62db875a" %}<div class="variantwappen EN11491"></div>{% endif %}
  110.                                                 {% if PropId == "fa76425d7f2a400099d925d591e3be9f" %}<div class="variantwappen EN10732"></div>{% endif %}
  111.                                                 {% if PropId == "a581943fd430489598f209896e7bbb56" %}<div class="variantwappen EN11495"></div>{% endif %}
  112.                                                 {% if PropId == "b1fc6928266347428bd6b74c0268dad4" %}<div class="variantwappen EN14126"></div>{% endif %}
  113.                                                 {% if PropId == "0be6549f03d142c785c97b05ba9f1faa" %}<div class="variantwappen KatIII"></div>{% endif %}
  114.                                                 {% if PropId == "3842201e22984368bcc0d3125cf2827c" %}<div class="variantwappen Typ1"></div>{% endif %}
  115.                                                 {% if PropId == "9efff3bbbd234ebfbee64bd903067f6b" %}<div class="variantwappen Typ2"></div>{% endif %}
  116.                                                 {% if PropId == "fce6da51bcce4345a2fa0a44d88f249b" %}<div class="variantwappen Typ3"></div>{% endif %}
  117.                                                 {% if PropId == "f0f15d19683a4fa0a16901a8f6e9f1af" %}<div class="variantwappen Typ4"></div>{% endif %}
  118.                                                 {% if PropId == "778dfd9f51044a54a60cbd945b5b2762" %}<div class="variantwappen Typ5"></div>{% endif %}
  119.                                                 {% if PropId == "ca28fcc57c924b8e925c2bef5893fafa" %}<div class="variantwappen Typ6"></div>{% endif %}
  121.                                             {% endfor %}
  123.                                         </div>
  125.                                         <div class="clearingItem"></div>
  127.                                         {% set variation = Product.variation %}
  128.                                         {% set sizeoption = variation[0].option %}
  129.                                         {% set coloroption = variation[1].option %}
  130.                                         {% set blank = " " %}
  131.                                         {% set gloveoption = variation[2].option %}
  132.                                         {% set size = " " ~ sizeoption ~ " " %}
  134.                                         {% if page.header.activeLanguage.translationCode.code == 'de-DE' %}
  136.                                             {% set newname = Product.name %}
  138.                                         {% else %}
  140.                                             {% set newname = Product.translated.name %}
  142.                                         {% endif %}
  145.                                         {% if size != "" %}
  146.                                             {% set newname = newname|replace({(size): blank}) %}
  147.                                         {% endif %}
  149.                                         {% if coloroption != "" %}
  150.                                             {% set newname = newname|replace({(coloroption): blank}) %}
  151.                                         {% endif %}
  155.                                         {% if gloveoption != "" %}
  156.                                             {% set newname = newname|replace({(gloveoption): blank}) %}
  157.                                         {% endif %}
  161.                                         <div class="colorbox {{ productname }} test">
  163.                                             {% if Product.translated.customFields.custom_colors_ != "" %}
  165.                                                 {% set colors = Product.translated.customFields.custom_colors_ | split(',') %}
  167.                                                 {% for color in colors %}
  169.                                                     {% if color == "grün" %}
  171.                                                         <div class='variantcolor gruen'></div>
  173.                                                     {% elseif color == "weiß/blau" %}
  175.                                                         <div class='variantcolor' style="background: linear-gradient(to bottom left, #ffffff 50%, #395f98 50%);"></div>
  177.                                                     {% else %}
  179.                                                         <div class='variantcolor {{ color }}'></div>
  181.                                                     {% endif %}
  183.                                                 {% endfor %}
  185.                                             {% endif %}
  187.                                         </div>
  189.                                         <div class="product-price-info">
  190.                                             <p class="product-price-unit"></p>
  191.                                             <div class="product-price-wrapper">
  192.                                                 <div class="product-cheapest-price"></div>
  193.                                                 <span class="product-price">
  196.                                                 {% if Product.calculatedPrices|length > 1 %}
  201.                                                     {{ "detail.dataColumnQuantity"|trans|sw_sanitize }}
  202.                                                     {{ "detail.dataColumnPrice"|trans|sw_sanitize }}
  203.                                                     {% if Product.calculatedPrice.referencePrice %}
  204.                                                         {{ "detail.dataColumnReferencePrice"|trans|sw_sanitize }}
  205.                                                     {% endif %}
  209.                                                     {% for price in Product.calculatedPrices %}
  213.                                                         {% if loop.last %}
  214.                                                             {{ "detail.priceDataInfoFrom"|trans|sw_sanitize }}
  216.                                                         {% else %}
  217.                                                             {{ "detail.priceDataInfoUntil"|trans|sw_sanitize }}
  218.                                                         {% endif %}
  220.                                                         {% sw_include '@Storefront/storefront/component/product/block-price.html.twig' with {
  221.                                                             price: price
  222.                                                         } only %}
  224.                                                         {% if price.referencePrice is not null %}
  225.                                                             {{ price.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }}
  226.                                                         {% endif %}
  230.                                                     {% endfor %}
  234.                                                 {% else %}
  235.                                                     {% set price = Product.calculatedPrice %}
  237.                                                     {% if Product.calculatedPrices|length == 1 %}
  238.                                                         {% set price = Product.calculatedPrices.first %}
  239.                                                     {% endif %}
  244.                                                     {% set listPrice = price.listPrice %}
  245.                                                     {% set isListPrice = price.listPrice.percentage > 0 %}
  246.                                                     {% set isRegulationPrice = price.regulationPrice != null %}
  248.                                                     {{ price.unitPrice|currency }}{{ "general.star"|trans|sw_sanitize }}
  250.                                                     {% if isListPrice %}
  255.                                                         {% set afterListPriceSnippetExists = "listing.afterListPrice"|trans|length > 0 %}
  256.                                                         {% set beforeListPriceSnippetExists = "listing.beforeListPrice"|trans|length > 0 %}
  259.                                                         {% if beforeListPriceSnippetExists %}{{"listing.beforeListPrice"|trans|trim}}{% endif %}
  261.                                                         {{ listPrice.price|currency }}{{ "general.star"|trans|sw_sanitize }}
  263.                                                         {% if afterListPriceSnippetExists %}
  264.                                                             {{"listing.afterListPrice"|trans|trim}}
  265.                                                         {% endif %}
  267.                                                         {{ "detail.listPricePercentage"|trans({'%price%': listPrice.percentage })|sw_sanitize }}
  270.                                                     {% endif %}
  271.                                                     {% if isRegulationPrice %}
  272.                                                         {{ "general.listPricePreviously"|trans({'%price%': price.regulationPrice.price|currency }) }}{{ "general.star"|trans|sw_sanitize }}
  274.                                                     {% endif %}
  277.                                                     {% if Product.purchaseUnit %}
  279.                                                         {{ "detail.priceUnitName"|trans|sw_sanitize }}
  281.                                                         {{ Product.purchaseUnit }} {{ Product.unit.translated.name }}
  284.                                                         {% if price.referencePrice is not null %}
  286.                                                             ({{ price.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }})
  289.                                                         {% endif %}
  292.                                                     {% endif %}
  293.                                                 {% endif %}
  297.                                         </span>
  298.                                             </div>
  299.                                         </div>
  301.                                         <div class="BoxCardName">
  302.                                             {% if newname|length > 0 %}
  304.                                                 {% if newname|length >= 71 %}
  305.                                                     {{ newname|u.truncate(70, '…') }}
  306.                                                 {% else %}
  307.                                                     {{ newname }}
  308.                                                 {% endif %}
  310.                                             {% endif %}
  311.                                         </div>
  314.                                     </div>
  316.                                 </a>
  317.                             {% endfor %}
  319.                         {% endfor %}
  325.                         {% for item in element.data.crossSellings.elements %}
  327.                             {% for Product in item.products.elements %}
  329.                                 {% set imageurl = "" %}
  331.                                 {% set activeclass = "" %}
  333.                                 {% if loop.index <= 4 %}
  335.                                     {% set activeclass = "activeslide" %}
  337.                                 {% else %}
  339.                                     {% set activeclass = "noactiveslide" %}
  341.                                 {% endif %}
  344.                                 {% for Item in Product.cover.media.thumbnails.elements %}
  346.                                     {% if imageurl == "" %}
  347.                                         {% if Item.url != "" %}
  348.                                             {% set imageurl = Item.url %}
  349.                                         {% endif %}
  350.                                     {% endif %}
  353.                                 {% endfor %}
  355.                                 <a href="{{ seoUrl('frontend.detail.page', {'productId': Product.id}) }}">
  357.                                     <div class="singleProductSlide {{ activeclass }} slide-{{ loop.index }}">
  359.                                         <div class="line1topdown dekoline2"></div>
  360.                                         <div class="product-image-wrapper">
  362.                                             {% if imageurl == "" %}
  363.                                                 {% set imageurl = Product.cover.media.url %}
  364.                                             {% endif %}
  366.                                             {% if imageurl == "" %}
  368.                                                 <img class="sliderimage placeholderimg da" src="https://shop.schutzkleidung.de/bundles/theme3s/images/3S-Ritter_schwarz.svg" style="max-width: 145px;">
  370.                                             {% else %}
  372.                                                 <img class="sliderimage da" src="{{ imageurl }}">
  374.                                             {% endif %}
  378.                                         </div>
  380.                                         <div class="wappenbox">
  382.                                             {% for PropId in Product.propertyIds %}
  384.                                                 {% if PropId == "e755c9070e7d41469f9a1dad62db875a" %}<div class="variantwappen EN11491"></div>{% endif %}
  385.                                                 {% if PropId == "fa76425d7f2a400099d925d591e3be9f" %}<div class="variantwappen EN10732"></div>{% endif %}
  386.                                                 {% if PropId == "a581943fd430489598f209896e7bbb56" %}<div class="variantwappen EN11495"></div>{% endif %}
  387.                                                 {% if PropId == "b1fc6928266347428bd6b74c0268dad4" %}<div class="variantwappen EN14126"></div>{% endif %}
  388.                                                 {% if PropId == "0be6549f03d142c785c97b05ba9f1faa" %}<div class="variantwappen KatIII"></div>{% endif %}
  389.                                                 {% if PropId == "3842201e22984368bcc0d3125cf2827c" %}<div class="variantwappen Typ1"></div>{% endif %}
  390.                                                 {% if PropId == "9efff3bbbd234ebfbee64bd903067f6b" %}<div class="variantwappen Typ2"></div>{% endif %}
  391.                                                 {% if PropId == "fce6da51bcce4345a2fa0a44d88f249b" %}<div class="variantwappen Typ3"></div>{% endif %}
  392.                                                 {% if PropId == "f0f15d19683a4fa0a16901a8f6e9f1af" %}<div class="variantwappen Typ4"></div>{% endif %}
  393.                                                 {% if PropId == "778dfd9f51044a54a60cbd945b5b2762" %}<div class="variantwappen Typ5"></div>{% endif %}
  394.                                                 {% if PropId == "ca28fcc57c924b8e925c2bef5893fafa" %}<div class="variantwappen Typ6"></div>{% endif %}
  396.                                             {% endfor %}
  398.                                         </div>
  400.                                         <div class="clearingItem"></div>
  402.                                         {% set variation = Product.variation %}
  403.                                         {% set sizeoption = variation[0].option %}
  404.                                         {% set coloroption = variation[1].option %}
  405.                                         {% set blank = " " %}
  406.                                         {% set gloveoption = variation[2].option %}
  407.                                         {% set size = " " ~ sizeoption ~ " " %}
  409.                                         {% if page.header.activeLanguage.translationCode.code == 'de-DE' %}
  411.                                             {% set newname = Product.name %}
  413.                                         {% else %}
  415.                                             {% set newname = Product.translated.name %}
  417.                                         {% endif %}
  419.                                         {% if size != "" %}
  420.                                             {% set newname = newname|replace({(size): blank}) %}
  421.                                         {% endif %}
  423.                                         {% if coloroption != "" %}
  424.                                             {% set newname = newname|replace({(coloroption): blank}) %}
  425.                                         {% endif %}
  429.                                         {% if gloveoption != "" %}
  430.                                             {% set newname = newname|replace({(gloveoption): blank}) %}
  431.                                         {% endif %}
  435.                                         <div class="colorbox">
  437.                                             {% if Product.translated.customFields.custom_colors_ != "" %}
  439.                                                 {% set colors = Product.translated.customFields.custom_colors_ | split(',') %}
  441.                                                 {% for color in colors %}
  443.                                                     {% if color == "grün" %}
  445.                                                         <div class='variantcolor gruen'></div>
  447.                                                     {% elseif color == "weiß/blau" %}
  449.                                                         <div class='variantcolor' style="background: linear-gradient(to bottom left, #ffffff 50%, #395f98 50%);"></div>
  451.                                                     {% else %}
  453.                                                         <div class='variantcolor {{ color }}'></div>
  455.                                                     {% endif %}
  458.                                                 {% endfor %}
  460.                                             {% endif %}
  462.                                         </div>
  464.                                         <div class="product-price-info">
  465.                                             <p class="product-price-unit"></p>
  466.                                             <div class="product-price-wrapper">
  467.                                                 <div class="product-cheapest-price"></div>
  468.                                                 <span class="product-price">
  471.                                                 {% if Product.calculatedPrices|length > 1 %}
  476.                                                     {{ "detail.dataColumnQuantity"|trans|sw_sanitize }}
  477.                                                     {{ "detail.dataColumnPrice"|trans|sw_sanitize }}
  478.                                                     {% if Product.calculatedPrice.referencePrice %}
  479.                                                         {{ "detail.dataColumnReferencePrice"|trans|sw_sanitize }}
  480.                                                     {% endif %}
  484.                                                     {% for price in Product.calculatedPrices %}
  488.                                                         {% if loop.last %}
  489.                                                             {{ "detail.priceDataInfoFrom"|trans|sw_sanitize }}
  491.                                                         {% else %}
  492.                                                             {{ "detail.priceDataInfoUntil"|trans|sw_sanitize }}
  493.                                                         {% endif %}
  495.                                                         {% sw_include '@Storefront/storefront/component/product/block-price.html.twig' with {
  496.                                                             price: price
  497.                                                         } only %}
  499.                                                         {% if price.referencePrice is not null %}
  500.                                                             {{ price.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }}
  501.                                                         {% endif %}
  505.                                                     {% endfor %}
  509.                                                 {% else %}
  510.                                                     {% set price = Product.calculatedPrice %}
  512.                                                     {% if Product.calculatedPrices|length == 1 %}
  513.                                                         {% set price = Product.calculatedPrices.first %}
  514.                                                     {% endif %}
  519.                                                     {% set listPrice = price.listPrice %}
  520.                                                     {% set isListPrice = price.listPrice.percentage > 0 %}
  521.                                                     {% set isRegulationPrice = price.regulationPrice != null %}
  523.                                                     {{ price.unitPrice|currency }}{{ "general.star"|trans|sw_sanitize }}
  525.                                                     {% if isListPrice %}
  530.                                                         {% set afterListPriceSnippetExists = "listing.afterListPrice"|trans|length > 0 %}
  531.                                                         {% set beforeListPriceSnippetExists = "listing.beforeListPrice"|trans|length > 0 %}
  534.                                                         {% if beforeListPriceSnippetExists %}{{"listing.beforeListPrice"|trans|trim}}{% endif %}
  536.                                                         {{ listPrice.price|currency }}{{ "general.star"|trans|sw_sanitize }}
  538.                                                         {% if afterListPriceSnippetExists %}
  539.                                                             {{"listing.afterListPrice"|trans|trim}}
  540.                                                         {% endif %}
  542.                                                         {{ "detail.listPricePercentage"|trans({'%price%': listPrice.percentage })|sw_sanitize }}
  545.                                                     {% endif %}
  546.                                                     {% if isRegulationPrice %}
  547.                                                         {{ "general.listPricePreviously"|trans({'%price%': price.regulationPrice.price|currency }) }}{{ "general.star"|trans|sw_sanitize }}
  549.                                                     {% endif %}
  552.                                                     {% if Product.purchaseUnit %}
  554.                                                         {{ "detail.priceUnitName"|trans|sw_sanitize }}
  556.                                                         {{ Product.purchaseUnit }} {{ Product.unit.translated.name }}
  559.                                                         {% if price.referencePrice is not null %}
  561.                                                             ({{ price.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }})
  564.                                                         {% endif %}
  567.                                                     {% endif %}
  568.                                                 {% endif %}
  573.                                         </span>
  574.                                             </div>
  575.                                         </div>
  577.                                         <div class="BoxCardName">
  579.                                             {% if newname|length > 0 %}
  581.                                                 {% if newname|length >= 71 %}
  582.                                                     {{ newname|u.truncate(70, '…') }}
  583.                                                 {% else %}
  584.                                                     {{ newname }}
  585.                                                 {% endif %}
  587.                                             {% endif %}
  589.                                         </div>
  591.                                     </div>
  592.                                 </a>
  594.                             {% endfor %}
  596.                         {% endfor %}
  598.                     </div>
  600.                 </div>
  602.                 <div id="rightSliderArrow" class="sliderarrow">
  603.                         <span class="icon icon-arrow-head-right">
  604.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs>
  605.                                 <path id="icons-default-arrow-head-right" d="m11.5 7.9142 10.2929 10.293c.3905.3904 1.0237.3904 1.4142 0 .3905-.3906.3905-1.0238 0-1.4143l-11-11c-.3905-.3905-1.0237-.3905-1.4142 0l-11 11c-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0L11.5 7.9142z"></path></defs><use transform="rotate(90 11.5 12)" xlink:href="#icons-default-arrow-head-right" fill="#758CA3" fill-rule="evenodd"></use>
  606.                         </svg>
  607.                         </span>
  608.                 </div>
  610.             </div>
  612.         </div>
  616.         <script>
  620.             var ClickCount = 0;
  621.             var VisibleSlides = 4;
  622.             var MaxSlides = $('.singleProductSlide').length;
  623.             var TileWidth = -400;
  625.             var CalcMoves = MaxSlides - VisibleSlides;
  628.             if(MaxSlides <= VisibleSlides){
  630.                 $( "#rightSliderArrow" ).hide();
  631.                 $( "#leftSliderArrow" ).hide();
  633.             }
  636.             $( window ).resize(function() {
  639.                 if($( window ).width() >= 1700){
  640.                     VisibleSlides = 4;
  641.                     CalcMoves = MaxSlides - VisibleSlides;
  642.                 }
  644.                 if($( window ).width() < 1700){
  645.                     VisibleSlides = 3;
  646.                     CalcMoves = MaxSlides - VisibleSlides;
  647.                 }
  650.                 if($( window ).width() < 1300){
  651.                     VisibleSlides = 2;
  652.                     CalcMoves = MaxSlides - VisibleSlides;
  653.                 }
  656.                 if($( window ).width() < 900){
  657.                     var TileWidth = -300;
  658.                     VisibleSlides = 1;
  659.                     CalcMoves = MaxSlides - VisibleSlides;
  660.                 }
  662.                 if(MaxSlides == VisibleSlides){
  664.                     $( "#rightSliderArrow" ).hide();
  665.                     $( "#leftSliderArrow" ).hide();
  667.                 } else {
  669.                     $( "#rightSliderArrow" ).show();
  670.                     $( "#leftSliderArrow" ).show();
  672.                 }
  674.             });
  678.             $( "#rightSliderArrow" ).click(function() {
  680.                 if(ClickCount >= 0){
  682.                     if(ClickCount >= CalcMoves){
  683.                         ClickCount = CalcMoves;
  685.                     } else {
  687.                         $(".activeslide").first().css( "margin-left", TileWidth);
  688.                         $( ".activeslide" ).first().addClass("noactiveslide");
  689.                         $( ".activeslide" ).first().removeClass("activeslide");
  690.                         ClickCount++;
  691.                     }
  693.                 } else {
  695.                     $(".activeclone").first().css( "margin-left", TileWidth);
  696.                     $(".activeclone").first().addClass( "noactiveclone");
  697.                     $(".activeclone").first().removeClass( "activeclone");
  698.                     ClickCount++;
  700.                 }
  702.             });
  705.             $( "#leftSliderArrow" ).click(function() {
  707.                 if(ClickCount <= 0){
  708.                     //ClickCount = 0;
  711.                     if(ClickCount <= -Math.abs(MaxSlides)){
  713.                         ClickCount = -Math.abs(MaxSlides);
  715.                     } else {
  717.                         $(".noactiveclone").last().css( "margin-left", "0px");
  718.                         $(".noactiveclone").last().addClass( "activeclone");
  719.                         $(".noactiveclone").last().removeClass( "noactiveclone");
  721.                         ClickCount--;
  722.                     }
  724.                 } else {
  726.                     $( ".slide-" +  ClickCount).first().css( "margin-left", "0px" );
  727.                     $( ".slide-" +  ClickCount).addClass("activeslide");
  728.                     $( ".slide-" +  ClickCount).removeClass("noactiveslide");
  729.                     ClickCount--;
  731.                 }
  733.             });
  738.             //TO START 1 PRODUCT BEFORE
  739.             if(ClickCount <= 0 && CalcMoves > 0){
  740.                 //ClickCount = 0;
  743.                 if(ClickCount <= -Math.abs(MaxSlides)){
  745.                     ClickCount = -Math.abs(MaxSlides);
  747.                 } else {
  749.                     $(".noactiveclone").last().css( "margin-left", "0px");
  750.                     $(".noactiveclone").last().addClass( "activeclone");
  751.                     $(".noactiveclone").last().removeClass( "noactiveclone");
  753.                     ClickCount--;
  754.                 }
  758.             } else {
  760.                 $( ".slide-" +  ClickCount).first().css( "margin-left", "0px" );
  761.                 $( ".slide-" +  ClickCount).addClass("activeslide");
  762.                 $( ".slide-" +  ClickCount).removeClass("noactiveslide");
  763.                 ClickCount--;
  765.             }
  769.         </script>
  773.     {% endif %}
  776.     <div class="product-detail-cross-selling" style="display: none;">
  777.         <div class="card card-tabs" data-cross-selling="true">
  780.             {% block cms_element_cross_selling_tabs_navigation %}
  781.                 <div class="card-header product-detail-tab-navigation product-cross-selling-tab-navigation">
  782.                     {% block cms_element_cross_selling_tabs_navigation_container %}
  783.                         <ul class="nav nav-tabs product-detail-tab-navigation-list"
  784.                             id="product-detail-cross-selling-tabs"
  785.                             role="tablist">
  786.                             {% if element.data.crossSellings.elements is defined %}
  787.                                 {% for item in element.data.crossSellings.elements|filter(item => item.total > 0 and item.crossSelling.active == true) %}
  788.                                     {% set crossSelling = item.crossSelling %}
  789.                                     {% set products = item.products %}
  790.                                     {% set id = crossSelling.id %}
  791.                                     <li class="nav-item">
  792.                                         <a class="nav-link product-detail-tab-navigation-link{% if loop.first %} active{% endif %}"
  793.                                            id="cross-selling-tab-{{ id }}"
  794.                                         {{ dataBsToggleAttr }}="tab"
  795.                                         href="#cross-selling-tab-{{ id }}-pane"
  796.                                         role="tab"
  797.                                         aria-controls="cross-selling-tab-{{ id }}-pane"
  798.                                         aria-selected="true">
  799.                                         {{ crossSelling.translated.name }}
  800.                                         <span class="product-detail-tab-navigation-icon">
  801.                                                     {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
  802.                                                 </span>
  803.                                         </a>
  804.                                     </li>
  805.                                 {% endfor %}
  806.                             {% endif %}
  807.                         </ul>
  808.                     {% endblock %}
  809.                 </div>
  810.             {% endblock %}
  813.             {% block cms_element_cross_selling_tabs_content %}
  814.                 <div class="product-detail-tabs-content card-body">
  815.                     {% block cms_element_cross_selling_tabs_content_container %}
  816.                         <div class="tab-content">
  817.                             {% if element.data.crossSellings.elements is defined %}
  818.                                 {% for item in element.data.crossSellings.elements|filter(item => item.total > 0 and item.crossSelling.active == true) %}
  819.                                     {% set crossSelling = item.crossSelling %}
  820.                                     {% set products = item.products %}
  821.                                     {% set id = crossSelling.id %}
  822.                                     <div class="tab-pane fade show{% if loop.first %} active{% endif %}"
  823.                                          id="cross-selling-tab-{{ id }}-pane"
  824.                                          role="tabpanel"
  825.                                          aria-labelledby="cross-selling-tab-{{ id }}">
  826.                                         {% set config = {
  827.                                             'title': {
  828.                                                 'value': crossSelling.name ?: crossSelling.translated.name
  829.                                             },
  830.                                             'border': {
  831.                                                 'value': false
  832.                                             },
  833.                                             'rotate': {
  834.                                                 'value': false
  835.                                             },
  836.                                             'products': {
  837.                                                 'value': products
  838.                                             },
  839.                                             'boxLayout': {
  840.                                                 'value': sliderConfig.boxLayout.value
  841.                                             },
  842.                                             'elMinWidth': {
  843.                                                 'value': sliderConfig.elMinWidth.value
  844.                                             },
  845.                                             'navigation': {
  846.                                                 'value': true
  847.                                             },
  848.                                             'displayMode': {
  849.                                                 'value': sliderConfig.displayMode.value
  850.                                             },
  851.                                             'verticalAlign': {
  852.                                                 'value': center
  853.                                             }
  854.                                         } %}
  856.                                         {% block cms_element_cross_selling_tabs_content_container_slider %}
  857.                                             {% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
  858.                                                 sliderConfig: config,
  859.                                                 element: {
  860.                                                     'data': {
  861.                                                         'products': products
  862.                                                     },
  863.                                                     type: 'product-slider'
  864.                                                 }
  865.                                             } %}
  866.                                         {% endblock %}
  868.                                     </div>
  869.                                 {% endfor %}
  870.                             {% endif %}
  871.                         </div>
  872.                     {% endblock %}
  873.                 </div>
  874.             {% endblock %}
  875.         </div>
  876.     </div>
  879. {% endblock %}