vtex-apps / carousel Goto Github PK

VTEX Carousel app

JavaScript 27.42% CSS 1.20% TypeScript 71.38%

carousel srv-store-framework xp-developer store-framework hacktoberfest

carousel's Introduction

VTEX Carousel

⚠️ The Carousel app has been deprecated. Although support for this block is still granted, we strongly recommend you to update your store theme's carousel using the Slider Layout in order to keep up with the component's evolution.

The VTEX Carousel app is a store component that shows a collection of banners, and this app is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Release schedule

Release	Status	Initial Release	Maintenance LTS Start	End-of-life	Store Compatibility
[2.x]	Current Release	2018-11-28			2.x
[1.x]	Maintenance LTS	2018-05-02	2018-11-28	March 2019	1.x

See our LTS policy for more information.

Usage
- Blocks API
  - Configuration
- Styles API
  - CSS namespaces
Troubleshooting
Contributing
Tests

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

We add the carousel as a block in our Store.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

  dependencies: {
    "vtex.carousel": "2.x"
  }

Then, add carousel block into your app theme as we do in our Store theme app.

Now, you can change the behavior of the carousel block that is in the store header. See an example of how to configure:

"carousel#home": {
    "props": {
      "autoplay": true,
      "autoplaySpeed": 4,
      "banners": [],
      "height": 440,
      "showArrows": true,
      "showDots": true
    }
  }

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within carousel and describes if they are required or optional.

"carousel": {
  "component": "Carousel"
}

For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the carousel's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop name	Type	Description	Default value
`autoplay`	`Boolean`	Enable automatic banner transition	true
`autoplaySpeed`	`Number`	Set the automatic banner transition interval	5
`showDots`	`Boolean`	Shows the carousel dots	true
`showArrows`	`Boolean`	Shows the carousel arrows	true
`height`	`Number`	Set banners height	420
`banners`	`Array(Banner)`	Array of banners the will be shown in the carousel	[]

Banner:

Prop name	Type	Description	Default value
`image`	`String`	Link for the image of the banner	N/A
`mobileImage`	`String`	Link for the mobile image of the banner	N/A
`tabletImage`	`String`	Link for the table image of the banner	N/A
`description`	`String`	The image's description	N/A
`url`	`String`	The URL where the image is pointing to, in case of external route	N/A
`page`	`String`	The page where the image is pointing to	N/A
`params`	`String`	Parameters of the URL	N/A
`externalRoute`	`Boolean`	Indicates if the route is external or not	false
`customInternalURL`	`String`	The relative link to where where the image is pointing to (for internal routes)	N/A

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

Add the styles builder to your manifest.json:

  "builders": {
    "styles": "1.x"
  }

Create a file called vtex.carousel.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that are defined in the Carousel.

Class name	Description	Component Source
`container`	The main container of the `Carousel`	Carousel
`sliderRoot`	The main container of the `Slider`	Carousel
`sliderFrame`	The element that contains the Slides	Carousel
`slide`	The container of the `Banner` component	Carousel
`arrow`	The container of the arrow svg (this namespace is applied to both arrows)	Carousel
`arrowLeft`	The container of the left arrow svg	Carousel
`arrowRight`	The container of the right arrow svg	Carousel
`arrowsContainerWrapper`	The wrapper of the container of the arrows	Carousel
`arrowsContainer`	The container of the arrows	Carousel
`containerDots`	The main container of the dots	Carousel
`notActiveDot`	The element of the dots that are not actives	Carousel
`dot`	The element of the dot	Carousel
`activeDot`	The current active dot	Carousel
`containerImg`	The container of the image	Banner
`imgRegular`	The wrapper of the `img` element used to center the image inside the container	Banner
`img`	The `img` element	Banner
`bannerLink`	The `a` element that wraps the whole `Banner` component	Banner

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run npm test

Travis CI

carousel's People

Contributors

Stargazers

Watchers

Forkers

salesfelipe lucasrusso95 jayendra88 regis-samurai quality-digital erislandio dracenco aayushsn11

carousel's Issues

Add a new property for the carousel component schema

