Nuvemshop Help

https://docs.nuvemshop.com.br/help/
Admin
Nuvemshop Help offers documentation and tutorials for developers and store owners to customize and...
Tokens:67,868
Snippets:369
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Initialize Panzoom Instance

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Initializes the Panzoom plugin for an image, setting up event listeners and initial state. It handles options like centering on start and applies plugins.

```javascript
var i,n,o,a,s=function(t,e){var i=t.plugins||{};return Object.keys(i).reduce((t,n)=>{
    var o=i[n];
    return t[n]=o,
    t
  },e||{}),t};
  var r=function(t,e){return Object.keys(e).reduce((i,n)=>{
    var o=e[n];
    return i[n]=o,
    i
  },t||{}),t};
  var l=function(t,e){return t.reduce((t,i)=>{
    var n=i.key,o=i.value;
    return t[n]=o,
    t
  },e||{}),t};
  var c=function(t,e,i){var n=t.state;
  return n&&n.match(e)?i:n};
  var h=function(t,e){return t.option(e)};
  var d=function(t){var e=this;
  this.plugins={};
  this.options=t;
  this.state=null;
  this.events={};
  this.changedDelta=null;
  this.velocity={x:0,y:0,scale:0};
  this.dragOffset={x:0,y:0,scale:1,time:null};
  this.dragStart={x:0,y:0,scale:1,rect:null};
  this.dragPosition={x:0,y:0,midPoint:null,time:null};
  this.transform={x:0,y:0,scale:1};
  this.container={width:0,height:0};
  this.viewport={width:0,height:0};
  this.content={origWidth:0,origHeight:0,width:0,height:0,x:0,y:0,scale:1};
  this.state='init';
  this.attachPlugins(this.options.plugins);
  this.trigger('init');
  this.updateMetrics();
  this.attachEvents();
  this.trigger('ready');
  !1===this.option('centerOnStart')?this.state='ready':this.panTo({friction:0});
  return t.__Panzoom=d(this),this};
  return s(n,[
    {
      key:"initLayout",
      value:function(){
        var t=this.$container;
        if(!(t instanceof HTMLElement))throw new Error("Panzoom: Container not found");
        var e=this.option("content")||t.querySelector(".panzoom__content");
        if(!e)throw new Error("Panzoom: Content not found");
        this.$content=e;
        var i,n=this.option("viewport")||t.querySelector(".panzoom__viewport");
        n||!1===this.option("wrapInner")||
          ((n=document.createElement("div")).classList.add("panzoom__viewport"),i=n).append.apply(i,m(t.childNodes)),t.appendChild(n));
        this.$viewport=n||e.parentNode
      }
    },
    {
      key:"resetValues",
      value:function(){
        this.updateRate=this.option("updateRate",/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)?250:24),
        this.container={width:0,height:0},
        this.viewport={width:0,height:0},
        this.content={origWidth:0,origHeight:0,width:0,height:0,x:this.option("x",0),y:this.option("y",0),scale:this.option("baseScale")},
        this.transform={x:0,y:0,scale:1},
        this.resetDragPosition()
      }
    },
    {
      key:"onLoad",
      value:function(t){
        this.updateMetrics(),
        this.panTo({scale:this.option("baseScale"),friction:0}),
        this.trigger("load",t)
      }
    },
    {
      key:"onClick",
      value:function(t){
        if(!(t.defaultPrevented||document.activeElement&&document.activeElement.closest("[contenteditable]")))if(!this.option("textSelection")||!window.getSelection().toString().length||t.target&&t.target.hasAttribute("data-fancybox-close")){var e=this.$content.getClientRects()[0];if("ready"!==this.state&&(this.dragPosition.midPoint||Math.abs(e.top-this.dragStart.rect.top)>1||Math.abs(e.left-this.dragStart.rect.left)>1))return t.preventDefault(),void t.stopPropagation();!1!==this.trigger("click",t)&&this.option("zoom")&&"toggleZoom"===this.option("click")&&(t.preventDefault(),t.stopPropagation(),this.zoomWithClick(t))}
        else t.stopPropagation()
      }
    },
    {
      key:"onWheel",
      value:function(t){
        !1!==this.trigger("wheel",t)&&this.option("zoom")&&this.option("wheel")&&this.zoomWithWheel(t)
      }
    },
    {
      key:"zoomWithWheel",
      value:function(t){
        void 0===this.changedDelta&&(this.changedDelta=0);
        var e=Math.max(-1,Math.min(1,-t.deltaY||-t.deltaX||t.wheelDelta||-t.detail)),i=this.content.scale,
        n=i*(100+e*this.option("wheelFactor"))/100;
        if(e<0&&Math.abs(i-this.option("minScale"))<.01||e>0&&Math.abs(i-this.option("maxScale"))<.01)?(this.changedDelta+=Math.abs(e),n=i):(this.changedDelta=0,n=Math.max(Math.min(n,this.option("maxScale")),this.option("minScale"))),
        !(this.changedDelta>this.option("wheelLimit"))&&(t.preventDefault(),n!==i){
          var o=this.$content.getBoundingClientRect(),a=t.clientX-o.left,s=t.clientY-o.top;
          this.zoomTo(n,{x:a,y:s})
        }
      }
    },
    {
      key:"zoomWithClick",
      value:function(t){
        var e=this.$content.getClientRects()[0],i=t.clientX-e.left,n=t.clientY-e.top;
        this.toggleZoom({x:i,y:n})
      }
    },
    {
      key:"attachEvents",
      value:function(){
        var t=this;
        this.$content.addEventListener("load",this.onLoad),
        this.$container.addEventListener("wheel",this.onWheel,{passive:!1}),
        this.$container.addEventListener("click",this.onClick,{passive:!1}),
        this.initObserver();
        var e=new _(this.$container,{
          start:function(i,n){
            if(!t.option("touch"))return!1;
            if(t.velocity.scale<0)return!1;
            var o=n.composedPath()[0];
            if(!e.currentPointers.length){
              if(-1!==["BUTTON","TEXTAREA","OPTION","INPUT","SELECT","VIDEO"].indexOf(o.nodeName))return!1;
              if(t.option("textSelection")&&function(t,e,i){for(var n=t.childNodes,o=document.createRange(),a=0;a<n.length;a++){
                  var s=n[a];
                  if(s.nodeType===Node.TEXT_NODE){
                    o.selectNodeContents(s);
                    var r=o.getBoundingClientRect();
                    if(e>=r.left&&i>=r.top&&e<=r.right&&i<=r.bottom)return s
                  }
                }
                return!1
              }(o,i.clientX,i.clientY))return!1
            }
            return!C(o)&&(!1!==t.trigger("touchStart",n)&&("mousedown"===n.type&&n.preventDefault(),t.state="pointerdown",t.resetDragPosition(),t.dragPosition.midPoint=null,t.dragPosition.time=Date.now(),!0))
          },
          move:function(i,n,o){
            if("pointerdown"===t.state)if(!1!==t.trigger("touchMove",o)){
              if(!(n.length<2&&!0===t.option("panOnlyZoomed")&&t.content.width<=t.viewport.width&&t.content.height<=t.viewport.height&&t.transform.scale<=t.option("baseScale"))&&(!(n.length>1)||t.option("zoom")&&!1!==t.option("pinchToZoom"))){
                var a=T(i[0],i[1]),s=T(n[0],n[1]),r=s.clientX-a.clientX,l=s.clientY-a.clientY,c=P(i[0],i[1]),h=P(n[0],n[1]),d=c&&h?h/c:1;
                t.dragOffset.x+=r,
                t.dragOffset.y+=l,
                t.dragOffset.scale*=d,
                t.dragOffset.time=Date.now()-t.dragPosition.time;
                var u=1===t.dragStart.scale&&t.option("lockAxis");
                if(u&&!t.lockAxis){
                  if(Math.abs(t.dragOffset.x)<6&&Math.abs(t.dragOffset.y)<6)return void o.preventDefault();
                  var f=Math.abs(180*Math.atan2(t.dragOffset.y,t.dragOffset.x)/Math.PI);
                  t.lockAxis=f>45&&f<135?"y":"x"
                }
                if("xy"===u||"y"!==t.lockAxis){
                  if(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),t.lockAxis&&(t.dragOffset["x"===t.lockAxis?"y":"x"]=0),t.$container.classList.add(t.option("draggingClass")),t.transform.scale===t.option("baseScale")&&"y"===t.lockAxis||
                  (t.dragPosition.x=t.dragStart.x+t.d
                }
              }
            }
          }
        })
      }
    }
  ])}

```

