app/Plugin/SeShareButton4/Resource/template/product_detail.twig line 1

Open in your IDE?
  1. {#
  2.  Copyright(c) 2020 Shadow Enterprise, Inc. All rights reserved.
  3.  http://www.shadow-ep.co.jp/
  4. #}
  5. <!-- SNSシェアボタン -->
  6. <style>
  7. .ec-productRole__SNS_Share {
  8.   display: block;
  9. }
  10. .ec-productRole__SNS_Share ul {
  11.   display: -webkit-flex;
  12.   display: flex;
  13.   #margin: 0;
  14.   padding: 0;
  15.   justify-content: flex-start;
  16.   display: block;
  17. }
  18. .ec-productRole__SNS_Share .sns-share-button {
  19.   cursor: pointer;
  20. }
  21. .ec-productRole__SNS_Share li {
  22.   list-style: none;
  23.   margin: 0 3px;
  24.   display: inline-block;
  25. }
  26. .ec-productRole__SNS_Share li:first-child {
  27.   margin-left: 0;
  28. }
  29. .ec-productRole__SNS_Share li span {
  30.   vertical-align: middle;
  31. }
  32. .ec-productRole__SNS_Share li img,
  33. .ec-productRole__SNS_Share li svg {
  34.   height: 20px;
  35.   width: auto;
  36.   vertical-align: middle;
  37. }
  38. .ec-productRole__SNS_Share svg {
  39.   background-color: #fff;
  40. }
  41. #sns-share-email svg path {
  42.   fill: #000;
  43. }
  44. #sns-share-facebook svg path {
  45.   fill: #1777f2;
  46. }
  47. #sns-share-twitter svg path {
  48.   fill: #1a95e0;
  49. }
  50. #sns-share-line svg path {
  51.   fill: #00b901;
  52. }
  53. #sns-share-gplus svg path {
  54.   fill: #db4e41;
  55. }
  56. #sns-share-weibo svg path {
  57.   fill: #e0142c;
  58. }
  59. #sns-share-reddit svg path {
  60.   fill: #fe4400;
  61. }
  62. #sns-share-pinterest svg path {
  63.   fill: #ca1f26;
  64. }
  65. </style>
  66. <script>
  67. var configJson = '{{ ShareButtonConfig|raw }}';
  68. var btnList = $.parseJSON(configJson);
  69. console.log(btnList);
  70. $(function(){
  71.   initializeSNSButton();
  72. });
  73. function initializeSNSButton(){
  74.   if ( btnList.length == 0 ) {
  75.     return false;
  76.   }
  77.   var targetClass = '.ec-productRole__profile .ec-productRole__description';
  78.   var prefix = "{{ asset('SeShareButton4/assets/img/', 'plugin') }}";
  79.   addHtml = $('<div class="ec-productRole__SNS_Share"><ul><li><span>{{ 'se_share_button.front.label.share'|trans }}</span></li></ul></div>'),
  80.   $(targetClass).before(addHtml),
  81.   addHtml.ready(function() {
  82.     $.each(btnList, function(i, val) {
  83.       if ( val.enabled != 1 ) { return true; }
  84.       var pos = val.img.lastIndexOf('.');
  85.       if ( pos !== -1 && val.img.slice(pos + 1) == 'svg') {
  86.         addHtml2 = $('<li class="sns-share-button" id="sns-share-' + i + '"></li>'),
  87.         $('.ec-productRole__SNS_Share ul li:last-child').after(addHtml2),
  88.         addHtml2.ready(function() {
  89.           $('#sns-share-' + i).load(prefix + val.img);
  90.         })
  91.       } else {
  92.         $('.ec-productRole__SNS_Share ul li:last-child').after('<li class="sns-share-button" id="sns-share-' + i + '"><img src="' + prefix + val.img + '" /></li>');
  93.       }
  94.     })
  95.     loadSVGImage();
  96.   })
  97. }
  98. /* 表示する画像の読み込みと遷移先の設定 */
  99. function loadSVGImage(){
  100.   $('.sns-share-button').on('click', function(){
  101.     subject = encodeURIComponent("{{ BaseInfo.shop_name|raw }} | {{ Product.name|raw }}");
  102.     body = "{{ Product.name|raw }}\r\n{{ 'se_share_button.front.label.detail_announce'|trans }}:{{ url('product_detail', {'id': Product.id}) }}";
  103.     tag = "{{ BaseInfo.shop_name|raw }}";
  104.     {% for Tag in Product.Tags %}
  105.       tag += ",{{ Tag }}"
  106.     {% endfor %}
  107.     var shareUrl = '';
  108.     switch(this.id){
  109.       case 'sns-share-email':
  110.         location.href = btnList.email.url + '?subject=' + subject + '&body=' + encodeURIComponent(body);
  111.         break;
  112.       case 'sns-share-facebook':
  113.         baseUrl = btnList.facebook.url;
  114.         windowOpenUrl(baseUrl, 'u');
  115.         break;
  116.       case 'sns-share-twitter':
  117.         baseUrl = btnList.twitter.url;
  118.         text = ['text', body];
  119.         hashtags = ['hashtags', tag];
  120.         url = ['url', location.href];
  121.         query = new URLSearchParams([text, hashtags, url]).toString();
  122.         shareUrl = `${baseUrl}?${query}`;
  123.         window.open(shareUrl);
  124.         break;
  125.       default:
  126.         baseUrl = btnList[this.id.substring(10)]['url'];
  127.         windowOpenUrl(baseUrl, 'url');
  128.         break;
  129.     }
  130.   })
  131. }
  132. function windowOpenUrl(url, key) {
  133.   url = [key, location.href];
  134.   query = new URLSearchParams([url]).toString();
  135.   shareUrl = `${baseUrl}?${query}`;
  136.   window.open(shareUrl);
  137. }
  138. </script>