Shopify - Music Button

music-button.liquid

{% comment %}
    @rotcl
{% endcomment %}

<div class="music_button__wrapper" data-tooltip="{{ section.settings.music_text }}">
	<a href="#" data-tooltip="{{ section.settings.music_text }}" data-fx="{{ section.settings.music_song }}" data-remodal-target="music-button" class="music_button">
		<span class="music_button">{{ section.settings.music_title }}</span>
	</a>
</div>

<style>
.music_button__wrapper {
 display:none
}
@media only screen and (min-width: 860px) {
 .music_button__wrapper {
  display:flex
 }
}
.music_button__wrapper.mobile_enabled {
 display:flex
}
.music_button {
 font:300 14px/50px "futura-pt",sans-serif;
 color:#fff;
 width:100%;
 height:100%
}
.music_button__img-override {
 height:70px;
 width:70px
}
.music_button__wrapper {
 align-items:center;
 justify-content:center;
 position:fixed;
 right:12px;
 top:130px;
 z-index:136999999;
 width:64px;
 height:50px;
 line-height:64px;
 text-align:center;
 cursor:pointer;
 border-radius:50%;
 background:#f74d4d;
 background-image: #ff5245;
 box-shadow:0 10px #A2A5A6
}
.music_button__wrapper:active {
 box-shadow:0 2px #A2A5A6;
 transform:translate(0px, 10px);
 transition:box-shadow 0.1s ease-out, transform 0.1s ease-out
}
.music_button__wrapper:active .music_button__wrapper:before,.music_button__wrapper:active .music_button__wrapper:after {
 opacity:0
}
.music_button__image {
 margin:auto;
 width:100vw;
 height:calc(100vh - 36px);
 background-size:cover;
 background-position:center
}
.music_button__image.desktop {
 display:none
}
@media only screen and (min-width: 860px) {
 .music_button__image.desktop {
  display:block
 }
}
.music_button__image.mobile {
 display:block
}
@media only screen and (min-width: 860px) {
 .music_button__image.mobile {
  display:none
 }
}
[data-tooltip]:before,[data-tooltip]:after {
 visibility:hidden;
 opacity:0;
 transform:translateY(-5px);
 pointer-events:none;
 transition:transform .14s ease
}
[data-tooltip]:before {
 position:absolute;
 bottom:-100%;
 right:0;
 padding:9px;
 width:180px;
 border-radius:3px;
 background-color:#000;
 background-color:#ff5245;
 opacity:0.6;
 color:#fff;
 content:attr(data-tooltip);
 text-align:center;
 font-size:14px;
 line-height:1.2;
 font:300 14px/14px "proxima-light",sans-serif
}
[data-tooltip]:after {
 position:absolute;
 bottom:-18px;
 left:50%;
 margin-left:-5px;
 width:0;
 border-top:5px solid #ff5245;
 border-top:5px solid #ff5245;
 border-right:5px solid transparent;
 border-left:5px solid transparent;
 content:" ";
 font-size:0;
 line-height:0;
 transform:rotate(180deg) translateY(-5px)
}
[data-tooltip]:hover:before,[data-tooltip]:hover:after {
 visibility:visible;
 opacity:1;
 transform:translate(0)
}
[data-tooltip]:hover:after {
 transform:translate(0) rotate(180deg)
}
</style>

<script>
$('.music_button__wrapper a').on('click',function(e){
  e.preventDefault();
  $('audio').remove();
    var fx = $(this).attr('data-fx');
  $('<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> <source src="http://www.myinstants.com/media/sounds/'+fx+'.mp3"  type="audio/mpeg"> </audio>').appendTo('.buttons');
    });
    </script>

{% schema %}
{
  "name": "Music",
  "class": "music-section",
  "settings": [
    {
      "type": "text",
      "id": "music_title",
      "label": "Texto botón",
	  "label": "Preferencia 4 caracteres",
      "default": "Música"
    },
	{
      "type": "text",
      "id": "music_song",
      "label": "Nombre sonido",
	  "label": "Formato: /media/sounds/XXXXXXXXX.mp3",
      "default": "george-micael-wham-careless-whisper-1"
    },
	{
      "type": "text",
      "id": "music_text",
      "label": "Texto tooltip",
      "default": "test"
    }
  ],
  "presets": [{
    "name": "Music",
    "category": "Music",
    "settings": {
    }
  }]
}

{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

En GreenGlass no hacía falta un botón con música navideña, así que encontramos una galería de sonidos (www.myinstants.com), y nos pusimos a jugar con lo que encontramos. Quedando este único botón navideño con un clásico de George Michael