--------------------------------

### Fancybox Initialization and Defaults

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Sets up the Fancybox instance with various options including start index, preloading, infinite looping, animations, and localization strings. It also defines default plugins and event handlers.

```javascript
it.defaults=et,nt={ScrollLock:U,Thumbs:Y,Html:G,Toolbar:it,Image:K,Hash:J},ot={startIndex:0,preload:1,infinite:!0,showClass:"fancybox-zoomInUp",hideClass:"fancybox-fadeOut",animated:!0,hideScrollbar:!0,parentEl:null,mainClass:null,autoFocus:!0,trapFocus:!0,placeFocusBack:!0,click:"close",closeButton:"inside",dragToClose:!0,keyboard:{Escape:"close",Delete:"close",Backspace:"close",PageUp:"next",PageDown:"prev",ArrowUp:"next",ArrowDown:"prev",ArrowRight:"next",ArrowLeft:"prev"},template:{closeButton:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg>',spinner:'<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="25 25 50 50" tabindex="-1"><circle cx="50" cy="50" r="20"/></svg>',main:null},l10n:{CLOSE:"Close",NEXT:"Next",PREV:"Previous",MODAL:"You can close this modal content with the ESC key",ERROR:"Something Went Wrong, Please Try Again Later",IMAGE_ERROR:"Image Not Found",ELEMENT_NOT_FOUND:"HTML Element Not Found",AJAX_NOT_FOUND:"Error Loading AJAX : Not Found",AJAX_FORBIDDEN:"Error Loading AJAX : Forbidden",IFRAME_ERROR:"Error Loading Page",TOGGLE_ZOOM:"Toggle zoom level",TOGGLE_THUMBS:"Toggle thumbnails",TOGGLE_SLIDESHOW:"Toggle slideshow",TOGGLE_FULLSCREEN:"Toggle full-screen mode",DOWNLOAD:"Download"}},at=new Map,st=0,rt=function(t){l(i,t);var e=f(i);function i(t){var n,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return o(this,i),t=t.map((function(t){return t.width&&(t._width=t.width),t.height&&(t._height=t.height),t})),(n=e.call(this,k(!0,{},ot,a))).bindHandlers(),n.state="init",n.setItems(t),n.attachPlugins(i.Plugins),n.trigger("init"),!0===n.option("hideScrollbar")&&n.hideScrollbar(),n.initLayout(),n.initCarousel(),n.attachEvents(),at.set(n.id,d(n)),n.trigger("prepare"),n.state="ready",n.trigger("ready"),n.$container.setAttribute("aria-hidden","false"),n.option("trapFocus")&&n.focus(),n}return s(i,[{key:"option",value:function(t){for(var e,n=this.getSlide(),o=n?n[t]:void 0,a=arguments.length,s=new Array(a>1?a-1:0),r=1;r<a;r++)s[r-1]=arguments[r];if(void 0!==o){var l;if("function"==typeof o)o=(l=o).call.apply(l,[this,this].concat(s));return o}return(e=p(c(i.prototype),"option",this)).call.apply(e,[this,t].concat(s))}},{key:"bindHandlers",value:function(){for(var t=0,e=["onMousedown","onKeydown","onClick","onFocus","onCreateSlide","onSettle","onTouchMove","onTouchEnd","onTransform"];t<e.length;t++){var i=e[t];this[i]=this[i].bind(this)}}},{key:"attachEvents",value:function(){document.addEventListener("mousedown",this.onMous
```

