Skip to content

sku-selector is rerendering the parent silde #1077

@elian-dev

Description

@elian-dev

Describe the bug
When I have a "product-summary-sku-selector" in a shelf with the display mode "slider", is rerendering the parent shelf instead of the variants. If I do a click in the arrow to view more, is showing the parent shelf inside the card.

To Reproduce
Steps to reproduce the behavior:

  1. I have the product summary sku selector like this:
"product-summary-sku-selector#iphones": {
    "props": {
      "variationsSpacing": 5 ,
      "showValueNameForImageVariation": false,
      "hideImpossibleCombinations": true,
      "showVariationsLabels": false,
      "visibility": "more-than-one",
      "initialSelection": "complete",
      "disableUnavailableSelectOptions": true,
      "sliderItemsPerPage": {
        "desktop": 3,
        "tablet": 3,
        "phone": 3
      },
      "thumbnailImage": [
        "COLOR"
      ],
      "blockClass": "sku-selector-iphones",
      "displayMode": "slider",
      "sliderDisplayThreshold": 3,
      "visibleVariations": [
        "Color",
        "Contenido",
        "Capacidad (ROM)",
        "Valor",
        "Selecciona una talla",
        "Talla calzado",
        "Talla Damas",
        "Talla Caballeros"
      ]
    }
  }
  1. That product-summary-sku-selector is called into a shelf summary like this:
"product-summary.shelf": {
        "children": [
          "product-summary-sku-selector#iphones"
        ]
      }
  1. So I think that the error is because the behavior of the parent shelf's slider is confusing with the slider that is rendered into the summary.
    The parent shelf's slider have these properties:
//LIST CONTEXT
"list-context.product-list#home-shelf": {
    "blocks": [
      "product-summary.shelf"
    ],
    "children": [
      "slider-layout#demo-products",
      "add-to-list-btn"
    ],
    "props": {
      "collection": "203",
      "maxItems": 10,
      "skusFilter": "ALL_AVAILABLE",
      "installmentCriteria": "MAX_WITHOUT_INTEREST",
      "orderBy": "OrderByTopSaleDESC"
    }
  },

//SLIDE LAYOUT
"slider-layout#demo-products": {
    "props": {
      "itemsPerPage": {
        "desktop": 5,
        "tablet": 3,
        "phone": 2
      },
      "showPaginationDots": "never",
      "infinite": true,
      "fullWidth": true,
      "blockClass": "list-home-shelf-slider",
      "label": "productos"
    }
  },

Expected behavior
I expect that if I click an arrow of the sku selector view just the variants.

Screenshots
image
ezgif-1-eaebcc3ad7

Desktop (please complete the following information):
I'm using:

  • OS: window
  • Browser: chrome

geordymemdoza@gmail.com

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions