API tools faq
paste
Advertisement
Guest User

compare.html

a guest
Aug 13th, 2020
39
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.81 KB | None | 0 0
raw download clone embed print report
  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}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!