--------------------------------

### Start Animation Loop

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Initiates the animation frame request loop for smooth transitions. Cancels any existing animation frame request to prevent multiple loops.

```javascript
startAnimation:function(){var t=this;this.rAF?cancelAnimationFrame(this.rAF):this.trigger("startAnimation"),this.rAF=requestAnimationFrame((function(){return t.animate()}))}
```

--------------------------------

### Configure Product Image Classes

Source: https://docs.nuvemshop.com.br/help/lista-de-produtos-segunda-imagem-em-rolagem

Define custom classes for various elements of the product image display, including containers, sliders, and pagination. This setup is essential for styling and controlling the image scrolling behavior.

```html
product_item_image_classes: {
            image_container: 'item-image mb-2',
            image_padding_container: 'p-relative',
            image: image_classes,
            slider_container: 'swiper-container position-absolute h-100 w-100',
            slider_wrapper: 'swiper-wrapper',
            slider_slide: 'swiper-slide item-image-slide',
            slider_control_pagination: 'swiper-pagination item-slider-pagination font-small d-md-none',
            slider_control: 'fa-lg svg-icon-primary',
            slider_control_prev_container: 'swiper-button-prev ' ~ slider_controls_container_class,
            slider_control_next_container: 'swiper-button-next ' ~ slider_controls_container_class,
            more_images_message: 'item-more-images-message font-small',
            placeholder: 'placeholder-fade',
        },
```

--------------------------------

### Get Slide Metrics

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Calculates the width of a slide element, including margins. If no element is provided, it creates a temporary hidden element for measurement.

```javascript
if(!t){var e,i,n=this.slides[0];if((t=document.createElement("div")).dataset.isTestEl=1,t.style.visibility="hidden",(e=t.classList).add.apply(e,m((this.option("prefix")+this.option("classNames.slide")).split(" "))),n.customClass)(i=t.classList).add.apply(i,m(n.customClass.split(" ")));this.$track.prepend(t)}var o=Math.max(t.offsetWidth,S(t.getBoundingClientRect().width)),a=t.currentStyle||window.getComputedStyle(t);return o=o+(parseFloat(a.marginLeft)||0)+(parseFloat(a.marginRight)||0),t.dataset.isTestEl&&t.remove(),o}}
```

--------------------------------

### Initialize Lazysizes with Configuration

Source: https://docs.nuvemshop.com.br/help/lazy-load

This snippet shows the basic initialization of the lazysizes library, including default configuration options. It's recommended to include this in your main JavaScript file.

```javascript
var lazySizesConfig = lazySizesConfig || {};
lazySizesConfig.init = true;
```

--------------------------------

### Get Zoom Delta

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Calculates the change in X and Y coordinates needed to achieve a target zoom scale, considering the current content dimensions and viewport.

```javascript
getZoomDelta:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=this.content.fitWidth*this.content.scale,o=this.content.fitHeight*this.content.scale,a=e>0&&n?e/n:0,s=i>0&&o?i/o:0,r=this.content.fitWidth*t,l=this.content.fitHeight*t,c=(r-n)*a,h=(l-o)*s;return{deltaX:c,deltaY:h}}
```

--------------------------------

### Aplicar tamanhos de imagem responsivos com settings_image_url

Source: https://docs.nuvemshop.com.br/help/melhorando-o-carregamento-das-imgens-e-svgs

Utilize a extensão `settings_image_url()` para definir diferentes tamanhos de imagem para carregamento responsivo. Isso é especialmente útil para banners e sliders, permitindo que o navegador escolha a imagem mais adequada com base na resolução da tela. Certifique-se de que seu código esteja atualizado e que você esteja fazendo upload de imagens nos formatos JPG ou PNG.

```html
<img data-src="{{ slide.image | static_url }}" class="slider-image blur-up swiper-lazy" data-sizes="auto"/>
```

