É composto pelos seguintes widgets: 

product_bundle_medias_group
product_medias_selector
product_medias_displayer
product_medias_enlarger
product_medias_zoom


product_medias

componente: WidgetComponent

diretório: product.medias

template: wd.product.medias.template

jsHandler: \"\"" 


Exemplo de uso

{% product_medias(
    UseHierarchy=false
) %}

O parâmetro UseHierarchy  evita que o produto seja exibido sem uma foto, procurando fotos associadas ao produto principal e variações. Por regra, procura primeiramente se há alguma imagem associada à opção selecionada; caso não tenha, procura no pai e, por último, no filho. 

Exemplos: Produto X possui uma imagem associada ao produto principal e outra imagem associada à variação “Azul”. Nesse caso, ao acessar o produto principal ou ao selecionar a variação Vermelho, será exibida a foto associada ao produto principal. Porém, ao selecionar a variação azul (e uma variação filha, como tamanho M, por exemplo), será exibida a foto associada a variação Azul. Produto Y possui uma imagem associada ao produto principal e nenhuma imagem associada às suas variações. Nesse caso, sempre será exibida a imagem do produto principal. Produto Z possui apenas uma imagem associada a variação tamanho M. Nesse caso, sempre será exibida a imagem associada à variação tamanho M, independentemente se ela estiver selecionada ou não.


Exemplo mostrando os widgets product_medias_selector e product_medias_displayer", "sizing": "original"

Parâmetros

Os parâmetros são utilizados para configurar o widget

NomeDescriçãoTipoValor padrão
UseHierarchyCarregar imagem hierarquicamenteBooleantrue
BundleGroupImageSizeImagem usada nos grupos de kitLista de opções:
"Thumbnail", "Small", "Medium" e "Large"		Small
ShowSpecialsExibir imagens especiaisBooleanfalse

product_bundle_medias_group

Galeria de mídias para kit de produtos por grupo.

Eventos

'/wd/product/bundle/mediasgroup/change'
'/wd/product/bundle/variationchange/' + productID

product_medias_selector

Exibe as imagens em formato miniatura e seleciona a mídia clicada.

Eventos

'/wd/product/medias/selector/changed/' + productID, { element, widget, mediaType, index, order}
'/wd/product/medias/displayer/no/photo/' + productID, {}
'/wd/product/variation/changed/'

"product_medias_displayer"

Exibe a mídia clicada em tamanho grande.

Eventos

'/wd/product/medias/displayer/changed/' + productID, { widget, index}
'/wd/product/medias/displayer/clicked/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseover/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseout/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseenter/' + productID, { widget, index}
'/wd/product/medias/displayer/mouseleave/' + productID, { widget, index}
'/wd/product/medias/displayer/no/photo/'
'/wd/product/medias/selector/changed/'

product_medias_enlarger

Botão para exibir a mídia selecionada em tamanho extra grande.

Eventos

'/wd/product/medias/selector/changed/' + productID
'/wd/product/medias/displayer/clicked/' + productID
'/wd/product/variation/changed/' + productID

product_medias_zoom

Exibe a mídia selecionada em tamanho zoom.

Eventos

'/wd/product/medias/displayer/mouseenter'
'/wd/product/medias/displayer/changed'
'/wd/product/medias/displayer/no/photo/' + productID


Os eventos podem ser usados de três formas:

publish: dispara o evento

subscribe: escuta o evento

unsubscribe: deixa de escutar o evento sendo que, neste caso, deve-se passar o mesmo callback informado no subscribe que deseja-se deixar de executar.


Importante

Os argumentos informados nos eventos são opcionais. Ao escutá-los (subscribe) é recomendado validar se o argumento existe antes de utilizá-lo, evitando erros na execução do script


  • Sem rótulos