{% assign widgetNameTranslationLabel = 'recommendation.' | append: widgetId %}{% assign widgetTitle = '' %}{% if widgetDesignSettings.titleAlignment != '' %} {% assign widgetTitle = widgetTitle | append: 'boost-sd__recommendation-title--'| append: widgetDesignSettings.titleAlignment %}{% endif %}

{{ widgetNameTranslationLabel | translate: translations, widgetName }}

{% if widgetDesignSettings.layoutDisplay == 'carousel' %}

{% for product in products %}

{% capture domain %}{{ widgetDesignSettings.tenantId }}{% endcapture %} {% if product.original_images != nil %} {% assign imageArray = product.original_images %}{% else %} {% assign imageArray = product.images_info %}{% endif %}{% assign productId = product.id %}{% if product.variant_id %} {% assign productId = product.variant_id %}{% endif %}{% assign filterOptionIdImageBaseOn = 'pf_opt_color' %} {% capture filterOptionIdImageBaseOn %}{% endcapture %}{% assign optionName = filterOptionIdImageBaseOn | replace: 'pf_opt_', '' %}{% assign filterValues = request[filterOptionIdImageBaseOn] %}{% assign selectedVariantImageByFilterOption = nil %}{% for item in product.variants %} {% for filterValue in filterValues %} {% assign optionNameValue = optionName | append: ":" | append: filterValue | strip %} {% if item.merged_options contains optionNameValue %} {% if item.image %} {% assign selectedVariantImageByFilterOption = item.image %} {% break %} {% endif %} {% endif %} {% endfor %} {% if selectedVariantImageByFilterOption != nil %} {% break %} {% endif %}{% endfor %}{% capture productVariants %} [ {% for variant in product.variants %} {% assign preorder = '{}' %} {% if variant.preorder and variant.preorder != nil %} {% assign preorder = variant.preorder %} {% else %} {% assign preorder = '' %} {% endif %} { "title": "{{ variant.title }}", "id": "{{ variant.id }}", "available": {{ variant.available }}, "preorder": {{ preorder | json }} }{% unless forloop.last %},{% endunless %} {% endfor %} ]{% endcapture %}{% capture productData %} { "handle": "{{ product.handle }}", "variantId": "{{ product.variant_id }}", "splitProduct": "{{ product.split_product }}", "priceMin": "{{ product.price_min }}", "priceMax": "{{ product.price_max }}", "compareAtPriceMin": "{{ product.compare_at_price_min }}", "compareAtPriceMax": "{{ product.compare_at_price_max }}", "images": {{ imageArray | json | escape }}, "options_with_values": {{ product.options_with_values | json | escape }}, "selectedVariantImageByFilterOption": "{{ selectedVariantImageByFilterOption | escape }}", "category": "{{ product.product_type | escape }}", "tags" : {{ product.tags | json | escape }} }{% endcapture %}{%- capture borderLayout %}noBorder{% endcapture -%}{% if borderLayout == 'noPadding' %} {% assign border_layout_item = 'no-padding' %}{% elsif borderLayout == 'hasPadding' %} {% assign border_layout_item = 'border-has-padding' %}{% elsif borderLayout == 'noPaddingImage' %} {% assign border_layout_item = 'border-no-padding-image' %}{% else %} {% assign border_layout_item = 'no-border' %}{% endif %}{% assign product_locale = '' %}{% if request.current_locale != "" or request.current_locale != null %} {% assign product_locale = request.current_locale %}{% endif %}

{%- capture aspectRatio %}auto{% endcapture -%}{% capture hoverEffect %}reveal-second-image{% endcapture %}{% assign productImages = product.images_info %}{% if product.split_product %} {% assign productImages = product.original_images %}{% endif %}

{% if product.metafields != '' %} {% for meta in product.metafields %} {% if meta.key == 'custom_tag' %}

{% endif %} {% endfor %} {% endif %} {% assign effect_classes = '' %} {% if hoverEffect == 'reveal-second-image-and-zoom-in' %} {% assign effect_classes = effect_classes | append: 'boost-sd__product-image-wrapper--zoom-in' %} {% if productImages.size > 1 %} {% assign effect_classes = effect_classes | append: ' boost-sd__product-image-wrapper--has-second-image' %} {% endif %} {% endif %} {% if hoverEffect == 'reveal-second-image' and productImages.size > 1 %} {% assign effect_classes = effect_classes | append: 'boost-sd__product-image-wrapper--has-second-image' %} {% endif %} {% if hoverEffect == 'zoom-in' %} {% assign effect_classes = effect_classes | append: 'boost-sd__product-image-wrapper--zoom-in' %} {% endif %} {% assign aspect_ratio = '' -%} {% if aspectRatio == 'natural' -%} {% assign imageWidth = product.images_info[0].width -%} {% assign imageHeight = product.images_info[0].height -%} {% assign aspect_ratio = aspect_ratio | append: 'aspect-ratio:' | append: imageWidth | append: '/' | append: imageHeight -%} {% endif -%}