```html
<img data-srcset='{{ slide.image | static_url | settings_image_url('large') }} 480w, {{ slide.image | static_url | settings_image_url('huge') }} 640w, {{ slide.image | static_url | settings_image_url('original') }} 1024w, {{ slide.image | static_url | settings_image_url('1080p') }} 1920w' data-sizes="auto" />
```

--------------------------------

### Exibir lista de produtos básica

Source: https://docs.nuvemshop.com.br/help/como-mostrar-a-lista-de-produtos

Itera sobre a lista de produtos e exibe cada um com imagem, nome e preço. Use este snippet para uma listagem simples.

```html
{% for product in products %}
    <div class="produto">
    {{ product.featured_image | product_image_url("medium") | img_tag(product.name) | a_tag(product.url) }}
    <h3>{{ product.name }}</h3>
    {% if product.display_price %}
        <small>{{ product.price | money }}</small>
    {% endif %}
    </div>
{% endfor %}
```

--------------------------------

### Get Content Bounds

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Calculates the boundaries for the content's X and Y positions based on the current scale and viewport dimensions. Ensures content stays within visible area.

```javascript
getBounds:function(t){var e=this.boundX,i=this.boundY;if(void 0!==e&&void 0!==i)return{boundX:e,boundY:i};e={from:0,to:0},i={from:0,to:0},t=t||this.transform.scale;var n=this.content.fitWidth*t,o=this.content.fitHeight*t,a=this.viewport.width,s=this.viewport.height;if(n<a){var r=S(.5*(a-n));e.from=r,e.to=r}else e.from=S(a-n);if(o<s){var l=.5*(s-o);i.from=l,i.to=l}else i.from=S(s-o);return{boundX:e,boundY:i}}
```

--------------------------------

### Initialize Pointer Tracker and Event Listeners

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Sets up the pointer tracker and attaches event listeners for drag and end events. This is crucial for enabling interactive image manipulation like dragging and zooming.

```javascript
this.pointerTracker = e
}},{key:"initObserver",value:function(){var t=this;this.resizeObserver||(this.resizeObserver=new $((function(){t.updateTimer||(t.updateTimer=setTimeout((function(){var e=t.$container.getBoundingClientRect();e.width&&e.height?((Math.abs(e.width-t.container.width)>1||Math.abs(e.height-t.container.height)>1)&&(t.isAnimating()&&t.endAnimation(!0),t.updateMetrics(),t.panTo({x:t.content.x,y:t.content.y,scale:t.option("baseScale"),friction:0})),t.updateTimer=null):t.updateTimer=null}),t.updateRate))})),this.resizeObserver.observe(this.$container))}},{key:"resetDragPosition",value:function(){this.lockAxis=null,this.friction=this.option("friction"),this.velocity={x:0,y:0,scale:0};var t=this.content,e=t.x,n=t.y,o=t.scale;this.dragStart={rect:this.$content.getBoundingClientRect(),x:e,y:n,scale:o},this.dragPosition=i(i({},this.dragPosition),{},{x:e,y:n,scale:o}),this.dragOffset={x:0,y:0,scale:1,time:0}}},{key:"updateMetrics",value:function(t){!0!==t&&this.trigger("beforeUpdate");var e,n=this.$container,o=this.$content,a=this.$viewport,s=o instanceof HTMLImageElement,r=this.option("zoom"),l=this.option("resizeParent",r),c=this.option("width"),h=this.option("height"),d=c||(e=o,Math.max(parseFloat(e.naturalWidth||0),parseFloat(e.width&&e.width.baseVal&&e.width.baseVal.value||0),parseFloat(e.offsetWidth||0),parseFloat(e.scrollWidth||0))),u=h||function(t){return Math.max(parseFloat(t.naturalHeight||0),parseFloat(t.height&&t.height.baseVal&&t.height.baseVal.value||0),parseFloat(t.offsetHeight||0),parseFloat(t.scrollHeight||0))}(o);Object.assign(o.style,{width:c?"".concat(c,"px"):"",height:h?"".concat(h,"px"):"",maxWidth:"",maxHeight:""}),l&&Object.assign(a.style,{width:"",height:""});var f=this.option("ratio");c=d=S(d*f),h=u=S(u*f);var v=o.getBoundingClientRect(),p=a.getBoundingClientRect(),g=a==n?p:n.getBoundingClientRect(),m=Math.max(a.offsetWidth,S(p.width)),y=Math.max(a.offsetHeight,S(p.height)),b=window.getComputedStyle(a);if(m-=parseFloat(b.paddingLeft)+parseFloat(b.paddingRight),y-=parseFloat(b.paddingTop)+parseFloat(b.paddingBottom),this.viewport.width=m,this.viewport.height=y,r){if(Math.abs(d-v.width)>.1||Math.abs(u-v.height)>.1){var x=function(t,e,i,n){var o=Math.min(i/t||0,n/e);return{width:t*o||0,height:e*o||0}}(d,u,Math.min(d,v.width),Math.min(u,v.height));c=S(x.width),h=S(x.height)}Object.assign(o.style,{width:"".concat(c,"px"),height:"".concat(h,"px"),transform:""})}if(l&&(Object.assign(a.style,{width:"".concat(c,"px"),height:"".concat(h,"px")}),this.viewport=i(i({},this.viewport),{},{width:c,height:h})),s&&r&&"function"!=typeof this.options.maxScale){var w=this.option("maxScale");this.options.maxScale=function(){return this.content.origWidth>0&&this.content.fitWidth>0?this.content.origWidth/this.content.fitWidth:w}}this.content=i(i({},this.content),{},{origWidth:d,origHeight:u,fitWidth:c,fitHeight:h,width:c,height:h,scale:1,isZoomable:r}),this.container={width:g.width,height:g.height},!0!==t&&this.trigger("afterUpdate")}},{key:"zoomIn",value:function(t){this.zoomTo(this.content.scale+(t||this.option("step")))}},{key:"zoomOut",value:function(t){this.zoomTo(this.content.scale-(t||this.option("step")))}},{key:"toggleZoom",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=this.option("maxScale"),i=this.option("baseScale"),n=this.content.scale>i+.5*(e-i)?i:e;this.zoomTo(n,t)}},{key:"zoomTo",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.option("baseScale"),e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=e.x,n=void 0===i?null:i,o=e.y,a=void 0===o?null:o;t=Math.max(Math.min(t,this.option("maxScale")),this.option("minScale"));var s=S(this.content.scale/(this.content.width/this.content.fitWidth),1e7);null===n&&(n=this.content.width*s*.0

```

