templates/frontend/Club/generarWidget.html.twig line 1

Open in your IDE?
  1. {% extends 'base_frontend_support.html.twig' %}
  3. {% block stylesheets %}
  5. {% endblock %}
  6. {% block title %}Widget Generator{% endblock %}
  9. {% block container %}
  11.     <div class="ui container">
  12.         <div class="ui padded anchosoporte segment">
  13.             <h1 class="ui  header">
  14.                 <i class="big icons">
  15.                     <i class=" blue circle disabled info icon"></i>
  16.                 </i>
  18.                 <div class="content">
  19.                     C&oacute;mo integrar NextCaddy en la web del club    <div class="sub header">Enlace directo y Widget</div>
  20.                 </div>
  21.             </h1>
  23.             <div class="ui section divider"></div>
  24.             <h3>¿Qu&eacute; vamos a integrar?</h3>
  25.             <p>
  26.                 NextCaddy ha creado una web de entrada para que cada club mantenga informados a sus jugadores de sus torneos. En ella muestran horarios de salida, resultados, etc. sin que nadie tenga que ocuparse de ello. <a id="urlEjemplo2" href="http://www.nextcaddy.com/club/AM85">Ver ejemplo</a><p> Estos datos se insertan automáticamente con el programa de competiciones, también gratuito. 
  27.             </p>
  29.             <h3>¿C&oacute;mo hacer la integraci&oacute;n?</h3>
  30.             <h4>a) Enlace directo</h4>
  31.             <p>
  32.                 Para integrar NextCaddy puede simplemente crearse un enlace desde la web del club, por ejemplo a un apartado "Competiciones". Tan s&oacute;lo hay que sustituir en esta direcci&oacuten "AM85" por el c&oacute;digo federativo del club:
  33.             </p>
  35.             <pre>https://www.nextcaddy.com/club/<span id="rutaClub">AM85</span></pre>
  36.             <h4>b) Widget</h4>
  37.             <p>Tambi&eacute;n es posible incorporar en la web del club un widget, que es un marco integrado, en este caso, en la web de un club de golf, con el listado simplificado de sus competiciones, desde el que luego se puede acceder a  la información completa.<a id="urlEjemplo" href="https://www.nextcaddy.com/widget/AM85"> Ver ejemplo</a></p>
  38.             <p>Para ello sólo hay que seguir estas sencillas instrucciones.</p>
  40.             <div class="ui padded compact segment ">
  41.                 <h5>Procedimiento:</h5>
  42.                 <div class="ui fluid tiny steps">
  43.                     <div class="step" id="stepSelect">
  44.                         <i class="horizontal blue disabled resize icon"></i>
  45.                         <div class="content">
  46.                             <div class="title">Seleccionar</div>
  47.                             <div class="description">Club y el tamaño del widget</div>
  48.                         </div>
  49.                     </div>
  50.                     <div class="step" id="stepCopy">
  51.                         <i class="blue disabled copy icon"></i>
  52.                         <div class="content">
  53.                             <div class="title">Copiar</div>
  54.                             <div class="description">El código generado</div>
  55.                         </div>
  56.                     </div>
  57.                     <div class="step">
  58.                         <i class="text blue disabled file outline icon"></i>
  59.                         <div class="content">
  60.                             <div class="title">Insertar</div>
  61.                             <div class="description">El código en la web del club</div>
  62.                         </div>
  63.                     </div>
  64.                 </div>
  66.                 <h5>Generador de código:</h5>
  68.                 <div class="ui segment">
  69.                     <div class="ui form">
  70.                         <div class="fields">
  71.                             <div class="field alto">
  72.                                 <label>Alto</label>
  73.                                 <input id="alto" min="300" type="number" placeholder="Alto en píxeles">
  74.                             </div>
  76.                             <div class="field bajo">
  77.                                 <label>Ancho</label>
  78.                                 <input id="ancho" min="240" type="number" placeholder="Ancho en píxeles">
  79.                             </div>
  81.                             <div class="field"><label>Club de golf</label>
  82.                                 <select id="selector" class="ui fluid search dropdown" name="card[expire-month]">
  83.                                     {% for c in clubes %}
  84.                                         <option value="{{ c.id }}">{{ c.id }} {{ c.nombre }}</option>
  85.                                     {% endfor %}
  86.                                 </select>
  87.                             </div>
  88.                         </div>
  89.                     </div>
  90.                 </div>
  92.                 <h4>C&oacute;digo para insertar:</h4>
  93.                 <pre id="code">&lt;iframe src="https://www.nextcaddy.com/widget/<span id="club">AMXX</span>" name="NEXTCADDY" scrolling="auto" frameborder="no" align="center" height="<span id="altura">500px</span>" width="<span id="anchura">400px</span>"&gt; &lt;/iframe&gt;</pre>
  94.             </div>
  95.         </div>
  96.     </div>
  97. {% endblock %}
  99. {% block javascripts %}
  100.     <script>
  101.         $("#selector").on('change', function () {
  103.             var clubSelecionado = $(this).val();
  105.             $("#club").html(clubSelecionado).transition('pulse');
  107.             var url = Routing.generate('_club', {id: clubSelecionado});
  108.             $("#urlEjemplo").attr("href", url);
  109.             $("#urlEjemplo2").attr("href", url);
  111.             $("#rutaClub").html(clubSelecionado).transition('pulse');
  112.         });
  114.         $("#ancho").on('change', function () {
  115.             var clubSelecionado = $(this).val();
  116.             if (clubSelecionado > 900) {
  117.                 clubSelecionado = 900;
  118.                 $(this).val(clubSelecionado);
  119.             } else if (clubSelecionado < 240) {
  120.                 clubSelecionado = 240;
  121.                 $(this).val(clubSelecionado);
  122.             }
  124.             $("#anchura").html(clubSelecionado + "px").transition('pulse');
  125.         });
  127.         $("#alto").on('change', function () {
  129.             var clubSelecionado = $(this).val();
  131.             if (clubSelecionado > 900) {
  132.                 clubSelecionado = 900;
  133.                 $(this).val(clubSelecionado);
  134.             } else if (clubSelecionado < 240) {
  135.                 clubSelecionado = 300;
  136.                 $(this).val(clubSelecionado);
  137.             }
  139.             $("#altura").html(clubSelecionado + "px").transition('pulse');
  140.         });
  142.         $('#stepSelect, #stepSelect i,#stepSelect div').hover(function () {
  143.             $('.field.alto input').transition('clear queue').transition({
  144.                 animation: 'glow',
  145.                 duration: 500
  146.             });
  147.             $('.field.bajo input').transition('clear queue').transition({
  148.                 animation: 'glow',
  149.                 duration: 500
  150.             });
  151.         });
  152.         
  153.         $('#stepCopy, #stepCopy i,#stepCopy div').hover(function () {
  154.             $('pre#code').transition('clear queue').transition({
  155.                 animation: 'glow',
  156.                 duration: 500
  157.             });
  158.         });
  159.     </script>
  160. {% endblock %}