{% capture metaData %} { "action": { {% if product.variants.size == 1 %} "addToCart": { "productId": "{{ product.variants[0].id }}", {% assign sellingPlanId = '' %} {% if product.variants[0].preorder and product.variants[0].preorder.sellingPlan %} {% assign sellingPlanId = product.variants[0].preorder.sellingPlan.id %} {% else %} {% assign sellingPlanId = '' %} {% endif %} "selling_plan": {{ sellingPlanId | json | escape }}, "sku": "{{ product.variants[0].sku }}" } {% else %} "quickView": { "productId": "{{ product.id }}", "fromSelectOptionBtn": true } {% endif %} } } {% endcapture %} {% assign variantPreorder = product.variants[0].preorder %} {% assign buttonPreorder = '' %} {% if variantPreorder %} {% assign buttonPreorder = buttonPreorder | append : ' boost-sd__button--preorder' %} {% endif %} {% assign buttonTextPreorder = '' %} {% if variantPreorder %} {% assign buttonTextPreorder = buttonTextPreorder | append : ' boost-sd__button-text--preorder' %} {% endif %} {% assign preOrderLabel = 'Pre-Order' %} {% assign preOrderButtonText = product.variants[0].preorder.settings.buttonText %} {% if preOrderButtonText and preOrderButtonText != '' %} {% assign preOrderLabel = preOrderButtonText %} {% endif %} {% assign selectOptionBtnLabel = '' %} {% if product.available == false %} {% assign selectOptionBtnLabel = "productItem.soldoutLabel" | translate: translations, 'Sold out' %} {% elsif product.variants.size == 1 %} {% assign selectOptionBtnLabel = "productItem.atcAvailableLabel" | translate: translations, 'Add to cart' %} {% comment %} TODO check preorder {% endcomment %} {% if variantPreorder %} {% assign selectOptionBtnLabel = preOrderLabel %} {% endif %} {% else %} {% assign selectOptionBtnLabel = "productItem.atcSelectOptionsLabel" | translate: translations, 'Choose options' %} {% endif %} {% assign firstImageSrc = '' -%} {% if selectedVariantImageByFilterOption != nil -%} {% assign firstImageSrc = selectedVariantImageByFilterOption -%} {% else -%} {% assign firstImageSrc = product.images_info[0].src -%} {% endif -%} {% assign widthParam = "&width=" -%} {% assign widths = "200,300,400,500,700,800" | split: "," -%} {% if request.device contains 'mobile' -%} {% assign maxWidth = 400 -%} {% else -%} {% assign maxWidth = 700 -%} {% endif -%} {% if request.productImageWidth != blank -%} {% assign imageWidth = request.productImageWidth | plus: 0 -%} {% if imageWidth > maxWidth -%} {% assign maxWidth = imageWidth -%} {% endif -%} {% endif -%} {% if product.images_info[0] -%} {% capture srcset -%} {% for width in widths -%} {% assign widthNo = width | plus: 0%} {% if widthNo < maxWidth -%} {{ firstImageSrc }}{{ widthParam }}{{ width }} {{ width }}w, {% else -%} {{ firstImageSrc }}{{ widthParam }}{{ maxWidth }} {{ maxWidth }}w {% break -%} {% endif -%} {% endfor -%} {% endcapture -%} {% assign productPerRow = 4 -%} {% if request.productPerRow != blank -%} {% assign productPerRow = request.productPerRow | plus: 0 -%} {% endif -%} {{ product.title | escape }}

