Another color slider question

How to?
#1

I can't figure out how to grab the images for each color of the collection.( I always have issues with these carousels/slides).

Example: Carpet collection name BANDWIDTH main URL comes in 6 color names/images looking at the slider. I can't really get the images I want from here but I need this as the collection page URL as well as other selectors for the colors it has.

I can easily see the colors on this other page underneath the collection name in the middle of the page.
https://www.nextfloor.net/browse-patterns-carpet

But I can't get it pulled into the same row of information per collection/product color.

Any guidance is always appreciated.

Sitemap:
{"_id":"nextfloor","startUrl":["https://www.nextfloor.net/browse-patterns-carpet"],"selectors":[{"delay":0,"id":"prodcolorscarousel","multiple":true,"parentSelectors":["wrap"],"selector":"div.margin-wrapper","type":"SelectorElement"},{"delay":0,"id":"wrap","multiple":false,"parentSelectors":["_root"],"selector":"#content-wrapper","type":"SelectorElement"},{"delay":0,"id":"img","multiple":false,"parentSelectors":["prodcolorscarousel"],"selector":"img","type":"SelectorImage"},{"delay":0,"id":"collectionlinks","multiple":true,"parentSelectors":["wrap"],"selector":".image-button-inner a","type":"SelectorLink"},{"delay":0,"id":"fullcollectionname","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":".sqs-block-content h1","type":"SelectorText"},{"delay":0,"id":"fiber","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"h2:contains('FIBER SYSTEM') + p","type":"SelectorText"},{"delay":0,"id":"gauge","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"h2:contains('GAUGE') + p","type":"SelectorText"},{"delay":0,"id":"size","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"h2:contains('FORMAT')+p","type":"SelectorText"},{"delay":0,"id":"planksize","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"h2:contains('PLANK SIZE')+p","type":"SelectorText"},{"delay":0,"id":"tilesize","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"h2:contains('Tile SIZE') + p","type":"SelectorText"},{"delay":0,"id":"abrasion","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"h2:contains('Abrasion class') + p","type":"SelectorText"},{"delay":0,"id":"thick","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"h2:contains('PLANK SIZE') + p","type":"SelectorText"},{"delay":0,"id":"colorname","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"div.meta-description > p","type":"SelectorText"},{"delay":0,"id":"model","multiple":false,"parentSelectors":["collectionlinks"],"regex":"","selector":"div.meta-title","type":"SelectorText"}]}

#2

Hi @JennyK

Have you tried the Grouped selector - div.sqs-gallery-design-stacked > div.sqs-gallery-design-stacked-slide > img with an 'Attribute name' - data-src?

Example:

{"_id":"nextfloor-images","startUrl":["https://www.nextfloor.net/continuum"],"selectors":[{"delay":0,"extractAttribute":"data-src","id":"images","parentSelectors":["_root"],"selector":"div.sqs-gallery-design-stacked > div.sqs-gallery-design-stacked-slide > img","type":"SelectorGroup"}]}

Helpful resources:

https://webscraper.io/documentation/selectors/grouped-selector
https://webscraper.io/documentation/selectors/element-attribute-selector
https://webscraper.io/how-to-video/element-attribute

#3

Viesturs, thanks for your response! I looked at this and I don't think I can use Grouped as I need each image to fall onto a new row along with the other detail selected. This looks like it puts all the images into the same row.

How would I get each slider image into its own output row with data? Any guidance on this?

Thanks,
Jenny

#4

@JennyK Didn't you mean to separate these images in another column?

If so - you can do that by adding the ':nth()' selector:

Example:

{"_id":"nextfloor-images-seperate","startUrl":["https://www.nextfloor.net/continuum"],"selectors":[{"id":"image-1","parentSelectors":["product-page"],"type":"SelectorImage","selector":"div.sqs-gallery-design-stacked > div.sqs-gallery-design-stacked-slide > img:nth(0)","multiple":false,"delay":0},{"id":"image-2","parentSelectors":["product-page"],"type":"SelectorImage","selector":"div.sqs-gallery-design-stacked > div.sqs-gallery-design-stacked-slide > img:nth(1)","multiple":false,"delay":0},{"id":"product-page","parentSelectors":["_root"],"type":"SelectorElement","selector":"body","multiple":true,"delay":0},{"id":"image-3","parentSelectors":["product-page"],"type":"SelectorImage","selector":"div.sqs-gallery-design-stacked > div.sqs-gallery-design-stacked-slide > img:nth(2)","multiple":false,"delay":0},{"id":"image-4","parentSelectors":["product-page"],"type":"SelectorImage","selector":"div.sqs-gallery-design-stacked > div.sqs-gallery-design-stacked-slide > img:nth(3)","multiple":false,"delay":0},{"id":"image-5","parentSelectors":["product-page"],"type":"SelectorImage","selector":"div.sqs-gallery-design-stacked > div.sqs-gallery-design-stacked-slide > img:nth(4)","multiple":false,"delay":0}]}