I am working for some clients and noticed the lack of a tablet size image, would it be possible to open a pull request for this at the moment?

Expected Behavior

Banner for tablet devices

Current Behavior

we have the option of mobile and desktop banner only

Possible Solution

Add a new property for the carousel component schema
https://github.com/vtex-apps/carousel/blob/master/react/Carousel.tsx#L229

Duvidas de uso

Olá, estou desenvolvendo uma loja usando VTEX IO, quero usar o carousel, mas como vi que por baixo dos panos usa o slick carousel, eu queria poder passar custom react components por exemplo nas setas e poder customizar height dos items sem usar aquele enum 420 e 440, eu queria poder usar dimensões que quero. Tentei usar meu component carousel usando o react-slick, mas como não consigo pegar os banners usando a api Graphql eu fiquei sem como fazer. Alguém pode me dizer se há possibilidades dessa customização?

Create A Brand Slider

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

Version used:
Environment name and version (e.g. Chrome 39, node.js 5.4):
Operating System and version (desktop or mobile):
Link to your project:

Timer should be reset when the user manually changes the banner

Right now there seems to be a fixed timer that switches the current banner every X seconds.

When the user clicks on, say, "next", right before the time is up, the banner is skipped right away.

Or something like that, the behaviour seems to be kind of uneven. But just play around with the banner and you will see that happening.

When the user clicks "next" or "prev" or drags the banner, the auto-switch interval should be reset (and perhaps even extended, because if the user has manually selected a banner, they are probably interested in it for some reason)

Add heading and subheading to a banner

I'm working with a store that needs to have a slider with texts inside it. I would like to have the possibility of editing the banner images and it's texts inside it.

The ideal approach of this feature would be to edit each banner information, as we have today with the properly attributes, and also add an heading, subheading and a call to action to each image that is being displayed in the carousel.

Wrong classes in carousel

I can't change most things e.g. sliderFrame, containerDots throught vtex.carousel.css file because Carousel use these classes from Slider vtex-slider-0-x-sliderFrame

Missing Namespaces from Component

Expected Behavior

It should have some namespaces like ".arrow", ".arrowRight", ".arrowLeft", but those has vanished from carousel component.

Current Behavior

After last releases, some namespaces have vanished from component, breaking down some styles.

Possible Solution

I suggest a re-check in last releases to see what is happening, or if this is known by you, update README.md the namespaces removed.

Steps to Reproduce (for bugs)

Clone store-theme into the project folder and reach vtex carousel component trying to see namespaces like ".arrow", "rightArrow" and ".leftArrow"

Context

The issue has broken down some styles from our stores projects, we just need to understand if this is a bug or a definitive release to work around.

Problems with the Carousel app

Is your feature request related to a problem? Please describe.
The carousel app (https://github.com/vtex-apps/carousel/) is not respecting past settings in admin / blocks, I am also not able to use the notActiveDot and activeDot classes in the /styles/css/vtex.carousel .css

Describe the solution you’d like
I would like to be able to use the notActiveDot and activeDot classes, and also be able to configure the banner.

Add Configuration Layout Parameters to set Items per Page and Draggable in Slider

Existing carousel app doesn't support changing items per page and draggable features in slider area.

Expected Behavior

Add configuration parameters to admin panel, so we can easily change them.

Current Behavior

Unable to configure items per page and draggable features through admin panel

Possible Solution

Add configuration parameters to change items per page and draggable features by admin pannel

Steps to Reproduce (for bugs)

Go to admin panel
CMS -> StoreFront
load homepage and select carousel in right side pannel
Go to settings icon on the top right side
you will see the configuration parameters

Also you can set these values to vtex.store-theme/store/blocks.json

vtex-apps / carousel Goto Github PK

carousel's Introduction

VTEX Carousel

Release schedule

Table of Contents

Usage

Blocks API

Configuration

Styles API

CSS namespaces

Troubleshooting

Contributing

Tests

Travis CI

carousel's People

Contributors

Stargazers

Watchers

Forkers

carousel's Issues

Expected Behavior

Current Behavior

Possible Solution

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Recommend Projects

Recommend Topics

Recommend Org