--------------------------------

### Get Page from Position

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Calculates the current page based on a given position, considering options like centering. This is useful for determining which slide is most visible or relevant at a specific scroll offset.

```javascript
this.getPageFromPosition=function(t){var e=this.pages.length;this.option("center")&&(t+=.5*this.viewportWidth);var i=Math.floor(t/this.contentWidth);t-=i*this.contentWidth;var n=this.slides.find((function(e){return e.left<=t&&e.left+e.width>t}));if(n){var o=this.findPageForSlide(n.index);return[o,o+i*e]}return[0,0]}
```

--------------------------------

### Show Fancybox Instance

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Creates and shows a new Fancybox instance. Use this as a programmatic way to open Fancybox.

```javascript
show:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new i(t,e)}
```

--------------------------------

### URL and Query Parameter Manipulation

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Constructs a new URL with modified query parameters. It parses existing parameters and adds or updates specific ones like 'start' for YouTube embeds.

```javascript
var V=function(t,e){for(var i=new URL(t),n=new URLSearchParams(i.search),o=new URLSearchParams,a=0,s=[].concat(m(n),m(Object.entries(e)));a<s.length;a++){var r=g(s[a],2),l=r[0],c=r[1];"t"===l?o.set("start",parseInt(c)):o.set(l,c)}o=o.toString();var h=t.match(/#t=((.*)?\d+s)/);return h&&(o+="#t=".concat(h[1])),o}
```

--------------------------------

### Fancybox Toolbar Initialization and Event Handling

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Initializes the Fancybox toolbar, sets up event listeners for various stages (init, prepare, done, keydown, closing, change, settle, refresh), and manages plugin states like Slideshow and Fullscreen.

```javascript
it=function(){function t(e){var i=this;o(this,t),this.fancybox=e,this.$container=null,this.state="init";for(var n=0,a=["onInit","onPrepare","onDone","onKeydown","onClosing","onChange","onSettle","onRefresh"];n<a.length;n++){var s=a[n];this[s]=this[s].bind(this)}this.events={init:this.onInit,prepare:this.onPrepare,done:this.onDone,keydown:this.onKeydown,closing:this.onClosing,"Carousel.change":this.onChange,"Carousel.settle":this.onSettle,"Carousel.Panzoom.touchStart":function(){return i.onRefresh()Ч"Image.startAnimation":function(t,e){return i.onRefresh(e)},"Image.afterUpdate":function(t,e){return i.onRefresh(e)}}}return s(t,[{key:"onInit",value:function(){if(this.fancybox.option("Toolbar.autoEnable")){var t,e=!1,i=x(this.fancybox.items);try{for(i.s();!(t=i.n()).done;){if("image"===t.value.type){e=!0;break}}}catch(t){i.e(t)}finally{i.f()}if(!e)return void(this.state="disabled")}var n,o=x(this.fancybox.option("Toolbar.display"));try{for(o.s();!(n=o.n()).done;){var a=n.value;if("close"===(w(a)?a.id:a)){this.fancybox.options.closeButton=!1;break}}}catch(t){o.e(t)}finally{o.f()}}},{key:"onPrepare",value:function(){var t=this.fancybox;if("init"===this.state&&(this.build(),this.update(),this.Slideshow=new tt(t),!t.Carousel.prevPage&&(t.option("slideshow.autoStart")&&this.Slideshow.activate(),t.option("fullscreen.autoStart")&&!Q.element())))try{Q.activate(t.$container)}catch(t){}}},{key:"onFsChange",value:function(){window.scrollTo(Q.pageXOffset,Q.pageYOffset)}},{key:"onSettle",value:function(){var t=this.fancybox,e=this.Slideshow;e&&e.isActive()&&(t.getSlide().index!==t.Carousel.slides.length-1||t.option("infinite")?"done"===t.getSlide().state&&e.setTimer():e.deactivate())}},{key:"onChange",value:function(){this.update(),this.Slideshow&&this.Slideshow.isActive()&&this.Slideshow.clearTimer()}},{key:"onDone",value:function(t,e){var i=this.Slideshow;e.index===t.getSlide().index&&(this.update(),i&&i.isActive()&&(t.option("infinite")||e.index!==t.Carousel.slides.length-1?i.setTimer():i.deactivate()))}},{key:"onRefresh",value:function(t){t&&t.index!==this.fancybox.getSlide().index||(this.update(),!this.Slideshow||!this.Slideshow.isActive()||t&&"done"!==t.state||this.Slideshow.deactivate())}},{key:"onKeydown",value:function(t,e,i){" "===e&&this.Slideshow&&(this.Slideshow.toggle(),i.preventDefault())}},{key:"onClosing",value:function(){this.Slideshow&&this.Slideshow.deactivate(),document.removeEventListener("fullscreenchange",this.onFsChange)}},{key:"createElement",value:function(t){var e,i;("div"===t.type?e=document.createElement("div"):(e=document.createElement("link"===t.type?"a":"button")).classList.add("carousel__button"),e.innerHTML=t.html,e.setAttribute("tabindex",t.tabindex||0),t.class)&&(i=e.classList).add.apply(i,m(t.class.split(" ")));for(var n in t.attr)e.setAttribute(n,t.attr[n]);t.label&&e.setAttribute("title",this.fancybox.localize("{{'".concat(t.label,"}}"))),t.click&&e.addEventListener("click",t.click.bind(this)),"prev"===t.id&&e.setAttribute("data-fancybox-prev",""),"next"===t.id&&e.setAttribute("data-fancybox-next","");var o=e.querySelector("svg");o&&(o.setAttribute("role","img"),o.setAttribute("tabindex","-1"),o.setAttribute("xmlns","http://www.w3.org/2000/svg")),e}},{key:"build",value:function(){var t=this;this.cleanup();var e,i=this.fancybox.option("Toolbar.items"),n=[{position:"left",items:[]},{position:"center",items:[]},{position:"right",items:[]}],o=this.fancybox.plugins.Thumbs,a=x(this.fancybox.option("Toolbar.display"));try{var s=function(){var a=e.value,s=void 0,r=void 0;if(w(a)?(s=a.id,r=k({},i[s],a)):r=i[s=a],["counter","next","prev","slideshow"].includes(s)&&t.fancybox.items.length<2)return"continue";if("fullscreen"===s){if(!document.fullscreenEnabled||window.fullScreen)return"continue";document.addEventListener("fullscreenchange",t.onFsChange)}if("thumbs"===s&&(!o||"disabled"===o.state))return"continue";if(!r)return"continue";var l=r.position||"right",c=n.find((function(t){return t.position===l}));c&&c.items.push(r)};for(a.s();!(e=a.n()).done;)s()}catch(t){a.e(t)}finally{a.f()}var r=document.createElement("div");r.classList.add("fancybox__toolbar");for(var l=0,c=n;l<c.length;l++
```