{% if productImages.size > 1 and hoverEffect == 'reveal-second-image-and-zoom-in' or hoverEffect == 'reveal-second-image' %} {% for image in productImages %} {% if image.src contains product.images_info[0].src %} {% assign secondImage = productImages[image.position] %} {% endif %} {% endfor %} {% if secondImage -%} {% assign secondImageSrc = secondImage.src -%} {% capture secondImageSrcset -%} {% for width in widths -%} {% assign widthNo = width | plus: 0 -%} {% if widthNo < maxWidth -%} {{ secondImageSrc }}{{ widthParam }}{{ width }} {{ width }}w, {% else -%} {{ secondImageSrc }}{{ widthParam }}{{ maxWidth }} {{ maxWidth }}w {% break -%} {% endif -%} {% endfor -%} {% endcapture -%} {{ product.title | escape }}

{% endif -%} {% endif %} {% else -%} {{ product.title | escape }}

{% endif -%}

{% assign hideOtherLabelsWhenSoldOut = true -%}{% assign money_format = request.money_format | strip_html -%}{% assign removePriceDecimal = false -%}{% assign showCentAsSuperscript = false -%}{% assign decimalDelimiter = '' -%}{% assign withoutTrailingZeros = true -%}{% if hideOtherLabelsWhenSoldOut != true -%} {% else -%} {% if product.available == false -%} {% else -%} {% endif -%}{% endif -%}

{% comment %} POPUP {% endcomment %} {% comment %} POPUP {% endcomment %}

Connect

{% comment %} This Template contains a few variables built from the client js side {% endcomment %}{% assign removePriceDecimal = false -%}{% assign decimalDelimiter = '' -%}{% assign withoutTrailingZeros = true -%}{% assign showCentAsSuperscript = false -%}{% assign money_format = request.money_format | strip_html -%}{% assign money_format = request.money_format_with_currency | strip_html -%}{% assign showSavingDisplay = false -%}{% assign minPrice = product.price_min | times: 1.0 -%}{% assign maxPrice = 0 -%}{% if product.price_max -%} {% assign maxPrice = product.price_max | times: 1.0 -%}{% endif -%}{% comment %} convert variable compareAtPriceMin to number {% endcomment %}{% assign compareAtPriceMin = 0 -%}{% if product.compare_at_price_min -%} {% assign compareAtPriceMin = product.compare_at_price_min | times: 1.0 -%}{% endif -%}{% assign isSale = false -%}{% assign salePercent = 0 -%}{% assign saleAmount = 0 -%}{% if compareAtPriceMin > minPrice -%} {% assign isSale = true -%}{% endif -%}{% assign compareAtPriceWithFormat = '' -%}{% unless compareAtPriceMin == null or compareAtPriceMin == 0 or isSale == false -%} {% comment %} calculate salePercent base on compareAtPriceMin and minPrice {% endcomment %} {% assign compare = compareAtPriceMin | minus: minPrice | times: 100 -%} {% assign salePercent = compare | divided_by: compareAtPriceMin | ceil | append: '%' -%} {% comment %} compareAtPriceWithFormat is compare price with PriceMin and format currency {% endcomment %} {% assign compareAtPriceWithFormat = compareAtPriceMin | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign saleAmount = compareAtPriceMin | minus: minPrice -%}{% endunless -%}{% comment %} Format price min {% endcomment %}{% assign priceMinWithFormat = minPrice | format_currency: money_format, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%}{% comment %} Format price max {% endcomment %}{% assign priceMaxWithFormat = '' -%}{% if product.price_max and maxPrice > minPrice -%} {% assign priceMaxWithFormat = maxPrice | format_currency: money_format, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%}{% endif -%}{% comment %} priceMax used for multi variant price display where it can have min-max price with format and translation {% endcomment %}{% assign hasMultiVariantPrice = false -%}{% if translations.productItem.amount contains "minPrice" -%} {% assign hasMultiVariantPrice = true -%}{% endif -%}{% assign isSamePrice = true -%}{% if minPrice != maxPrice or product.compare_at_price_min != product.compare_at_price_max -%} {% assign isSamePrice = false -%}{% endif -%}{% assign priceValueWithFormat = priceMinWithFormat -%}{% if isSamePrice == false and maxPrice > minPrice and hasMultiVariantPrice -%} {% assign priceValueWithFormat = "productItem.amount" | translate: translations, "" | replace: '{{minPrice}}', priceMinWithFormat | replace: '{{maxPrice}}', priceMaxWithFormat -%}{% endif -%}{% assign savingPriceWithFormat = '' -%}{% unless showSavingDisplay == false or saleAmount == 0 -%} {% assign saleAmountWithFormat = saleAmount | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign savingPriceWithFormat = "productItem.savingAmount" | translate: translations, "Save {{saleAmount}}" | replace: '{{saleAmount}}', saleAmountWithFormat | replace: '{{salePercent}}', salePercent -%}{% endunless -%}{% comment %} Price compare display top or bottom {% endcomment %}{% comment %} Price compare display left or right {% endcomment %}