#5

@viesturs
No, I do need each of the images in the slider to have their own row of data. Your solutions helped me figure out the image wrapper though.

I'm getting closer! I have the images in their own row but now I can't seem to get the model numbers and names which corresponds with each image. I keep getting message that the "parent doesn't contain selected element", etc. So I'm stuck again.

Any guidance is appreciated:

{"_id":"nextfloorcontinuum","startUrl":["https://www.nextfloor.net/continuum"],"selectors":[{"delay":0,"id":"collectionname","multiple":false,"parentSelectors":["product-page"],"regex":"","selector":".sqs-block-content h1","type":"SelectorText"},{"delay":0,"extractAttribute":"data-src","id":"image-1","multiple":true,"parentSelectors":["sliderwrapper"],"selector":"img","type":"SelectorElementAttribute"},{"delay":0,"id":"product-page","multiple":true,"parentSelectors":["_root"],"selector":"body","type":"SelectorElement"},{"delay":0,"id":"fibersystem","multiple":false,"parentSelectors":["product-page"],"regex":"","selector":"#block-9a20c1730c259a061d15 p:nth-of-type(1)","type":"SelectorText"},{"delay":0,"id":"gauge","multiple":false,"parentSelectors":["product-page"],"regex":"","selector":"p:nth-of-type(3)","type":"SelectorText"},{"delay":0,"id":"sliderwrapper","multiple":false,"parentSelectors":["product-page"],"selector":"div.gallery-block","type":"SelectorElement"},{"delay":0,"id":"modelnumber","multiple":false,"parentSelectors":["modelnamewrapper"],"regex":"","selector":".meta-title","type":"SelectorText"},{"delay":0,"id":"imagename","multiple":false,"parentSelectors":["modelnamewrapper"],"regex":"","selector":".sqs-active-slide p","type":"SelectorText"},{"delay":0,"id":"modelnamewrapper","multiple":false,"parentSelectors":["sliderwrapper"],"selector":".meta-inside","type":"SelectorElement"}]}

#6

@JennyK Hi, then you should make an additional 'Element' selector - div.sqs-gallery-design-stacked-slide.

Example:

{"_id":"nextfloorcontinuum-edit","startUrl":["https://www.nextfloor.net/continuum"],"selectors":[{"delay":0,"id":"collectionname","multiple":false,"parentSelectors":["product-page"],"regex":"","selector":".sqs-block-content h1","type":"SelectorText"},{"delay":0,"extractAttribute":"data-src","id":"image-1","multiple":false,"parentSelectors":["sliderwrapper"],"selector":"img","type":"SelectorElementAttribute"},{"delay":0,"id":"product-page","multiple":true,"parentSelectors":["_root"],"selector":"body","type":"SelectorElement"},{"delay":0,"id":"fibersystem","multiple":false,"parentSelectors":["product-page"],"regex":"","selector":"#block-9a20c1730c259a061d15 p:nth-of-type(1)","type":"SelectorText"},{"delay":0,"id":"gauge","multiple":false,"parentSelectors":["product-page"],"regex":"","selector":"p:nth-of-type(3)","type":"SelectorText"},{"delay":0,"id":"sliderwrapper","multiple":true,"parentSelectors":["product-page"],"selector":"div.sqs-gallery-design-stacked-slide","type":"SelectorElement"},{"delay":0,"id":"modelnumber","multiple":false,"parentSelectors":["modelnamewrapper"],"regex":"","selector":".meta-title","type":"SelectorText"},{"delay":0,"id":"imagename","multiple":false,"parentSelectors":["modelnamewrapper"],"regex":"","selector":"div.meta-description","type":"SelectorText"},{"delay":0,"id":"modelnamewrapper","multiple":false,"parentSelectors":["sliderwrapper"],"selector":".meta-inside","type":"SelectorElement"}]}

Let me know if it worked as expected.