Guest User

compare.html

a guest
Aug 13th, 2020
12
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. {strip}
  2. <div class="compare-pg" id="compare">
  3.     <div class="compare-pg__sticky-header">
  4.         <div class="compare-pg__header">
  5.             <div class="layout-center">
  6.                 <div class="compare-pg__title-wrapper">
  7.                     <div class="compare-pg__title">
  8.                         <h1 class="pg-heading">[`Compare products`]</h1>
  9.                         <button class="close-x default-btn mobile-only" id="compare-clear-mobile">
  10.                             <svg class="icon cent-icon" width="8" height="8">
  11.                                 <use xlink:href="#arrow-x"></use>
  12.                             </svg>
  13.                         </button>
  14.                     </div>
  15.                     {if count($products)}
  16.                         <div class="compare-pg__slider-arrows">
  17.                             <button class="slider-ar slider-ar_square pos-rel default-btn">
  18.                                 <svg class="icon cent-icon" width="7" height="11">
  19.                                     <use xlink:href="#arrow-left-small"></use>
  20.                                 </svg>
  21.                             </button>
  22.                             <button class="slider-ar slider-ar_square pos-rel default-btn">
  23.                                 <svg class="icon cent-icon" width="7" height="11">
  24.                                     <use xlink:href="#arrow-right-small"></use>
  25.                                 </svg>
  26.                             </button>
  27.                         </div>
  28.                     {/if}
  29.                 </div>
  30.             </div>
  31.             <div class="compare-row">
  32.                 <div class="compare-row__inner">
  33.                     {if count($products)}
  34.                         <div class="col-side">
  35.                             <div class="compare-pg__header-side compare-slide-header">
  36.                                 <div class="compare-pg__options mb20">
  37.                                     <label class="custom-radio" id="compare-all"><input type="radio" name="compare" value="0" checked>[`All features`]</label>
  38.                                     <label class="custom-radio" id="compare-diff"><input type="radio" name="compare" value="1">[`Different`]</label>
  39.                                 </div>
  40.                                 <a class="compare-pg__clear-list tabdeskonly" href="#" id="compare-clear">
  41.                                     <span class="close-x default-btn">
  42.                                         <svg class="icon cent-icon" width="8" height="8">
  43.                                             <use xlink:href="#arrow-x"></use>
  44.                                         </svg>
  45.                                     </span>
  46.                                     <span>[`Clear comparison list`]</span>
  47.                                 </a>
  48.                             </div>
  49.                         </div>
  50.                         <div class="col-content">
  51.                             <div class="compare-pg__items-slider compare-pg__items-slider_js swiper-container compare-slide-header">
  52.                                 <div class="swiper-wrapper">
  53.                                     {foreach $products as $p}
  54.                                         {$available = $wa->shop->settings('ignore_stock_count') || $p.count === null || $p.count > 0}
  55.                                         {$pre_order_only = $wa->shop->settings('ignore_stock_count') && $p.count !== null && $p.count <= 0}
  56.                                         <div class="compare-pg__slider-item swiper-slide compare-item-{$p.id}">
  57.                                             <div class="item-c item-c_1 item-c_bd item-c_remove item-c_equal item-c_equal_2 has-1-click-btn_false">
  58.                                                 <form class="addtocart" {if $p.sku_count > 1}data-url="{$p.frontend_url}{if strpos($p.frontend_url, '?')}&{else}?{/if}cart=1"{/if} method="post" action="{$wa->getUrl('shop/frontendCart/add')}">
  59.                                                     <button class="close-x default-btn compare-item__remove" title="[`Remove from comparison list`]" data-product="{$p.id}" type="button">
  60.                                                         <svg class="icon cent-icon" width="8" height="8">
  61.                                                             <use xlink:href="#arrow-x"></use>
  62.                                                         </svg>
  63.                                                         <span class="visually-hidden">[`Remove from comparison list`]</span>
  64.                                                     </button>
  65.                                                     <div class="item-c__inner">
  66.                                                         <a class="item-c__image-wrapper item-c__image-wrapper_remove" href="{$p.frontend_url}">
  67.                                                             {$wa->shop->productImgHtml($p, '200', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_parent_theme_url`img/dummy200.png"])}
  68.                                                         </a>
  69.                                                         <a class="item-c__title" href="{$p.frontend_url}">{$p.name}</a>
  70.                                                         {if $theme_settings.products_show_reviews}
  71.                                                             {$_rating = round($p.rating)}
  72.                                                             <div class="item-rating item-c__rating">
  73.                                                                 <div class="item-rating__stars">
  74.                                                                     <div class="stars stars_m">
  75.                                                                         <div class="stars__list">
  76.                                                                             {for $i=1 to 5}
  77.                                                                                 <div class="stars__i{if $i <= $_rating} stars__i_checked{/if}">
  78.                                                                                     <svg class="icon" width="16" height="15">
  79.                                                                                         <use xlink:href="#icon-star"></use>
  80.                                                                                     </svg>
  81.                                                                                 </div>
  82.                                                                             {/for}
  83.                                                                         </div>
  84.                                                                     </div>
  85.                                                                 </div>
  86.                                                                 <div class="item-rating__revs">
  87.                                                                     <svg class="icon" width="15" height="14">
  88.                                                                         <use xlink:href="#icon-bubble"></use>
  89.                                                                     </svg>
  90.                                                                     <a class="grey" href="{$p.frontend_url}reviews/">{$p.rating_count}</a>
  91.                                                                 </div>
  92.                                                             </div>
  93.                                                         {/if}
  94.                                                         <div class="item-c__price">
  95.                                                             <div class="price-wrapper">
  96.                                                                 <div class="price-wrapper__main">
  97.                                                                     <div class="price">{shop_currency_html($p.price)}</div>
  98.                                                                 </div>
  99.                                                             </div>
  100.                                                         </div>
  101.                                                         <div class="item-c__actions-wrapper">
  102.                                                             <div class="item-c__top">
  103.                                                                 <button class="item-c__btn btn {$theme_settings.main_buttons_style|replace:'img/themebuttons/':''|replace:'.gif':''} btn_main-2 btn_text" type="submit">
  104.                                                                     <span>[`Add to cart`]</span>
  105.                                                                     <i class="hover-anim"></i>
  106.                                                                 </button>
  107.                                                             </div>
  108.                                                         </div>
  109.                                                     </div>
  110.                                                     <input type="hidden" name="product_id" value="{$p.id}">
  111.                                                 </form>
  112.                                             </div>
  113.                                         </div>
  114.                                     {/foreach}
  115.                                 </div>
  116.                             </div>
  117.                         </div>
  118.                     {else}
  119.                         <p>[`Product comparison list is empty.`]</p>
  120.                     {/if}
  121.                 </div>
  122.             </div>
  123.         </div>
  124.     </div>
  125.     {if count($products)}
  126.         <div class="compare-pg__body">
  127.             <div class="compare-row">
  128.                 <div class="compare-row__inner" id="compare-table">
  129.                     <div class="col-side">
  130.                         <ul class="compare-pg__char-prop-list compare-char-list list-reset">
  131.                             {foreach $features as $f_id=>$f}
  132.                                 {if $f.type eq "divider"}{continue}{/if}
  133.                                 <li class="compare-pg__char-prop bold char-row{if $f.same} same{/if}">{$f.name}</li>
  134.                             {/foreach}
  135.                         </ul>
  136.                     </div>
  137.                     <div class="col-content">
  138.                         <div class="compare-pg__chars-slider compare-pg__chars-slider_js swiper-container">
  139.                             <div class="swiper-wrapper">
  140.                                 {foreach $products as $p}
  141.                                     <div class="compare-pg__slider-item swiper-slide compare-item-{$p.id}">
  142.                                         <ul class="compare-pg__char-value-list compare-char-list list-reset">
  143.                                             {foreach $features as $f_id=>$f}
  144.                                                 {if $f.type eq "divider"}{continue}{/if}
  145.                                                 <li class="compare-pg__char-value char-row{if $f.same} same{/if}">
  146.                                                     {if isset($p.features[$f_id])}
  147.                                                         <span>
  148.                                                             {if is_array($p.features[$f_id])}
  149.                                                                 {implode('<br> ', $p.features[$f_id])}
  150.                                                             {else}
  151.                                                                 {$p.features[$f_id]}
  152.                                                             {/if}
  153.                                                         </span>
  154.                                                     {else}
  155.                                                         <span>&mdash;</span>
  156.                                                     {/if}
  157.                                                 </li>
  158.                                             {/foreach}
  159.                                         </ul>
  160.                                     </div>
  161.                                 {/foreach}
  162.                             </div>
  163.                         </div>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.         {literal}
  169.         <script>
  170.             ( function($) {
  171.  
  172.                 var $filter = $(".s-compare-filter"),
  173.                     $table = $("#compare-table"),
  174.                     $someFiels = $table.find(".same");
  175.  
  176.                 $("#compare-all").on("click", function () {
  177.                     showSomeFields( $(this), true);
  178.                 });
  179.  
  180.                 $("#compare-diff").on("click", function () {
  181.                     showSomeFields( $(this), false);
  182.                 });
  183.  
  184.                 $("#compare-clear, #compare-clear-mobile").on("click", function (e) {
  185.                     e.preventDefault();
  186.                     clearCompare();
  187.                 });
  188.  
  189.                 $(".compare-item__remove").on("click", function () {
  190.                     compareRemove( $(this).data("product") );
  191.                 });
  192.  
  193.                 function showSomeFields( $button, show ) {
  194.                     if (show) {
  195.                         $someFiels.show();
  196.                     } else {
  197.                         $someFiels.hide();
  198.                     }
  199.                 }
  200.  
  201.                 function clearCompare() {
  202.                     $.cookie('shop_compare', null, {path: '/'});
  203.                     location.href = location.href.replace(/compare\/.*/, 'compare/');
  204.                     $(".js-compare-count").html("0");
  205.                 }
  206.  
  207.                 function compareRemove( product_id ) {
  208.                     var compare = $.cookie('shop_compare');
  209.                     if (compare) {
  210.                         compare = compare.split(',');
  211.                     } else {
  212.                         compare = [];
  213.                     }
  214.  
  215.                     var i = $.inArray(product_id + "", compare);
  216.                     if (i != -1) {
  217.                         compare.splice(i, 1);
  218.                     }
  219.  
  220.                     if (compare.length) {
  221.                         $.cookie('shop_compare', compare.join(','), { expires: 30, path: '/'});
  222.                         $(".compare-item-"+product_id).remove();
  223.                         $(".js-compare-count").html(compare.length);
  224.                     } else {
  225.                         $.cookie('shop_compare', null, {path: '/'});
  226.                         $(".js-compare-count").html("0");
  227.                         location.href = location.href.replace(/compare\/.*/, 'compare/');
  228.                     }
  229.                 }
  230.  
  231.             })(jQuery);
  232.         </script>
  233.         {/literal}
  234.     {/if}
  235. </div>
  236. {$wa->title("[`Compare products`]")}
  237. {/strip}
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×