src/Bidcoz/Bundle/FrontendBundle/Resources/views/Auction/item.html.twig line 1

Open in your IDE?
  1. {% extends '@BidcozFrontend/campaign.html.twig' %}
  3. {% set biddable = item is biddable %}
  5. {% block title %}
  6. {% apply spaceless %}
  7.     {{ item.name }} - {{ campaign.name }}
  8. {% endapply %}
  9. {% endblock %}
  11. {% block beforeAlerts %}
  12. {% apply spaceless %}
  13.     {% if ccRequiredWarning is defined and ccRequiredWarning %}
  14.         <div class="alert alert-danger">
  15.             <div class="message flex-grow-1">
  16.                 Credit card required to participate! <a class="btn btn-info" href="#" data-toggle="modal" data-target="#ccModal">Add Credit Card</a>
  17.             </div>
  18.             <a href="#" class="close">
  19.                 {% include '@BidcozCore/Components/icon.html.twig' with { icon: 'close', class: 'icon-sm' } %}
  20.             </a>
  21.         </div>
  22.     {% endif %}
  23. {% endapply %}
  24. {% endblock %}
  26. {% block toast %}
  27. {% apply spaceless %}
  28.     <div class="bidder-notifications">
  29.         {% if item is biddable %}
  30.             <div id="bid-alert-refresh" class="alert alert-warning d-none" role="alert">
  31.                 <div class="message flex-grow-1">
  32.                     Warning, you've been on the page for 20 seconds, please <a href="javascript:history.go(0);" style="color:#fff !important; text-decoration: underline !important;">refresh</a> to see the latest information
  33.                 </div>
  34.                 <a href="#" class="close">
  35.                     {% include '@BidcozCore/Components/icon.html.twig' with { icon: 'close', class: 'icon-sm' } %}
  36.                 </a>
  37.             </div>
  38.         {% endif %}
  39.     </div>
  41.     <div class="toast-container">
  42.         {% include '@BidcozCore/Layout/Blocks/alerts.html.twig' %}
  43.         {% set hasUserBid = is_logged_in() and item is biddable and item.hasUserBid(app.user) %}
  44.         {% if hasUserBid %}
  45.             {% set currentWinningBidder = is_logged_in() and item is biddable and item.winningBid and item.winningBid.user == app.user %}
  46.             {% if currentWinningBidder %}
  47.                 <div class="alert alert-success d-flex" role="alert">
  48.                     <div class="message flex-grow-1">
  49.                         {% if item.winningBid %}
  50.                             You have the high bid at {{ item.winningBid.amount|money }}!
  51.                         {% else %}
  52.                             You have the high bid!
  53.                         {% endif %}
  54.                     </div>
  55.                     <a href="#" class="close">
  56.                         {% include '@BidcozCore/Components/icon.html.twig' with { icon: 'close', class: 'icon-sm' } %}
  57.                     </a>
  58.                 </div>
  59.             {% else %}
  60.                 <div class="alert alert-danger d-flex" role="alert">
  61.                     <div class="message flex-grow-1">
  62.                         {% if item.winningBid %}
  63.                             You have been outbid. Place a bid of {{ (item.winningBid.amount + item.bidIncrement)|money }} or higher!
  64.                         {% else %}
  65.                             You have been outbid.
  66.                         {% endif %}
  67.                     </div>
  68.                     <a href="#" class="close">
  69.                         {% include '@BidcozCore/Components/icon.html.twig' with { icon: 'close', class: 'icon-sm' } %}
  70.                     </a>
  71.                 </div>
  72.             {% endif %}
  73.         {% endif %}
  74.     </div>
  75. {% endapply %}
  76. {% endblock %}
  78. {% block beforeContent %}
  79.     <div class="breadcrumbs item-page-breadcrumbs">
  80.         <a href="{{ path(type == 'shop'? 'shop_catalog' : (type == 'fund-a-need'? 'fund_a_need_catalog' : 'auction_catalog'), campaignParams) }}" class="d-flex align-items-center">
  81.             {% include '@BidcozCore/Components/icon.html.twig' with { icon: 'arrow-left', class: 'icon-md' } %}
  82.             Back to Catalog
  83.         </a>
  84.     </div>
  85. {% endblock %}
  87. {% block content %}
  88.     <div class="item-details-row row">
  89.         <div class="item-details-left col-lg-8">
  90.             <div class="panel h-100">
  91.                 <div class="panel-body">
  92.                     <div class="row">
  93.                         <div class="item-gallery-column col-md-6">
  94.                             {% include '@BidcozFrontend/Auction/_item_photo_box.html.twig' %}
  95.                         </div>
  97.                         <div class="item-info-column col-md-6">
  98.                             {% include '@BidcozFrontend/Auction/_item_basic_info.html.twig' %}
  99.                         </div>
  100.                     </div>
  102.                     {% if item.hasPackagedItems %}
  103.                         <div class="packaged-items mb-n4">
  104.                             <h6 class="mt-5 mb-4">The following items are included in the package:</h6>
  105.                             <ul class="auction-items row list-view">
  106.                                 {% for packagedItem in item.packagedItems %}
  107.                                     {% set pId = 'package' ~ packagedItem.id %}
  108.                                     <li class="auction-item w-100">
  109.                                         {% include '@BidcozFrontend/Auction/Item/_item_list.html.twig' with { item: packagedItem, isPackagedItem: true } %}
  110.                                     </li>
  111.                                 {% endfor %}
  112.                             </ul>
  113.                         </div>
  114.                     {% endif %}
  115.                 </div>
  116.             </div>
  117.         </div>
  118.         <div class="item-details-right col-lg-4">
  119.             <div class="panel h-100">
  120.                 <div class="panel-body">
  121.                     <h6 class="no-margin-top">Item Description</h6>
  123.                     <div class="tabs-container">
  124.                         <ul class="tabs">
  125.                             <li class="tab active">Item Details</li>
  126.                             {% if biddable %}
  127.                                 <li class="tab">Bidding Activity</li>
  128.                             {% elseif item.saleType.id == 'fixed-price' and item.showPurchasers %}
  129.                                 <li class="tab">Purchasers</li>
  130.                             {% endif %}
  131.                         </ul>
  132.                         <div class="tabs-content">
  133.                             <div class="tab-content active">
  134.                                 {% include '@BidcozFrontend/Auction/_item_details.html.twig' %}
  135.                                 <div class="caption">{{ item.description|raw }}</div>
  136.                                 <div class="share-buttons">
  137.                                     <div class="share-title">
  138.                                         <strong>Share With Friends</strong>
  139.                                     </div>
  140.                                     <!-- AddToAny BEGIN -->
  141.                                     <div class="a2a_kit a2a_kit_size_32 a2a_default_style"
  142.                                          data-a2a-title="Check out what’s new at {{ item.name }}!">
  143.                                         <a class="a2a_button_facebook"></a>
  144.                                         <a class="a2a_button_pinterest"></a>
  145.                                         <a class="a2a_button_x"></a>
  146.                                         <a class="a2a_button_linkedin"></a>
  147.                                         <a class="a2a_button_sms"></a>
  148.                                         <a class="a2a_button_facebook_messenger"></a>
  149.                                         <a class="a2a_button_email"></a>
  150.                                         <a class="a2a_button_google_gmail"></a>
  151.                                         <a class="a2a_button_copy_link"></a>
  152.                                         <a class="a2a_button_print"></a>
  153.                                         <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
  154.                                     </div>
  155.                                     <!-- AddToAny END -->
  156.                                 </div>
  157.                             </div>
  158.                             {% if biddable %}
  159.                                 <div class="tab-content">
  160.                                     {% include '@BidcozFrontend/Auction/_bid_activity.html.twig' %}
  161.                                 </div>
  162.                             {% elseif item.saleType.id == 'fixed-price' and item.showPurchasers %}
  163.                                 <div class="tab-content">
  164.                                     {% include '@BidcozFrontend/Auction/_purchase_activity.html.twig' %}
  165.                                 </div>
  166.                             {% endif %}
  167.                         </div>
  168.                     </div>
  169.                 </div>
  170.             </div>
  171.         </div>
  172.     </div>
  174.     {% if auctionItems is defined %}
  175.         <div class="panel carousel-items">
  176.             <div class="panel-body">
  177.                 <h6 class="mt-n3 pt-2 mb-4">More Items</h6>
  178.                 <div class="auction-items slick-carousel row grid-view">
  179.                     {% for auctionItem in auctionItems %}
  180.                         {% if item.id != auctionItem[0].id %}
  181.                             <div class="auction-item">
  182.                                 {% include '@BidcozFrontend/Auction/Item/_item_list.html.twig' with { item: auctionItem[0], itemBidCount: auctionItem["bidCount"] } %}
  183.                             </div>
  184.                         {% endif %}
  185.                     {% endfor %}
  186.                 </div>
  187.             </div>
  188.         </div>
  189.     {% endif %}
  191.     {% if is_logged_in() %}
  192.         {% if (ccRequiredWarning is defined and ccRequiredWarning) or requireCC %}
  193.             {% include '_credit_card_modal.html.twig' with {formUrl: path('user_update_cc', {orgSlug: organization.slug, campaignSlug: campaign.slug})} %}
  194.         {% endif %}
  195.     {% endif %}
  197.     {% if internalUsers is defined and internalUsers %}
  198.         {% include '@BidcozFrontend/Auction/Item/_internal_user_modal.html.twig' %}
  199.     {% endif %}
  200. {% endblock %}
  202. {% block donor %}
  203.     {% include '@BidcozFrontend/Auction/Item/_donor.html.twig' %}
  204. {% endblock %}
  206. {% block stylesheets %}
  207.     {{ parent() }}
  208.     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  209.     <link rel="stylesheet" href="/components/bootstrap-sweetalert/dist/sweetalert.css" />
  210. {% endblock %}
  212. {% block javascripts %}
  213.     {{ parent() }}
  214.     <script src="/components/bootstrap-sweetalert/dist/sweetalert.min.js" type="text/javascript"></script>
  216.     {% if is_logged_in() %}
  217.         {% if (ccRequiredWarning is defined and ccRequiredWarning) or requireCC %}
  218.             {%  include '_credit_card_js.html.twig' %}
  219.             <script type="text/javascript">initCard();</script>
  220.         {% endif %}
  221.     {% endif %}
  222.     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  223.     <script type="text/javascript">
  224.         $(document).ready(function() {
  225.             $('.slick-carousel').slick({
  226.                 arrows: true,
  227.                 infinite: true,
  228.                 prevArrow: '<div class="slick-prev"><i class="fas fa-arrow-left"></i></div>',
  229.                 nextArrow: '<div class="slick-next"><i class="fas fa-arrow-right"></i></div>',
  230.                 slidesToShow: 4,
  231.                 slidesToScroll: 4,
  232.                 responsive: [
  233.                     {
  234.                         breakpoint: 1024,
  235.                         settings: {
  236.                             slidesToShow: 3,
  237.                             slidesToScroll: 3
  238.                         }
  239.                     },
  240.                     {
  241.                         breakpoint: 600,
  242.                         settings: {
  243.                             slidesToShow: 2,
  244.                             slidesToScroll: 2
  245.                         }
  246.                     },
  247.                     {
  248.                         breakpoint: 480,
  249.                         settings: {
  250.                             slidesToShow: 1,
  251.                             slidesToScroll: 1
  252.                         }
  253.                     }
  254.                 ]
  255.             });
  257.             $('#internalUserModal').on('click', '.add-internal-email', function() {
  258.                 var email = $(this).data('email');
  259.                 var input = $('#item_buy_emails');
  260.                 var currentEmails = input.val();
  261.                 if (currentEmails) {
  262.                     input.val(currentEmails + ', ' + email);
  263.                 } else {
  264.                     input.val(email);
  265.                 }
  266.                 $(this).attr('disabled', 'disabled').text('Added');
  267.             });
  268.         });
  269.     </script>
  270. {% endblock %}