app/template/aneros2023/Category/progasm-products.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% block javascript %}
  14.     <script>
  16.     </script>
  17. {% endblock %}
  19. {% block main %}
  20. {% include('@CustomerReview42/Block/customer_review4_recommend_css.twig') %}
  22. <!-- ページ固有のスタイル -->
  23. <style>
  24.     .std img {
  25.     max-width: 100%;
  26.     }
  28.     p.description {
  29.     font-size: 18px;
  30.     line-height: 1.5em;
  31.         color: #fff;
  32.         letter-spacing: -1px;
  33.     }
  35.     a.more-link {
  36.     font-size: 20px;
  37.     color: #0886fb;
  38.     white-space: nowrap;
  39.     }
  41.     .grey-products-icons.flexbox {
  42.         justify-content: center;
  43.         flex-wrap: wrap;
  44.     }
  46.     .grey-products-icons .product-item {
  47.         width: 90px;
  48.     margin: 5px 10px;
  49.         padding: 0;
  50.         opacity: 1;
  51.     }
  53.     #category-featured-products .page-intro h1 {
  54.     font-size: 60px;
  55.     color: #5c5c5c;
  56.         margin-bottom: 0;
  57.     }
  59.     #category-featured-products .page-intro h1 sup {
  60.         vertical-align: baseline;
  61.     margin-top: 0;
  62.         font-size: 27%;
  63.     display: inline-block;
  64.     }
  66.     #category-featured-products h2 sup {
  67.         font-size: 25%;
  68.         top: -3.5em;
  69.         line-height: 0;
  70.     position: relative;
  71.     vertical-align: baseline;
  72.     }
  74.     #category-featured-products .classic-product-contr .product-info {
  75.     width: 510px;
  76.     padding: 60px 0px 30px 0;
  77.         margin: 0 0 0 auto;
  78.     }
  80.     #category-featured-products .classic-product-contr .product-img {
  81.         width: 590px;
  82.         padding-top:20px;
  83.         margin-right: auto;
  84.         text-align: center;
  85.     }
  87.     #category-featured-products .classic-product-contr .product-img img {
  88.         margin-right: auto;
  89.         margin-left: auto;
  90.         width:590px;
  91.         max-width:100%;
  92.     }
  94.     #category-featured-products .classic-product-contr .btn-cart {
  95.         margin-left: auto;
  96.         margin-right: auto;
  97.         min-width: 240px;
  98.     }
  100.     #category-featured-products .classic-product-contr h2 {
  101.     font-size: 56px;
  102.     font-weight: 400;
  103.     color: #ff0000;
  104.     margin-bottom: 15px;
  105.     }
  107.     #category-featured-products .classic-product-contr h2 span {
  108.     display: block;
  109.     font-size: 26px;
  110.     color: #fff;
  111.     letter-spacing: 0.5em;
  112.     }
  114.     #category-featured-products .classic-product-contr .description {
  115.     margin-bottom: 10px;
  116.     width: 400px;
  117.     }
  119.     #category-featured-products .classic-product-contr .product-info .flexbox {
  120.         justify-content: center;
  121.         flex-wrap: wrap;
  122.     }
  124.     .product-container {
  125.         justify-content: center;
  126.     }
  128.     .page-intro.flexbox,
  129.     #progasm-ice .container.flexbox {
  130.         flex-direction: row-reverse;
  131.     }
  133.     .page-intro .product-info {
  134.         margin: auto 70px auto 40px;
  135.     }
  136.     
  137.     .page-intro .product-info h1 img {
  138.         width: 100%;
  139.         max-width:300px;
  140.         padding-bottom:15px;
  141.     }
  143.     #category-featured-products #progasm-classic {
  144.         background-image: url({{ asset('aneros/img/products/Progasm-Anniversary/progasm-classic-bg.jpg') }});
  145.         background-position: center;
  146.         background-repeat: no-repeat;
  147.         background-size: cover;
  148.     }
  150.     #category-featured-products #progasm-classic .product-info {
  151.         margin: auto 0;
  152.     }
  154.     #category-featured-products #progasm-classic .product-img {
  155.         width: auto;
  156.     }
  157.     
  158.     #category-featured-products #progasm-header .product-img img {
  159.         max-width:379px;
  160.     }
  161.     
  162.     #category-featured-products #progasm-ice {
  163.         background-image: url({{ asset('aneros/img/products/Progasm-Anniversary/progasm-ice-bg.jpg') }});
  164.         background-position: center;
  165.         background-repeat: no-repeat;
  166.         background-size: cover;
  167.     }
  168.     
  169.     #category-featured-products #progasm-black-ice {
  170.         background-image: url({{ asset('aneros/img/products/Progasm-Anniversary/progasm-black-ice-bg.jpg') }});
  171.         background-position: center;
  172.         background-repeat: no-repeat;
  173.         background-size: cover;
  174.     }
  176.     #category-featured-products #progasm-ice .product-info {
  177.         margin: auto 0;
  178.     }
  180.     #category-featured-products #progasm-ice .product-img {
  181.         width: auto;
  182.     }
  184.     #category-featured-products .container {
  185.         padding: 30px 0;
  186.     }
  187.     
  188.     .progasm-swooth {
  189.         background: #272727 url({{ asset('aneros/img/category/progasm-products/progasm-swooth-black.png') }}) center top no-repeat;
  190.         padding: 40px 0;
  191.         background-size: cover;
  192.         -moz-background-size: cover;
  193.         -webkit-background-size: cover;
  194.         box-sizing: content-box;
  195.         -moz-box-sizing: content-box;
  196.         -webkit-box-sizing: content-box;
  197.     }
  199.     @media only screen and (max-width: 999px) {
  200.         .page-intro.flexbox{
  201.             margin: 0 auto;
  202.             flex-direction: column;
  203.         }
  205.         #category-featured-products .classic-product-contr .product-container.flexbox, .page-intro.flexbox, #progasm-ice .container.flexbox {
  206.             flex-direction: column;
  207.         }
  208.     
  209.         #category-featured-products .page-intro .product-info,
  210.         #category-featured-products .classic-product-contr .product-info {
  211.             width: auto;
  212.             padding: 0;
  213.             margin: 0 auto;
  214.             max-width: 600px;
  215.         }
  217.         #category-featured-products .classic-product-contr .description {
  218.             padding: 0;
  219.             width: auto;
  220.         }
  221.   
  222.         #category-featured-products .classic-product-contr .product-img {
  223.             margin: 0 auto;
  224.             text-align: center;
  225.         }
  227.         #category-featured-products .classic-product-contr h2 {
  228.             font-size: 46px;
  229.         font-weight: 400;
  230.         }
  232.         #category-featured-products .page-intro .product-img img {
  233.             margin: 20px auto 0;
  234.         }
  236.         #category-featured-products #progasm-classic .product-img,
  237.         #category-featured-products #progasm-ice .product-img {
  238.             position: static;
  239.         }
  241.         #progasm-black-ice .container.flexbox {
  242.             flex-direction: column;
  243.         }
  245.         #category-featured-products .container {
  246.             max-width: 600px;
  247.         }
  250.     }
  252.     @media only screen and (max-width: 767px) {
  253.         #category-featured-products .page-intro h1 {
  254.         font-size: 50px;
  255.         }
  257.         #category-featured-products .page-intro p {
  258.             font-size: 18px;
  259.         }
  261.         .page-intro,
  262.         #category-featured-products .classic-product-contr .product-info,
  263.         #category-featured-products .classic-product-contr .product-img {
  264.             max-width: 300px;
  265.         }
  267.         #category-featured-products #progasm-classic .product-info,
  268.         #category-featured-products #progasm-ice .product-info {
  269.             margin: 0 auto;
  270.         }
  271.         #category-featured-products #progasm-header .product-img img {
  272.         width:100%;
  273.         }
  275.     }
  277. </style>
  279. <div class="main-container" id="trident-series-page">
  280.     <div class="breadcrumbs">
  281.         <div class="container">
  282.             <ul itemscope="" itemtype="http://schema.org/BreadcrumbList">
  283.                 <li class="home" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
  284.                     <a itemprop="item" href="{{ url('homepage') }}" title="トップページ"><span itemprop="name" style="padding:0">トップページ</span></a>
  285.                     <meta itemprop="position" content="1">
  286.                     <span>&gt;</span>
  287.                 </li>
  288.                 <li>
  289.                     <strong>プロガスムシリーズ</strong>
  290.                 </li>
  291.             </ul>
  292.         </div>
  293.     </div>
  295.     <div class="col-main" id="category-featured-products">
  296.         <div id="progasm-products-wrapper">
  298.             <div class="container">
  299.                 <div class="page-intro flexbox" id="progasm-header">
  300.                     <div class="product-info">
  301.                         <h1><img class="progasm-anniversary-logo" src="{{ asset('aneros/img/category/progasm-products/progasm-anniversary-logo-long.jpg') }}" alt="アニバーサリーモデル ２０周年" /></h1>
  302.                         <p class="description" style="color:#000" >究極のドライオーガズムとは何かをとことん追求する米国企業、アネロス社。そのアネロスブランド誕生20周年を記念し、アニバーサリーモデルとして「プロガスム」3種をリリースいたします。</p>
  303.                         <p class="description" style="color:#000" >旧プロガスムをより洗練させたアニバーサリーモデルの名に恥じない素晴らしいアネロスに仕上がっています。</p>
  304.                     </div>
  305.                     <div class="product-img">
  306.                         <img src="{{ asset('aneros/img/category/progasm-products/progasm-anniversary-box.jpg') }}" class="animate" alt="プロガスムシリーズ"
  307.                         data-animate="zoomIn" data-duration="1.0s" data-delay="0.6s">
  308.                     </div>
  309.                 </div>
  310.             </div>
  312.             <div class="classic-product-contr" id="progasm-black-ice">
  313.                 <div class="container flexbox">
  314.                     <div class="product-info">
  315.                         <h2>プロガスム<sup>®</sup>
  316.                             <span>ブラックアイス</span>
  317.                         </h2>
  318.                         <p class="description"><b>漆黒が奏でる、美しいプレジャー</b><br><br>素材に用いられた米国FDAの材質承認を得ている医療用非多孔性プラスチックが、まるでブラックダイヤモンドのような輝きを放つ「プロガスムブラックアイス」。ハードで力強い印象の通り、太くて男らしいシャフトから放たれる圧倒的な刺激と快楽は、まさにドライオーガズムに達することができない方への救世主的な存在と言っても過言ではないでしょう。 </p>
  319.                         <a href="{{ url('product_detail', {'id': 81}) }}" class="more-link">詳細をみる &gt;</a>
  320.                     </div>
  321.                     <div class="product-img">
  322.                         <img src="{{ asset('aneros/img/category/progasm-products/progasm-black-ice-tilted.png') }}" class="animate" alt="プロガスムブラックアイス"
  323.                         data-animate="fadeIn" data-duration="1.0s" data-delay="1.0s">
  324.                         {% set Product = repository('Eccube\\Entity\\Product').find(81) %}
  325.                         
  326.                             <!-- REVIEW AREA -->
  327.                             {% import('@CustomerReview42/Block/customer_review4_recommend_macro.twig') as recommend_macro %}
  329.                             {% set review_list = repository('Plugin\\CustomerReview42\\Entity\\CustomerReviewTotal').getRecommend(Product.id) %}
  330.                             {% set reviewer_total = 0 %}
  331.                             {% set review_total_point = 0 %}
  332.                             {% set count = 5 %}
  333.                             {% for i in review_list %}
  334.                                 {% set reviewer_total = reviewer_total + i %}
  335.                                 {% set review_total_point = review_total_point + i * count %}
  336.                                 {% set count = count - 1 %}
  337.                             {% endfor %}
  338.                             {% set review_point = reviewer_total == 0 ? 0  : (review_total_point / reviewer_total) %}
  339.                             
  340.                             {% if 0 < reviewer_total %}
  341.                                 <div id="plg_customer_review_special{{Product.id}}" class="review-layoutRole">
  342.                                     <h3 class="review_score" data-id="{{ Product.id }}" data-avg="{{ review_point }}" data-num="{{ reviewer_total }}" data-starsize="22" data-mstarsize="14" data-imgbase="{{ asset('aneros/img/products/') }}">
  343.                                         <span class="review_all_score_title"></span>
  344.                                         <span class="review_all_score_image" style="display: inline-block"></span>
  345.                                         <span class="review_all_score"><a href="{{ url('product_detail', {'id': Product.id}) }}#review_area"></a></span>
  346.                                     </h3>
  347.                                 </div>
  348.                             {% endif %}
  349.                             
  350.                             <script>
  351.                               $(function () {
  352.                                 if ( $('#plg_customer_review_special_anchor{{Product.id}}').length) {
  353.                                     $('#plg_customer_review_special{{Product.id}}').insertAfter($('#plg_customer_review_special_anchor{{Product.id}}'));
  354.                                 } else if ( $('#button{{ Product.id }}').length) {
  355.                                     $('#plg_customer_review_special{{Product.id}}').insertBefore($('#button{{ Product.id }}'));
  356.                                 } else {
  357.                                     $('#plg_customer_review_special{{Product.id}}').hide();
  358.                                 }
  359.                               });
  360.                             </script>
  361.                             <!-- REVIEW AREA END -->
  362.                         
  363.                         {% if Product.stock_find %}
  364.                             <button type="button" title="Add to Cart" class="button btn-cart one-click-add-cart" 
  365.                             data-action="{{ url('product_add_cart', {id:Product.id}) }}" 
  366.                             data-product_id="{{ Product.id }}" data-product_name="{{ Product.name }}"  data-product_img="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}"
  367.                             data-product_class="{{ Product.ProductClasses[0].id }}" 
  368.                             data-token="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" id="button{{ Product.id }}">
  369.                                     <span>カゴに入れる - {{ Product.getPrice02IncTaxMin|price }}<span class="inctax"> (税込)</span></span>
  370.                             </button>
  371.                         {% else %}
  372.                             {% set arrivemail = true %}
  373.                             {% for ProductTag in Product.ProductTag %}
  374.                                 {% if ProductTag.Tag.id == 99 %}
  375.                                     {% set arrivemail = false %}
  376.                                 {% endif %}
  377.                             {% endfor %}
  378.                             
  379.                             {% if arrivemail %}
  380.                                 <button type="button" data-productid="{{ Product.id }}" data-productname="{{ Product.name }}" title="入荷お知らせ" class="button btn-cart add-to-mail">
  381.                                     <span>入荷お知らせ</span>
  382.                                 </button>
  383.                             {% else %}
  384.                                 <button type="button" title="在庫切れ" class="button btn-cart add-to-cart-out">
  385.                                     <span>在庫切れ</span>
  386.                                 </button>
  387.                             {% endif %}
  388.                         {% endif %}
  389.                     </div>
  390.                 </div>
  391.             </div>
  393.         </div>
  394.     </div>
  396.     {{ include('Block/add_to_cart.twig') }}
  398.   <div class="swooth-wrapper progasm-swooth">
  399.   </div>
  401. </div>
  403. {% endblock %}