--------------------------------

### Image Pointer Event Handling

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Manages touch and mouse events for image interactions, including start, move, and end phases. It attaches and removes event listeners for various pointer inputs.

```javascript
function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,t),this.options=k(!0,{},e),this.plugins=[],this.events={};for(var i=0,n=Array.from(t.changedTouches||[]);e<n.length;e++){var o=n[e];i._triggerPointerEnd(new E(o),t)}},this._startCallback=s,this._moveCallback=l,this._endCallback=h,this._element.addEventListener("mousedown",this._pointerStart,{passive:!1}),this._element.addEventListener("touchstart",this._touchStart,{passive:!1}),this._element.addEventListener("touchmove",this._move,{passive:!1}),this._element.addEventListener("touchend",this._touchEnd),this._element.addEventListener("touchcancel",this._touchEnd)}return s(t,[{key:"stop",value:function(){this._element.removeEventListener("mousedown",this._pointerStart,{passive:!1}),this._element.removeEventListener("touchstart",this._touchStart,{passive:!1}),this._element.removeEventListener("touchmove",this._move,{passive:!1}),this._element.removeEventListener("touchend",this._touchEnd),this._element.removeEventListener("touchcancel",this._touchEnd),window.removeEventListener("mousemove",this._move),window.removeEventListener("mouseup",this._pointerEnd)}},{key:"_triggerPointerStart",value:function(t,e){return!!this._startCallback(t,e)&&(this.currentPointers.push(t),this.startPointers.push(t),!0)}}]),t}(),A=function(t,e){return t.split(".").reduce((function(t,e){return t&&t[e]}),e)},O=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,t),this.options=k(!0,{},e),this.plugins=[],this.events={};for(var i=0,n=["on","once"];i<n.length;i++)for(var a=n[i],s=0,r=Object.entries(this.options[a]||{});s<r.length;s++){var l=r[s];this[a].apply(this,m(l))}}return s(t,[{key:"option",value:function(t,e){t=String(t);var i=A(t,this.options);if("function"==typeof i){for(var n,o=arguments.length,a=new Array(o>2?o-2:0),s=2;s<o;s++)a[s-2]=arguments[s];i=(n=i).call.apply(n,[this,this].concat(a))}return void 0===i?e:i}},{key:"localize",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return t=(t=String(t).replace(/\{\{\w+.?\w+\}\}/g,(function(t,n,o){var a="";o?a=e.option("".concat(n[0]+n.toLowerCase().substring(1),".l10n.").concat(o)):n&&(a=e.option("l10n.".concat(n))),a||(a=t);for(var s=0;s<i.length;s++)a=a.split(i[s][0]).join(i[s][1]);return a}))).replace(/\{\{(.*)\}\},(function(t,e){return e}))}},{key:"on",value:function(t,e){var i=this;if(w(t)){for(var n=0,o=Object.entries(t);n<o.length;n++){var a=o[n];this.on.apply(this,m(a))}return this}return String(t).split(" ").forEach((function(t){var n=i.events[t]=i.events[t]||[];-1==n.indexOf(e)&&n.push(e)})),this}},{key:"once",value:function(t,e){var i=this;if(w(t)){for(var n=0,o=Object.entries(t);n<o.length;n++){var a=o[n];this.once.apply(this,m(a))}return this}return String(t).split(" ").forEach((function(t){var n=function n(){i.off(t,n);for(var o=arguments.length,a=new Array(o),s=0;s<o;s++)a[s]=arguments[s];e.call.apply(e,[i,i].concat(a))};n._=e,i.on(t,n)})),this}},{key:"off",value:function(t,e){var i=this;if(!w(t))return t.split(" ").forEach((function(t){var n=i.events[t];if(!n||!n.length)return i;for(var o=-1,a=0,s=n.length;a<s;a++){var r=n[a];if(r&&(r===e||r._===e)){o=a;break}}-1!=o&&n.splice(o,1)})),this;for(var n=0,o=Object.entries(t);n<o.length;n++){var a=o[n];this.off.apply(this,m(a))}}},{key:"trigger",value:function(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];var o,a=x(m(this.events[t]||[]).slice());try{for(a.s();!(o=a.n()).done;){var s=o.value;if(s&&!1===s.call.apply(s,[this,this].concat(i)))return!1}}catch(t){a.e(t)}finally{a.f()}var r,l=x(m(this.events["*வுகளை"]||[]).slice());try{for(l.s();!(r=l.n()).done;){var c=r.value;if(c&&!1===c.call.apply(c,[this,t,this].concat(i)))return!1}}catch(t){l.e(t)}finally{l.f()}return!0}},{key:"attachPlugins",value:function(t){for(var e={},i=0,n=Object.entries(t||{});i<n.length;i++){var o=g(n[i],2),a=o[0],s=o[1];!1===this.options[a]||this.plugins[a]||(this.options[a]=k({},s.defaults||{},this.options[a]),e[a]=new s(this))}for(var r=0,l=Object.entries(e);r<l.length;r++){var c=g(l[r],2);c[0],c[1].attach(this)}return this.plugins=Object.assign({},this.plugins,e),this}},{key:"detachPlugins",value:function(){for(var t in this.plugins){var e=void 0;(e=this.plugins[t])&&"function"==typeof e.detach&&e.detach(this)}return this.plugins={},this}}]),t}(),z={touch:!0,zoom:!0,pinchToZoom:!0,panOnlyZoomed:!1,lockAxis:!1,friction:.64,decelFriction:.88,zoomFriction:.74,bounceForce:.2,baseScale:1,minScale:1,maxScale:2,step:.5,textSelection:!1,click:"toggleZoom",wheel:"zoom",wheelFactor:42,wheelLimit:5,draggableClass:"is-draggable",draggingClass:"is-dragging",ratio:1},M=function(t){l(n,t);var e=f(n);function n(t){var i,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};o(this,n),(i=e.call(this,k(!0,{},z,a))).state="init",i.$container=t;for(var s=0,r=["onLoad","onWheel","onClick"];s<r.length;s++){var l=r[s];i[l]=i[l].bind(d(i))}return i.initLayout(),i.resetValue
```

