I am working on an online ecommerce website using react js. On the details page for every product, I am using react-responsive-carousel to allow the user to slide through all images for that specific product. I also wanted there to be thumbnails underneath that are also selectable. react-responsive-carousel was a perfect choice because it was easy to implement and the look/functionality was almost exactly how I wanted it to look. Initially, everything was working fine, but for some reason the carousel stopped displaying properly. My code involving the carousel is the same as it was before, so I'm not sure what the issue is.
This is how the images are displaying now:
Top view of the carousel
Lower view of the carousel
As you can see, the images are stacked on top of each other, as well as the thumbnails. The next/previous buttons are in the wrong spot and each image is prepended with a bullet point.
This is my code for the entire product details page:
import React, { Component } from 'react';
import {ProductConsumer} from '../context.js';
import {Link} from 'react-router-dom';
import SizeSelector from './SizeSelector.js';
import {Carousel} from 'react-responsive-carousel';
export default class Details extends Component {
render() {
return (
<ProductConsumer>
{value => {
const {id, title, img, info, price, size} = value.detailProduct;
const images = img.map(index =>
<div>
<img className="img-fluid" key={id} src={index} alt="Product"/>
</div>
);
return (
<div className="mx-2 pb-5">
<div className="row">
<div className="col-10 mx-auto text-center my-5">
<h1>{title}</h1>
</div>
</div>
<div className="row">
<div className="col-10 mx-auto col-md-6 mb-3">
<Carousel>{images}</Carousel>
</div>
<div className="col-10 mx-auto col-md-6 mb-3">
<h3 className="mb-2">${price}</h3>
<p className="mb-5">{info}</p>
<SizeSelector />
<Link to="/products">
<button className="btn btn-black mr-5">Back to products</button>
</Link>
<span className="btn btn-black"
onClick={() => {
if (value.size === "")
{
value.openSizePrompt();
}
else
{
value.addToCart(id, value.size);
value.openModal(id, value.size);
}
}}>
Add to cart
</span>
</div>
</div>
</div>
)
}}
</ProductConsumer>
)
}
}
Also, I have a javascript file containing the product data. When a storeProduct is selected, the values of the product are set to a detailProduct. From there, I can get all of the data about that product. 'img' is the object containing the array of images. Each product may have a different amount of images (usually 2-4), so I have to dynamically create the <div> <img/> </div> using the img.map function.
If anyone has a clue on how to fix this issue, I would greatly appreciate the help. I really do not want to go through the effort of implementing my own carousel. I am more than happy to provide other information that may help fix the problem.
I solved the problem with a simple import:
import 'react-responsive-carousel/lib/styles/carousel.min.css'
However, before I ran into this issue, everything was displaying fine without this import. I am not sure what changed that required me to do this.
Related
I'm trying to make a blog that is dynamically generated using Sanity for the backend and React / JS for the front end I ran into a problem when I wanted to create a grid layout which needed to display only the latest three blog articles.
The Grid layout that I want is this:
But I can't seem to figure out how to make it work.
This is the code that I've made and in this code I mapped over the sanity backend and tried to display it in a grid. It displayed the right layout but I don't know hot to make the first two images small and the third bigger.
<div>
<h1 className="text-2xl">Most Recent Posts</h1>
<div className="underline"></div>
<div className="grid overflow-hidden grid-cols-2 grid-rows-2 gap-4 mt-6">
{allPostsData &&
allPostsData.map((post, index) => (
<div key={index} className="box">
<Link to={"/" + post.slug.current} key={post.slug.current}>
<img src={post.mainImage.asset.url} alt="" />
</Link>
<p className="text-gray-400 text-sm">PROGRAMING</p>
<h2 className="text-xl">{post.title}</h2>
</div>
))}
</div>
</div>
This is my first question on Stack Overflow so I will try my best.
I'm building a an Vue application and I render a list of object coming from an API in a css grid, and when I click on a picture, I open a modale that show the full picture and some information about it, in clear, it's a copy of Instagram.
So the modale is a reusable components, and I use props for sending the data from the parent to the component child. And here is my problem, because I send the full list of data to the props and not only the information of the picture on which I clicked.
Is it possible to send only the information on the element I click, I know that it's possible with router-link but how to do it with props ?
here the code of the parent element:
<ul v-for="post in doc.posts" :key="post.id">
<button v-on:click="toggleModale">
<modal
v-bind:revele="revele"
v-bind:toggleModale="toggleModale"
v-bind:media_url="post.media_url"
v-bind:like_count="post.like_count"
></modal>
<div class="post">
<img class="postImage" :src="post.media_url" alt="" />
</div>
</button>
</ul>
and the code of the child components modal :
<template>
<div v-if="revele" class="container">
<div class="overlay" v-on:click="toggleModale"></div>
<div class="modal">
<button class="btnCls" v-on:click="toggleModale">X</button>
<h2>Je suis un modal</h2>
<div class="image"><img :src="media_url" alt=""></div>
<div class="text">{{like_count}}</div>
</div>
</div>
</template>
<script>
export default {
name: "modal",
props: ['revele', 'toggleModale', 'media_url', 'media_type', 'like_count', 'comments_count', 'timestamp', 'permalink', 'id'],
created() {
console.log("test modal props id",this.id) //undefined;
},
};
</script>
thanks in advance for your help
UPDATE the code sandbox :
https://codesandbox.io/s/boring-andras-tmyqc?file=/src/App.vue
your architecture is a little strange to be honest but i made you a working Sandbox
CodeSandbox
please check the code first and if you need help understanding i will explain you what i did.
i am trying to make an background slider for a restaurant. and for this reason i used gatsby-image-background-slider. when i executed "gatsby develop" it shows no error while execution but when i try to browse in localhost it shows the error "×
TypeError: Cannot read property 'backgrounds' of undefined"
the source code can be found here enter link description here
i wanted to use carousel but i thought it would be better to use this plugin. this is my first try in gatsby. i have installed the plugin and tried the query in graphql. according to gatsby-image-background-slider document, there is no mention of giving the directory to the backgrounds. i tried to input some in relativepath but it is showing error and it is not mentioned in document.
is there any idea how can i get rid of this error or hoa can i have a background slider or carousel like thing in optimizing way?
You need to change your BackgroundSection component as:
export default function BackgroundSection({
img,
styleClass,
children,
title,
query // you forgot this
}) {
return (
<BackgroundSlider className={styleClass} fluid={img} query={query}>
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-xl-9 col-md-9 col-md-12">
<div class="slider_text text-center bold">
<div>
<h1>{title}</h1>
</div>
<div>
<h1>{title}</h1>
</div>
</div>
</div>
</div>
</div>
{children}
</BackgroundSlider>
)
}
You forgot to include query and pass that query into BackgroundSLider component
If you specified images to include (images={[]}) be sure that the image name exists in your image folder
I have a feeling the answer to this question is quite simple, but I cannot find an answer to it anywhere. I am build a very simple app with Vue.js (v2.6.11) that consists of just two pages, a home page and another page with a form. Now, on both of these pages, there are several parallax containers made with MaterializeCSS. If you're unfamiliar, a parallax container is basically just a div with an image as its background, and when the user scrolls, the background image moves at a different rate than the foreground of the site.
My problem is that when I navigate from the home page to the page with the form using a Vue.js link, <router-link :to="{name: "FormPage"}>Form Page</router-link>, the images in the parallax containers DO NOT load. However, if I refresh the page, the images load fine and everything is well. Similarly, If I replace the <router-link> with a simple Form Page the images load fine, everything works as it should.
So my question is this: why don't my parallax container images load on the page navigated to with <router-link></router-link>, but then when I navigate to that same page with a the images do load? In other words, what is <router-link></router-link> doing that prevents my parallax container images from loading??
Any and all feedback would be appreciated. Otherwise, I hope you have a marvelous day, and thank you for you time in reading and or answering my question :)
--Update--
CODE:
This is the component on the homepage that contains the link in question:
<template>
<div id="index-banner" class="parallax-container" style="height: 400px;">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center white-text">{{ translations.title }}</h1>
<div class="row center">
<h5 class="header col s12 white-text light">{{ translations.subtitle }}</h5>
</div>
<div class="row center">
<!-- <router-link :to="{name: 'Generator', force: true }" class="btn-large waves-effect waves-light teal lighten-1 center-align">{{ buttonText }}</router-link> -->
{{ translations.buttonText }}
</div>
</div>
</div>
<div class="parallax"><img :src="img" alt="Unsplashed background img 1"></div>
</div>
</template>
<script>
export default {
name: 'Banner1',
props: {
translations: String,
img: String
},
}
</script>
<style>
</style>
This is the 'view' that is navigated to, containing the parallax containers in question:
<template>
<div>
<PageTitle
:translations="$t('generatorPage.components.pageTitle')"
img="/imgs/parallax5.jpeg"
/>
<SigForm
:translations="$t('generatorPage.components.sigForm')"
/>
<Separator
img="/imgs/parallax5.jpeg"
/>
</div>
</template>
<script>
import PageTitle from '#/components/banner/parallax/PageTitle'
import Separator from '#/components/banner/parallax/Separator'
import SigForm from '#/components/generator/SigForm'
export default {
name: 'Generator',
components: {
PageTitle,
SigForm,
Separator,
}
}
</script>
<style>
</style>
Here is the 'PageTitle' component with a parallax container:
<template>
<div class="parallax-container form-parallax-container">
<h1 class="white-text center">{{ translations.title }}</h1>
<div class="parallax"><img :src="img"></div>
</div>
</template>
<script>
export default {
name: 'PageTitle',
props: {
translations: String,
img: String
}
}
</script>
<style>
</style>
And here is the 'Separator' with a parallax container:
<template>
<div class="parallax-container form-parallax-container">
<div class="parallax"><img :src="img"></div>
</div>
</template>
<script>
export default {
name: 'Separator',
props: {
img: String
}
}
</script>
<style>
</style>
---UPDATE: Complete repo & sandboxed app---
Someone mentioned it would be eaiser if I provided a sandboxed app or whatever to debug it, so I just made the github repo public and also uploaded it to codesandbox.io. You'll notice that on codesandbox.io, the parallax images aren't even loading at all...on the homepage, on the form page, or upon refresh!
Ok so this is not the answer, but I needed to post some code to illustrate.
I have to confess that I'm not fully au-fait with JS frameworks, but I do know materializecss very well. I've been trying to help another user with a React based problem where the sidenav stops working when the react router is used - until he refreshes the page, when it works fine again.
So here's my hunch:
Parallax is a component that needs initialising like so:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.parallax').parallax();
});
If you leave that initialisation code out, it won't work. And, taken from the docs for select fields dynamically added components need reinitialising.
You must initialize the select element as shown below. In addition,
you will need a separate call for any dynamically generated select
elements your page generates.
So my hunch is that when the page is re-rendered via a navigator, we get a new component added to the dom - but this is after the initialisation has already run. So that component is not initialised.
Could be wrong, hope I'm not for your sake more than mine. As I said, I don't know Vue or React very well at all, and my suggestions to run the init at each render didn't work for the React issue - but there are so many moving parts it's hard to rule out.
I am struggling to make a relatively simple component in React. The goal is to get something close to the following image:
In the image there are two components of the same type (lets call them a Panel) in which content can be collapsed and expanded. Ideally a Panel would have a Header Component, a Progress Bar Component, and Content(i.e radio buttons, text, etc). When collapsed, I would like the "progress bar" to turn green. I've started with the following code snippet to create a progress bar, though it is very rough (some of the code in there will be placed in other components and is there for testing).. I am new to react so any insight or direction would be appreciated!
import React, { Component } from 'react';
import './styles.css';
export default class IconProgressBar extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div className="row">
<div className="progress-bar">
<span className="progress-line"></span>
<span className="progress-icon"></span>
</div>
<div className="step-container">
<div className="step-header">
<span className="col s6"><h3>Header 1</h3></span>
<span className="col s6 text-right step-summary">
<button className="secondary right edit-button">Edit</button>
<span className="current-value right"> . </span>
</span>
</div>
<div className="step-body">
</div>
</div>
</div>
);
}
}
Edit: In any answers I'm not super concerned about styling (that can be worked out later) i.e a Circle with a line under it in a collapsible & stackable element would suffice :)
I have implemented a majority of your functionality, except the binding and some of the styling. You will just have to finish up the styling and add your icons and callbacks to record user actions.
The idea is simple in this case, you have a list of panels which contain a header and a bunch of options to go with each. First, you can simply render the elements and then within your new ProgressBar component, maintain the state of the bar i.e. click to toggle and changing the styles of the bar on the left. Let me know if you have any further questions.
For the sake of simplicity, I have kept everything in a single component, but you might want to change that in case you want to isolate and reuse sub components.
https://react-2nhcbe.stackblitz.io