{% if savingPriceWithFormat != '' -%} {% endif -%}

{% assign swatches = '' %} {% assign swatches = 'swatch item 1' %} {% capture swatchType %}finish{% endcapture %}{% capture swatchBy %}color{% endcapture %}{% capture swatchShape %}circle{% endcapture %}{% assign swatchShapeClasses = '' %}{% if swatchShape == 'box' %} {% assign swatchShapeClasses = swatchShapeClasses | append: 'boost-sd__radio-label--non-radius' %}{% endif %}{% if swatchShape == 'circle' %} {% assign swatchShapeClasses = swatchShapeClasses | append: 'boost-sd__radio-label--circle' %}{% endif %}{% assign hideTextClasses = '' %}{% if swatchBy != '' and swatchBy != 'text' %} {% assign hideTextClasses = hideTextClasses | append: 'boost-sd__radio-label--hide-text' %}{% endif %}{% for swatch in product.options_with_values %} {% assign maxItem = 4 %} {% assign optionsLength = swatch.values | size %} {% if swatch.name %} {% if swatch.name == swatchType %}

{% for value in swatch.values limit: maxItem %}

{% endfor %} {% if optionsLength > maxItem %} {% assign count = optionsLength | minus: maxItem %} {% endif %}

{% endif %} {% endif %}{% endfor %}

{% endfor %} {% assign numberOfProductPerRow = widgetDesignSettings.numberOfProductPerRow %} {% assign numberOfRecommendProduct = widgetDesignSettings.numberOfRecommendProduct %} {% if numberOfRecommendProduct < numberOfProductPerRow %} {% assign sliderPages = 1 %} {% assign disable = "disabled" %} {% else %} {% assign sliderPages = numberOfRecommendProduct | divided_by: numberOfProductPerRow | ceil %} {% assign disable = "" %} {% endif %}

{% else %} {% assign bundleStyle = widgetDesignSettings.bundleStyle %}

{% for product in products %}

{% if product.checked %} {% endif %}

{% if product.images_info[0] %} {{ product.title | escape }}

{% else %} {{ product.title | escape }}

{% endif %}

{% if product.checked %} {% endif %} {% if bundleStyle == 'style2' %}

{% if forloop.index0 == 0 %} This item: {{ product.title | escape }} {% elsif product.checked %} {{ product.title | escape }} {% else %} {{ product.title | escape }} {% endif %}

{%- if product.selectedOption.title != 'Default Title' -%} {% endif %}

{% endif %}

{% unless forloop.last %}

{% endunless %} {% endfor %}

{% if bundleStyle == 'style1' %} {% for product in products %}

{% if forloop.index0 == 0 %} This item: {{ product.title | escape }} {% elsif product.checked %} {{ product.title | escape }} {% else %} {{ product.title | escape }} {% endif %}

{%- if product.selectedOption.title != 'Default Title' -%} {% endif %} {{ product.selectedOption.price }}

{% endfor %} {% endif %}

{% if hasSelectedProduct == true %}

Total price: {{ totalPrice }}

{% endif %}

CONNECT PRO Case

CONNECT PRO BaseStation

CONNECT PRO WallStation

CONNECT PRO VESA Station

CONNECT Case

CONNECT Dock

CONNECT MultiDock

CONNECT Case

CONNECT WedgeMount

CONNECT VESA Mount

CONNECT MOUNT Pillar

LUXE SURFACE MOUNT

SURFACE MOUNT System

CONNECT PHONE Case

CONNECT PHONE Rugged Case

CONNECT PHONE Dock

CONNECT PHONE MultiDock

CONNECT PRO Case

CONNECT PRO BaseStation

CONNECT PRO WallStation

CONNECT PRO VESA Station

CONNECT Case

CONNECT Dock

CONNECT MultiDock

CONNECT Case

CONNECT WedgeMount

CONNECT VESA Mount

CONNECT MOUNT Pillar

LUXE SURFACE MOUNT

SURFACE MOUNT System

CONNECT PHONE Case

CONNECT PHONE Rugged Case

CONNECT PHONE Dock

CONNECT PHONE MultiDock

Proof of Concept Generator

Your Cart

Cart is empty