--------------------------------

### Update Offer and Discount Labels

Source: https://docs.nuvemshop.com.br/help/cores-no-item-do-produto-jq-nuvem

This code updates the displayed price, compare-at-price, and discount percentage. It also manages the visibility of stock labels and installment information based on product availability and pricing.

```javascript
var $this_product_container = jQueryNuvem(this).closest(".js-product-container");

    if($this_product_container.hasClass("js-quickshop-container")){
        var this_quickshop_id = $this_product_container.attr("data-quickshop-id");
        var $this_product_container = jQueryNuvem('.js-product-container[data-quickshop-id="'+this_quickshop_id+'"]);
    }
    var $this_compare_price = $this_product_container.find(".js-compare-price-display");
    var $this_price = $this_product_container.find(".js-price-display");
    var $installment_container = $this_product_container.find(".js-product-payments-container");
    var $installment_text = $this_product_container.find(".js-max-installments-container");
    var $this_add_to_cart = $this_product_container.find(".js-prod-submit-form");

    // Get the current product discount percentage value
    var current_percentage_value = $this_product_container.find(".js-offer-percentage");

    // Get the current product price and promotional price
    var compare_price_value = $this_compare_price.html();
    var price_value = $this_price.html();

    // Calculate new discount percentage based on difference between filtered old and new prices
    const percentageDifference = window.moneyDifferenceCalculator.percentageDifferenceFromString(compare_price_value, price_value);
    if(percentageDifference){
        $this_product_container.find(".js-offer-percentage").text(percentageDifference);
        $this_product_container.find(".js-offer-label").css("display" , "table");
    }

    if ($this_compare_price.css("display") == "none" || !percentageDifference) {
        $this_product_container.find(".js-offer-label").hide();
    }

    if ($this_add_to_cart.hasClass("nostock")) {
        $this_product_container.find(".js-stock-label").show();
    }
    else {
        $this_product_container.find(".js-stock-label").hide();
    }
    if ($this_price.css('display') == 'none'){
        $installment_container.hide();
        $installment_text.hide();
    }else{
        $installment_text.show();
    }
});
```

