Exibe as variações de um produto e suas disponibilidades, enviando informações das opções selecionadas a cada troca. 


tag: product_variations

componente: ProductVariationComponent

diretório: product.variations

template: wd.product.variations.template

jsHandler: ProductVariations


Exemplo de uso

{% capture jsoptions %}
    { 
        "productId":"{{ Product.ProductID }}"
    }
{% endcapture %}

{% product_variations(
  jsoptions:jsoptions,
  ShowAllVariations="false"
  ValidateAllVariations="false"
) %}

No exemplo acima, o parâmetro ShowAllVariations foi desabilitado para que as subvariações, caso existam, sejam exibidas somente após a variação pai ser selecionada. 

Parâmetros

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

NomeDescriçãoTipoValor padrão
"ShowAllVariationsMostrar todas as variações inicialmenteBooleantrue
SortByOrdenar variações
Lista de opções:
\n\"metadata\", \"sku\"
"\"metadata\""
ValidateAllVariationsValidar todas as variações ao selecionar uma subvariação?Boolean"true

Quando falso, o parâmetro ValidateAllVariations impede que a disponibilidade de todas as variações (primeiro nível) seja consultada ao selecionar uma subvariação. Já quando verdadeiro, sinaliza se alguma variação está indisponível para a subvariação selecionada. 

Eventos


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.

Publish

'/wd/buybutton/mustvalidated/' + productID, { mustValidated, show }
'/wd/buybutton/clearskuid/' + productID, {}
'/wd/product/variation/changed/' + productID, { widget, variationContent }
'/wd/product/variation/optionslist/init/' + productID, {}

Subscribe

'/wd/product/variation/selected/' + productID
'/wd/product/variation/error/' + productID
'/wd/buybutton/cleanerrors/' + productID

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