--------------------------------

### Inclusão do Snipplet de Produtos Relacionados (product.tpl)

Source: https://docs.nuvemshop.com.br/help/produtos-relacionados

Este código demonstra onde incluir o template 'product-related.tpl' no template principal 'product.tpl' para que a seção de produtos relacionados seja exibida na página de detalhes do produto.

```html
{% include 'snipplets/product/product-related.tpl' %}
```

--------------------------------

### Initialize Track Element

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Creates and configures a track element for displaying product images. It appends child nodes from the viewport to this track.

```javascript
this.$track=document.createElement("div"),(i=this.$track.classList).add.apply(i,m((o+a.track).split(" "))),(n=this.$track).append.apply(n,m(this.$viewport.childNodes)),this.$viewport.appendChild(this.$track))}}
```

--------------------------------

### Carousel Initialization and Plugin Attachment

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Handles the initialization of the carousel, including attaching plugins, setting up the layout, initializing slides, and updating metrics. The `initPanzoom` method is called to enable pan and zoom functionality.

```javascript
this.pages=[],this.page=this.pageIndex=null,this.prevPage=this.prevPageIndex=null,this.attachPlugins(n.Plugins),this.trigger("init"),this.initLayout(),this.initSlides(),this.updateMetrics(),this.$track&&this.pages.length&&(this.$track.style.transform="translate3d(".concat(-1*this.pages[this.page].left,"px, 0px, 0) scale(1)")),
this.manageSlideVisiblity(),this.initPanzoom(),this.state="ready",this.trigger("ready")}
```

--------------------------------

### Incluir grid de produtos em outra seção

Source: https://docs.nuvemshop.com.br/help/como-mostrar-a-lista-de-produtos

Chama um template de grid de produtos (ex: grid-produtos.tpl) em outra seção do seu site. Permite a reutilização do código de exibição de produtos.

```html
{% snipplet "grid-produtos.tpl" %}
```

--------------------------------

### Embed Form Select with Static Options

Source: https://docs.nuvemshop.com.br/help/snipplet-include-y-embed

An example of embedding the 'form-select.tpl' snippet, disabling the label, applying a custom class, and providing static options within the 'select_options' block. This is useful for simple dropdowns.

```html
{% embed "snipplets/forms/form-select.tpl" with{select_label: false, select_custom_class: 'js-sort-by'} %}
    {% block select_options %}
        <option value="1">{{ 'texto 1' | translate }}</option>
        <option value="2">{{ 'texto 2' | translate }}</option>
        <option value="3">{{ 'texto 3' | translate }}</option>
        <option value="4">{{ 'texto 4' | translate }}</option>
    {% endblock select_options%}
{% endembed %}
```

--------------------------------

### Embed Form Select for Product Variants

Source: https://docs.nuvemshop.com.br/help/snipplet-include-y-embed

This example demonstrates embedding the 'form-select.tpl' snippet within a loop to create select elements for product variations. It dynamically sets labels and options based on variation data.

```html
{% for variation in product.variations %}
    <div class="col-12">
        {% embed "snipplets/forms/form-select.tpl" with{select_label: true, select_label_name: '' ~ variation.name ~ '', select_for: 'variation_' ~ loop.index , select_id: 'variation_' ~ loop.index, select_name: 'variation' ~ '[' ~ variation.id ~ ']', select_custom_class: 'js-variation-option js-refresh-installment-data'} %}
            {% block select_options %}
                {% for option in variation.options %}
                    <option value="{{ option.id }}" {% if product.default_options[variation.id] == option.id %}selected="selected"{% endif %}>{{ option.name }}</option>
                {% endfor %}
            {% endblock select_options%}
        {% endembed %}
    </div>
{% endfor %}
```

--------------------------------

### Exibir parcelas de produto com componente privado

Source: https://docs.nuvemshop.com.br/help/componentes-privados

Utilize este componente para exibir informações de parcelamento no detalhe do produto. Ele requer a definição do parâmetro 'location' como 'product_detail'.

```twig
{{ component('installments', {'location' : 'product_detail', container_classes: { installment: "product-detail-installments text-center text-md-left mb-2" }}) }}
```

--------------------------------

### Product Item Display Information

Source: https://docs.nuvemshop.com.br/help/quickshop-jq-nuvem

Displays the product name and price, including compare-at price if available. This section is linked to the product details page and is used for displaying product information within listings or quick shop views.

```html
<div class="item-description" data-store="product-item-info-{{ product.id }}">
    <a href="{{ product_url_with_selected_variant }}" title="{{ product.name }}" class="item-link">
        <div class="js-item-name item-name mb-1" data-store="product-item-name-{{ product.id }}">{{ product.name }}</div>
        {% if product.display_price %}
            <div class="item-price-container mb-1" data-store="product-item-price-{{ product.id }}">
                <span class="js-compare-price-display price-compare" {% if not product.compare_at_price or not product.display_price %}style="display:none;"{% else %}style="display:inline-block;"{% endif %}>
                    {{ product.compare_at_price | money }}
                </span>
                <span class="js-price-display item-price">
                    {{ product.price | money }}
                </span>

            </div>
        {% endif %}
    </a>
</div>
{% include 'snipplets/payments/installments.tpl' %}
```
Tokens:
Raw